Rocket.Chat.ReactNative/app/views/ForgotPasswordView.tsx

99 lines
3.0 KiB
TypeScript

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 { ControlledFormTextInput } from '../containers/TextInput';
import I18n from '../i18n';
import { Services } from '../lib/services';
import { OutsideParamList } from '../stacks/types';
import { useTheme } from '../theme';
import { showErrorAlert } from '../lib/methods/helpers';
import { events, logEvent } from '../lib/methods/helpers/log';
import sharedStyles from './Styles';
const schema = yup.object().shape({
email: yup.string().email().required()
});
interface ISubmit {
email: string;
}
const ForgotPasswordView = (): React.ReactElement => {
const {
control,
handleSubmit,
formState: { isValid }
} = useForm<ISubmit>({ mode: 'onChange', resolver: yupResolver(schema) });
const [isFetching, setIsFetching] = useState(false);
const navigation = useNavigation<StackNavigationProp<OutsideParamList, 'ForgotPasswordView'>>();
const { params } = useRoute<RouteProp<OutsideParamList, 'ForgotPasswordView'>>();
const { colors } = useTheme();
useLayoutEffect(() => {
navigation.setOptions({
title: params?.title ?? 'Rocket.Chat'
});
}, [navigation, params?.title]);
const resetPassword = async ({ email }: ISubmit) => {
if (!isValid) {
return;
}
try {
logEvent(events.FP_FORGOT_PASSWORD);
setIsFetching(true);
const result = await Services.forgotPassword(email);
if (result.success) {
navigation.pop();
showErrorAlert(I18n.t('Forgot_password_If_this_email_is_registered'), I18n.t('Alert'));
}
} catch (e: any) {
logEvent(events.FP_FORGOT_PASSWORD_F);
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'));
}
setIsFetching(false);
};
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>
);
};
export default ForgotPasswordView;