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

112 lines
4.2 KiB
TypeScript
Raw Normal View History

import React, { useState } from 'react';
2019-06-16 23:57:57 +00:00
import { RouteComponentProps } from 'react-router';
import { parse } from 'query-string';
import { Link } from 'react-router-dom';
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;
}
export default ({ match, location }: RouteComponentProps<{ token: string }>) => {
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
const parsed = parse(location.search);
if (email.length === 0 && parsed.email) {
setEmail(parsed.email as string);
2019-06-16 23:57:57 +00:00
}
const submit = ({ password, passwordConfirmation }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes();
performPasswordReset(email, { token: match.params.token, password, passwordConfirmation })
.then(() => {
// @ts-ignore
window.location = '/';
})
.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.')
// @ts-ignore
2020-07-05 01:30:50 +00:00
.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>
);
2019-06-16 23:57:57 +00:00
};