This is just a technology testing project based on Create React App and TailwindCSS
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

113 linhas
4.4KB

  1. import React, { useEffect } from 'react'
  2. import PropTypes from 'prop-types'
  3. import { Formik, Form } from 'formik'
  4. import { Persist } from 'formik-persist'
  5. import * as Yup from 'yup'
  6. import FormikControl from '../FormikControls'
  7. import ButtonPrimary from '../controls/ButtonPrimary'
  8. import ButtonSecondary from '../controls/ButtonSecondary'
  9. import Link from '../controls/Link'
  10. import { FormRegistration } from './FormRegistration'
  11. import { FormPasswordRecovery } from './FormPasswordRecovery';
  12. import { SubmitFormResult } from '../SubmitFormResult';
  13. export const FormLogin = (props) => {
  14. const { setPopupTitle, setPopupContent, setPopupOpened, close } = props
  15. useEffect(() => {
  16. if (setPopupTitle) { setPopupTitle('Sign in the restricted area') }
  17. })
  18. const initialValues = {
  19. email: '',
  20. password: '',
  21. remember_me: false,
  22. }
  23. const validationSchema = Yup.object({
  24. email: Yup.string()
  25. .required('Required')
  26. .email('Must be a valid email address'),
  27. password: Yup.string()
  28. .required('Required'),
  29. })
  30. const onSubmit = values => {
  31. setPopupOpened(false)
  32. setTimeout(() => {
  33. setPopupContent(<SubmitFormResult setPopupTitle={setPopupTitle} data={values} />)
  34. setPopupOpened(true)
  35. }, 200);
  36. }
  37. const goRegistration = () => {
  38. setPopupOpened(false)
  39. setTimeout(() => {
  40. setPopupContent(<FormRegistration setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} close={close} />)
  41. setPopupOpened(true)
  42. }, 200);
  43. }
  44. const goPasswordRecovery = () => {
  45. setPopupOpened(false)
  46. setTimeout(() => {
  47. setPopupContent(<FormPasswordRecovery setPopupTitle={setPopupTitle} setPopupContent={setPopupContent} setPopupOpened={setPopupOpened} close={close} />)
  48. setPopupOpened(true)
  49. }, 200);
  50. }
  51. return (
  52. <Formik
  53. initialValues={initialValues}
  54. validationSchema={validationSchema}
  55. onSubmit={onSubmit}
  56. >
  57. {formik => {
  58. return (
  59. <div className="overflow-y-auto max-h-screen-80">
  60. <Form className="sign-in-form">
  61. <div className="p-3">
  62. <FormikControl
  63. control='string'
  64. name='email'
  65. label='Email'
  66. placeholder='Enter email'
  67. />
  68. <FormikControl
  69. control='password'
  70. name='password'
  71. label='Password'
  72. placeholder='Enter password'
  73. />
  74. <div className="flex xs:flex-row justify-between items-center xs:items-center">
  75. <div>
  76. <FormikControl
  77. control='checkbox'
  78. name='remember_me'
  79. label='Remember me'
  80. />
  81. </div>
  82. <Link action={goPasswordRecovery} className="block px-2 mt-6 mb-4 leading-8 text-lg">Forgot password?</Link>
  83. </div>
  84. </div>
  85. <div className="px-2 pt-4 pb-1 mb-0 bg-primary-200 border-t sm:rounded-b-lg">
  86. <ButtonPrimary type="submit" text="Sign In" disabled={!formik.isValid || !formik.dirty} />
  87. <div className="my-3">
  88. <ButtonSecondary type="button" text="Have no account? - Create" action={goRegistration} />
  89. </div>
  90. </div>
  91. <Persist name="login-form" isSessionStorage />
  92. </Form>
  93. </div>
  94. )
  95. }}
  96. </Formik>
  97. )
  98. }
  99. FormLogin.propTypes = {
  100. setPopupTitle: PropTypes.func,
  101. setPopupContent: PropTypes.func,
  102. setPopupOpened: PropTypes.func,
  103. close: PropTypes.func,
  104. }