Merge pull request #14 from rede5/Front-back-integracao-task1

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
2025-12-10 19:11:22 -03:00 · 2025-12-10 19:11:22 -03:00 · 10be798b53
commit 10be798b53
parent 7a300de997 e83c5c8b08
5 changed files with 126 additions and 38 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Environment variables
+.env
--- a/frontend/contexts/AuthContext.tsx
+++ b/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) => {
-    // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 800));
-    
-    const foundUser = MOCK_USERS.find(u => u.email === email);
-    if (foundUser) {
-      setUser(foundUser);
+  const login = async (email: string, password?: string) => {
+    // 1. Check for Demo/Mock users first
+    const mockUser = MOCK_USERS.find(u => u.email === email);
+    if (mockUser) {
+      await new Promise(resolve => setTimeout(resolve, 800)); // Simulate delay
+      setUser({ ...mockUser, ativo: true });
      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>
  );
--- a/frontend/pages/Login.tsx
+++ b/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
-                    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"
+                    required
+                    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">
-                    <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
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  >
+                    {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>
--- a/frontend/pages/Register.tsx
+++ b/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
-        setTimeout(() => {
-            registerPendingUser({
-                id: tempUserId,
-                name: formData.name,
+        try {
+            await register({
+                nome: formData.name,
                email: formData.email,
-                phone: formData.phone,
-                registeredInstitution: undefined
+                senha: formData.password,
+                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(() => {
-            registerPendingUser({
-                id: tempUserId,
-                name: formData.name,
+        try {
+            await register({
+                nome: formData.name,
                email: formData.email,
-                phone: formData.phone,
-                registeredInstitution: newInstitution.name
+                senha: formData.password,
+                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
--- a/frontend/types.ts
+++ b/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 {