Chore: Hooks app/views/ForgotPasswordView (#4485)
* Chore: Hooks app/views/ForgotPasswordView * validating email and using hook forms * using mode onCHange * add return * fix theme Co-authored-by: Gleidson Daniel <gleidson10daniel@hotmail.com>
This commit is contained in:
Reinaldo Neto
Diego Mello
parent
bd117c401f
commit
99d1bb6d8a
|
|
@ -25,7 +25,7 @@ const _OutsideStack = () => {
|
|||
<Outside.Screen name='NewServerView' component={NewServerView} options={NewServerView.navigationOptions} />
|
||||
<Outside.Screen name='WorkspaceView' component={WorkspaceView} options={WorkspaceView.navigationOptions} />
|
||||
<Outside.Screen name='LoginView' component={LoginView} options={LoginView.navigationOptions} />
|
||||
<Outside.Screen name='ForgotPasswordView' component={ForgotPasswordView} options={ForgotPasswordView.navigationOptions} />
|
||||
<Outside.Screen name='ForgotPasswordView' component={ForgotPasswordView} />
|
||||
<Outside.Screen name='SendEmailConfirmationView' component={SendEmailConfirmationView} />
|
||||
<Outside.Screen name='RegisterView' component={RegisterView} options={RegisterView.navigationOptions} />
|
||||
<Outside.Screen name='LegalView' component={LegalView} />
|
||||
|
|
|
|||
|
|
@ -1,75 +1,58 @@
|
|||
import React from 'react';
|
||||
import React, { useLayoutEffect, useState } from 'react';
|
||||
import { Text } from 'react-native';
|
||||
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
|
||||
import { StackNavigationProp } from '@react-navigation/stack';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import * as yup from 'yup';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
|
||||
import Button from '../containers/Button';
|
||||
import FormContainer, { FormContainerInner } from '../containers/FormContainer';
|
||||
import { FormTextInput } from '../containers/TextInput';
|
||||
import { ControlledFormTextInput } from '../containers/TextInput';
|
||||
import I18n from '../i18n';
|
||||
import { themes } from '../lib/constants';
|
||||
import { Services } from '../lib/services';
|
||||
import { OutsideParamList } from '../stacks/types';
|
||||
import { withTheme } from '../theme';
|
||||
import { showErrorAlert, isValidEmail } from '../lib/methods/helpers';
|
||||
import { useTheme } from '../theme';
|
||||
import { showErrorAlert } from '../lib/methods/helpers';
|
||||
import { events, logEvent } from '../lib/methods/helpers/log';
|
||||
import { IBaseScreen } from '../definitions';
|
||||
import sharedStyles from './Styles';
|
||||
|
||||
interface IForgotPasswordViewState {
|
||||
const schema = yup.object().shape({
|
||||
email: yup.string().email().required()
|
||||
});
|
||||
|
||||
interface ISubmit {
|
||||
email: string;
|
||||
invalidEmail: boolean;
|
||||
isFetching: boolean;
|
||||
}
|
||||
|
||||
type IForgotPasswordViewProps = IBaseScreen<OutsideParamList, 'ForgotPasswordView'>;
|
||||
const ForgotPasswordView = (): React.ReactElement => {
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { isValid }
|
||||
} = useForm<ISubmit>({ mode: 'onChange', resolver: yupResolver(schema) });
|
||||
|
||||
class ForgotPasswordView extends React.Component<IForgotPasswordViewProps, IForgotPasswordViewState> {
|
||||
static navigationOptions = ({ route }: IForgotPasswordViewProps) => ({
|
||||
title: route.params?.title ?? 'Rocket.Chat'
|
||||
});
|
||||
const [isFetching, setIsFetching] = useState(false);
|
||||
|
||||
state = {
|
||||
email: '',
|
||||
invalidEmail: true,
|
||||
isFetching: false
|
||||
};
|
||||
const navigation = useNavigation<StackNavigationProp<OutsideParamList, 'ForgotPasswordView'>>();
|
||||
const { params } = useRoute<RouteProp<OutsideParamList, 'ForgotPasswordView'>>();
|
||||
const { colors } = useTheme();
|
||||
|
||||
shouldComponentUpdate(nextProps: IForgotPasswordViewProps, nextState: IForgotPasswordViewState) {
|
||||
const { email, invalidEmail, isFetching } = this.state;
|
||||
const { theme } = this.props;
|
||||
if (nextProps.theme !== theme) {
|
||||
return true;
|
||||
}
|
||||
if (nextState.email !== email) {
|
||||
return true;
|
||||
}
|
||||
if (nextState.invalidEmail !== invalidEmail) {
|
||||
return true;
|
||||
}
|
||||
if (nextState.isFetching !== isFetching) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
title: params?.title ?? 'Rocket.Chat'
|
||||
});
|
||||
}, [navigation, params?.title]);
|
||||
|
||||
validate = (email: string) => {
|
||||
if (!isValidEmail(email)) {
|
||||
this.setState({ invalidEmail: true });
|
||||
return;
|
||||
}
|
||||
this.setState({ email, invalidEmail: false });
|
||||
};
|
||||
|
||||
resetPassword = async () => {
|
||||
logEvent(events.FP_FORGOT_PASSWORD);
|
||||
const { email, invalidEmail } = this.state;
|
||||
if (invalidEmail || !email) {
|
||||
const resetPassword = async ({ email }: ISubmit) => {
|
||||
if (!isValid) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
this.setState({ isFetching: true });
|
||||
logEvent(events.FP_FORGOT_PASSWORD);
|
||||
setIsFetching(true);
|
||||
const result = await Services.forgotPassword(email);
|
||||
if (result.success) {
|
||||
const { navigation } = this.props;
|
||||
navigation.pop();
|
||||
showErrorAlert(I18n.t('Forgot_password_If_this_email_is_registered'), I18n.t('Alert'));
|
||||
}
|
||||
|
|
@ -78,41 +61,38 @@ class ForgotPasswordView extends React.Component<IForgotPasswordViewProps, IForg
|
|||
const msg = (e.data && e.data.error) || I18n.t('There_was_an_error_while_action', { action: I18n.t('resetting_password') });
|
||||
showErrorAlert(msg, I18n.t('Alert'));
|
||||
}
|
||||
this.setState({ isFetching: false });
|
||||
setIsFetching(false);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { invalidEmail, isFetching } = this.state;
|
||||
const { theme } = this.props;
|
||||
return (
|
||||
<FormContainer testID='forgot-password-view'>
|
||||
<FormContainerInner>
|
||||
<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: colors.titleText }]}>
|
||||
{I18n.t('Forgot_password')}
|
||||
</Text>
|
||||
<ControlledFormTextInput
|
||||
name='email'
|
||||
control={control}
|
||||
autoFocus
|
||||
placeholder={I18n.t('Email')}
|
||||
keyboardType='email-address'
|
||||
returnKeyType='send'
|
||||
iconLeft='mail'
|
||||
onSubmitEditing={handleSubmit(resetPassword)}
|
||||
testID='forgot-password-view-email'
|
||||
containerStyle={sharedStyles.inputLastChild}
|
||||
/>
|
||||
<Button
|
||||
title={I18n.t('Reset_password')}
|
||||
type='primary'
|
||||
onPress={handleSubmit(resetPassword)}
|
||||
testID='forgot-password-view-submit'
|
||||
loading={isFetching}
|
||||
disabled={!isValid}
|
||||
/>
|
||||
</FormContainerInner>
|
||||
</FormContainer>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<FormContainer testID='forgot-password-view'>
|
||||
<FormContainerInner>
|
||||
<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: themes[theme].titleText }]}>
|
||||
{I18n.t('Forgot_password')}
|
||||
</Text>
|
||||
<FormTextInput
|
||||
autoFocus
|
||||
placeholder={I18n.t('Email')}
|
||||
keyboardType='email-address'
|
||||
returnKeyType='send'
|
||||
onChangeText={email => this.validate(email)}
|
||||
onSubmitEditing={this.resetPassword}
|
||||
testID='forgot-password-view-email'
|
||||
containerStyle={sharedStyles.inputLastChild}
|
||||
/>
|
||||
<Button
|
||||
title={I18n.t('Reset_password')}
|
||||
type='primary'
|
||||
onPress={this.resetPassword}
|
||||
testID='forgot-password-view-submit'
|
||||
loading={isFetching}
|
||||
disabled={invalidEmail}
|
||||
/>
|
||||
</FormContainerInner>
|
||||
</FormContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(ForgotPasswordView);
|
||||
export default ForgotPasswordView;
|
||||
|
|
|
|||
Loading…
Reference in New Issue