add login screen in doctors page #13
@ -1,5 +1,6 @@
|
|||||||
import type React from "react"
|
import type React from "react"
|
||||||
import type { Metadata } from "next"
|
import type { Metadata } from "next"
|
||||||
|
import { AuthProvider } from "@/hooks/useAuth"
|
||||||
import "./globals.css"
|
import "./globals.css"
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
@ -17,7 +18,11 @@ export default function RootLayout({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="pt-BR" className="antialiased">
|
<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>
|
</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 React, { useState } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import ProtectedRoute from "@/components/ProtectedRoute";
|
||||||
|
import { useAuth } from "@/hooks/useAuth";
|
||||||
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";
|
||||||
@ -65,6 +67,7 @@ const colorsByType = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const ProfissionalPage = () => {
|
const ProfissionalPage = () => {
|
||||||
|
const { logout, userEmail } = useAuth();
|
||||||
const [activeSection, setActiveSection] = useState('calendario');
|
const [activeSection, setActiveSection] = useState('calendario');
|
||||||
const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(null);
|
const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(null);
|
||||||
const [events, setEvents] = useState<any[]>([
|
const [events, setEvents] = useState<any[]>([
|
||||||
@ -615,20 +618,33 @@ const ProfissionalPage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-8">
|
<ProtectedRoute>
|
||||||
<header className="bg-white shadow-md rounded-lg p-4 mb-6 flex items-center gap-4">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<Avatar className="h-12 w-12">
|
<header className="bg-white shadow-md rounded-lg p-4 mb-6 flex items-center justify-between">
|
||||||
<AvatarImage src={medico.fotoUrl} alt={medico.nome} />
|
<div className="flex items-center gap-4">
|
||||||
<AvatarFallback className="bg-muted">
|
<Avatar className="h-12 w-12">
|
||||||
<User className="h-5 w-5" />
|
<AvatarImage src={medico.fotoUrl} alt={medico.nome} />
|
||||||
</AvatarFallback>
|
<AvatarFallback className="bg-muted">
|
||||||
</Avatar>
|
<User className="h-5 w-5" />
|
||||||
<div className="min-w-0">
|
</AvatarFallback>
|
||||||
<p className="text-sm text-muted-foreground truncate">Conta do profissional</p>
|
</Avatar>
|
||||||
<h2 className="text-lg font-semibold leading-none truncate">{medico.nome}</h2>
|
<div className="min-w-0">
|
||||||
<p className="text-sm text-muted-foreground truncate">{medico.identificacao}</p>
|
<p className="text-sm text-muted-foreground truncate">Conta do profissional</p>
|
||||||
</div>
|
<h2 className="text-lg font-semibold leading-none truncate">{medico.nome}</h2>
|
||||||
</header>
|
<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">
|
<div className="grid grid-cols-1 md:grid-cols-[220px_1fr] gap-6">
|
||||||
{}
|
{}
|
||||||
@ -851,7 +867,8 @@ const ProfissionalPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</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