84 lines
3 KiB
TypeScript
84 lines
3 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { Actions, State, useStoreActions, useStoreState } from 'easy-peasy';
|
||
|
|
import { ApplicationState } from '@/state/types';
|
||
|
|
import { Form, Formik, FormikActions } from 'formik';
|
||
|
|
import * as Yup from 'yup';
|
||
|
|
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||
|
|
import Field from '@/components/elements/Field';
|
||
|
|
import { httpErrorToHuman } from '@/api/http';
|
||
|
|
|
||
|
|
interface Values {
|
||
|
|
email: string;
|
||
|
|
password: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const schema = Yup.object().shape({
|
||
|
|
email: Yup.string().email().required(),
|
||
|
|
password: Yup.string().required('You must provide your current account password.'),
|
||
|
|
});
|
||
|
|
|
||
|
|
export default () => {
|
||
|
|
const user = useStoreState((state: State<ApplicationState>) => state.user.data);
|
||
|
|
const updateEmail = useStoreActions((state: Actions<ApplicationState>) => state.user.updateUserEmail);
|
||
|
|
|
||
|
|
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
|
||
|
|
|
||
|
|
const submit = (values: Values, { resetForm, setSubmitting }: FormikActions<Values>) => {
|
||
|
|
clearFlashes('account:email');
|
||
|
|
|
||
|
|
updateEmail({ ...values })
|
||
|
|
.then(() => addFlash({
|
||
|
|
type: 'success',
|
||
|
|
key: 'account:email',
|
||
|
|
message: 'Your primary email has been updated.',
|
||
|
|
}))
|
||
|
|
.catch(error => addFlash({
|
||
|
|
type: 'error',
|
||
|
|
key: 'account:email',
|
||
|
|
title: 'Error',
|
||
|
|
message: httpErrorToHuman(error),
|
||
|
|
}))
|
||
|
|
.then(() => {
|
||
|
|
resetForm();
|
||
|
|
setSubmitting(false);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Formik
|
||
|
|
onSubmit={submit}
|
||
|
|
validationSchema={schema}
|
||
|
|
initialValues={{ email: user!.email, password: '' }}
|
||
|
|
>
|
||
|
|
{
|
||
|
|
({ isSubmitting, isValid }) => (
|
||
|
|
<React.Fragment>
|
||
|
|
<SpinnerOverlay large={true} visible={isSubmitting}/>
|
||
|
|
<Form className={'m-0'}>
|
||
|
|
<Field
|
||
|
|
id={'current_email'}
|
||
|
|
type={'email'}
|
||
|
|
name={'email'}
|
||
|
|
label={'Email'}
|
||
|
|
/>
|
||
|
|
<div className={'mt-6'}>
|
||
|
|
<Field
|
||
|
|
id={'confirm_password'}
|
||
|
|
type={'password'}
|
||
|
|
name={'password'}
|
||
|
|
label={'Confirm Password'}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className={'mt-6'}>
|
||
|
|
<button className={'btn btn-sm btn-primary'} disabled={isSubmitting || !isValid}>
|
||
|
|
Update Email
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</Form>
|
||
|
|
</React.Fragment>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</Formik>
|
||
|
|
);
|
||
|
|
};
|