feat: Corrige e implementa o fluxo de auto-cadastro de paciente

O formulário de registro estava incorretamente utilizando um endpoint que exigia autenticação, resultando em um erro de 'Invalid JWT' para novos usuários. Esta alteração refatora a página para usar o endpoint público 'register-patient', que inicia o fluxo de confirmação por e-mail.
This commit is contained in:
Gabriel Lira Figueira 2025-11-12 20:00:05 -03:00
parent 93ea8709d6
commit c0f635d908
3 changed files with 117 additions and 85 deletions

View File

@ -1,7 +1,6 @@
"use client" "use client"
import type React from "react" import type React from "react"
import { useState } from "react" import { useState } from "react"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import Link from "next/link" import Link from "next/link"
@ -9,24 +8,24 @@ import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label" import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea" import { ArrowLeft, Loader2 } from "lucide-react"
import { Eye, EyeOff, ArrowLeft } from "lucide-react" import { useToast } from "@/hooks/use-toast"
import { usersService } from "@/services/usersApi.mjs" // Mantém a importação
import { isValidCPF } from "@/lib/utils"
export default function PatientRegister() { export default function PatientRegister() {
const [showPassword, setShowPassword] = useState(false) // REMOVIDO: Estados para 'showPassword' e 'showConfirmPassword'
const [showConfirmPassword, setShowConfirmPassword] = useState(false)
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
name: "", name: "",
email: "", email: "",
password: "",
confirmPassword: "",
phone: "", phone: "",
cpf: "", cpf: "",
birthDate: "", birthDate: "",
address: "", // REMOVIDO: Campos 'password' e 'confirmPassword'
}) })
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const router = useRouter() const router = useRouter()
const { toast } = useToast()
const handleInputChange = (field: string, value: string) => { const handleInputChange = (field: string, value: string) => {
setFormData((prev) => ({ setFormData((prev) => ({
@ -37,22 +36,52 @@ export default function PatientRegister() {
const handleRegister = async (e: React.FormEvent) => { const handleRegister = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
setIsLoading(true)
if (formData.password !== formData.confirmPassword) { // --- VALIDAÇÃO DE CPF ---
alert("As senhas não coincidem!") if (!isValidCPF(formData.cpf)) {
toast({
title: "CPF Inválido",
description: "O CPF informado não é válido. Verifique os dígitos.",
variant: "destructive",
})
setIsLoading(false)
return return
} }
setIsLoading(true) // --- LÓGICA DE REGISTRO COM ENDPOINT PÚBLICO ---
try {
// ALTERADO: Payload ajustado para o endpoint 'register-patient'
const payload = {
email: formData.email.trim().toLowerCase(),
full_name: formData.name,
phone_mobile: formData.phone, // O endpoint espera 'phone_mobile'
cpf: formData.cpf.replace(/\D/g, ''),
birth_date: formData.birthDate,
}
// Simulação de registro - em produção, conectar com API real // ALTERADO: Chamada para a nova função de serviço
setTimeout(() => { await usersService.registerPatient(payload)
// Salvar dados do usuário no localStorage para simulação
const { confirmPassword, ...userData } = formData // ALTERADO: Mensagem de sucesso para refletir o fluxo de confirmação por e-mail
localStorage.setItem("patientData", JSON.stringify(userData)) toast({
router.push("/patient/dashboard") title: "Cadastro enviado com sucesso!",
description: "Enviamos um link de confirmação para o seu e-mail. Por favor, verifique sua caixa de entrada para ativar sua conta.",
})
// Redireciona para a página de login
router.push("/login")
} catch (error: any) {
console.error("Erro no registro:", error)
toast({
title: "Erro ao Criar Conta",
description: error.message || "Não foi possível concluir o cadastro. Verifique seus dados e tente novamente.",
variant: "destructive",
})
} finally {
setIsLoading(false) setIsLoading(false)
}, 1000) }
} }
return ( return (
@ -67,136 +96,85 @@ export default function PatientRegister() {
<Card> <Card>
<CardHeader className="text-center"> <CardHeader className="text-center">
<CardTitle className="text-2xl">Cadastro de Paciente</CardTitle> <CardTitle className="text-2xl">Crie sua Conta de Paciente</CardTitle>
<CardDescription>Preencha seus dados para criar sua conta</CardDescription> <CardDescription>Preencha seus dados para acessar o portal MedConnect</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<form onSubmit={handleRegister} className="space-y-4"> <form onSubmit={handleRegister} className="space-y-4">
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="name">Nome Completo</Label> <Label htmlFor="name">Nome Completo *</Label>
<Input <Input
id="name" id="name"
value={formData.name} value={formData.name}
onChange={(e) => handleInputChange("name", e.target.value)} onChange={(e) => handleInputChange("name", e.target.value)}
required required
disabled={isLoading}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="cpf">CPF</Label> <Label htmlFor="cpf">CPF *</Label>
<Input <Input
id="cpf" id="cpf"
value={formData.cpf} value={formData.cpf}
onChange={(e) => handleInputChange("cpf", e.target.value)} onChange={(e) => handleInputChange("cpf", e.target.value)}
placeholder="000.000.000-00" placeholder="000.000.000-00"
required required
disabled={isLoading}
/> />
</div> </div>
</div> </div>
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="email">Email</Label> <Label htmlFor="email">Email *</Label>
<Input <Input
id="email" id="email"
type="email" type="email"
value={formData.email} value={formData.email}
onChange={(e) => handleInputChange("email", e.target.value)} onChange={(e) => handleInputChange("email", e.target.value)}
required required
disabled={isLoading}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="phone">Telefone</Label> <Label htmlFor="phone">Telefone *</Label>
<Input <Input
id="phone" id="phone"
value={formData.phone} value={formData.phone}
onChange={(e) => handleInputChange("phone", e.target.value)} onChange={(e) => handleInputChange("phone", e.target.value)}
placeholder="(11) 99999-9999" placeholder="(11) 99999-9999"
required required
disabled={isLoading}
/> />
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="birthDate">Data de Nascimento</Label> <Label htmlFor="birthDate">Data de Nascimento *</Label>
<Input <Input
id="birthDate" id="birthDate"
type="date" type="date"
value={formData.birthDate} value={formData.birthDate}
onChange={(e) => handleInputChange("birthDate", e.target.value)} onChange={(e) => handleInputChange("birthDate", e.target.value)}
required required
disabled={isLoading}
/> />
</div> </div>
<div className="space-y-2"> {/* REMOVIDO: Seção de senha e confirmação de senha */}
<Label htmlFor="address">Endereço</Label>
<Textarea
id="address"
value={formData.address}
onChange={(e) => handleInputChange("address", e.target.value)}
placeholder="Rua, número, bairro, cidade, estado"
rows={3}
required
/>
</div>
<div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="password">Senha</Label>
<div className="relative">
<Input
id="password"
type={showPassword ? "text" : "password"}
value={formData.password}
onChange={(e) => handleInputChange("password", e.target.value)}
required
/>
<Button
type="button"
variant="ghost"
size="sm"
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</Button>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="confirmPassword">Confirmar Senha</Label>
<div className="relative">
<Input
id="confirmPassword"
type={showConfirmPassword ? "text" : "password"}
value={formData.confirmPassword}
onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
required
/>
<Button
type="button"
variant="ghost"
size="sm"
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
>
{showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</Button>
</div>
</div>
</div>
<Button type="submit" className="w-full" disabled={isLoading}> <Button type="submit" className="w-full" disabled={isLoading}>
{isLoading ? "Criando conta..." : "Criar Conta"} {isLoading ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Criando conta...</> : "Criar Conta"}
</Button> </Button>
</form> </form>
<div className="mt-6 text-center"> <div className="mt-6 text-center">
<p className="text-sm text-gray-600"> <p className="text-sm text-gray-600">
tem uma conta?{" "} tem uma conta?{" "}
<Link href="/patient/login" className="text-blue-600 hover:underline"> <Link href="/login" className="text-blue-600 hover:underline">
Faça login aqui Faça login aqui
</Link> </Link>
</p> </p>

View File

@ -1,6 +1,52 @@
// ARQUIVO: lib/utils.ts
import { clsx, type ClassValue } from 'clsx' import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs))
} }
// ADICIONE A FUNÇÃO ABAIXO
export function isValidCPF(cpf: string | null | undefined): boolean {
if (!cpf) return false;
// Remove caracteres não numéricos
const cpfDigits = cpf.replace(/\D/g, '');
if (cpfDigits.length !== 11 || /^(\d)\1+$/.test(cpfDigits)) {
return false;
}
let sum = 0;
let remainder;
for (let i = 1; i <= 9; i++) {
sum += parseInt(cpfDigits.substring(i - 1, i)) * (11 - i);
}
remainder = (sum * 10) % 11;
if (remainder === 10 || remainder === 11) {
remainder = 0;
}
if (remainder !== parseInt(cpfDigits.substring(9, 10))) {
return false;
}
sum = 0;
for (let i = 1; i <= 10; i++) {
sum += parseInt(cpfDigits.substring(i - 1, i)) * (12 - i);
}
remainder = (sum * 10) % 11;
if (remainder === 10 || remainder === 11) {
remainder = 0;
}
if (remainder !== parseInt(cpfDigits.substring(10, 11))) {
return false;
}
return true;
}

View File

@ -21,6 +21,14 @@ export const usersService = {
return await api.post(`/functions/v1/create-user-with-password`, data); return await api.post(`/functions/v1/create-user-with-password`, data);
}, },
// --- NOVA FUNÇÃO ADICIONADA AQUI ---
// Esta função chama o endpoint público de registro de paciente.
async registerPatient(data) {
// POR QUÊ? Este endpoint é público e não requer token JWT, resolvendo o erro 401.
return await api.post('/functions/v1/register-patient', data);
},
// --- FIM DA NOVA FUNÇÃO ---
async full_data(user_id) { async full_data(user_id) {
if (!user_id) throw new Error("user_id é obrigatório"); if (!user_id) throw new Error("user_id é obrigatório");