301 lines
12 KiB
TypeScript
301 lines
12 KiB
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { useAuth } from '@/hooks/useAuth'
|
|
import { sendMagicLink } from '@/lib/api'
|
|
import { ENV_CONFIG } from '@/lib/env-config'
|
|
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 { AuthenticationError } from '@/lib/auth'
|
|
|
|
export default function LoginPacientePage() {
|
|
const [credentials, setCredentials] = useState({ email: '', password: '' })
|
|
const [error, setError] = useState('')
|
|
const [magicMessage, setMagicMessage] = useState('')
|
|
const [magicError, setMagicError] = useState('')
|
|
const [magicLoading, setMagicLoading] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
const router = useRouter()
|
|
const { login } = useAuth()
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setLoading(true)
|
|
setError('')
|
|
|
|
try {
|
|
// Tentar fazer login usando o contexto com tipo paciente
|
|
const success = await login(credentials.email, credentials.password, 'paciente')
|
|
|
|
if (success) {
|
|
// Redirecionar para a página do paciente
|
|
router.push('/paciente')
|
|
}
|
|
} catch (err) {
|
|
console.error('[LOGIN-PACIENTE] Erro no login:', err)
|
|
|
|
if (err instanceof AuthenticationError) {
|
|
// Verificar se é erro de credenciais inválidas (pode ser email não confirmado)
|
|
if (err.code === '400' || err.details?.error_code === 'invalid_credentials') {
|
|
setError(
|
|
'⚠️ Email ou senha incorretos. Se você acabou de se cadastrar, ' +
|
|
'verifique sua caixa de entrada e clique no link de confirmação ' +
|
|
'que foi enviado para ' + credentials.email
|
|
)
|
|
} else {
|
|
setError(err.message)
|
|
}
|
|
} else {
|
|
setError('Erro inesperado. Tente novamente.')
|
|
}
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleSendMagicLink = async () => {
|
|
if (!credentials.email) {
|
|
setMagicError('Por favor, preencha o email antes de solicitar o magic link.')
|
|
return
|
|
}
|
|
|
|
setMagicLoading(true)
|
|
setMagicError('')
|
|
setMagicMessage('')
|
|
|
|
try {
|
|
const res = await sendMagicLink(credentials.email, { target: 'paciente' })
|
|
setMagicMessage(res?.message ?? 'Magic link enviado. Verifique seu email.')
|
|
} catch (err: any) {
|
|
console.error('[MAGIC-LINK PACIENTE] erro ao enviar:', err)
|
|
setMagicError(err?.message ?? String(err))
|
|
} finally {
|
|
setMagicLoading(false)
|
|
}
|
|
}
|
|
|
|
// --- Auto-cadastro (client-side) ---
|
|
const [showRegister, setShowRegister] = useState(false)
|
|
const [reg, setReg] = useState({ email: '', full_name: '', phone_mobile: '', cpf: '', birth_date: '' })
|
|
const [regLoading, setRegLoading] = useState(false)
|
|
const [regError, setRegError] = useState('')
|
|
const [regSuccess, setRegSuccess] = useState('')
|
|
|
|
function cleanCpf(cpf: string) {
|
|
return String(cpf || '').replace(/\D/g, '')
|
|
}
|
|
|
|
function validateCPF(cpfRaw: string) {
|
|
const cpf = cleanCpf(cpfRaw)
|
|
if (!/^\d{11}$/.test(cpf)) return false
|
|
if (/^([0-9])\1+$/.test(cpf)) return false
|
|
const digits = cpf.split('').map((d) => Number(d))
|
|
const calc = (len: number) => {
|
|
let sum = 0
|
|
for (let i = 0; i < len; i++) sum += digits[i] * (len + 1 - i)
|
|
const v = (sum * 10) % 11
|
|
return v === 10 ? 0 : v
|
|
}
|
|
return calc(9) === digits[9] && calc(10) === digits[10]
|
|
}
|
|
|
|
const handleRegister = async (e?: React.FormEvent) => {
|
|
if (e) e.preventDefault()
|
|
setRegError('')
|
|
setRegSuccess('')
|
|
|
|
// client-side validation
|
|
if (!reg.email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(reg.email)) return setRegError('Email inválido')
|
|
if (!reg.full_name || reg.full_name.trim().length < 3) return setRegError('Nome deve ter ao menos 3 caracteres')
|
|
if (!reg.phone_mobile || !/^\d{10,11}$/.test(reg.phone_mobile)) return setRegError('Telefone inválido (10-11 dígitos)')
|
|
if (!reg.cpf || !/^\d{11}$/.test(cleanCpf(reg.cpf))) return setRegError('CPF deve conter 11 dígitos')
|
|
if (!validateCPF(reg.cpf)) return setRegError('CPF inválido')
|
|
|
|
setRegLoading(true)
|
|
try {
|
|
const url = `${ENV_CONFIG.SUPABASE_URL}/functions/v1/register-patient`
|
|
const body = {
|
|
email: reg.email,
|
|
full_name: reg.full_name,
|
|
phone_mobile: reg.phone_mobile,
|
|
cpf: cleanCpf(reg.cpf),
|
|
// always include redirect to patient landing as requested
|
|
redirect_url: 'https://mediconecta-app-liart.vercel.app/'
|
|
} as any
|
|
if (reg.birth_date) body.birth_date = reg.birth_date
|
|
|
|
const res = await fetch(url, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', apikey: ENV_CONFIG.SUPABASE_ANON_KEY, Accept: 'application/json' },
|
|
body: JSON.stringify(body),
|
|
})
|
|
|
|
const json = await res.json().catch(() => null)
|
|
if (res.ok) {
|
|
setRegSuccess(json?.message ?? 'Cadastro realizado com sucesso! Verifique seu email para acessar a plataforma.')
|
|
// clear form but keep email for convenience
|
|
setReg({ ...reg, full_name: '', phone_mobile: '', cpf: '', birth_date: '' })
|
|
} else if (res.status === 400) {
|
|
setRegError(json?.error ?? json?.message ?? 'Dados inválidos')
|
|
} else if (res.status === 409) {
|
|
setRegError(json?.error ?? 'CPF ou email já cadastrado')
|
|
} else if (res.status === 429) {
|
|
setRegError(json?.error ?? 'Rate limit excedido. Tente novamente mais tarde.')
|
|
} else {
|
|
setRegError(json?.error ?? json?.message ?? `Erro (${res.status})`)
|
|
}
|
|
} catch (err: any) {
|
|
console.error('[REGISTER PACIENTE] erro', err)
|
|
setRegError(err?.message ?? String(err))
|
|
} finally {
|
|
setRegLoading(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">
|
|
Sou Paciente
|
|
</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
Acesse sua área pessoal e gerencie suas consultas
|
|
</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-center">Entrar como Paciente</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleLogin} className="space-y-6">
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-foreground">
|
|
Email
|
|
</label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="Digite seu email"
|
|
value={credentials.email}
|
|
onChange={(e) => setCredentials({...credentials, email: e.target.value})}
|
|
required
|
|
className="mt-1"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium text-foreground">
|
|
Senha
|
|
</label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
placeholder="Digite sua senha"
|
|
value={credentials.password}
|
|
onChange={(e) => setCredentials({...credentials, password: e.target.value})}
|
|
required
|
|
className="mt-1"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<Alert variant="destructive">
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full cursor-pointer"
|
|
disabled={loading}
|
|
>
|
|
{loading ? 'Entrando...' : 'Entrar na Minha Área'}
|
|
</Button>
|
|
</form>
|
|
<div className="mt-4 space-y-2">
|
|
<div className="text-sm text-muted-foreground mb-2">Ou entre usando um magic link (sem senha)</div>
|
|
|
|
{magicError && (
|
|
<Alert variant="destructive">
|
|
<AlertDescription>{magicError}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{magicMessage && (
|
|
<Alert>
|
|
<AlertDescription>{magicMessage}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
<Button className="w-full" onClick={handleSendMagicLink} disabled={magicLoading}>
|
|
{magicLoading ? 'Enviando magic link...' : 'Enviar magic link'}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mt-4 text-center">
|
|
<Button variant="outline" asChild className="w-full hover:bg-primary! hover:text-white! hover:border-primary! transition-all duration-200">
|
|
<Link href="/">
|
|
Voltar ao Início
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
<div className="mt-6">
|
|
<div className="text-sm text-muted-foreground mb-2">Ainda não tem conta? <button className="text-primary underline ml-2" onClick={() => setShowRegister(!showRegister)}>{showRegister ? 'Fechar' : 'Criar conta'}</button></div>
|
|
|
|
{showRegister && (
|
|
<Card className="mt-2">
|
|
<CardHeader>
|
|
<CardTitle className="text-center">Auto-cadastro de Paciente</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleRegister} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground">Nome completo</label>
|
|
<Input value={reg.full_name} onChange={(e) => setReg({...reg, full_name: e.target.value})} required />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground">Email</label>
|
|
<Input type="email" value={reg.email} onChange={(e) => setReg({...reg, email: e.target.value})} required />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground">Telefone (apenas números)</label>
|
|
<Input value={reg.phone_mobile} onChange={(e) => setReg({...reg, phone_mobile: e.target.value.replace(/\D/g,'')})} placeholder="11999998888" required />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground">CPF (11 dígitos)</label>
|
|
<Input value={reg.cpf} onChange={(e) => setReg({...reg, cpf: e.target.value.replace(/\D/g,'')})} placeholder="12345678901" required />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground">Data de nascimento (opcional)</label>
|
|
<Input type="date" value={reg.birth_date} onChange={(e) => setReg({...reg, birth_date: e.target.value})} />
|
|
</div>
|
|
|
|
{regError && (
|
|
<Alert variant="destructive"><AlertDescription>{regError}</AlertDescription></Alert>
|
|
)}
|
|
{regSuccess && (
|
|
<Alert><AlertDescription>{regSuccess}</AlertDescription></Alert>
|
|
)}
|
|
|
|
<div className="flex gap-2">
|
|
<Button type="submit" className="flex-1" disabled={regLoading}>{regLoading ? 'Criando...' : 'Criar Conta'}</Button>
|
|
<Button variant="ghost" onClick={() => setShowRegister(false)} disabled={regLoading}>Cancelar</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |