|
- 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 { ServicePolicy } from '../ServicePolicy'
- import { SubmitFormResult } from '../SubmitFormResult';
-
- export const FormRegistration = (props) => {
- const { setPopupTitle, setPopupContent, setPopupOpened, close } = 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, val => `Minimum ${val.min} symbols`),
- password_confirm: Yup.string()
- .required('Required')
- .oneOf([Yup.ref('password'), null], 'Not matching with password'),
- userconsent: Yup.boolean()
- .oneOf([true], 'Required'),
- })
-
- 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);
- }
-
- const goServicePolicy = () => {
- setPopupOpened(false)
- setTimeout(() => {
- setPopupContent(<ServicePolicy 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="registration-form">
- <div className="p-3">
- <FormikControl
- control='string'
- name='email'
- label='Email'
- placeholder='Enter valid email'
- required
- aria-required="true"
- aria-invalid={!!formik.errors.email}
- />
- <FormikControl
- control='password'
- name='password'
- label='Password'
- placeholder='Choose a strong password'
- required
- aria-required="true"
- aria-invalid={!!formik.errors.password}
- />
- <FormikControl
- control='password'
- name='password_confirm'
- label='Confirm 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={goServicePolicy}
- 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>
- <Persist name="registration-form" isSessionStorage />
- </Form>
- </div>
- )
- }}
- </Formik>
- )
- }
-
- FormRegistration.propTypes = {
- setPopupTitle: PropTypes.func,
- setPopupContent: PropTypes.func,
- setPopupOpened: PropTypes.func,
- close: PropTypes.func,
- }
|