95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { translate } from '../../i18n/i18n';
|
|
import { string } from 'yup';
|
|
import { useToast, Flex } from 'native-base';
|
|
import TextFormField from '../UI/TextFormField';
|
|
import ButtonBase from '../UI/ButtonBase';
|
|
import { Sms } from 'iconsax-react-native';
|
|
|
|
interface ChangeEmailFormProps {
|
|
onSubmit: (oldEmail: string, newEmail: string) => Promise<string>;
|
|
}
|
|
|
|
const validationSchemas = {
|
|
email: string().email('Invalid email').required('Email is required'),
|
|
};
|
|
|
|
const ChangeEmailForm = ({ onSubmit }: ChangeEmailFormProps) => {
|
|
const [formData, setFormData] = React.useState({
|
|
oldEmail: {
|
|
value: '',
|
|
error: null as string | null,
|
|
},
|
|
newEmail: {
|
|
value: '',
|
|
error: null as string | null,
|
|
},
|
|
});
|
|
|
|
const toast = useToast();
|
|
|
|
return (
|
|
<Flex style={{ width: '100%', maxWidth: 420 }}>
|
|
<TextFormField
|
|
style={{ marginVertical: 10 }}
|
|
isRequired
|
|
icon={(size, color) => <Sms size={size} color={color} variant="Bold" />}
|
|
placeholder={translate('oldEmail')}
|
|
value={formData.oldEmail.value}
|
|
error={formData.oldEmail.error}
|
|
onChangeText={(t) => {
|
|
let error: null | string = null;
|
|
validationSchemas.email
|
|
.validate(t)
|
|
.catch((e) => (error = e.message))
|
|
.finally(() => {
|
|
setFormData({ ...formData, oldEmail: { value: t, error } });
|
|
});
|
|
}}
|
|
/>
|
|
<TextFormField
|
|
style={{ marginVertical: 10 }}
|
|
isRequired
|
|
autoComplete="off"
|
|
icon={(size, color) => <Sms size={size} color={color} variant="Bold" />}
|
|
placeholder={translate('newEmail')}
|
|
value={formData.newEmail.value}
|
|
error={formData.newEmail.error}
|
|
onChangeText={(t) => {
|
|
let error: null | string = null;
|
|
validationSchemas.email
|
|
.validate(t)
|
|
.catch((e) => (error = e.message))
|
|
.finally(() => {
|
|
setFormData({ ...formData, newEmail: { value: t, error } });
|
|
});
|
|
}}
|
|
/>
|
|
<ButtonBase
|
|
isDisabled={
|
|
formData.oldEmail.error !== null ||
|
|
formData.newEmail.error !== null ||
|
|
formData.oldEmail.value === '' ||
|
|
formData.newEmail.value === ''
|
|
}
|
|
type={'filled'}
|
|
title={translate('submitBtn')}
|
|
style={{ marginVertical: 10 }}
|
|
onPress={async () => {
|
|
try {
|
|
const resp = await onSubmit(
|
|
formData.oldEmail.value,
|
|
formData.newEmail.value
|
|
);
|
|
toast.show({ description: resp });
|
|
} catch (e) {
|
|
toast.show({ description: e as string });
|
|
}
|
|
}}
|
|
/>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default ChangeEmailForm;
|