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

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

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

    useEffect(() => {
        if (setPopupTitle) { setPopupTitle('New user registration') }
    })

    const initialValues = {
        email: '',
        password: '',
        password_confirm: '',
        userconsent: false,
    }

    const validationSchema = Yup.object({
        email: Yup.string()
            .required('Required')
            .email('Must be a valid email address'),
        password: Yup.string()
            .required('Required')
            .min(8, 'Minimum 8 symbols'),
        password_confirm: Yup.string()
            .required('Required')
            .oneOf([Yup.ref('password'), null], 'Not matching with password'),
        userconsent: Yup.boolean()
            .oneOf([true], 'Required'),
    })

    const onSubmit = async values => {
        console.log('Form data', values)
    }

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

    return (
        <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={onSubmit}
        >
            {formik => {
                return (
                    <div className="overflow-y-auto max-h-screen-75">
                        <Form>
                            <div className="p-3">
                                <FormikControl
                                    control='string'
                                    name='email'
                                    label='E-mail'
                                    placeholder='Enter e-mail'
                                    required
                                    aria-required="true"
                                    aria-invalid={!!formik.errors.email}
                                />
                                <FormikControl
                                    control='password'
                                    name='password'
                                    label='Password'
                                    placeholder='Enter password'
                                    required
                                    aria-required="true"
                                    aria-invalid={!!formik.errors.password}
                                />
                                <FormikControl
                                    control='password'
                                    name='password_confirm'
                                    label='Conform password'
                                    placeholder='Enter same password'
                                    required
                                    aria-required="true"
                                    aria-invalid={!!formik.errors.password_confirm}
                                />
                                <FormikControl
                                    control='userconsent'
                                    name='userconsent'
                                    label_template='Accept #Service Policy#'
                                    label_action={() => { alert('Policy text here') }}
                                    required
                                    aria-required="true"
                                    aria-invalid={!!formik.errors.userconsent}
                                />
                            </div>
                            <div className="px-2 pt-4 pb-1 mb-0 bg-primary-200 border-t rounded-b-lg">
                                <ButtonPrimary type="submit" text="Register" disabled={!formik.isValid || !formik.dirty} />
                                <div className="my-3">
                                    <ButtonSecondary type="button" text="Have account? - Sign In" action={goLogin} />
                                </div>
                            </div>
                        </Form>
                    </div>
                )
            }}
        </Formik>
    )
}

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