|
- 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,
- }
|