saladeaula.digital/id.saladeaula.digital/client/app/routes/signup.tsx

import type { Route } from './+types'

import { useState } from 'react'
import { Link } from 'react-router'

import logo from '@/components/logo.svg'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { isValidCPF } from '@brazilian-utils/brazilian-utils'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from 'zod'

const schema = z.object({
  name: z.string().trim().nonempty('Digite seu nome'),
  email: z.email('Digite seu email'),
  password: z
    .string()
    .nonempty('Digite sua senha')
    .min(6, 'Deve ter no mínimo 6 caracteres'),
  cpf: z
    .string()
    .nonempty('Digite seu CPF')
    .refine(isValidCPF, 'Deve ser um CPF válido')
})

type Schema = z.infer<typeof schema>

export function meta({}: Route.MetaArgs) {
  return [{ title: 'Criar conta · EDUSEG®' }]
}

export default function Signup({}: Route.ComponentProps) {
  const [show, setShow] = useState(false)
  const form = useForm({
    resolver: zodResolver(schema)
  })
  const { control, handleSubmit, formState } = form

  const onSubmit = async (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="EDUSEG®" className="block size-12" />
          </div>
        </div>

        <div className="text-center space-y-1.5">
          <h1 className="text-2xl font-semibold font-display text-balance">
            Criar conta
          </h1>
          <p className="text-white/50 text-sm">
            Já tem uma conta?{' '}
            <Link to="/" className="font-medium text-white hover:underline">
              Faça login
            </Link>
            .
          </p>
        </div>

        <Form {...form}>
          <form onSubmit={handleSubmit(onSubmit)} className="grid gap-6">
            <FormField
              control={control}
              name="name"
              defaultValue=""
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Nome</FormLabel>
                  <FormControl>
                    <Input autoFocus={true} placeholder="Seu nome" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input placeholder="seu@email.com" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={control}
              name="cpf"
              defaultValue=""
              render={({ field }) => (
                <FormItem>
                  <FormLabel>CPF</FormLabel>
                  <FormControl>
                    <Input placeholder="___.___.___-__" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={control}
              name="password"
              defaultValue=""
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Senha</FormLabel>
                  <FormControl>
                    <Input
                      type={show ? 'text' : 'password'}
                      placeholder="••••••••"
                      {...field}
                    />
                  </FormControl>
                  <div className="flex items-center gap-3">
                    <Checkbox
                      id="showPassword"
                      onClick={() => setShow((x) => !x)}
                      tabIndex={-1}
                    />
                    <Label htmlFor="showPassword">Mostrar senha</Label>
                  </div>
                  <FormMessage />
                </FormItem>
              )}
            />

            <Button
              type="submit"
              className="w-full bg-lime-400 cursor-pointer"
              disabled={formState.isSubmitting}
            >
              Criar conta
            </Button>
          </form>
        </Form>

        <p className="text-white/50 text-xs text-center">
          Ao fazer login, você concorda com nossa{' '}
          <a
            href="//eduseg.com.br/politica"
            target="_blank"
            className="underline hover:no-underline"
          >
            política de privacidade
          </a>
          .
        </p>
      </div>
    </>
  )
}