247 lines
8.4 KiB
TypeScript
247 lines
8.4 KiB
TypeScript
// Caminho: components/LoginForm.tsx
|
|
"use client"
|
|
|
|
import type React from "react"
|
|
import { useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import Link from "next/link"
|
|
import Cookies from "js-cookie"
|
|
import { jwtDecode } from "jwt-decode"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
// Componentes Shadcn UI
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Separator } from "@/components/ui/separator"
|
|
|
|
// Hook customizado
|
|
import { useToast } from "@/hooks/use-toast"
|
|
|
|
// Ícones
|
|
import { Eye, EyeOff, Mail, Lock, Loader2, UserCheck, Stethoscope, IdCard, Receipt } from "lucide-react"
|
|
|
|
interface LoginFormProps {
|
|
title: string
|
|
description: string
|
|
role: "secretary" | "doctor" | "patient" | "admin" | "manager" | "finance"
|
|
themeColor: "blue" | "green" | "orange"
|
|
redirectPath: string
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
interface FormState {
|
|
email: string
|
|
password: string
|
|
}
|
|
|
|
// Supondo que o payload do seu token tenha esta estrutura
|
|
interface DecodedToken {
|
|
name: string
|
|
email: string
|
|
role: string
|
|
exp: number
|
|
// Adicione outros campos que seu token possa ter
|
|
}
|
|
|
|
const themeClasses = {
|
|
blue: {
|
|
iconBg: "bg-blue-100",
|
|
iconText: "text-blue-600",
|
|
button: "bg-blue-600 hover:bg-blue-700",
|
|
link: "text-blue-600 hover:text-blue-700",
|
|
focus: "focus:border-blue-500 focus:ring-blue-500",
|
|
},
|
|
green: {
|
|
iconBg: "bg-green-100",
|
|
iconText: "text-green-600",
|
|
button: "bg-green-600 hover:bg-green-700",
|
|
link: "text-green-600 hover:text-green-700",
|
|
focus: "focus:border-green-500 focus:ring-green-500",
|
|
},
|
|
orange: {
|
|
iconBg: "bg-orange-100",
|
|
iconText: "text-orange-600",
|
|
button: "bg-orange-600 hover:bg-orange-700",
|
|
link: "text-orange-600 hover:text-orange-700",
|
|
focus: "focus:border-orange-500 focus:ring-orange-500",
|
|
},
|
|
}
|
|
|
|
const roleIcons = {
|
|
secretary: UserCheck,
|
|
patient: Stethoscope,
|
|
doctor: Stethoscope,
|
|
admin: UserCheck,
|
|
manager: IdCard,
|
|
finance: Receipt,
|
|
}
|
|
|
|
export function LoginForm({ title, description, role, themeColor, redirectPath, children }: LoginFormProps) {
|
|
const [form, setForm] = useState<FormState>({ email: "", password: "" })
|
|
const [showPassword, setShowPassword] = useState(false)
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const router = useRouter()
|
|
const { toast } = useToast()
|
|
|
|
const currentTheme = themeClasses[themeColor]
|
|
const Icon = roleIcons[role]
|
|
|
|
// ==================================================================
|
|
// AJUSTE PRINCIPAL NA LÓGICA DE LOGIN
|
|
// ==================================================================
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
|
|
const LOGIN_URL = "https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password";
|
|
const API_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
|
|
|
|
if (!API_KEY) {
|
|
toast({
|
|
title: "Erro de Configuração",
|
|
description: "A chave da API não foi encontrada.",
|
|
variant: "destructive",
|
|
});
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(LOGIN_URL, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"apikey": API_KEY,
|
|
},
|
|
body: JSON.stringify({ email: form.email, password: form.password }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error_description || "Credenciais inválidas. Tente novamente.");
|
|
}
|
|
|
|
const accessToken = data.access_token;
|
|
const user = data.user;
|
|
|
|
/* =================== Verificação de Role Desativada Temporariamente =================== */
|
|
// if (user.user_metadata.role !== role) {
|
|
// toast({ title: "Acesso Negado", ... });
|
|
// return;
|
|
// }
|
|
/* ===================================================================================== */
|
|
|
|
Cookies.set("access_token", accessToken, { expires: 1, secure: true });
|
|
localStorage.setItem('user_info', JSON.stringify(user));
|
|
|
|
toast({
|
|
title: "Login bem-sucedido!",
|
|
description: `Bem-vindo(a), ${user.user_metadata.full_name || 'usuário'}! Redirecionando...`,
|
|
});
|
|
|
|
router.push(redirectPath);
|
|
|
|
} catch (error) {
|
|
toast({
|
|
title: "Erro no Login",
|
|
description: error instanceof Error ? error.message : "Ocorreu um erro inesperado.",
|
|
});
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// O JSX do return permanece exatamente o mesmo, preservando seus ajustes.
|
|
return (
|
|
<Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
|
|
<CardHeader className="text-center space-y-4 pb-8">
|
|
<div className={cn("mx-auto w-16 h-16 rounded-full flex items-center justify-center", currentTheme.iconBg)}>
|
|
<Icon className={cn("w-8 h-8", currentTheme.iconText)} />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-2xl font-bold text-gray-900">{title}</CardTitle>
|
|
<CardDescription className="text-gray-600 mt-2">{description}</CardDescription>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="px-8 pb-8">
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Inputs e Botão */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">E-mail</Label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="seu.email@clinica.com"
|
|
value={form.email}
|
|
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
|
className={cn("pl-11 h-12 border-slate-200", currentTheme.focus)}
|
|
required
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">Senha</Label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
|
<Input
|
|
id="password"
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder="Digite sua senha"
|
|
value={form.password}
|
|
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
|
className={cn("pl-11 pr-12 h-12 border-slate-200", currentTheme.focus)}
|
|
required
|
|
disabled={isLoading}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 p-0 text-gray-400 hover:text-gray-600"
|
|
disabled={isLoading}
|
|
>
|
|
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<Button type="submit" className={cn("w-full h-12 text-base font-semibold", currentTheme.button)} disabled={isLoading}>
|
|
{isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : "Entrar"}
|
|
</Button>
|
|
</form>
|
|
{/* Conteúdo Extra (children) */}
|
|
<div className="mt-8">
|
|
{children ? (
|
|
<div className="space-y-4">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<div className="w-full border-t border-slate-200"></div>
|
|
</div>
|
|
<div className="relative flex justify-center text-sm">
|
|
<span className="px-4 bg-white text-slate-500">Novo por aqui?</span>
|
|
</div>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="relative">
|
|
<Separator className="my-6" />
|
|
<span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">ou</span>
|
|
</div>
|
|
<div className="text-center">
|
|
<Link href="/" className={cn("text-sm font-medium hover:underline", currentTheme.link)}>
|
|
Voltar à página inicial
|
|
</Link>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
} |