feat: adicionar endpoint de auto-cadastro de paciente
This commit is contained in:
parent
b53401ff39
commit
a67b5a0333
192
susconecta/app/cadastro-paciente/page.tsx
Normal file
192
susconecta/app/cadastro-paciente/page.tsx
Normal file
@ -0,0 +1,192 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
|
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||||
|
import { registerPatientPublic } from '@/lib/auth'
|
||||||
|
|
||||||
|
export default function CadastroPacientePage() {
|
||||||
|
const router = useRouter()
|
||||||
|
const [form, setForm] = useState({
|
||||||
|
email: '',
|
||||||
|
full_name: '',
|
||||||
|
phone_mobile: '',
|
||||||
|
cpf: '',
|
||||||
|
birth_date: '',
|
||||||
|
})
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
const [success, setSuccess] = useState<{ message: string } | null>(null)
|
||||||
|
|
||||||
|
const onChange = (k: string, v: string) => setForm(prev => ({ ...prev, [k]: v }))
|
||||||
|
|
||||||
|
const validate = () => {
|
||||||
|
const emailOk = /^\S+@\S+\.\S+$/.test(form.email)
|
||||||
|
if (!emailOk) return 'Email inválido.'
|
||||||
|
if (!form.full_name || form.full_name.trim().length < 3) return 'Nome completo deve ter ao menos 3 caracteres.'
|
||||||
|
const phone = (form.phone_mobile || '').replace(/\D/g, '')
|
||||||
|
if (!(phone.length === 10 || phone.length === 11)) return 'Telefone celular deve ter 10 ou 11 dígitos.'
|
||||||
|
const cpf = (form.cpf || '').replace(/\D/g, '')
|
||||||
|
if (cpf.length !== 11) return 'CPF deve ter 11 dígitos.'
|
||||||
|
if (form.birth_date && !/^\d{4}-\d{2}-\d{2}$/.test(form.birth_date)) return 'Data de nascimento deve estar no formato YYYY-MM-DD.'
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// Formatar CPF como 000.000.000-00 enquanto digita, limitando a 11 dígitos
|
||||||
|
const formatCpf = (v: string) => {
|
||||||
|
const digits = v.replace(/\D/g, '').slice(0, 11)
|
||||||
|
const p1 = digits.slice(0, 3)
|
||||||
|
const p2 = digits.slice(3, 6)
|
||||||
|
const p3 = digits.slice(6, 9)
|
||||||
|
const p4 = digits.slice(9, 11)
|
||||||
|
let out = p1
|
||||||
|
if (p2) out += (out ? '.' : '') + p2
|
||||||
|
if (p3) out += '.' + p3
|
||||||
|
if (p4) out += '-' + p4
|
||||||
|
return out
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setError(null)
|
||||||
|
setSuccess(null)
|
||||||
|
const err = validate()
|
||||||
|
if (err) { setError(err); return }
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const origin = typeof window !== 'undefined' ? window.location.origin : ''
|
||||||
|
const redirect_url = origin ? `${origin}/paciente` : undefined
|
||||||
|
|
||||||
|
await registerPatientPublic({
|
||||||
|
email: form.email,
|
||||||
|
full_name: form.full_name,
|
||||||
|
phone_mobile: form.phone_mobile,
|
||||||
|
// enviar apenas dígitos do CPF
|
||||||
|
cpf: form.cpf.replace(/\D/g, ''),
|
||||||
|
...(form.birth_date ? { birth_date: form.birth_date } : {}),
|
||||||
|
...(redirect_url ? { redirect_url } : {}),
|
||||||
|
})
|
||||||
|
|
||||||
|
setSuccess({ message: 'Cadastro realizado! Verifique seu email para acessar a plataforma.' })
|
||||||
|
setTimeout(() => router.push('/login-paciente'), 2500)
|
||||||
|
} catch (e: any) {
|
||||||
|
setError(e?.message || 'Falha ao criar cadastro. Tente novamente.')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-md w-full space-y-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2 className="mt-6 text-3xl font-extrabold text-foreground">Criar cadastro de Paciente</h2>
|
||||||
|
<p className="mt-2 text-sm text-muted-foreground">Preencha seus dados para acessar o portal do paciente</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-center">Dados do Paciente</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{/* Email (obrigatório) */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-foreground">Email</label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="seuemail@exemplo.com"
|
||||||
|
value={form.email}
|
||||||
|
onChange={(e) => onChange('email', e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Nome completo (obrigatório) */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="full_name" className="block text-sm font-medium text-foreground">Nome completo</label>
|
||||||
|
<Input
|
||||||
|
id="full_name"
|
||||||
|
placeholder="Seu nome completo"
|
||||||
|
value={form.full_name}
|
||||||
|
onChange={(e) => onChange('full_name', e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Telefone celular (obrigatório) */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="phone_mobile" className="block text-sm font-medium text-foreground">Telefone celular</label>
|
||||||
|
<Input
|
||||||
|
id="phone_mobile"
|
||||||
|
inputMode="numeric"
|
||||||
|
placeholder="(11) 99999-9999"
|
||||||
|
value={form.phone_mobile}
|
||||||
|
onChange={(e) => onChange('phone_mobile', e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CPF (obrigatório) */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="cpf" className="block text-sm font-medium text-foreground">
|
||||||
|
CPF
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
id="cpf"
|
||||||
|
inputMode="numeric"
|
||||||
|
placeholder="000.000.000-00"
|
||||||
|
value={form.cpf}
|
||||||
|
maxLength={14}
|
||||||
|
// Aceita CPF com ou sem pontuação
|
||||||
|
pattern="^\d{3}\.?\d{3}\.?\d{3}-?\d{2}$"
|
||||||
|
title="Informe 11 dígitos (com ou sem formatação, ex: 00000000000 ou 000.000.000-00)"
|
||||||
|
onChange={(e) => onChange('cpf', formatCpf(e.target.value))}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{/* Data de nascimento (opcional) */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="birth_date" className="block text-sm font-medium text-foreground">Data de nascimento (opcional)</label>
|
||||||
|
<Input
|
||||||
|
id="birth_date"
|
||||||
|
type="date"
|
||||||
|
placeholder="YYYY-MM-DD"
|
||||||
|
value={form.birth_date}
|
||||||
|
onChange={(e) => onChange('birth_date', e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mensagens */}
|
||||||
|
{error && (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertDescription>{error}</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
{success && (
|
||||||
|
<Alert>
|
||||||
|
<AlertDescription>{success.message}</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Ações */}
|
||||||
|
<Button type="submit" className="w-full" disabled={loading}>
|
||||||
|
{loading ? 'Criando cadastro...' : 'Criar cadastro'}
|
||||||
|
</Button>
|
||||||
|
<Button asChild variant="outline" className="w-full">
|
||||||
|
<Link href="/login-paciente">Já tenho conta</Link>
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -160,7 +160,11 @@ export default function LoginPacientePage() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-4 text-center">
|
{/* Botão para criar nova conta (vai para a tela de cadastro) */}
|
||||||
|
<div className="mt-4 grid gap-2">
|
||||||
|
<Button asChild className="w-full">
|
||||||
|
<Link href="/cadastro-paciente">Criar nova conta</Link>
|
||||||
|
</Button>
|
||||||
<Button variant="outline" asChild className="w-full hover:!bg-primary hover:!text-white hover:!border-primary transition-all duration-200">
|
<Button variant="outline" asChild className="w-full hover:!bg-primary hover:!text-white hover:!border-primary transition-all duration-200">
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
Voltar ao Início
|
Voltar ao Início
|
||||||
|
|||||||
@ -331,6 +331,81 @@ export async function getCurrentUser(token: string): Promise<UserData> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tipos do endpoint público de auto-cadastro
|
||||||
|
*/
|
||||||
|
export type RegisterPatientPayload = {
|
||||||
|
email: string;
|
||||||
|
full_name: string;
|
||||||
|
phone_mobile: string; // 10-11 dígitos
|
||||||
|
cpf: string; // 11 dígitos
|
||||||
|
birth_date?: string; // YYYY-MM-DD
|
||||||
|
redirect_url?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type RegisterPatientResponse = {
|
||||||
|
success: boolean;
|
||||||
|
patient_id?: string;
|
||||||
|
message?: string;
|
||||||
|
email?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Chama a Edge Function pública de auto-cadastro de paciente.
|
||||||
|
* Não requer Authorization (usa apenas apikey).
|
||||||
|
*/
|
||||||
|
export async function registerPatientPublic(input: RegisterPatientPayload): Promise<RegisterPatientResponse> {
|
||||||
|
// validações rápidas no cliente
|
||||||
|
const emailOk = /^\S+@\S+\.\S+$/.test(input.email || '');
|
||||||
|
if (!emailOk) throw new AuthenticationError('Email inválido.', 'VALIDATION_ERROR');
|
||||||
|
if (!input.full_name || String(input.full_name).trim().length < 3) {
|
||||||
|
throw new AuthenticationError('Nome completo deve ter ao menos 3 caracteres.', 'VALIDATION_ERROR');
|
||||||
|
}
|
||||||
|
const phone = String(input.phone_mobile || '').replace(/\D/g, '');
|
||||||
|
if (!(phone.length === 10 || phone.length === 11)) {
|
||||||
|
throw new AuthenticationError('Telefone celular deve ter 10 ou 11 dígitos.', 'VALIDATION_ERROR');
|
||||||
|
}
|
||||||
|
const cpf = String(input.cpf || '').replace(/\D/g, '');
|
||||||
|
if (cpf.length !== 11) {
|
||||||
|
throw new AuthenticationError('CPF deve ter 11 dígitos.', 'VALIDATION_ERROR');
|
||||||
|
}
|
||||||
|
if (input.birth_date && !/^\d{4}-\d{2}-\d{2}$/.test(input.birth_date)) {
|
||||||
|
throw new AuthenticationError('Data de nascimento deve estar no formato YYYY-MM-DD.', 'VALIDATION_ERROR');
|
||||||
|
}
|
||||||
|
|
||||||
|
// monta URL do projeto Supabase
|
||||||
|
const url = `${ENV_CONFIG.SUPABASE_URL}/functions/v1/register-patient`;
|
||||||
|
|
||||||
|
// redirect_url padrão para a área do paciente
|
||||||
|
const origin = typeof window !== 'undefined' ? window.location.origin : '';
|
||||||
|
const redirect_url = input.redirect_url || (origin ? `${origin}/paciente` : undefined);
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
email: input.email,
|
||||||
|
full_name: input.full_name,
|
||||||
|
phone_mobile: phone,
|
||||||
|
cpf,
|
||||||
|
...(input.birth_date ? { birth_date: input.birth_date } : {}),
|
||||||
|
...(redirect_url ? { redirect_url } : {}),
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: getLoginHeaders(), // sem Authorization, com apikey
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
});
|
||||||
|
|
||||||
|
// processResponse lança AuthenticationError quando !ok e retorna JSON quando ok
|
||||||
|
const data = await processResponse<RegisterPatientResponse>(res);
|
||||||
|
return data;
|
||||||
|
} catch (err) {
|
||||||
|
// Deixa o erro tipado consistente para o chamador (página de cadastro)
|
||||||
|
if (err instanceof AuthenticationError) throw err;
|
||||||
|
throw new AuthenticationError('Falha no auto-cadastro do paciente', 'REGISTER_PATIENT_ERROR', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Utilitário para validar se um token está expirado
|
* Utilitário para validar se um token está expirado
|
||||||
*/
|
*/
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user