RiseUP/riseup-squad21
5
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main #22

Merged
LiraS2 merged 6 commits from StsDanilo/riseup-squad21:main into main 2025-10-09 20:15:29 +00:00
Conversation 0 Commits 6 Files Changed 14 +277 -300
3 changed files with 277 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 65087a9f51 - Show all commits

9
app/layout.tsx
View File

@ -6,6 +6,9 @@ import "./globals.css";
import { Toaster } from "@/components/ui/toaster"; import { Toaster } from "@/components/ui/toaster";
// [PASSO 1.2] - Importando o nosso provider // [PASSO 1.2] - Importando o nosso provider
import { AppointmentsProvider } from "./context/AppointmentsContext"; import { AppointmentsProvider } from "./context/AppointmentsContext";
import { AccessibilityProvider } from "./context/AccessibilityContext";
import { AccessibilityModal } from "@/components/accessibility-modal";
import { ThemeInitializer } from "@/components/theme-initializer";
export default function RootLayout({ export default function RootLayout({
children, children,
@ -13,10 +16,14 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}> <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
{/* [PASSO 1.2] - Envolvendo a aplicação com o provider */} {/* [PASSO 1.2] - Envolvendo a aplicação com o provider */}
<ThemeInitializer />
<AccessibilityProvider>
<AppointmentsProvider>{children}</AppointmentsProvider> <AppointmentsProvider>{children}</AppointmentsProvider>
<AccessibilityModal />
</AccessibilityProvider>
<Analytics /> <Analytics />
<Toaster /> <Toaster />
</body> </body>

114
components/LoginForm.tsx
View File

@ -1,47 +1,48 @@
// Caminho: components/LoginForm.tsx // Caminho: components/LoginForm.tsx
"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";
import Cookies from "js-cookie" import Cookies from "js-cookie";
import { jwtDecode } from "jwt-decode" import { jwtDecode } from "jwt-decode";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
// Componentes Shadcn UI // Componentes Shadcn UI
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator" import { Separator } from "@/components/ui/separator";
import { apikey } from "@/services/api.mjs";
// Hook customizado // Hook customizado
import { useToast } from "@/hooks/use-toast" import { useToast } from "@/hooks/use-toast";
// Ícones // Ícones
import { Eye, EyeOff, Mail, Lock, Loader2, UserCheck, Stethoscope, IdCard, Receipt } from "lucide-react" import { Eye, EyeOff, Mail, Lock, Loader2, UserCheck, Stethoscope, IdCard, Receipt } from "lucide-react";
interface LoginFormProps { interface LoginFormProps {
title: string title: string;
description: string description: string;
role: "secretary" | "doctor" | "patient" | "admin" | "manager" | "finance" role: "secretary" | "doctor" | "patient" | "admin" | "manager" | "finance";
themeColor: "blue" | "green" | "orange" themeColor: "blue" | "green" | "orange";
redirectPath: string redirectPath: string;
children?: React.ReactNode children?: React.ReactNode;
} }
interface FormState { interface FormState {
email: string email: string;
password: string password: string;
} }
// Supondo que o payload do seu token tenha esta estrutura // Supondo que o payload do seu token tenha esta estrutura
interface DecodedToken { interface DecodedToken {
name: string name: string;
email: string email: string;
role: string role: string;
exp: number exp: number;
// Adicione outros campos que seu token possa ter // Adicione outros campos que seu token possa ter
} }
@ -67,7 +68,7 @@ const themeClasses = {
link: "text-orange-600 hover:text-orange-700", link: "text-orange-600 hover:text-orange-700",
focus: "focus:border-orange-500 focus:ring-orange-500", focus: "focus:border-orange-500 focus:ring-orange-500",
}, },
} };
const roleIcons = { const roleIcons = {
secretary: UserCheck, secretary: UserCheck,
@ -76,17 +77,17 @@ const roleIcons = {
admin: UserCheck, admin: UserCheck,
manager: IdCard, manager: IdCard,
finance: Receipt, finance: Receipt,
} };
export function LoginForm({ title, description, role, themeColor, redirectPath, children }: LoginFormProps) { export function LoginForm({ title, description, role, themeColor, redirectPath, children }: LoginFormProps) {
const [form, setForm] = useState<FormState>({ email: "", password: "" }) const [form, setForm] = useState<FormState>({ email: "", password: "" });
const [showPassword, setShowPassword] = useState(false) const [showPassword, setShowPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false);
const router = useRouter() const router = useRouter();
const { toast } = useToast() const { toast } = useToast();
const currentTheme = themeClasses[themeColor] const currentTheme = themeClasses[themeColor];
const Icon = roleIcons[role] const Icon = roleIcons[role];
// ================================================================== // ==================================================================
// AJUSTE PRINCIPAL NA LÓGICA DE LOGIN // AJUSTE PRINCIPAL NA LÓGICA DE LOGIN
@ -96,13 +97,12 @@ export function LoginForm({ title, description, role, themeColor, redirectPath,
setIsLoading(true); setIsLoading(true);
const LOGIN_URL = "https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password"; const LOGIN_URL = "https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password";
const API_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY; const API_KEY = apikey;
if (!API_KEY) { if (!API_KEY) {
toast({ toast({
title: "Erro de Configuração", title: "Erro de Configuração",
description: "A chave da API não foi encontrada.", description: "A chave da API não foi encontrada.",
variant: "destructive",
}); });
setIsLoading(false); setIsLoading(false);
return; return;
@ -113,7 +113,7 @@ export function LoginForm({ title, description, role, themeColor, redirectPath,
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"apikey": API_KEY, apikey: API_KEY,
}, },
body: JSON.stringify({ email: form.email, password: form.password }), body: JSON.stringify({ email: form.email, password: form.password }),
}); });
@ -135,15 +135,14 @@ export function LoginForm({ title, description, role, themeColor, redirectPath,
/* ===================================================================================== */ /* ===================================================================================== */
Cookies.set("access_token", accessToken, { expires: 1, secure: true }); Cookies.set("access_token", accessToken, { expires: 1, secure: true });
localStorage.setItem('user_info', JSON.stringify(user)); localStorage.setItem("user_info", JSON.stringify(user));
toast({ toast({
title: "Login bem-sucedido!", title: "Login bem-sucedido!",
description: `Bem-vindo(a), ${user.user_metadata.full_name || 'usuário'}! Redirecionando...`, description: `Bem-vindo(a), ${user.user_metadata.full_name || "usuário"}! Redirecionando...`,
}); });
router.push(redirectPath); router.push(redirectPath);
} catch (error) { } catch (error) {
toast({ toast({
title: "Erro no Login", title: "Erro no Login",
@ -173,38 +172,15 @@ export function LoginForm({ title, description, role, themeColor, redirectPath,
<Label htmlFor="email">E-mail</Label> <Label htmlFor="email">E-mail</Label>
<div className="relative"> <div className="relative">
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" /> <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<Input <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} />
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> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="password">Senha</Label> <Label htmlFor="password">Senha</Label>
<div className="relative"> <div className="relative">
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" /> <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
<Input <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} />
id="password" <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}>
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" />} {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
</button> </button>
</div> </div>
@ -243,5 +219,5 @@ export function LoginForm({ title, description, role, themeColor, redirectPath,
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
) );
} }

14
services/api.mjs
View File

@ -1,6 +1,6 @@
const BASE_URL = "https://yuanqfswhberkoevtmfr.supabase.co"; const BASE_URL = "https://yuanqfswhberkoevtmfr.supabase.co";
const API_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ"; const API_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ";
export const apikey = API_KEY;
var tempToken; var tempToken;
export async function login() { export async function login() {
@ -9,7 +9,7 @@ export async function login() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
Prefer: "return=representation", Prefer: "return=representation",
"apikey": API_KEY, // valor fixo apikey: API_KEY, // valor fixo
}, },
body: JSON.stringify({ email: "riseup@popcode.com.br", password: "riseup" }), body: JSON.stringify({ email: "riseup@popcode.com.br", password: "riseup" }),
}); });
@ -21,13 +21,9 @@ export async function login() {
return data; return data;
} }
let loginPromise = login(); let loginPromise = login();
async function request(endpoint, options = {}) { async function request(endpoint, options = {}) {
if (loginPromise) { if (loginPromise) {
try { try {
await loginPromise; await loginPromise;
@ -42,8 +38,8 @@ async function request(endpoint, options = {}) {
const headers = { const headers = {
"Content-Type": "application/json", "Content-Type": "application/json",
"apikey": API_KEY, apikey: API_KEY,
...(token ? { "Authorization": `Bearer ${token}` } : {}), ...(token ? { Authorization: `Bearer ${token}` } : {}),
...options.headers, ...options.headers,
}; };
@ -54,7 +50,6 @@ async function request(endpoint, options = {}) {
}); });
if (!response.ok) { if (!response.ok) {
let errorBody = `Status: ${response.status}`; let errorBody = `Status: ${response.status}`;
try { try {
const contentType = response.headers.get("content-type"); const contentType = response.headers.get("content-type");
@ -66,7 +61,6 @@ async function request(endpoint, options = {}) {
errorBody = await response.text(); errorBody = await response.text();
} }
} catch (e) { } catch (e) {
errorBody = `Status: ${response.status} - Falha ao ler corpo do erro.`; errorBody = `Status: ${response.status} - Falha ao ler corpo do erro.`;
} }