misc_pterodactyl-panel/resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx

79 lines
2.9 KiB
TypeScript
Raw Normal View History

2019-06-25 04:43:46 +00:00
import React from 'react';
import { Actions, State, useStoreActions, useStoreState } from 'easy-peasy';
2020-03-19 04:32:07 +00:00
import { Form, Formik, FormikHelpers } from 'formik';
2019-06-25 04:43:46 +00:00
import * as Yup from 'yup';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import Field from '@/components/elements/Field';
import { httpErrorToHuman } from '@/api/http';
import { ApplicationStore } from '@/state';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
2019-06-25 04:43:46 +00:00
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<ApplicationStore>) => state.user.data);
const updateEmail = useStoreActions((state: Actions<ApplicationStore>) => state.user.updateUserEmail);
2019-06-25 04:43:46 +00:00
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
2019-06-25 04:43:46 +00:00
2020-03-19 04:32:07 +00:00
const submit = (values: Values, { resetForm, setSubmitting }: FormikHelpers<Values>) => {
2019-06-25 04:43:46 +00:00
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),
})
)
2019-06-25 04:43:46 +00:00
.then(() => {
resetForm();
setSubmitting(false);
});
};
return (
<Formik onSubmit={submit} validationSchema={schema} initialValues={{ email: user!.email, password: '' }}>
{({ isSubmitting, isValid }) => (
<React.Fragment>
<SpinnerOverlay size={'large'} visible={isSubmitting} />
<Form css={tw`m-0`}>
<Field id={'current_email'} type={'email'} name={'email'} label={'Email'} />
<div css={tw`mt-6`}>
2019-06-25 04:43:46 +00:00
<Field
id={'confirm_password'}
type={'password'}
name={'password'}
label={'Confirm Password'}
2019-06-25 04:43:46 +00:00
/>
</div>
<div css={tw`mt-6`}>
<Button size={'small'} disabled={isSubmitting || !isValid}>
Update Email
</Button>
</div>
</Form>
</React.Fragment>
)}
2019-06-25 04:43:46 +00:00
</Formik>
);
};