102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
import type { Route } from './+types/home'
|
|
|
|
import { isValidCPF } from '@brazilian-utils/brazilian-utils'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { useForm } from 'react-hook-form'
|
|
import { z } from 'zod'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
|
|
import logo from './logo.svg'
|
|
|
|
const cpf = z.string().refine(isValidCPF, { message: 'CPF inválido' })
|
|
const email = z.string().email({ message: 'Email inválido' })
|
|
|
|
const schema = z.object({
|
|
username: z.union([cpf, email]),
|
|
password: z.string()
|
|
})
|
|
|
|
type Schema = z.infer<typeof schema>
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [
|
|
{ title: 'EDUSEG®' },
|
|
{ name: 'description', content: 'Welcome to React Router!' }
|
|
]
|
|
}
|
|
|
|
export function loader({ context }: Route.LoaderArgs) {
|
|
return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE }
|
|
}
|
|
|
|
export default function Home({ loaderData }: Route.ComponentProps) {
|
|
const { register, handleSubmit } = useForm({
|
|
resolver: zodResolver(schema)
|
|
})
|
|
|
|
const onSubmit = (data: Schema) => {
|
|
console.log(data)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="w-full max-w-xs grid gap-6">
|
|
<div className="flex justify-center">
|
|
<div className="border border-white/15 bg-white/5 px-2.5 py-3 rounded-xl">
|
|
<img src={logo} alt="React Router" className="block size-12" />
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="grid gap-6">
|
|
<div className="text-center space-y-1.5">
|
|
<h1 className="text-2xl font-semibold font-display text-balance">
|
|
Faça login
|
|
</h1>
|
|
<p className="text-white/50 text-sm">
|
|
Não tem uma conta?{' '}
|
|
<a href="#" className="font-medium text-white">
|
|
Cadastre-se
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-3">
|
|
<Label htmlFor="email">Email ou CPF</Label>
|
|
<Input id="email" type="text" required />
|
|
</div>
|
|
|
|
<div className="grid gap-3">
|
|
<div className="flex items-center">
|
|
<Label htmlFor="password">Senha</Label>
|
|
<a
|
|
href="#"
|
|
className="ml-auto text-sm underline-offset-4 hover:underline"
|
|
>
|
|
Esqueceu sua senha?
|
|
</a>
|
|
</div>
|
|
<Input id="password" type="password" required />
|
|
</div>
|
|
<Button type="submit" className="w-full bg-lime-400 cursor-pointer">
|
|
Entrar
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
|
|
<p className="text-white/50 text-xs text-center">
|
|
Ao fazer login, você concorda com nossa{' '}
|
|
<a href="#" className="underline hover:no-underline">
|
|
política de privacidade
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|