105 lines
2.8 KiB
JavaScript
105 lines
2.8 KiB
JavaScript
import { useNavigate, useSearchParams, Link } from 'react-router'
|
|
import { useForm } from 'react-hook-form'
|
|
import { ErrorMessage } from '@hookform/error-message'
|
|
import { isValidCPF } from '@brazilian-utils/brazilian-utils'
|
|
import { yupResolver } from '@hookform/resolvers/yup'
|
|
import { Card } from '~/layouts/auth/layout'
|
|
import { Control, Label, Input, Button, Error } from '~/components/form'
|
|
import { Heading } from '~/components/heading'
|
|
import Password from './_password'
|
|
import * as yup from 'yup'
|
|
|
|
yup.addMethod(yup.string, 'username', function (message) {
|
|
return this.test(
|
|
'username',
|
|
message,
|
|
(x) => isValidCPF(x) || yup.string().email().isValid(x),
|
|
)
|
|
})
|
|
|
|
export const schema = yup.object({
|
|
username: yup
|
|
.string()
|
|
.trim()
|
|
.lowercase()
|
|
.username('Deve ser um Email ou CPF válido')
|
|
.transform((x) => (isValidCPF(x) ? x.replace(/\D/g, '') : x))
|
|
.required('Digite um Email ou CPF'),
|
|
})
|
|
|
|
export default function Component() {
|
|
const [searchParams] = useSearchParams()
|
|
|
|
if (searchParams.get('username')) {
|
|
return <Password />
|
|
}
|
|
|
|
return <SignIn />
|
|
}
|
|
|
|
function SignIn() {
|
|
const [searchParams, setSearchParams] = useSearchParams()
|
|
const { handleSubmit, formState, setError, register } = useForm({
|
|
resolver: yupResolver(schema),
|
|
})
|
|
|
|
const onSubmit = async ({ username }) => {
|
|
setSearchParams((searchParams) => {
|
|
searchParams.set('username', username)
|
|
return searchParams
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<Heading>Digite o seu email ou cpf para continuar</Heading>
|
|
|
|
{/* Sign in */}
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-2.5">
|
|
<Control
|
|
className="space-y-0.5"
|
|
aria-invalid={'username' in formState.errors}
|
|
>
|
|
<Label aria-required={true}>Email ou CPF</Label>
|
|
<Input
|
|
className="w-full"
|
|
autoFocus={true}
|
|
{...register('username')}
|
|
/>
|
|
<ErrorMessage
|
|
errors={formState.errors}
|
|
name="username"
|
|
render={({ message }) => <Error>{message}</Error>}
|
|
/>
|
|
</Control>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full"
|
|
isLoading={formState.isSubmitting}
|
|
>
|
|
Continuar
|
|
</Button>
|
|
</form>
|
|
|
|
<div className="flex justify-center items-center gap-4">
|
|
<span className="flex-1 h-px bg-yellow-secondary dark:bg-gray-700" />
|
|
<span>ou</span>
|
|
<span className="flex-1 h-px bg-yellow-secondary dark:bg-gray-700" />
|
|
</div>
|
|
|
|
<Button
|
|
as={Link}
|
|
to={{
|
|
pathname: './passcode',
|
|
search: searchParams.toString(),
|
|
}}
|
|
relative="path"
|
|
className="flex justify-center items-center !bg-yellow-primary w-full"
|
|
>
|
|
Entrar com código de acesso
|
|
</Button>
|
|
</Card>
|
|
)
|
|
}
|