misc_pterodactyl-panel/resources/scripts/components/auth/ResetPasswordContainer.tsx

101 lines
3.9 KiB
TypeScript
Raw Normal View History

2022-11-25 20:25:03 +00:00
import { useState } from 'react';
import { Link, useParams } from 'react-router-dom';
2019-06-16 23:57:57 +00:00
import performPasswordReset from '@/api/auth/performPasswordReset';
import { httpErrorToHuman } from '@/api/http';
2019-06-22 20:53:41 +00:00
import LoginFormContainer from '@/components/auth/LoginFormContainer';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { Formik, FormikHelpers } from 'formik';
import { object, ref, string } from 'yup';
import Field from '@/components/elements/Field';
import Input from '@/components/elements/Input';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
2019-06-16 23:57:57 +00:00
interface Values {
password: string;
passwordConfirmation: string;
}
2022-11-25 20:25:03 +00:00
function ResetPasswordContainer() {
const [email, setEmail] = useState('');
2019-06-16 23:57:57 +00:00
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
2019-06-16 23:57:57 +00:00
2022-06-26 20:14:32 +00:00
const parsed = new URLSearchParams(location.search);
if (email.length === 0 && parsed.get('email')) {
setEmail(parsed.get('email') || '');
2019-06-16 23:57:57 +00:00
}
2022-11-25 20:25:03 +00:00
const params = useParams<'token'>();
const submit = ({ password, passwordConfirmation }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes();
2022-11-25 20:25:03 +00:00
performPasswordReset(email, { token: params.token ?? '', password, passwordConfirmation })
.then(() => {
2022-06-26 19:30:05 +00:00
// @ts-expect-error this is valid
window.location = '/';
})
2022-11-25 20:25:03 +00:00
.catch(error => {
console.error(error);
setSubmitting(false);
addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
});
2019-06-16 23:57:57 +00:00
};
return (
<Formik
onSubmit={submit}
initialValues={{
password: '',
passwordConfirmation: '',
}}
validationSchema={object().shape({
password: string()
.required('A new password is required.')
.min(8, 'Your new password should be at least 8 characters in length.'),
passwordConfirmation: string()
.required('Your new password does not match.')
.oneOf([ref('password'), null], 'Your new password does not match.'),
})}
>
{({ isSubmitting }) => (
<LoginFormContainer title={'Reset Password'} css={tw`w-full flex`}>
<div>
<label>Email</label>
<Input value={email} isLight disabled />
</div>
<div css={tw`mt-6`}>
<Field
light
label={'New Password'}
name={'password'}
type={'password'}
description={'Passwords must be at least 8 characters in length.'}
/>
</div>
<div css={tw`mt-6`}>
<Field light label={'Confirm New Password'} name={'passwordConfirmation'} type={'password'} />
</div>
<div css={tw`mt-6`}>
<Button size={'xlarge'} type={'submit'} disabled={isSubmitting} isLoading={isSubmitting}>
Reset Password
</Button>
</div>
<div css={tw`mt-6 text-center`}>
<Link
to={'/auth/login'}
css={tw`text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600`}
>
Return to Login
</Link>
</div>
</LoginFormContainer>
)}
</Formik>
);
2022-11-25 20:25:03 +00:00
}
export default ResetPasswordContainer;