chore: migrate LoginView to hooks (#5092)
* chore: migrate LoginView to hooks * minor tweak * minor tweak * fix ref --------- Co-authored-by: GleidsonDaniel <gleidson10daniel@hotmail.com>
This commit is contained in:
Reinaldo Neto
GitHub
parent
c0660db06d
commit
3f2e5ced19
|
|
@ -3,7 +3,7 @@ import { Control, Controller } from 'react-hook-form';
|
||||||
|
|
||||||
import { FormTextInput, IRCTextInputProps } from './FormTextInput';
|
import { FormTextInput, IRCTextInputProps } from './FormTextInput';
|
||||||
|
|
||||||
interface IControlledFormTextInputProps extends IRCTextInputProps {
|
interface IControlledFormTextInputProps extends Omit<IRCTextInputProps, 'inputRef'> {
|
||||||
control: Control<any>;
|
control: Control<any>;
|
||||||
name: string;
|
name: string;
|
||||||
}
|
}
|
||||||
|
|
@ -12,6 +12,8 @@ export const ControlledFormTextInput = ({ control, name, ...props }: IControlled
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
name={name}
|
name={name}
|
||||||
render={({ field: { onChange, value } }) => <FormTextInput onChangeText={onChange} value={value} {...props} />}
|
render={({ field: { onChange, value, ref } }) => (
|
||||||
|
<FormTextInput onChangeText={onChange} value={value} inputRef={ref} {...props} />
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,264 +0,0 @@
|
||||||
import { dequal } from 'dequal';
|
|
||||||
import React from 'react';
|
|
||||||
import { Alert, Keyboard, StyleSheet, Text, View, TextInput as RNTextInput } from 'react-native';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import { loginRequest } from '../actions/login';
|
|
||||||
import { themes } from '../lib/constants';
|
|
||||||
import Button from '../containers/Button';
|
|
||||||
import FormContainer, { FormContainerInner } from '../containers/FormContainer';
|
|
||||||
import * as HeaderButton from '../containers/HeaderButton';
|
|
||||||
import LoginServices from '../containers/LoginServices';
|
|
||||||
import { FormTextInput } from '../containers/TextInput';
|
|
||||||
import { IApplicationState, IBaseScreen } from '../definitions';
|
|
||||||
import I18n from '../i18n';
|
|
||||||
import { OutsideParamList } from '../stacks/types';
|
|
||||||
import { withTheme } from '../theme';
|
|
||||||
import sharedStyles from './Styles';
|
|
||||||
import UGCRules from '../containers/UserGeneratedContentRules';
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
registerDisabled: {
|
|
||||||
...sharedStyles.textRegular,
|
|
||||||
...sharedStyles.textAlignCenter,
|
|
||||||
fontSize: 16
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
...sharedStyles.textBold,
|
|
||||||
fontSize: 22
|
|
||||||
},
|
|
||||||
inputContainer: {
|
|
||||||
marginVertical: 16
|
|
||||||
},
|
|
||||||
bottomContainer: {
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center'
|
|
||||||
},
|
|
||||||
bottomContainerText: {
|
|
||||||
...sharedStyles.textRegular,
|
|
||||||
fontSize: 13
|
|
||||||
},
|
|
||||||
bottomContainerTextBold: {
|
|
||||||
...sharedStyles.textSemibold,
|
|
||||||
fontSize: 13
|
|
||||||
},
|
|
||||||
loginButton: {
|
|
||||||
marginTop: 16
|
|
||||||
},
|
|
||||||
ugcContainer: {
|
|
||||||
marginTop: 32
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
interface ILoginViewProps extends IBaseScreen<OutsideParamList, 'LoginView'> {
|
|
||||||
Site_Name: string;
|
|
||||||
Accounts_RegistrationForm: string;
|
|
||||||
Accounts_RegistrationForm_LinkReplacementText: string;
|
|
||||||
Accounts_EmailOrUsernamePlaceholder: string;
|
|
||||||
Accounts_PasswordPlaceholder: string;
|
|
||||||
Accounts_PasswordReset: boolean;
|
|
||||||
Accounts_ShowFormLogin: boolean;
|
|
||||||
isFetching: boolean;
|
|
||||||
error: {
|
|
||||||
error: string;
|
|
||||||
};
|
|
||||||
failure: boolean;
|
|
||||||
loginRequest: Function;
|
|
||||||
inviteLinkToken: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ILoginViewState {
|
|
||||||
user: string;
|
|
||||||
password: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
class LoginView extends React.Component<ILoginViewProps, ILoginViewState> {
|
|
||||||
private passwordInput: RNTextInput | null | undefined;
|
|
||||||
|
|
||||||
static navigationOptions = ({ route, navigation }: ILoginViewProps) => ({
|
|
||||||
title: route?.params?.title ?? 'Rocket.Chat',
|
|
||||||
headerRight: () => <HeaderButton.Legal testID='login-view-more' navigation={navigation} />
|
|
||||||
});
|
|
||||||
|
|
||||||
constructor(props: ILoginViewProps) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
user: props.route.params?.username ?? '',
|
|
||||||
password: ''
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
UNSAFE_componentWillReceiveProps(nextProps: ILoginViewProps) {
|
|
||||||
const { error } = this.props;
|
|
||||||
if (nextProps.failure && !dequal(error, nextProps.error)) {
|
|
||||||
if (nextProps.error?.error === 'error-invalid-email') {
|
|
||||||
this.resendEmailConfirmation();
|
|
||||||
} else {
|
|
||||||
Alert.alert(I18n.t('Oops'), I18n.t('Login_error'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get showRegistrationButton() {
|
|
||||||
const { Accounts_RegistrationForm, inviteLinkToken } = this.props;
|
|
||||||
return Accounts_RegistrationForm === 'Public' || (Accounts_RegistrationForm === 'Secret URL' && inviteLinkToken?.length);
|
|
||||||
}
|
|
||||||
|
|
||||||
login = () => {
|
|
||||||
const { navigation, Site_Name } = this.props;
|
|
||||||
navigation.navigate('LoginView', { title: Site_Name });
|
|
||||||
};
|
|
||||||
|
|
||||||
register = () => {
|
|
||||||
const { navigation, Site_Name } = this.props;
|
|
||||||
navigation.navigate('RegisterView', { title: Site_Name });
|
|
||||||
};
|
|
||||||
|
|
||||||
forgotPassword = () => {
|
|
||||||
const { navigation, Site_Name } = this.props;
|
|
||||||
navigation.navigate('ForgotPasswordView', { title: Site_Name });
|
|
||||||
};
|
|
||||||
|
|
||||||
resendEmailConfirmation = () => {
|
|
||||||
const { user } = this.state;
|
|
||||||
const { navigation } = this.props;
|
|
||||||
navigation.navigate('SendEmailConfirmationView', { user });
|
|
||||||
};
|
|
||||||
|
|
||||||
valid = () => {
|
|
||||||
const { user, password } = this.state;
|
|
||||||
return user.trim() && password.trim();
|
|
||||||
};
|
|
||||||
|
|
||||||
submit = () => {
|
|
||||||
if (!this.valid()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { user, password } = this.state;
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
Keyboard.dismiss();
|
|
||||||
dispatch(loginRequest({ user, password }));
|
|
||||||
};
|
|
||||||
|
|
||||||
renderUserForm = () => {
|
|
||||||
const { user } = this.state;
|
|
||||||
const {
|
|
||||||
Accounts_EmailOrUsernamePlaceholder,
|
|
||||||
Accounts_PasswordPlaceholder,
|
|
||||||
Accounts_PasswordReset,
|
|
||||||
Accounts_RegistrationForm_LinkReplacementText,
|
|
||||||
isFetching,
|
|
||||||
theme,
|
|
||||||
Accounts_ShowFormLogin
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
if (!Accounts_ShowFormLogin) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Login')}</Text>
|
|
||||||
<FormTextInput
|
|
||||||
label={I18n.t('Username_or_email')}
|
|
||||||
containerStyle={styles.inputContainer}
|
|
||||||
placeholder={Accounts_EmailOrUsernamePlaceholder || I18n.t('Username_or_email')}
|
|
||||||
keyboardType='email-address'
|
|
||||||
returnKeyType='next'
|
|
||||||
onChangeText={(value: string) => this.setState({ user: value })}
|
|
||||||
onSubmitEditing={() => {
|
|
||||||
this.passwordInput?.focus();
|
|
||||||
}}
|
|
||||||
testID='login-view-email'
|
|
||||||
textContentType='username'
|
|
||||||
autoComplete='username'
|
|
||||||
value={user}
|
|
||||||
/>
|
|
||||||
<FormTextInput
|
|
||||||
label={I18n.t('Password')}
|
|
||||||
containerStyle={styles.inputContainer}
|
|
||||||
inputRef={e => {
|
|
||||||
this.passwordInput = e;
|
|
||||||
}}
|
|
||||||
placeholder={Accounts_PasswordPlaceholder || I18n.t('Password')}
|
|
||||||
returnKeyType='send'
|
|
||||||
secureTextEntry
|
|
||||||
onSubmitEditing={this.submit}
|
|
||||||
onChangeText={(value: string) => this.setState({ password: value })}
|
|
||||||
testID='login-view-password'
|
|
||||||
textContentType='password'
|
|
||||||
autoComplete='password'
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
title={I18n.t('Login')}
|
|
||||||
type='primary'
|
|
||||||
onPress={this.submit}
|
|
||||||
testID='login-view-submit'
|
|
||||||
loading={isFetching}
|
|
||||||
disabled={!this.valid()}
|
|
||||||
style={styles.loginButton}
|
|
||||||
/>
|
|
||||||
{Accounts_PasswordReset && (
|
|
||||||
<Button
|
|
||||||
title={I18n.t('Forgot_password')}
|
|
||||||
type='secondary'
|
|
||||||
onPress={this.forgotPassword}
|
|
||||||
testID='login-view-forgot-password'
|
|
||||||
color={themes[theme].auxiliaryText}
|
|
||||||
fontSize={14}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{this.showRegistrationButton ? (
|
|
||||||
<View style={styles.bottomContainer}>
|
|
||||||
<Text style={[styles.bottomContainerText, { color: themes[theme].auxiliaryText }]}>
|
|
||||||
{I18n.t('Dont_Have_An_Account')}
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]}
|
|
||||||
onPress={this.register}
|
|
||||||
testID='login-view-register'
|
|
||||||
>
|
|
||||||
{I18n.t('Create_account')}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<Text style={[styles.registerDisabled, { color: themes[theme].auxiliaryText }]}>
|
|
||||||
{Accounts_RegistrationForm_LinkReplacementText}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
<UGCRules styleContainer={styles.ugcContainer} />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { Accounts_ShowFormLogin } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FormContainer testID='login-view'>
|
|
||||||
<FormContainerInner>
|
|
||||||
<LoginServices separator={Accounts_ShowFormLogin} />
|
|
||||||
{this.renderUserForm()}
|
|
||||||
</FormContainerInner>
|
|
||||||
</FormContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapStateToProps = (state: IApplicationState) => ({
|
|
||||||
server: state.server.server,
|
|
||||||
Site_Name: state.settings.Site_Name as string,
|
|
||||||
Accounts_ShowFormLogin: state.settings.Accounts_ShowFormLogin as boolean,
|
|
||||||
Accounts_RegistrationForm: state.settings.Accounts_RegistrationForm as string,
|
|
||||||
Accounts_RegistrationForm_LinkReplacementText: state.settings.Accounts_RegistrationForm_LinkReplacementText as string,
|
|
||||||
isFetching: state.login.isFetching,
|
|
||||||
failure: state.login.failure,
|
|
||||||
error: state.login.error && state.login.error.data,
|
|
||||||
Accounts_EmailOrUsernamePlaceholder: state.settings.Accounts_EmailOrUsernamePlaceholder as string,
|
|
||||||
Accounts_PasswordPlaceholder: state.settings.Accounts_PasswordPlaceholder as string,
|
|
||||||
Accounts_PasswordReset: state.settings.Accounts_PasswordReset as boolean,
|
|
||||||
inviteLinkToken: state.inviteLinks.token
|
|
||||||
});
|
|
||||||
|
|
||||||
export default connect(mapStateToProps)(withTheme(LoginView));
|
|
||||||
|
|
@ -0,0 +1,171 @@
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import { Keyboard, Text, View, Alert } from 'react-native';
|
||||||
|
import { useDispatch } from 'react-redux';
|
||||||
|
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
|
||||||
|
import { StackNavigationProp } from '@react-navigation/stack';
|
||||||
|
import * as yup from 'yup';
|
||||||
|
import { yupResolver } from '@hookform/resolvers/yup';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
|
||||||
|
import { loginRequest } from '../../actions/login';
|
||||||
|
import Button from '../../containers/Button';
|
||||||
|
import { ControlledFormTextInput } from '../../containers/TextInput';
|
||||||
|
import I18n from '../../i18n';
|
||||||
|
import { OutsideParamList } from '../../stacks/types';
|
||||||
|
import { useTheme } from '../../theme';
|
||||||
|
import sharedStyles from '../Styles';
|
||||||
|
import UGCRules from '../../containers/UserGeneratedContentRules';
|
||||||
|
import { useAppSelector } from '../../lib/hooks';
|
||||||
|
import styles from './styles';
|
||||||
|
|
||||||
|
interface ISubmit {
|
||||||
|
user: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const schema = yup.object().shape({
|
||||||
|
user: yup.string().required(),
|
||||||
|
password: yup.string().required()
|
||||||
|
});
|
||||||
|
|
||||||
|
const UserForm = () => {
|
||||||
|
const { colors } = useTheme();
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const navigation = useNavigation<StackNavigationProp<OutsideParamList, 'LoginView'>>();
|
||||||
|
|
||||||
|
const {
|
||||||
|
params: { username }
|
||||||
|
} = useRoute<RouteProp<OutsideParamList, 'LoginView'>>();
|
||||||
|
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { isValid },
|
||||||
|
getValues,
|
||||||
|
setFocus
|
||||||
|
} = useForm<ISubmit>({ mode: 'onChange', resolver: yupResolver(schema), defaultValues: { user: username || '' } });
|
||||||
|
|
||||||
|
const {
|
||||||
|
Accounts_EmailOrUsernamePlaceholder,
|
||||||
|
Accounts_PasswordPlaceholder,
|
||||||
|
Accounts_PasswordReset,
|
||||||
|
Accounts_RegistrationForm_LinkReplacementText,
|
||||||
|
isFetching,
|
||||||
|
Accounts_RegistrationForm,
|
||||||
|
Site_Name,
|
||||||
|
inviteLinkToken,
|
||||||
|
error,
|
||||||
|
failure
|
||||||
|
} = useAppSelector(state => ({
|
||||||
|
Accounts_RegistrationForm: state.settings.Accounts_RegistrationForm as string,
|
||||||
|
Accounts_RegistrationForm_LinkReplacementText: state.settings.Accounts_RegistrationForm_LinkReplacementText as string,
|
||||||
|
isFetching: state.login.isFetching,
|
||||||
|
Accounts_EmailOrUsernamePlaceholder: state.settings.Accounts_EmailOrUsernamePlaceholder as string,
|
||||||
|
Accounts_PasswordPlaceholder: state.settings.Accounts_PasswordPlaceholder as string,
|
||||||
|
Accounts_PasswordReset: state.settings.Accounts_PasswordReset as boolean,
|
||||||
|
Site_Name: state.settings.Site_Name as string,
|
||||||
|
inviteLinkToken: state.inviteLinks.token,
|
||||||
|
failure: state.login.failure,
|
||||||
|
error: state.login.error && state.login.error.data
|
||||||
|
}));
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (failure) {
|
||||||
|
if (error?.error === 'error-invalid-email') {
|
||||||
|
const user = getValues('user');
|
||||||
|
navigation.navigate('SendEmailConfirmationView', { user });
|
||||||
|
} else {
|
||||||
|
Alert.alert(I18n.t('Oops'), I18n.t('Login_error'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [error?.error, failure, getValues, navigation]);
|
||||||
|
|
||||||
|
const showRegistrationButton =
|
||||||
|
Accounts_RegistrationForm === 'Public' || (Accounts_RegistrationForm === 'Secret URL' && inviteLinkToken?.length);
|
||||||
|
|
||||||
|
const register = () => {
|
||||||
|
navigation.navigate('RegisterView', { title: Site_Name });
|
||||||
|
};
|
||||||
|
|
||||||
|
const forgotPassword = () => {
|
||||||
|
navigation.navigate('ForgotPasswordView', { title: Site_Name });
|
||||||
|
};
|
||||||
|
|
||||||
|
const submit = ({ password, user }: ISubmit) => {
|
||||||
|
if (!isValid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Keyboard.dismiss();
|
||||||
|
dispatch(loginRequest({ user, password }));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Text style={[styles.title, sharedStyles.textBold, { color: colors.titleText }]}>{I18n.t('Login')}</Text>
|
||||||
|
<ControlledFormTextInput
|
||||||
|
name='user'
|
||||||
|
control={control}
|
||||||
|
label={I18n.t('Username_or_email')}
|
||||||
|
containerStyle={styles.inputContainer}
|
||||||
|
placeholder={Accounts_EmailOrUsernamePlaceholder || I18n.t('Username_or_email')}
|
||||||
|
keyboardType='email-address'
|
||||||
|
returnKeyType='next'
|
||||||
|
onSubmitEditing={() => setFocus('password')}
|
||||||
|
testID='login-view-email'
|
||||||
|
textContentType='username'
|
||||||
|
autoComplete='username'
|
||||||
|
/>
|
||||||
|
<ControlledFormTextInput
|
||||||
|
name='password'
|
||||||
|
control={control}
|
||||||
|
label={I18n.t('Password')}
|
||||||
|
containerStyle={styles.inputContainer}
|
||||||
|
placeholder={Accounts_PasswordPlaceholder || I18n.t('Password')}
|
||||||
|
returnKeyType='send'
|
||||||
|
secureTextEntry
|
||||||
|
onSubmitEditing={handleSubmit(submit)}
|
||||||
|
testID='login-view-password'
|
||||||
|
textContentType='password'
|
||||||
|
autoComplete='password'
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
title={I18n.t('Login')}
|
||||||
|
type='primary'
|
||||||
|
onPress={handleSubmit(submit)}
|
||||||
|
testID='login-view-submit'
|
||||||
|
loading={isFetching}
|
||||||
|
disabled={!isValid}
|
||||||
|
style={styles.loginButton}
|
||||||
|
/>
|
||||||
|
{Accounts_PasswordReset ? (
|
||||||
|
<Button
|
||||||
|
title={I18n.t('Forgot_password')}
|
||||||
|
type='secondary'
|
||||||
|
onPress={forgotPassword}
|
||||||
|
testID='login-view-forgot-password'
|
||||||
|
color={colors.auxiliaryText}
|
||||||
|
fontSize={14}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
{showRegistrationButton ? (
|
||||||
|
<View style={styles.bottomContainer}>
|
||||||
|
<Text style={[styles.bottomContainerText, { color: colors.auxiliaryText }]}>{I18n.t('Dont_Have_An_Account')}</Text>
|
||||||
|
<Text
|
||||||
|
style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
|
||||||
|
onPress={register}
|
||||||
|
testID='login-view-register'
|
||||||
|
>
|
||||||
|
{I18n.t('Create_account')}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<Text style={[styles.registerDisabled, { color: colors.auxiliaryText }]}>
|
||||||
|
{Accounts_RegistrationForm_LinkReplacementText}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
<UGCRules styleContainer={styles.ugcContainer} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UserForm;
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import React, { useLayoutEffect } from 'react';
|
||||||
|
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
|
||||||
|
import { StackNavigationProp } from '@react-navigation/stack';
|
||||||
|
|
||||||
|
import { useAppSelector } from '../../lib/hooks';
|
||||||
|
import FormContainer, { FormContainerInner } from '../../containers/FormContainer';
|
||||||
|
import * as HeaderButton from '../../containers/HeaderButton';
|
||||||
|
import LoginServices from '../../containers/LoginServices';
|
||||||
|
import { OutsideParamList } from '../../stacks/types';
|
||||||
|
import UserForm from './UserForm';
|
||||||
|
|
||||||
|
const LoginView = () => {
|
||||||
|
const navigation = useNavigation<StackNavigationProp<OutsideParamList, 'LoginView'>>();
|
||||||
|
|
||||||
|
const {
|
||||||
|
params: { title }
|
||||||
|
} = useRoute<RouteProp<OutsideParamList, 'LoginView'>>();
|
||||||
|
|
||||||
|
const { Accounts_ShowFormLogin } = useAppSelector(state => ({
|
||||||
|
Accounts_ShowFormLogin: state.settings.Accounts_ShowFormLogin as boolean
|
||||||
|
}));
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
navigation.setOptions({
|
||||||
|
title: title ?? 'Rocket.Chat',
|
||||||
|
headerRight: () => <HeaderButton.Legal testID='login-view-more' navigation={navigation} />
|
||||||
|
});
|
||||||
|
}, [navigation, title]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormContainer testID='login-view'>
|
||||||
|
<FormContainerInner>
|
||||||
|
<LoginServices separator={Accounts_ShowFormLogin} />
|
||||||
|
{Accounts_ShowFormLogin ? <UserForm /> : null}
|
||||||
|
</FormContainerInner>
|
||||||
|
</FormContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoginView;
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { StyleSheet } from 'react-native';
|
||||||
|
|
||||||
|
import sharedStyles from '../Styles';
|
||||||
|
|
||||||
|
export default StyleSheet.create({
|
||||||
|
registerDisabled: {
|
||||||
|
...sharedStyles.textRegular,
|
||||||
|
...sharedStyles.textAlignCenter,
|
||||||
|
fontSize: 16
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
...sharedStyles.textBold,
|
||||||
|
fontSize: 22
|
||||||
|
},
|
||||||
|
inputContainer: {
|
||||||
|
marginVertical: 16
|
||||||
|
},
|
||||||
|
bottomContainer: {
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center'
|
||||||
|
},
|
||||||
|
bottomContainerText: {
|
||||||
|
...sharedStyles.textRegular,
|
||||||
|
fontSize: 13
|
||||||
|
},
|
||||||
|
bottomContainerTextBold: {
|
||||||
|
...sharedStyles.textSemibold,
|
||||||
|
fontSize: 13
|
||||||
|
},
|
||||||
|
loginButton: {
|
||||||
|
marginTop: 16
|
||||||
|
},
|
||||||
|
ugcContainer: {
|
||||||
|
marginTop: 32
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue