add login screen in doctors page #13
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
124
susconecta/app/login/page.tsx
Normal file
124
susconecta/app/login/page.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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,8 +618,10 @@ const ProfissionalPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<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 gap-4">
|
||||
<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">
|
||||
@ -627,7 +632,18 @@ const ProfissionalPage = () => {
|
||||
<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">
|
||||
@ -852,6 +868,7 @@ const ProfissionalPage = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
40
susconecta/components/ProtectedRoute.tsx
Normal file
40
susconecta/components/ProtectedRoute.tsx
Normal file
@ -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}</>
|
||||
}
|
||||
90
susconecta/hooks/useAuth.tsx
Normal file
90
susconecta/hooks/useAuth.tsx
Normal file
@ -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
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user