import React, { useState } from 'react'; 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'; import LoginFormContainer from '@/components/auth/LoginFormContainer'; import { Actions, useStoreActions } from 'easy-peasy'; import { ApplicationStore } from '@/state'; import Spinner from '@/components/elements/Spinner'; 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'; interface Values { password: string; passwordConfirmation: string; } export default ({ match, location }: RouteComponentProps<{ token: string }>) => { const [ email, setEmail ] = useState(''); const { clearFlashes, addFlash } = useStoreActions((actions: Actions) => actions.flashes); const parsed = parse(location.search); if (email.length === 0 && parsed.email) { setEmail(parsed.email as string); } const submit = ({ password, passwordConfirmation }: Values, { setSubmitting }: FormikHelpers) => { 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) }); }); }; return ( {({ isSubmitting }) => (
Return to Login
)}
); };