import React from 'react'; import { UseFormMethods } from 'react-hook-form'; import { useStepMachine } from 'ui/step-machine'; import { ClipLoader } from 'react-spinners'; import { AuthError, Values } from './types'; import machine, { Step } from './stepMachine'; import Confirm from './Pages/Confirm'; import Change from './Pages/Change'; import Reset from './Pages/Reset'; interface Props { formProps: UseFormMethods<Values>; onForgotPassword: (email: string) => Promise<any>; onForgotPasswordSubmit: (values: any) => Promise<unknown>; error?: AuthError; submitError?: AuthError; submitting: boolean; } const Recovery = ({ formProps: { errors, control, handleSubmit }, onForgotPassword, onForgotPasswordSubmit, error, submitError, submitting, }: Props) => { const { step, next, previous, handleSubmitStep } = useStepMachine(machine, { onSubit: onForgotPasswordSubmit, }); return ( <form noValidate onSubmit={handleSubmit(async (data) => { if (step === Step.RESET) { const { error } = await onForgotPassword(data.emailAddress); if (!error) { handleSubmitStep(data); } return null; } return handleSubmitStep(data); })} > <Choose> <When condition={step === Step.RESET}> <Reset error={error} errors={errors} control={control} submitting={submitting} /> </When> <When condition={step === Step.CONFIRM}> <Confirm errors={errors} control={control} onPrevious={previous} /> </When> <When condition={step === Step.CHANGE}> <Change error={submitError} onForgotPasswordSubmit={onForgotPasswordSubmit} submitting={submitting} errors={errors} control={control} onNext={next} onPrevious={previous} /> </When> <When condition={step === Step.SUBMIT}> <ClipLoader /> </When> </Choose> </form> ); }; export default Recovery;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter