FormContainer

app/containers/AppVersion.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import PropTypes from 'prop-types';
+
+import { themes } from '../constants/colors';
+import sharedStyles from '../views/Styles';
+import { getReadableVersion } from '../utils/deviceInfo';
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: 'center',
+		justifyContent: 'flex-end',
+		backgroundColor: '#ccc'
+	},
+	text: {
+		...sharedStyles.textRegular,
+		fontSize: 13
+	},
+	bold: {
+		...sharedStyles.textSemibold
+	}
+});
+
+const Check = React.memo(({ theme }) => (
+	<View style={styles.container}>
+		<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>App Version: <Text style={styles.bold}>{getReadableVersion}</Text></Text>
+	</View>
+));
+
+Check.propTypes = {
+	theme: PropTypes.string
+};
+
+export default Check;

app/containers/FormContainer.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Text, ScrollView, Keyboard, Image, StyleSheet, TouchableOpacity, View, Alert } from 'react-native';
+import PropTypes from 'prop-types';
+import { SafeAreaView } from 'react-navigation';
+
+import { themes } from '../constants/colors';
+import sharedStyles from '../views/Styles';
+import scrollPersistTaps from '../utils/scrollPersistTaps';
+import KeyboardView from '../presentation/KeyboardView';
+import StatusBar from './StatusBar';
+import AppVersion from './AppVersion';
+
+const styles = StyleSheet.create({
+	title: {
+		...sharedStyles.textBold,
+		fontSize: 22,
+		letterSpacing: 0,
+		textAlign: 'auto'
+	},
+	inputContainer: {
+		marginTop: 24,
+		marginBottom: 32
+	},
+	backButton: {
+		position: 'absolute',
+		paddingHorizontal: 9,
+		left: 15
+	},
+	certificatePicker: {
+		flex: 1,
+		marginTop: 40,
+		alignItems: 'center',
+		justifyContent: 'center'
+	},
+	chooseCertificateTitle: {
+		fontSize: 15,
+		...sharedStyles.textRegular
+	},
+	chooseCertificate: {
+		fontSize: 15,
+		...sharedStyles.textSemibold
+	}
+});
+
+const FormContainer = ({ children, theme }) => (
+	<KeyboardView
+		style={{ backgroundColor: themes[theme].backgroundColor }}
+		contentContainerStyle={sharedStyles.container}
+		keyboardVerticalOffset={128}
+		// key='login-view'
+	>
+		<StatusBar theme={theme} />
+		<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, { height: '100%' }]}>
+			<SafeAreaView style={sharedStyles.container} testID='new-server-view'>
+				{children}
+			</SafeAreaView>
+			<AppVersion theme={theme} />
+		</ScrollView>
+	</KeyboardView>
+);
+
+FormContainer.propTypes = {
+	theme: PropTypes.string
+};
+
+export default FormContainer;

app/i18n/locales/en.js

@@ -238,6 +238,7 @@ export default {
 	Invite_users: 'Invite users',
 	Join_the_community: 'Join the community',
 	Join: 'Join',
+	Join_your_workspace: 'Join your workspace',
 	Just_invited_people_can_access_this_channel: 'Just invited people can access this channel',
 	Language: 'Language',
 	last_message: 'last message',
@@ -486,6 +487,7 @@ export default {
 	Welcome: 'Welcome',
 	Whats_your_2fa: 'What\'s your 2FA code?',
 	Without_Servers: 'Without Servers',
+	Workspaces: 'Workspaces',
 	Write_External_Permission_Message: 'Rocket Chat needs access to your gallery so you can save images.',
 	Write_External_Permission: 'Gallery Permission',
 	Yes_action_it: 'Yes, {{action}} it!',

app/views/NewServerView.js

@@ -18,34 +18,30 @@ import sharedStyles from './Styles';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
 import Button from '../containers/Button';
 import TextInput from '../containers/TextInput';
+import FormContainer from '../containers/FormContainer';
 import I18n from '../i18n';
-import { verticalScale, moderateScale } from '../utils/scaling';
 import KeyboardView from '../presentation/KeyboardView';
 import { isIOS, isNotch, isTablet } from '../utils/deviceInfo';
 import { CustomIcon } from '../lib/Icons';
 import StatusBar from '../containers/StatusBar';
+import AppVersion from '../containers/AppVersion';
 import { themes } from '../constants/colors';
 import log from '../utils/log';
 import { animateNextTransition } from '../utils/layoutAnimation';
 import { withTheme } from '../theme';
 import { setBasicAuth, BASIC_AUTH_KEY } from '../utils/fetch';
+import { themedHeader } from '../utils/navigation';
 
 const styles = StyleSheet.create({
-	image: {
-		alignSelf: 'center',
-		marginVertical: verticalScale(20),
-		width: 210,
-		height: 171
-	},
 	title: {
 		...sharedStyles.textBold,
-		fontSize: moderateScale(22),
+		fontSize: 22,
 		letterSpacing: 0,
-		alignSelf: 'center'
+		textAlign: 'auto'
 	},
 	inputContainer: {
-		marginTop: 25,
+		marginTop: 24,
-		marginBottom: 15
+		marginBottom: 32
 	},
 	backButton: {
 		position: 'absolute',
@@ -68,11 +64,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-const defaultServer = 'https://open.rocket.chat';
-
 class NewServerView extends React.Component {
-	static navigationOptions = () => ({
+	static navigationOptions = ({ screenProps }) => ({
-		header: null
+		title: I18n.t('Workspaces'),
+		...themedHeader(screenProps.theme)
 	})
 
 	static propTypes = {
@@ -97,7 +92,6 @@ class NewServerView extends React.Component {
 
 		this.state = {
 			text: server || '',
-			autoFocus: !server,
 			certificate: null
 		};
 	}
@@ -292,49 +286,38 @@ class NewServerView extends React.Component {
 
 	render() {
 		const { connecting, theme } = this.props;
-		const { text, autoFocus } = this.state;
+		const { text } = this.state;
 		return (
-			<KeyboardView
+			<FormContainer theme={theme}>
-				style={{ backgroundColor: themes[theme].backgroundColor }}
+				<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Join_your_workspace')}</Text>
-				contentContainerStyle={sharedStyles.container}
+				<View style={isTablet && sharedStyles.tabletScreenContent}>
-				keyboardVerticalOffset={128}
+					<TextInput
-				key='login-view'
+						label='Enter workspace URL'
-			>
+						placeholder='Ex. your-company.rocket.chat'
-				<StatusBar theme={theme} />
+						containerStyle={styles.inputContainer}
-				<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
+						value={text}
-					<SafeAreaView style={sharedStyles.container} testID='new-server-view'>
+						returnKeyType='send'
-						<Image style={styles.image} source={{ uri: 'new_server' }} />
+						onChangeText={this.onChangeText}
-						<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Sign_in_your_server')}</Text>
+						testID='new-server-view-input'
-						<View style={isTablet && sharedStyles.tabletScreenContent}>
+						onSubmitEditing={this.submit}
-							<TextInput
+						clearButtonMode='while-editing'
-								autoFocus={autoFocus}
+						keyboardType='url'
-								containerStyle={styles.inputContainer}
+						textContentType='URL'
-								placeholder={defaultServer}
+						theme={theme}
-								value={text}
+					/>
-								returnKeyType='send'
+					<Button
-								onChangeText={this.onChangeText}
+						title={I18n.t('Connect')}
-								testID='new-server-view-input'
+						type='primary'
-								onSubmitEditing={this.submit}
+						onPress={this.submit}
-								clearButtonMode='while-editing'
+						disabled={!text}
-								keyboardType='url'
+						loading={connecting}
-								textContentType='URL'
+						testID='new-server-view-button'
-								theme={theme}
+						theme={theme}
-							/>
+					/>
-							<Button
+				</View>
-								title={I18n.t('Connect')}
+				{ isIOS ? this.renderCertificatePicker() : null }
-								type='primary'
+				{/* <AppVersion theme={theme} /> */}
-								onPress={this.submit}
+			</FormContainer>
-								disabled={!text}
-								loading={connecting}
-								testID='new-server-view-button'
-								theme={theme}
-							/>
-							{ isIOS ? this.renderCertificatePicker() : null }
-						</View>
-					</SafeAreaView>
-				</ScrollView>
-				{this.renderBack()}
-			</KeyboardView>
 		);
 	}
 }

app/views/OnboardingView/index.js

@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { SafeAreaView } from 'react-navigation';
+import { SafeAreaView, ScrollView } from 'react-navigation';
 import Orientation from 'react-native-orientation-locker';
 
 import { selectServerRequest, serverInitAdd, serverFinishAdd } from '../../actions/server';
@@ -16,9 +16,11 @@ import { isIOS, isNotch, isTablet } from '../../utils/deviceInfo';
 import EventEmitter from '../../utils/events';
 import { CustomIcon } from '../../lib/Icons';
 import StatusBar from '../../containers/StatusBar';
+import AppVersion from '../../containers/AppVersion';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import sharedStyles from '../Styles';
+import FormContainer from '../../containers/FormContainer';
 
 class OnboardingView extends React.Component {
 	static navigationOptions = () => ({
@@ -139,64 +141,30 @@ class OnboardingView extends React.Component {
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView
+			<FormContainer theme={theme}>
-				style={[
+				<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>
-					styles.container,
-					{ backgroundColor: themes[theme].backgroundColor }
-				]}
-				testID='onboarding-view'
-			>
-				<StatusBar theme={theme} />
-				<View style={isTablet && sharedStyles.tabletScreenContent}>
 					<Image style={styles.onboarding} source={{ uri: 'logo' }} fadeDuration={0} />
 					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Onboarding_title')}</Text>
 					<Text style={[styles.subtitle, { color: themes[theme].controlText }]}>{I18n.t('Onboarding_subtitle')}</Text>
 					<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Onboarding_description')}</Text>
 					<View style={[styles.buttonsContainer]}>
-						{/* <Button
-							type='secondary'
-							title={I18n.t('Connect_to_a_server')}
-							icon={<CustomIcon name='permalink' size={30} color={themes[theme].actionTintColor} />}
-							onPress={this.connectServer}
-							testID='connect-server-button'
-							theme={theme}
-						/>
-						<Button
-							type='secondary'
-							title={I18n.t('Join_the_community')}
-							subtitle='open.rocket.chat'
-							icon={<Image source={{ uri: 'logo_onboarding' }} style={{ width: 32, height: 27 }} fadeDuration={0} />}
-							onPress={this.joinCommunity}
-							testID='join-community-button'
-							theme={theme}
-						/>
-						<Button
-							type='primary'
-							title={I18n.t('Create_a_new_workspace')}
-							icon={<CustomIcon name='plus' size={30} color={themes[theme].buttonText} />}
-							onPress={this.createWorkspace}
-							testID='create-workspace-button'
-							theme={theme}
-						/> */}
 						<Button
 							title={I18n.t('Onboarding_join_workspace')}
 							type='primary'
-							style={styles.button}
 							onPress={this.connectServer}
 							theme={theme}
 						/>
 						<Button
 							title={I18n.t('Create_a_new_workspace')}
 							type='secondary'
-							style={styles.button}
 							backgroundColor={themes[theme].chatComponentBackground}
 							onPress={this.createWorkspace}
 							theme={theme}
 						/>
 					</View>
 				</View>
-				{this.renderClose()}
+				{/* {this.renderClose()} */}
-			</SafeAreaView>
+			</FormContainer>
 		);
 	}
 }

app/views/OnboardingView/styles.js

@@ -41,8 +41,7 @@ export default StyleSheet.create({
 	},
 	buttonsContainer: {
 		marginBottom: verticalScale(10),
-		marginTop: verticalScale(30),
+		marginTop: verticalScale(30)
-		marginHorizontal: 16
 	},
 	closeModal: {
 		position: 'absolute',

app/views/Styles.js

@@ -4,7 +4,8 @@ import { MAX_SCREEN_CONTENT_WIDTH, MAX_CONTENT_WIDTH } from '../constants/tablet
 
 export default StyleSheet.create({
 	container: {
-		flex: 1
+		flex: 1,
+		flexDirection: 'column'
 	},
 	containerScrollView: {
 		padding: 15,