add login screen in doctors page

2025-09-21 16:58:18 -03:00 · 2025-09-21 16:58:18 -03:00 · a8a2d5c09a
commit a8a2d5c09a
parent 913fd6ad64
5 changed files with 292 additions and 16 deletions
--- a/susconecta/app/layout.tsx
+++ b/susconecta/app/layout.tsx
@ -1,5 +1,6 @@
 import type React from "react"
 import type { Metadata } from "next"
+import { AuthProvider } from "@/hooks/useAuth"
 import "./globals.css"

 export const metadata: Metadata = {
@ -17,7 +18,11 @@ export default function RootLayout({
 }) {
  return (
    <html lang="pt-BR" className="antialiased">
-      <body style={{ fontFamily: "var(--font-geist-sans)" }}>{children}</body>
+      <body style={{ fontFamily: "var(--font-geist-sans)" }}>
+        <AuthProvider>
+          {children}
+        </AuthProvider>
+      </body>
    </html>
  )
 }
--- a/susconecta/app/login/page.tsx
+++ b/susconecta/app/login/page.tsx
@ -0,0 +1,124 @@
+'use client'
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { useAuth } from '@/hooks/useAuth'
+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'
+
+export default function LoginPage() {
+  const [credentials, setCredentials] = useState({ email: '', password: '' })
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+  const { login } = useAuth()
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    // Simular delay de autenticação
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    // Tentar fazer login usando o contexto
+    const success = login(credentials.email, credentials.password)
+    
+    if (success) {
+      // Aguardar um pouco para garantir que o estado foi atualizado
+      setTimeout(() => {
+        // Tentar router.push primeiro
+        router.push('/profissional')
+        
+        // Fallback: usar window.location se router.push não funcionar
+        setTimeout(() => {
+          if (window.location.pathname === '/login') {
+            window.location.href = '/profissional'
+          }
+        }, 100)
+      }, 100)
+    } else {
+      setError('Email ou senha incorretos')
+    }
+    
+    setLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 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-gray-900">
+            Login Profissional de Saúde
+          </h2>
+          <p className="mt-2 text-sm text-gray-600">
+            Entre com suas credenciais para acessar o sistema
+          </p>
+        </div>
+        
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-center">Acesso ao Sistema</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleLogin} className="space-y-6">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                  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"
+                />
+              </div>
+              
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                  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"
+                />
+              </div>
+
+              {error && (
+                <Alert variant="destructive">
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <Button 
+                type="submit" 
+                className="w-full cursor-pointer" 
+                disabled={loading}
+              >
+                {loading ? 'Entrando...' : 'Entrar'}
+              </Button>
+            </form>
+            
+            <div className="mt-4 text-center">
+              <Button variant="outline" asChild className="w-full">
+                <Link href="/">
+                  Voltar ao Início
+                </Link>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@ -2,6 +2,8 @@

 import React, { useState } from "react";
 import Link from "next/link";
+import ProtectedRoute from "@/components/ProtectedRoute";
+import { useAuth } from "@/hooks/useAuth";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@ -65,6 +67,7 @@ const colorsByType = {
 };

 const ProfissionalPage = () => {
+  const { logout, userEmail } = useAuth();
  const [activeSection, setActiveSection] = useState('calendario');
  const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(null);
  const [events, setEvents] = useState<any[]>([
@ -615,20 +618,33 @@ const ProfissionalPage = () => {
  };

  return (
-    <div className="container mx-auto px-4 py-8">
-      <header className="bg-white shadow-md rounded-lg p-4 mb-6 flex items-center gap-4">
-        <Avatar className="h-12 w-12">
-          <AvatarImage src={medico.fotoUrl} alt={medico.nome} />
-          <AvatarFallback className="bg-muted">
-            <User className="h-5 w-5" />
-          </AvatarFallback>
-        </Avatar>
-        <div className="min-w-0">
-          <p className="text-sm text-muted-foreground truncate">Conta do profissional</p>
-          <h2 className="text-lg font-semibold leading-none truncate">{medico.nome}</h2>
-          <p className="text-sm text-muted-foreground truncate">{medico.identificacao}</p>
-        </div>
-      </header>
+    <ProtectedRoute>
+      <div className="container mx-auto px-4 py-8">
+        <header className="bg-white shadow-md rounded-lg p-4 mb-6 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Avatar className="h-12 w-12">
+              <AvatarImage src={medico.fotoUrl} alt={medico.nome} />
+              <AvatarFallback className="bg-muted">
+                <User className="h-5 w-5" />
+              </AvatarFallback>
+            </Avatar>
+            <div className="min-w-0">
+              <p className="text-sm text-muted-foreground truncate">Conta do profissional</p>
+              <h2 className="text-lg font-semibold leading-none truncate">{medico.nome}</h2>
+              <p className="text-sm text-muted-foreground truncate">{medico.identificacao}</p>
+              {userEmail && (
+                <p className="text-xs text-muted-foreground truncate">Logado como: {userEmail}</p>
+              )}
+            </div>
+          </div>
+          <Button 
+            variant="outline" 
+            onClick={logout}
+            className="text-red-600 border-red-600 hover:bg-red-600 hover:text-white cursor-pointer"
+          >
+            Sair
+          </Button>
+        </header>
      
      <div className="grid grid-cols-1 md:grid-cols-[220px_1fr] gap-6">
        {}
@ -851,7 +867,8 @@ const ProfissionalPage = () => {
          </div>
        </div>
      )}
-    </div>
+      </div>
+    </ProtectedRoute>
  );
 };

--- a/susconecta/components/ProtectedRoute.tsx
+++ b/susconecta/components/ProtectedRoute.tsx
@ -0,0 +1,40 @@
+'use client'
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { useAuth } from '@/hooks/useAuth'
+
+interface ProtectedRouteProps {
+  children: React.ReactNode
+}
+
+export default function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { isAuthenticated, checkAuth } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    // Verificar autenticação sempre que o componente montar
+    checkAuth()
+  }, [checkAuth])
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      console.log('Usuário não autenticado, redirecionando para login...')
+      router.push('/login')
+    } else {
+      console.log('Usuário autenticado!')
+    }
+  }, [isAuthenticated, router])
+
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">Redirecionando para login...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return <>{children}</>
+}
--- a/susconecta/hooks/useAuth.tsx
+++ b/susconecta/hooks/useAuth.tsx
@ -0,0 +1,90 @@
+'use client'
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
+import { useRouter } from 'next/navigation'
+
+interface AuthContextType {
+  isAuthenticated: boolean
+  userEmail: string | null
+  login: (email: string, password: string) => boolean
+  logout: () => void
+  checkAuth: () => void
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [userEmail, setUserEmail] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const router = useRouter()
+
+  const checkAuth = () => {
+    if (typeof window !== 'undefined') {
+      const auth = localStorage.getItem('isAuthenticated')
+      const email = localStorage.getItem('userEmail')
+      
+      if (auth === 'true' && email) {
+        setIsAuthenticated(true)
+        setUserEmail(email)
+      } else {
+        setIsAuthenticated(false)
+        setUserEmail(null)
+      }
+    }
+    setIsLoading(false)
+  }
+
+  useEffect(() => {
+    checkAuth()
+  }, [])
+
+  const login = (email: string, password: string): boolean => {
+    if (email === 'teste@gmail.com' && password === '123456') {
+      localStorage.setItem('isAuthenticated', 'true')
+      localStorage.setItem('userEmail', email)
+      setIsAuthenticated(true)
+      setUserEmail(email)
+      return true
+    }
+    return false
+  }
+
+  const logout = () => {
+    localStorage.removeItem('isAuthenticated')
+    localStorage.removeItem('userEmail')
+    setIsAuthenticated(false)
+    setUserEmail(null)
+    router.push('/login')
+  }
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">Carregando...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <AuthContext.Provider value={{
+      isAuthenticated,
+      userEmail,
+      login,
+      logout,
+      checkAuth
+    }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export const useAuth = () => {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error('useAuth deve ser usado dentro de AuthProvider')
+  }
+  return context
+}