Skip to content

Minds Mobile
Minds Mobile
Commit 022f45f6 authored by Martin Santangelo's avatar Martin Santangelo
Browse files
Options
  • Download

(fix) login keyboard avoid issue on android, register and login layout improved

parent a39d348d
feat/themes-support
1 merge request!513WIP: theme support
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 506 additions and 935 deletions
__tests__/auth/LoginScreen.js
View file @ 022f45f6
......@@ -2,7 +2,6 @@ import 'react-native';
import React from 'react';
import { Text, TouchableOpacity } from "react-native";
import { shallow } from 'enzyme';
import featuresService from '../../src/common/services/features.service';
import LoginScreen from '../../src/auth/LoginScreen';
......@@ -17,7 +16,7 @@ import renderer from 'react-test-renderer';
describe('LoginScreen component', () => {
beforeEach(() => {
featuresService.features = {'homepage-december-2019': false};
});
it('should renders correctly', () => {
......
__tests__/auth/__snapshots__/ForgotPassword.js.snap
View file @ 022f45f6
......@@ -3,30 +3,14 @@
exports[`ForgotPassword component should renders correctly 1`] = `
<RCTSafeAreaView
emulateUnlessSupported={true}
style={
Object {
"flex": 1,
}
}
>
<Text
style={
Array [
Object {
"fontFamily": "Roboto",
"fontSize": 28,
"fontWeight": "bold",
"lineHeight": 44,
},
Object {
"color": "#4F4F50",
},
Object {
"marginTop": 15,
},
Object {
"marginBottom": 15,
},
undefined,
undefined,
undefined,
undefined,
]
}
>
......@@ -35,31 +19,16 @@ exports[`ForgotPassword component should renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Roboto",
"fontSize": 17,
"fontWeight": "500",
"lineHeight": 23,
},
Object {
"color": "#4F4F50",
},
undefined,
Object {
"marginBottom": 15,
},
undefined,
undefined,
undefined,
]
}
>
To request a new password, enter your username
</Text>
<View
style={
Object {
"marginBottom": 10,
}
}
>
<View>
<View
style={
Array [
......@@ -67,9 +36,6 @@ exports[`ForgotPassword component should renders correctly 1`] = `
"flexDirection": "row",
"justifyContent": "space-between",
},
Object {
"marginBottom": 5,
},
]
}
>
......@@ -87,7 +53,9 @@ exports[`ForgotPassword component should renders correctly 1`] = `
Object {
"color": "#AEB0B8",
"fontFamily": "Roboto",
"fontSize": 14,
"fontSize": 16,
"fontWeight": "600",
"marginBottom": 5,
},
]
}
......@@ -107,18 +75,7 @@ exports[`ForgotPassword component should renders correctly 1`] = `
returnKeyType="done"
style={
Array [
Object {
"backgroundColor": "transparent",
"borderColor": "#D8D8D8",
"borderRadius": 2,
"borderWidth": 1,
"color": "#4F4F50",
"fontFamily": "Roboto",
"fontSize": 16,
"height": 50,
"lineHeight": 21,
"padding": 10,
},
undefined,
undefined,
]
}
......@@ -129,13 +86,8 @@ exports[`ForgotPassword component should renders correctly 1`] = `
<View
style={
Array [
Object {
"flexDirection": "row",
"justifyContent": "flex-end",
},
Object {
"marginTop": 20,
},
undefined,
undefined,
]
}
>
......@@ -153,16 +105,13 @@ exports[`ForgotPassword component should renders correctly 1`] = `
style={
Object {
"alignItems": "center",
"backgroundColor": "#5DBAC0",
"borderColor": "#5DBAC0",
"borderRadius": 2,
"backgroundColor": "white",
"borderColor": "#4690D6",
"borderRadius": 20,
"borderWidth": 1,
"flexDirection": "row",
"height": 60,
"justifyContent": "center",
"margin": 4,
"marginLeft": 0,
"marginRight": 10,
"opacity": 1,
"padding": 4,
}
......@@ -174,16 +123,12 @@ exports[`ForgotPassword component should renders correctly 1`] = `
Object {
"color": "#4690D6",
},
Object {
"color": "white",
"fontSize": 20,
"fontWeight": "500",
},
undefined,
]
}
>
GO BACK
Go back
</Text>
</View>
......@@ -201,16 +146,13 @@ exports[`ForgotPassword component should renders correctly 1`] = `
style={
Object {
"alignItems": "center",
"backgroundColor": "#5DBAC0",
"borderColor": "#5DBAC0",
"borderRadius": 2,
"backgroundColor": "white",
"borderColor": "#4690D6",
"borderRadius": 20,
"borderWidth": 1,
"flexDirection": "row",
"height": 60,
"justifyContent": "center",
"margin": 4,
"marginLeft": 0,
"marginRight": 0,
"opacity": 1,
"padding": 4,
}
......@@ -222,16 +164,12 @@ exports[`ForgotPassword component should renders correctly 1`] = `
Object {
"color": "#4690D6",
},
Object {
"color": "white",
"fontSize": 20,
"fontWeight": "500",
},
undefined,
]
}
>
CONTINUE
Continue
</Text>
</View>
......
__tests__/auth/__snapshots__/ForgotScreen.js.snap
View file @ 022f45f6
......@@ -6,12 +6,8 @@ exports[`ForgotScreen component should renders correctly 1`] = `
style={
Array [
Array [
Object {
"flex": 1,
},
Object {
"backgroundColor": "#F5F5F5",
},
undefined,
undefined,
],
Object {
"paddingBottom": 0,
......@@ -22,41 +18,21 @@ exports[`ForgotScreen component should renders correctly 1`] = `
<View
style={
Array [
Object {
"flex": 1,
},
Object {
"padding": 10,
},
undefined,
undefined,
]
}
>
<RCTSafeAreaView
emulateUnlessSupported={true}
style={
Object {
"flex": 1,
}
}
>
<Text
style={
Array [
Object {
"fontFamily": "Roboto",
"fontSize": 28,
"fontWeight": "bold",
"lineHeight": 44,
},
Object {
"color": "#4F4F50",
},
Object {
"marginTop": 15,
},
Object {
"marginBottom": 15,
},
undefined,
undefined,
undefined,
undefined,
]
}
>
......@@ -65,31 +41,16 @@ exports[`ForgotScreen component should renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Roboto",
"fontSize": 17,
"fontWeight": "500",
"lineHeight": 23,
},
Object {
"color": "#4F4F50",
},
undefined,
Object {
"marginBottom": 15,
},
undefined,
undefined,
undefined,
]
}
>
To request a new password, enter your username
</Text>
<View
style={
Object {
"marginBottom": 10,
}
}
>
<View>
<View
style={
Array [
......@@ -97,9 +58,6 @@ exports[`ForgotScreen component should renders correctly 1`] = `
"flexDirection": "row",
"justifyContent": "space-between",
},
Object {
"marginBottom": 5,
},
]
}
>
......@@ -117,7 +75,9 @@ exports[`ForgotScreen component should renders correctly 1`] = `
Object {
"color": "#AEB0B8",
"fontFamily": "Roboto",
"fontSize": 14,
"fontSize": 16,
"fontWeight": "600",
"marginBottom": 5,
},
]
}
......@@ -137,18 +97,7 @@ exports[`ForgotScreen component should renders correctly 1`] = `
returnKeyType="done"
style={
Array [
Object {
"backgroundColor": "transparent",
"borderColor": "#D8D8D8",
"borderRadius": 2,
"borderWidth": 1,
"color": "#4F4F50",
"fontFamily": "Roboto",
"fontSize": 16,
"height": 50,
"lineHeight": 21,
"padding": 10,
},
undefined,
undefined,
]
}
......@@ -159,13 +108,8 @@ exports[`ForgotScreen component should renders correctly 1`] = `
<View
style={
Array [
Object {
"flexDirection": "row",
"justifyContent": "flex-end",
},
Object {
"marginTop": 20,
},
undefined,
undefined,
]
}
>
......@@ -183,16 +127,13 @@ exports[`ForgotScreen component should renders correctly 1`] = `
style={
Object {
"alignItems": "center",
"backgroundColor": "#5DBAC0",
"borderColor": "#5DBAC0",
"borderRadius": 2,
"backgroundColor": "white",
"borderColor": "#4690D6",
"borderRadius": 20,
"borderWidth": 1,
"flexDirection": "row",
"height": 60,
"justifyContent": "center",
"margin": 4,
"marginLeft": 0,
"marginRight": 10,
"opacity": 1,
"padding": 4,
}
......@@ -204,16 +145,12 @@ exports[`ForgotScreen component should renders correctly 1`] = `
Object {
"color": "#4690D6",
},
Object {
"color": "white",
"fontSize": 20,
"fontWeight": "500",
},
undefined,
]
}
>
GO BACK
Go back
</Text>
</View>
......@@ -231,16 +168,13 @@ exports[`ForgotScreen component should renders correctly 1`] = `
style={
Object {
"alignItems": "center",
"backgroundColor": "#5DBAC0",
"borderColor": "#5DBAC0",
"borderRadius": 2,
"backgroundColor": "white",
"borderColor": "#4690D6",
"borderRadius": 20,
"borderWidth": 1,
"flexDirection": "row",
"height": 60,
"justifyContent": "center",
"margin": 4,
"marginLeft": 0,
"marginRight": 0,
"opacity": 1,
"padding": 4,
}
......@@ -252,16 +186,12 @@ exports[`ForgotScreen component should renders correctly 1`] = `
Object {
"color": "#4690D6",
},
Object {
"color": "white",
"fontSize": 20,
"fontWeight": "500",
},
undefined,
]
}
>
CONTINUE
Continue
</Text>
</View>
......
__tests__/auth/__snapshots__/LoginScreen.js.snap
View file @ 022f45f6
......@@ -2,79 +2,69 @@
exports[`LoginScreen component should renders correctly 1`] = `
<View
onLayout={[Function]}
style={
Array [
Array [
undefined,
undefined,
],
Object {
"flex": 1,
"justifyContent": "center",
"paddingBottom": 0,
},
]
}
>
<View
<RCTSafeAreaView
emulateUnlessSupported={true}
style={
Array [
Object {
"flex": 10,
"flexDirection": "row",
"justifyContent": "center",
"paddingBottom": 10,
"paddingHorizontal": 20,
"paddingTop": 20,
},
Object {
"backgroundColor": "#F5F5F5",
},
]
}
>
<View
style={
Array [
Object {
"flex": 1,
},
Object {
"paddingTop": 10,
},
]
}
>
<Image
source={
Object {
"testUri": "../../../src/assets/logos/bulb.png",
}
}
style={
Object {
"alignSelf": "center",
"height": 59.51,
"marginTop": 10,
"width": 34.72,
<RCTScrollView>
<View>
<View
style={
Array [
undefined,
undefined,
]
}
}
/>
<LoginForm
onForgot={[Function]}
onLogin={[Function]}
/>
</View>
</View>
>
<Image
resizeMode="contain"
source={
Object {
"testUri": "../../../src/assets/logos/bulb.png",
}
}
style={
Object {
"alignSelf": "center",
"height": 80,
"marginTop": 10,
"width": 40,
}
}
/>
<LoginForm
onForgot={[Function]}
onLogin={[Function]}
/>
</View>
</View>
</RCTScrollView>
</RCTSafeAreaView>
<View
style={
Array [
Object {
"flex": 2,
"flexDirection": "row",
"justifyContent": "center",
"paddingBottom": 20,
"paddingHorizontal": 20,
"paddingTop": 20,
},
Object {
"backgroundColor": "#EFEFEF",
},
undefined,
undefined,
undefined,
]
}
>
......@@ -96,29 +86,12 @@ exports[`LoginScreen component should renders correctly 1`] = `
}
testID="registerButton"
>
<View
style={
Object {
"alignContent": "center",
"alignItems": "center",
"flex": 1,
"flexDirection": "column",
"justifyContent": "center",
}
}
>
<View>
<Text
style={
Array [
Object {
"fontFamily": "Roboto",
"fontSize": 17,
"fontWeight": "500",
"lineHeight": 23,
},
Object {
"color": "#939397",
},
undefined,
undefined,
]
}
>
......@@ -127,15 +100,8 @@ exports[`LoginScreen component should renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Roboto",
"fontSize": 28,
"fontWeight": "bold",
"lineHeight": 44,
},
Object {
"color": "#4F4F50",
},
undefined,
undefined,
]
}
>
......
__tests__/auth/__snapshots__/RegisterScreen.js.snap
View file @ 022f45f6
......@@ -4,9 +4,7 @@ exports[`RegisterScreen component should renders correctly 1`] = `
<View
style={
Array [
Object {
"flex": 1,
},
undefined,
]
}
>
......
android/app/src/main/AndroidManifest.xml
View file @ 022f45f6
......@@ -30,7 +30,7 @@
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:windowSoftInputMode="adjustResize"
android:windowSoftInputMode="stateVisible"
android:theme="@style/AppTheme"
android:largeHeap="true">
<activity
......@@ -40,7 +40,7 @@
android:label="@string/app_name"
android:screenOrientation="portrait"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize"
android:windowSoftInputMode="stateVisible"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
......
locales/en.json
View file @ 022f45f6
......@@ -691,7 +691,7 @@
"tapCopyError":"Tap to copy the error",
"save":"Save",
"edit":"Edit",
"goback":"GO BACK",
"goback":"Go back",
"copy":"Copy",
"language":"Language",
"categories":"Categories",
......
locales/es.json
View file @ 022f45f6
......@@ -20,9 +20,9 @@
"scheduled": "Esta actividad esta agendada para mostrarse en"
},
"auth": {
"login": "INGRESAR",
"login": "Ingresar",
"create": "CREAR UN CANAL",
"forgot": "OLVIDÉ MI CLAVE",
"forgot": "Olvidé mi clave",
"email": "Email",
"username": "Usuario",
"password": "Clave",
......
src/auth/ForgotPassword.js
View file @ 022f45f6
......@@ -67,7 +67,7 @@ export default class ForgotPassword extends PureComponent {
/>
{!this.state.sent && <Button
onPress={() => this.onContinuePress()}
text={i18n.t('continue').toUpperCase()}
text={i18n.t('continue')}
loading={this.state.sending}
loadingRight={true}
disable={this.state.sending || this.state.sent}
......
src/auth/LoginForm.js
View file @ 022f45f6
......@@ -65,7 +65,6 @@ export default class LoginForm extends Component {
return (
<View style={[CS.flexContainer, CS.marginTop6x]}>
<View style={CS.flexContainer}>
<Text style={[CS.titleText, CS.colorPrimaryText, CS.marginBottom2x]}>
{i18n.t('auth.login')}
</Text>
......@@ -93,8 +92,6 @@ export default class LoginForm extends Component {
style={CS.inputIcon}
/>
</View>
</View>
<View style={[CS.flexContainer, CS.marginTop6x]}>
<Button
onPress={() => this.onLoginPress()}
text={i18n.t('auth.login')}
......@@ -110,7 +107,6 @@ export default class LoginForm extends Component {
<View style={CS.marginTop4x}>
<Text style={[CS.link, CS.fontL]} onPress={this.onForgotPress}>{i18n.t('auth.forgot')}</Text>
</View>
</View>
</View>
);
}
......
src/auth/LoginScreen.js
View file @ 022f45f6
......@@ -6,9 +6,11 @@ import {
Keyboard,
Animated,
Text,
Image,
TouchableOpacity,
SafeAreaView,
ScrollView,
Platform,
KeyboardAvoidingView,
} from 'react-native';
import LoginForm from './LoginForm';
......@@ -17,10 +19,9 @@ import i18nService from '../common/services/i18n.service';
import sessionService from '../common/services/session.service';
import ThemedStyles from '../styles/ThemedStyles';
import { ScrollView } from 'react-native-gesture-handler';
const LOGO_HEIGHT = 100;
const LOGO_HEIGHT_SMALL = 50;
const LOGO_HEIGHT = 80;
const LOGO_HEIGHT_SMALL = 40;
/**
* Login screen
......@@ -33,20 +34,21 @@ export default class LoginScreen extends Component {
header: null
}
state = {
keyboard: false,
}
constructor(props) {
super(props);
this.logoHeight = new Animated.Value(LOGO_HEIGHT);
}
componentDidMount() {
// Setting this here because if user register, then onboarding then logout and login again, will go to onboarding again
sessionService.setInitialScreen('Tabs');
this.setState({ loading:true });
}
componentWillMount () {
this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
this.keyboardWillShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardWillShow);
this.keyboardWillHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardWillHide);
}
componentWillUnmount() {
......@@ -56,44 +58,22 @@ export default class LoginScreen extends Component {
keyboardWillShow = (event) => {
Animated.timing(this.logoHeight, {
duration: event.duration,
duration: 500,
toValue: LOGO_HEIGHT_SMALL,
}).start();
// this.setState({keyboard: true});
// LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
};
keyboardWillHide = (event) => {
Animated.timing(this.logoHeight, {
duration: event.duration,
duration: 500,
toValue: LOGO_HEIGHT,
}).start();
};
getLoginBody = () => {
const CS = ThemedStyles.style;
return (
<View style={[CS.flexContainer, CS.paddingVertical6x]}>
<Image
source={require('./../assets/logos/bulb.png')}
style={styles.bulb}
/>
<LoginForm
onLogin={() => this.login()}
onForgot={this.onPressForgot}
/>
</View>
);
};
getLoginFooter = () => {
const CS = ThemedStyles.style;
return (
<TouchableOpacity onPress={this.onPressRegister} testID="registerButton">
<View style={CS.flexColumnCentered}>
<Text style={[CS.subTitleText, CS.colorSecondaryText]}>{i18nService.t('auth.haveAccount')}</Text>
<Text style={[CS.titleText, CS.colorPrimaryText]}>{i18nService.t('auth.createChannel')}</Text>
</View>
</TouchableOpacity>
);
// this.setState({keyboard: false});
// LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
};
/**
......@@ -103,18 +83,31 @@ export default class LoginScreen extends Component {
const CS = ThemedStyles.style;
return (
<View style={[CS.flexContainerCenter]}>
<View style={[ CS.backgroundThemePrimary, styles.flex10]}>
<SafeAreaView style={CS.flexContainer}>
<ScrollView style={[CS.flexContainer, CS.paddingHorizontal4x]}>
{this.getLoginBody()}
</ScrollView>
</SafeAreaView>
</View>
<View style={[CS.mindsLayoutFooter, CS.backgroundThemeSecondary]}>
{this.getLoginFooter()}
<KeyboardAvoidingView style={[CS.flexColumnStretch, CS.backgroundThemePrimary]} behavior={Platform.OS == 'ios' ? 'padding' : null} >
<SafeAreaView style={[styles.flex10]}>
<ScrollView style={CS.flexContainer}>
<View style={[CS.paddingHorizontal4x, CS.flexColumnStretch]}>
<Animated.Image
resizeMode="contain"
source={require('./../assets/logos/bulb.png')}
style={[styles.bulb, { height: this.logoHeight }]}
/>
<LoginForm
onLogin={() => this.login()}
onForgot={this.onPressForgot}
/>
</View>
</ScrollView>
</SafeAreaView>
<View style={[CS.paddingVertical2x, CS.backgroundThemeSecondary, CS.mindsLayoutFooter]}>
<TouchableOpacity onPress={this.onPressRegister} testID="registerButton">
<View style={CS.flexColumnCentered}>
<Text style={[CS.subTitleText, CS.colorSecondaryText]}>{i18nService.t('auth.haveAccount')}</Text>
<Text style={[CS.titleText, CS.colorPrimaryText]}>{i18nService.t('auth.createChannel')}</Text>
</View>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
);
}
......@@ -145,8 +138,8 @@ const styles = StyleSheet.create({
flex: 10,
},
bulb: {
width: 47,
height: 80,
width: 40,
height: 67,
alignSelf: 'center',
marginTop: 10
},
......
src/auth/RegisterForm.js
View file @ 022f45f6
......@@ -4,14 +4,12 @@ import React, {
import {
Text,
TextInput,
KeyboardAvoidingView,
View,
ScrollView,
Linking,
Alert,
StyleSheet,
TouchableOpacity
TouchableOpacity,
SafeAreaView
} from 'react-native';
import authService from '../auth/AuthService';
......@@ -76,58 +74,85 @@ class RegisterForm extends Component {
getFormBody = () => {
const CS = ThemedStyles.style;
return (
<ScrollView style={[CS.flexContainer, CS.marginTop2x]}>
<TouchableOpacity onPress={this.props.onBack} style={CS.marginBottom3x}>
<Icon size={34} name="keyboard-arrow-left" style={CS.colorSecondaryText} />
</TouchableOpacity>
<Text style={[CS.marginBottom3x, CS.textCenter, CS.titleText, CS.colorPrimaryText]}>
{i18n.t('auth.join')}
</Text>
<Text style={{color: '#F00', textAlign: 'center', paddingTop:4, paddingLeft:4}}>
{this.state.error.termsAcceptedError}
</Text>
<Input
style={CS.marginBottom2x}
placeholder={i18n.t('auth.username')}
onChangeText={this.setUsername}
value={this.state.username}
editable={!this.state.inProgress}
testID="registerUsernameInput"
/>
<Input
style={CS.marginBottom2x}
placeholder={i18n.t('auth.email')}
onChangeText={this.setEmail}
value={this.state.email}
editable={!this.state.inProgress}
testID="registerEmailInput"
/>
<Input
style={CS.marginBottom2x}
placeholder={i18n.t('auth.password')}
secureTextEntry={!DISABLE_PASSWORD_INPUTS} // e2e workaround
onChangeText={this.setPassword}
value={this.state.password}
editable={!this.state.inProgress}
testID="registerPasswordInput"
/>
{ this.state.password ?
<ScrollView style={[CS.flexContainer, CS.marginTop2x]} contentContainerStyle={CS.paddingHorizontal4x}>
<SafeAreaView style={CS.flexContainer}>
<TouchableOpacity onPress={this.props.onBack} style={CS.marginBottom3x}>
<Icon size={34} name="keyboard-arrow-left" style={CS.colorSecondaryText} />
</TouchableOpacity>
<Text style={[CS.marginBottom3x, CS.textCenter, CS.titleText, CS.colorPrimaryText]}>
{i18n.t('auth.join')}
</Text>
<Text style={{color: '#F00', textAlign: 'center', paddingTop:4, paddingLeft:4}}>
{this.state.error.termsAcceptedError}
</Text>
<Input
placeholder={i18n.t('auth.confirmpassword')}
style={CS.marginBottom2x}
placeholder={i18n.t('auth.username')}
onChangeText={this.setUsername}
value={this.state.username}
editable={!this.state.inProgress}
testID="registerUsernameInput"
/>
<Input
style={CS.marginBottom2x}
placeholder={i18n.t('auth.email')}
onChangeText={this.setEmail}
value={this.state.email}
editable={!this.state.inProgress}
testID="registerEmailInput"
/>
<Input
style={CS.marginBottom2x}
placeholder={i18n.t('auth.password')}
secureTextEntry={!DISABLE_PASSWORD_INPUTS} // e2e workaround
onChangeText={this.setConfirmPassword}
value={this.state.confirmPassword}
onChangeText={this.setPassword}
value={this.state.password}
editable={!this.state.inProgress}
testID="registerPasswordConfirmInput"
/> : null }
<CheckBox
containerStyle={CS.checkbox}
title={<Text style={[CS.colorSecondaryText, CS.fontXL]}>{i18n.t('auth.accept')} <Text style={CS.link} onPress={ ()=> Linking.openURL('https://www.minds.com/p/terms') }>{i18n.t('auth.termsAndConditions')}</Text></Text>}
checked={this.state.termsAccepted}
onPress={this.check}
disabled={this.state.inProgress}
testID="checkbox"
/>
testID="registerPasswordInput"
/>
{ this.state.password ?
<Input
placeholder={i18n.t('auth.confirmpassword')}
secureTextEntry={!DISABLE_PASSWORD_INPUTS} // e2e workaround
onChangeText={this.setConfirmPassword}
value={this.state.confirmPassword}
editable={!this.state.inProgress}
testID="registerPasswordConfirmInput"
/> : null }
<CheckBox
containerStyle={CS.checkbox}
title={<Text style={[CS.colorSecondaryText, CS.fontL]}>{i18n.t('auth.accept')} <Text style={CS.link} onPress={ ()=> Linking.openURL('https://www.minds.com/p/terms') }>{i18n.t('auth.termsAndConditions')}</Text></Text>}
checked={this.state.termsAccepted}
onPress={this.check}
disabled={this.state.inProgress}
testID="checkbox"
/>
<View style={CS.flexContainer, CS.paddingTop2x}>
<Button
onPress={() => this.onPressRegister()}
borderRadius={2}
containerStyle={CS.button}
textStyle={CS.buttonText}
loading={this.state.inProgress}
loadingRight={true}
disabled={this.state.inProgress}
text={i18n.t('auth.createChannel')}
testID="registerCreateButton"
/>
<Text style={[CS.subTitleText, CS.colorSecondaryText, CS.centered, CS.marginTop2x]}>
{i18n.to('auth.alreadyHaveAccount', null, {
login: (
<Text style={[CS.link, CS.fontL]} onPress={this.props.onBack}>
{i18n.t('auth.login')}
</Text>
),
})}
</Text>
</View>
</SafeAreaView>
</ScrollView>
);
};
......@@ -136,44 +161,11 @@ class RegisterForm extends Component {
this.setState({ termsAccepted: !this.state.termsAccepted })
};
getFormFooter = () => {
const CS = ThemedStyles.style;
return (
<View style={CS.flexContainer}>
<Button
onPress={() => this.onPressRegister()}
borderRadius={2}
containerStyle={CS.button}
textStyle={CS.buttonText}
loading={this.state.inProgress}
loadingRight={true}
disabled={this.state.inProgress}
text={i18n.t('auth.createChannel')}
testID="registerCreateButton"
/>
<Text style={[CS.subTitleText, CS.colorSecondaryText, CS.centered, CS.marginTop2x]}>
{i18n.to('auth.alreadyHaveAccount', null, {
login: (
<Text style={[CS.link, CS.fontL]} onPress={this.props.onBack}>
{i18n.t('auth.login')}
</Text>
),
})}
</Text>
</View>
);
};
render() {
const CS = ThemedStyles.style;
return (
<View style={[CS.flexContainerCenter]}>
<View style={[CS.mindsLayoutBody, CS.backgroundThemePrimary]}>
{this.getFormBody()}
</View>
<View style={[CS.mindsLayoutFooter, CS.backgroundThemePrimary]}>
{this.getFormFooter()}
</View>
<View style={[CS.flexContainerCenter, CS.backgroundThemePrimary]}>
{this.getFormBody()}
</View>
);
}
......
src/common/components/Input.js
View file @ 022f45f6
......@@ -135,7 +135,7 @@ export default class Input extends Component {
return (
<View style={CS.marginBottom2x}>
<View style={[styles.row, CS.marginBottom]}>
<View style={[styles.row]}>
<View style={styles.row}>
<Text style={[styles.label]}>{this.props.placeholder}</Text>
{this.props.info && <InfoPopup info={this.props.info} />}
......
src/styles/ThemedStyles.js
View file @ 022f45f6
......@@ -80,6 +80,16 @@ class ThemedStylesStore {
flex: 1,
justifyContent: 'center',
},
flexColumn: {
flex: 1,
flexDirection: 'column',
},
flexColumnStretch: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch'
},
flexColumnCentered: {
flex: 1,
flexDirection: 'column',
......@@ -287,7 +297,7 @@ class ThemedStylesStore {
inputIcon: {
position: 'absolute',
right:8,
top: Platform.OS === 'ios' ? 41 : 45,
top: Platform.OS === 'ios' ? 36 : 40,
color: theme.primary_text,
},
button: {
......
Please register or to comment