feat: back password reset email (#277)

2023-09-21 14:29:09 +02:00
parent 1ca4633360
commit 8155549031
17 changed files with 3751 additions and 3675 deletions
@@ -0,0 +1,73 @@
+import React from 'react';
+import { translate } from '../../i18n/i18n';
+import { string } from 'yup';
+import { FormControl, Input, Stack, WarningOutlineIcon, Box, Button, useToast } from 'native-base';
+
+interface ForgotPasswordFormProps {
+	onSubmit: (email: string) => Promise<string>;
+}
+
+const validationSchemas = {
+	email: string().email('Invalid email').required('Email is required'),
+};
+
+const ForgotPasswordForm = ({ onSubmit }: ForgotPasswordFormProps) => {
+	const [formData, setFormData] = React.useState({
+		newEmail: {
+			value: '',
+			error: null as string | null,
+		},
+	});
+
+	const [submittingForm, setSubmittingForm] = React.useState(false);
+	const toast = useToast();
+
+	return (
+		<Box>
+			<Stack mx="4" style={{ width: '80%', maxWidth: 400 }}>
+				<FormControl isRequired isInvalid={formData.newEmail.error !== null}>
+					<FormControl.Label>{translate('newEmail')}</FormControl.Label>
+					<Input
+						isRequired
+						type="text"
+						placeholder={translate('newEmail')}
+						value={formData.newEmail.value}
+						onChangeText={(t) => {
+							let error: null | string = null;
+							validationSchemas.email
+								.validate(t)
+								.catch((e) => (error = e.message))
+								.finally(() => {
+									setFormData({ ...formData, newEmail: { value: t, error } });
+								});
+						}}
+					/>
+					<FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
+						{formData.newEmail.error}
+					</FormControl.ErrorMessage>
+
+					<Button
+						style={{ marginTop: 10 }}
+						isLoading={submittingForm}
+						isDisabled={formData.newEmail.error !== null}
+						onPress={async () => {
+							setSubmittingForm(true);
+							try {
+								const resp = await onSubmit(formData.newEmail.value);
+								toast.show({ description: resp });
+							} catch (e) {
+								toast.show({ description: e as string });
+							} finally {
+								setSubmittingForm(false);
+							}
+						}}
+					>
+						{translate('submitBtn')}
+					</Button>
+				</FormControl>
+			</Stack>
+		</Box>
+	);
+};
+
+export default ForgotPasswordForm;