popup-forms-react/src/components/forms/FormPasswordRecovery.jsx

import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import { Formik, Form } from 'formik'
import { Persist } from 'formik-persist'
import * as Yup from 'yup'
import FormikControl from '../FormikControls'
import ButtonPrimary from '../controls/ButtonPrimary'
import ButtonSecondary from '../controls/ButtonSecondary'
import { FormLogin } from './FormLogin'
import { SubmitFormResult } from '../SubmitFormResult';

export const FormPasswordRecovery = (props) => {
    const { setPopupTitle, setPopupContent, setPopupOpened, close } = props

    useEffect(() => {
        if (setPopupTitle) { setPopupTitle('Forgotten password recovery') }
    })

    const initialValues = {
        email: '',
    }

    const validationSchema = Yup.object({
        email: Yup.string()
            .required('Required')
            .email('Must be a valid email address'),
    })

    const onSubmit = values => {
        setPopupOpened(false)
        setTimeout(() => {
            setPopupContent(<SubmitFormResult setPopupTitle={setPopupTitle} data={values} />)
            setPopupOpened(true)
        }, 200);
    }

    const goLogin = () => {
        setPopupOpened(false)
        setTimeout(() => {
            setPopupContent(<FormLogin setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} close={close} />)
            setPopupOpened(true)
        }, 200);
    }

    return (
        <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={onSubmit}
        >
            {formik => {
                return (
                    <div className="overflow-y-auto max-h-screen-80">
                        <Form className="password-recovery-form">
                            <div className="p-3">
                                <FormikControl
                                    control='string'
                                    name='email'
                                    label='Email'
                                    placeholder='Enter email'
                                />
                            </div>
                            <div className="px-2 pt-4 pb-1 mb-0 bg-primary-200 border-t sm:rounded-b-lg">
                                <ButtonPrimary type="submit" text="Recover" disabled={!formik.isValid || !formik.dirty} />
                                <div className="my-3">
                                    <ButtonSecondary type="button" text="Go to Sign In" action={goLogin} />
                                </div>
                            </div>
                            <Persist name="password-recovery-form" isSessionStorage />
                        </Form>
                    </div>
                )
            }}
        </Formik>
    )
}

FormPasswordRecovery.propTypes = {
    setPopupTitle: PropTypes.func,
    setPopupContent: PropTypes.func,
    setPopupOpened: PropTypes.func,
    close: PropTypes.func,
}