feat(client): integra autenticacao real e melhora fluxo de login

- Integra AuthContext com API do Backend (/auth/login e /auth/register)
- Implementa Modo Hibrido: Demo Users usam Mock, outros usam API Real
- Habilita campo de senha e adiciona toggle de visibilidade (olho)
- Conecta formulario de Registro ao backend
- Adiciona preenchimento automatico de senha para usuarios de demonstracao
- Mapeia status 'ativo' do usuario vindo da API

frontend/contexts/AuthContext.tsx

@@ -36,8 +36,9 @@ const MOCK_USERS: User[] = [
 
 interface AuthContextType {
   user: User | null;
-  login: (email: string) => Promise<boolean>;
+  login: (email: string, password?: string) => Promise<boolean>;
   logout: () => void;
+  register: (data: { nome: string; email: string; senha: string; telefone: string }) => Promise<boolean>;
   availableUsers: User[]; // Helper for the login screen demo
 }
 
@@ -46,24 +47,78 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const [user, setUser] = useState<User | null>(null);
 
-  const login = async (email: string) => {
+  const login = async (email: string, password?: string) => {
-    // Simulate API call
+    // 1. Check for Demo/Mock users first
-    await new Promise(resolve => setTimeout(resolve, 800));
+    const mockUser = MOCK_USERS.find(u => u.email === email);
-    
+    if (mockUser) {
-    const foundUser = MOCK_USERS.find(u => u.email === email);
+      await new Promise(resolve => setTimeout(resolve, 800)); // Simulate delay
-    if (foundUser) {
+      setUser({ ...mockUser, ativo: true });
-      setUser(foundUser);
       return true;
     }
-    return false;
+
+    // 2. Try Real API
+    try {
+      const response = await fetch(`${import.meta.env.VITE_API_URL}/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, senha: password })
+      });
+
+      if (!response.ok) {
+        console.error('Login failed:', response.statusText);
+        return false;
+      }
+
+      const data = await response.json();
+
+      // Store token (optional, if you need it for other requests outside cookies)
+      // localStorage.setItem('token', data.access_token);
+
+      const backendUser = data.user;
+      // Map backend user to frontend User type
+      const mappedUser: User = {
+        id: backendUser.id,
+        email: backendUser.email,
+        name: backendUser.email.split('@')[0], // Fallback name or from profile if available
+        role: backendUser.role as UserRole,
+        ativo: backendUser.ativo,
+        // ... propagate other fields if needed or fetch profile
+      };
+
+      setUser(mappedUser);
+      return true;
+    } catch (err) {
+      console.error('Login error:', err);
+      return false;
+    }
   };
 
   const logout = () => {
     setUser(null);
   };
 
+  const register = async (data: { nome: string; email: string; senha: string; telefone: string }) => {
+    try {
+      const response = await fetch(`${import.meta.env.VITE_API_URL}/auth/register`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data)
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || 'Falha no cadastro');
+      }
+
+      return true;
+    } catch (err) {
+      console.error('Registration error:', err);
+      throw err;
+    }
+  };
+
   return (
-    <AuthContext.Provider value={{ user, login, logout, availableUsers: MOCK_USERS }}>
+    <AuthContext.Provider value={{ user, login, logout, register, availableUsers: MOCK_USERS }}>
       {children}
     </AuthContext.Provider>
   );

frontend/pages/Login.tsx

@@ -12,6 +12,8 @@ interface LoginProps {
 export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
   const { login, availableUsers } = useAuth();
   const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
 
@@ -20,7 +22,7 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
     setIsLoading(true);
     setError('');
 
-    const success = await login(email);
+    const success = await login(email, password);
     if (!success) {
       setError('Usuário não encontrado. Tente um dos e-mails de demonstração.');
     }
@@ -29,6 +31,7 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
 
   const fillCredentials = (userEmail: string) => {
     setEmail(userEmail);
+    setPassword('123456'); // Dummy password to pass HTML5 validation
   };
 
   const getRoleLabel = (role: UserRole) => {
@@ -95,16 +98,31 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
                 </label>
                 <div className="relative">
                   <input
-                    type="password"
+                    type={showPassword ? 'text' : 'password'}
                     placeholder="••••••••"
-                    readOnly
+                    required
-                    className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg bg-gray-50 cursor-not-allowed"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
+                    style={{ focusRing: '2px solid #5A4B81' }}
+                    onFocus={(e) => e.target.style.borderColor = '#5A4B81'}
+                    onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
                   />
-                  <button type="button" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
+                  <button
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    type="button"
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    onClick={() => setShowPassword(!showPassword)}
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
-                    </svg>
+                  >
+                    {showPassword ? (
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                      </svg>
+                    ) : (
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                      </svg>
+                    )}
                   </button>
                 </div>
               </div>

frontend/pages/Register.tsx

@@ -1,8 +1,8 @@
-
 import React, { useState } from 'react';
 import { Button } from '../components/Button';
 import { Input } from '../components/Input';
 import { InstitutionForm } from '../components/InstitutionForm';
+import { useAuth } from '../contexts/AuthContext';
 import { useData } from '../contexts/DataContext';
 
 interface RegisterProps {
@@ -10,7 +10,8 @@ interface RegisterProps {
 }
 
 export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
-    const { addInstitution, registerPendingUser } = useData();
+    const { register } = useAuth();
+    const { addInstitution } = useData();
     const [formData, setFormData] = useState({
         name: '',
         email: '',
@@ -64,21 +65,25 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
             return;
         }
 
-        // Simular registro - usuário ficará pendente de aprovação
+        try {
-        setTimeout(() => {
+            await register({
-            registerPendingUser({
+                nome: formData.name,
-                id: tempUserId,
-                name: formData.name,
                 email: formData.email,
-                phone: formData.phone,
+                senha: formData.password,
-                registeredInstitution: undefined
+                telefone: formData.phone
             });
             setIsLoading(false);
             setIsPending(true);
-        }, 1500);
+        } catch (err: any) {
+            setIsLoading(false);
+            setError(err.message || 'Erro ao realizar cadastro');
+        }
     };
 
-    const handleInstitutionSubmit = (institutionData: any) => {
+    const handleInstitutionSubmit = async (institutionData: any) => {
+        // Logic for adding institution remains (mock or need API for it too?), 
+        // but user registration must be real.
+        // Assuming institution addition is still mock for now in DataContext.
         const newInstitution = {
             ...institutionData,
             id: `inst-${Date.now()}`,
@@ -88,19 +93,25 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
         setRegisteredInstitutionName(newInstitution.name);
         setShowInstitutionForm(false);
 
-        // Complete registration - usuário ficará pendente de aprovação
+        // Complete registration via API
         setIsLoading(true);
-        setTimeout(() => {
+        try {
-            registerPendingUser({
+            await register({
-                id: tempUserId,
+                nome: formData.name,
-                name: formData.name,
                 email: formData.email,
-                phone: formData.phone,
+                senha: formData.password,
-                registeredInstitution: newInstitution.name
+                telefone: formData.phone
+                // Note: The backend register endpoint currently doesn't accept institution data directly.
+                // We'd need to create the institution separately after logging in, but the user won't be able to login yet (pending).
+                // Or update backend to accept it.
+                // For now, we perform the user registration.
             });
             setIsLoading(false);
             setIsPending(true);
-        }, 1500);
+        } catch (err: any) {
+            setIsLoading(false);
+            setError(err.message || 'Erro ao realizar cadastro');
+        }
     };
 
     // Show institution form modal

frontend/types.ts

@@ -43,6 +43,7 @@ export interface User {
   registeredInstitution?: string; // Nome da instituição cadastrada durante o registro (se houver)
   phone?: string; // Telefone do usuário
   createdAt?: string; // Data de criação do cadastro
+  ativo?: boolean;
 }
 
 export interface Institution {