index.jsx

import { SignInForm } from '@/pages/SignIn/components'
import { Logo } from '@/components'
import missionLifeLogo from '@/assets/images/logo-white.svg'
import classNames from 'classnames'
import { ToastContainer } from 'react-toastify'
import { useLogic } from '@/pages/SignIn/hooks'

export const SignIn = () => {
  const { modalIsOpen, loading, login, handleModalIsOpen } = useLogic()

  return (
    <main className='flex flex-col justify-center items-center h-full w-full'>
      <ToastContainer />
      <div className={classNames('flex flex-col gap-4 items-center w-full md:w-[450px]', { blur: modalIsOpen })}>
        <Logo src={missionLifeLogo} alt='Logo Mission Life' className='max-w-[250px]' />
        <SignInForm loading={loading} login={login} handleModalIsOpen={handleModalIsOpen} />
      </div>
    </main>
  )
}

SignInForm.jsx

import React from 'react'
import { Button, FieldMessage, TextField } from '@/components/Form'
import ReCAPTCHA from 'react-google-recaptcha'
import { useForm } from '@/pages/SignIn/hooks'

export const SignInForm = ({ loading, handleModalIsOpen }) => {
  const { handleSubmit, handleChange, setFieldValue, values, errors } = useForm({
    onSubmit: values => {
      console.log({ values })
      // const { affiliateId, recaptcha, password } = values
      // login({
      //   // cpf: affiliateId,
      //   affiliateId,
      //   recaptcha,
      //   password,
      // })
    },
  })

  return (
    <form className='flex flex-col glass-card rounded-2 gap-3 w-full p-3' onSubmit={handleSubmit}>
      <TextField
        label='CPF, CNPJ ou ID Afiliado'
        name='affiliateId'
        placeholder='Ex: 012.345.678-90'
        value={values.affiliateId}
        errorMessage={errors.affiliateId}
        onChange={handleChange}
        isDisabled={loading}
        noMargins
      />
      <div className='flex flex-col gap-1 items-end'>
        <TextField
          label='Senha de Acesso'
          name='password'
          type='password'
          placeholder='******'
          value={values.password}
          errorMessage={errors.password}
          onChange={handleChange}
          isDisabled={loading}
          className='w-full'
          noMargins
        />
        <a href='#' onClick={handleModalIsOpen} className='text-sm text-white underline'>
          Esqueceu sua senha? Clique aqui!
        </a>
      </div>

      <div className='flex flex-col justify-center items-center'>
        <ReCAPTCHA
          name='recaptcha'
          render='explicit'
          onChange={value => setFieldValue('recaptcha', value)}
          sitekey={import.meta.env.VITE_RECAPTCHA_SITE_KEY}
        />
        {errors.recaptcha && <FieldMessage message={errors.recaptcha} className='text-red-500 ' />}
      </div>
      <Button text='Entrar' type='submit' isDisabled={loading} className='w-full text-black' />
    </form>
  )
}

useApi.js

import { useApi as AppUseApi } from '@/hooks'
import httpClient from '@/utils/httpClient'
import { getEndpoint } from '@/endpoints'

export function useApi() {
  const { data, loading, makeRequest, error } = AppUseApi(values => {
    const { route, method } = getEndpoint('signIn')
    return httpClient[method](route, values)
  })

  return {
    data,
    error,
    loading,
    login: makeRequest,
  }
}

useForm.js

import * as Yup from 'yup'
import { useFormik } from 'formik'
import { useTranslation } from 'react-i18next'

export const useForm = ({ onSubmit }) => {
  const { t } = useTranslation()

  const Schema = Yup.object({
    affiliateId: Yup.string().required(t('global.validation.required')),
    password: Yup.string().required(t('global.validation.required')),
    recaptcha: Yup.string().required(t('global.validation.required')),
  })

  return useFormik({
    initialValues: {
      affiliateId: '',
      password: '',
      recaptcha: '',
    },
    onSubmit,
    validationSchema: Schema,
    validateOnBlur: false,
    validateOnChange: false,
  })
}

useLogic.js

import { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { useAuth } from '@/contexts'
import { useApi } from '@/pages/SignIn/hooks/useApi'
import Swal from 'sweetalert2'

export const useLogic = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false)
  const navigate = useNavigate()
  const location = useLocation()
  const { token, setToken } = useAuth()
  const { data, error, loading, login } = useApi()

  useEffect(() => {
    if (token) navigate('/dashboard')
  }, [token])

  useEffect(() => {
    if (!data) return
    setToken(data.token)
    const from = location.state?.from?.pathname || '/dashboard'
    navigate(from, { replace: true })
  }, [data])

  useEffect(() => {
    if (!error) return
    Swal.fire({
      title: 'Ops, dados Incorretos.',
      text: 'Verifique seus dados e tente novamente',
      icon: 'error',
      confirmButtonText: 'OK',
    })
  }, [error])

  const handleModalIsOpen = e => {
    e.preventDefault()
    setModalIsOpen(!modalIsOpen)
  }

  return {
    modalIsOpen,
    loading,
    handleModalIsOpen,
  }
}