WorkspaceView

app/containers/FormContainer.js

@@ -25,7 +25,7 @@ const FormContainer = ({ children, theme }) => (
 	>
 		<StatusBar theme={theme} />
 		<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}>
-			<SafeAreaView style={sharedStyles.container}>
+			<SafeAreaView style={sharedStyles.container} forceInset={{ top: 'never' }}>
 				<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>
 					{children}
 				</View>

app/i18n/locales/en.js

@@ -509,6 +509,7 @@ export default {
 	Your_invite_link_will_expire_on__date__or_after__usesLeft__uses: 'Your invite link will expire on {{date}} or after {{usesLeft}} uses.',
 	Your_invite_link_will_expire_on__date__: 'Your invite link will expire on {{date}}.',
 	Your_invite_link_will_never_expire: 'Your invite link will never expire.',
+	Your_workspace: 'Your workspace',
 	Version_no: 'Version: {{version}}',
 	You_will_not_be_able_to_recover_this_message: 'You will not be able to recover this message!',
 	Change_Language: 'Change Language',

app/index.js

@@ -74,6 +74,9 @@ const OutsideStack = createStackNavigator({
 	NewServerView: {
 		getScreen: () => require('./views/NewServerView').default
 	},
+	WorkspaceView: {
+		getScreen: () => require('./views/WorkspaceView').default
+	},
 	LoginSignupView: {
 		getScreen: () => require('./views/LoginSignupView').default
 	},

app/lib/methods/getSettings.js

@@ -91,7 +91,7 @@ export default async function() {
 			return;
 		}
 		const data = result.settings || [];
-		const filteredSettings = this._prepareSettings(data.filter(item => item._id !== 'Assets_favicon_512'));
+		const filteredSettings = this._prepareSettings(data);
 		const filteredSettingsIds = filteredSettings.map(s => s._id);
 
 		reduxStore.dispatch(actions.addSettings(this.parseSettings(filteredSettings)));

app/sagas/selectServer.js

@@ -138,11 +138,12 @@ const handleServerRequest = function* handleServerRequest({ server, certificate
 
 			const showFormLogin = yield select(state => state.settings.Accounts_ShowFormLogin);
 
-			if (!loginServicesLength && showFormLogin) {
-				Navigation.navigate('LoginView');
-			} else {
-				Navigation.navigate('LoginSignupView');
-			}
+			// if (!loginServicesLength && showFormLogin) {
+			// 	Navigation.navigate('LoginView');
+			// } else {
+			// 	Navigation.navigate('LoginSignupView');
+			// }
+			Navigation.navigate('WorkspaceView');
 			yield put(selectServerRequest(server, serverInfo.version, false));
 		}
 	} catch (e) {

app/views/NewServerView.js

@@ -264,7 +264,7 @@ class NewServerView extends React.Component {
 		const { text } = this.state;
 		return (
 			<FormContainer theme={theme}>
-				<View style={{ flex: 1, justifyContent: 'center' }}>
+				<View style={[sharedStyles.container, isTablet && { justifyContent: 'center' }]}>
 					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Join_your_workspace')}</Text>
 					<TextInput
 						label='Enter workspace URL'

app/views/OnboardingView/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-	View, Text, Image, TouchableOpacity, BackHandler, Linking
+	View, Text, Image, BackHandler, Linking
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -15,7 +15,6 @@ import { isTablet } from '../../utils/deviceInfo';
 import EventEmitter from '../../utils/events';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-import sharedStyles from '../Styles';
 import FormContainer from '../../containers/FormContainer';
 
 class OnboardingView extends React.Component {

app/views/WorkspaceView/ServerAvatar.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import PropTypes from 'prop-types';
+import { createImageProgress } from 'react-native-image-progress';
+import * as Progress from 'react-native-progress';
+import FastImage from 'react-native-fast-image';
+
+import sharedStyles from '../Styles';
+import { themes } from '../../constants/colors';
+import { isTablet } from '../../utils/deviceInfo';
+
+const ImageProgress = createImageProgress(FastImage);
+
+const SIZE = 96;
+const MARGIN_TOP = isTablet ? 0 : 64;
+const BORDER_RADIUS = 6;
+
+const styles = StyleSheet.create({
+	container: {
+		marginBottom: 16,
+		width: '100%',
+		height: SIZE + MARGIN_TOP,
+		justifyContent: 'flex-end',
+		alignItems: 'center'
+	},
+	image: {
+		width: SIZE,
+		height: SIZE,
+		borderRadius: BORDER_RADIUS
+	},
+	fallback: {
+		width: SIZE,
+		height: SIZE,
+		borderRadius: BORDER_RADIUS,
+		backgroundColor: '#F5455C',
+		alignItems: 'center',
+		justifyContent: 'center'
+	},
+	initial: {
+		...sharedStyles.textBold,
+		fontSize: 42
+	}
+});
+
+const getInitial = url => url && url.replace(/http(s?):\/\//, '').slice(0, 1);
+
+const Fallback = ({ theme, initial }) => (
+	<View style={[styles.container, styles.fallback]}>
+		<Text style={[styles.initial, { color: themes[theme].buttonText }]}>{initial}</Text>
+	</View>
+);
+
+const ServerAvatar = React.memo(({ theme, url, image }) => {
+	return (
+		<View style={styles.container}>
+			<ImageProgress
+				style={[styles.image, { borderColor: themes[theme].borderColor }]}
+				source={{ uri: `${ url }/${ image }` }}
+				resizeMode={FastImage.resizeMode.cover}
+				indicator={Progress.Pie}
+				indicatorProps={{
+					color: themes[theme].actionTintColor
+				}}
+				renderError={() => <Fallback theme={theme} initial={'D'} />}
+			/>
+		</View>
+	);
+});
+
+ServerAvatar.propTypes = {
+	theme: PropTypes.string
+};
+ServerAvatar.displayName = 'ServerAvatar';
+
+export default ServerAvatar;

app/views/WorkspaceView/index.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import {
+	View, Text, Image, BackHandler, Linking
+} from 'react-native';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Orientation from 'react-native-orientation-locker';
+
+import { appStart as appStartAction } from '../../actions';
+import I18n from '../../i18n';
+import Button from '../../containers/Button';
+import styles from './styles';
+import { isTablet } from '../../utils/deviceInfo';
+import EventEmitter from '../../utils/events';
+import { themes } from '../../constants/colors';
+import { withTheme } from '../../theme';
+import FormContainer from '../../containers/FormContainer';
+import { themedHeader } from '../../utils/navigation';
+import ServerAvatar from './ServerAvatar';
+
+class WorkspaceView extends React.Component {
+	static navigationOptions = ({ screenProps }) => ({
+		title: I18n.t('Your_workspace'),
+		...themedHeader(screenProps.theme)
+	})
+
+	static propTypes = {
+		navigation: PropTypes.object,
+		adding: PropTypes.bool,
+		selectServer: PropTypes.func.isRequired,
+		currentServer: PropTypes.string,
+		initAdd: PropTypes.func,
+		finishAdd: PropTypes.func,
+		appStart: PropTypes.func,
+		theme: PropTypes.string
+	}
+
+	login = () => {
+		const { navigation } = this.props;
+		navigation.navigate('LoginView');
+	}
+
+	register = () => {
+		const { navigation } = this.props;
+		navigation.navigate('RegisterView');
+	}
+
+	render() {
+		const { theme, Site_Name, Site_Url, Assets_favicon_512, server } = this.props;
+		return (
+			<FormContainer theme={theme}>
+				<View style={{ alignItems: 'center' }}>
+					<ServerAvatar theme={theme} url={server} image={Assets_favicon_512 && Assets_favicon_512.defaultUrl} />
+					<Text style={[styles.serverName, { color: themes[theme].titleText }]}>{Site_Name}</Text>
+					<Text style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>{Site_Url}</Text>
+				</View>
+				<Button
+					title={I18n.t('Login')}
+					type='primary'
+					onPress={this.login}
+					theme={theme}
+				/>
+				<Button
+					title={I18n.t('Create_account')}
+					type='secondary'
+					backgroundColor={themes[theme].chatComponentBackground}
+					onPress={this.register}
+					theme={theme}
+				/>
+			</FormContainer>
+		);
+	}
+}
+
+const mapStateToProps = state => ({
+	server: state.server.server,
+	adding: state.server.adding,
+	Site_Name: state.settings.Site_Name,
+	Site_Url: state.settings.Site_Url,
+	Assets_favicon_512: state.settings.Assets_favicon_512
+});
+
+export default connect(mapStateToProps)(withTheme(WorkspaceView));

app/views/WorkspaceView/styles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+import sharedStyles from '../Styles';
+
+export default StyleSheet.create({
+	serverName: {
+		...sharedStyles.textSemibold,
+		fontSize: 16,
+		marginBottom: 4
+	},
+	serverUrl: {
+		...sharedStyles.textRegular,
+		fontSize: 14,
+		marginBottom: 24
+	}
+});