popup-forms-react/src/components/forms/FormLogin.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 Link from '../controls/Link'
import { FormRegistration } from './FormRegistration'
import { FormPasswordRecovery } from './FormPasswordRecovery';
import { SubmitFormResult } from '../SubmitFormResult';

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

    useEffect(() => {
        if (setPopupTitle) { setPopupTitle('Sign in the restricted area') }
    })

    const initialValues = {
        email: '',
        password: '',
        remember_me: false,
    }

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

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

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

    const goPasswordRecovery = () => {
        setPopupOpened(false)
        setTimeout(() => {
            setPopupContent(<FormPasswordRecovery 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="sign-in-form">
                            <div className="p-3">
                                <FormikControl
                                    control='string'
                                    name='email'
                                    label='Email'
                                    placeholder='Enter email'
                                />
                                <FormikControl
                                    control='password'
                                    name='password'
                                    label='Password'
                                    placeholder='Enter password'
                                />
                                <div className="flex xs:flex-row justify-between items-center xs:items-center">
                                    <div>
                                        <FormikControl
                                            control='checkbox'
                                            name='remember_me'
                                            label='Remember me'
                                        />
                                    </div>
                                    <Link action={goPasswordRecovery} className="block px-2 mt-6 mb-4 leading-8 text-lg">Forgot password?</Link>
                                </div>
                            </div>
                            <div className="px-2 pt-4 pb-1 mb-0 bg-primary-200 border-t sm:rounded-b-lg">
                                <ButtonPrimary type="submit" text="Sign In" disabled={!formik.isValid || !formik.dirty} />
                                <div className="my-3">
                                    <ButtonSecondary type="button" text="Have no account? - Create" action={goRegistration} />
                                </div>
                            </div>
                            <Persist name="login-form" isSessionStorage />
                        </Form>
                    </div>
                )
            }}
        </Formik>
    )
}

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