Fase 2: Creatción de la UI (React + Vite). Implementación de Log In reemplazando texto plano. Y creación de tool para migrar contraseñas.

Frontend/src/contexts/AuthContext.tsx

@@ -0,0 +1,73 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import type { ReactNode } from 'react'; // Importar como tipo
+import type { LoginResponseDto } from '../models/dtos/LoginResponseDto';
+
+interface AuthContextType {
+  isAuthenticated: boolean;
+  user: LoginResponseDto | null;
+  token: string | null;
+  isLoading: boolean; // Para saber si aún está verificando el token inicial
+  login: (userData: LoginResponseDto) => void;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  const [user, setUser] = useState<LoginResponseDto | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true); // Empieza cargando
+
+  // Efecto para verificar token al cargar la app
+  useEffect(() => {
+    const storedToken = localStorage.getItem('authToken');
+    const storedUser = localStorage.getItem('authUser'); // Guardamos el usuario también
+
+    if (storedToken && storedUser) {
+      try {
+         // Aquí podrías añadir lógica para validar si el token aún es válido (ej: decodificarlo)
+         // Por ahora, simplemente asumimos que si está, es válido.
+         const parsedUser: LoginResponseDto = JSON.parse(storedUser);
+         setToken(storedToken);
+         setUser(parsedUser);
+         setIsAuthenticated(true);
+      } catch (error) {
+        console.error("Error parsing stored user data", error);
+        logout(); // Limpia si hay error al parsear
+      }
+    }
+    setIsLoading(false); // Termina la carga inicial
+  }, []);
+
+  const login = (userData: LoginResponseDto) => {
+    localStorage.setItem('authToken', userData.Token);
+    localStorage.setItem('authUser', JSON.stringify(userData)); // Guardar datos de usuario
+    setToken(userData.Token);
+    setUser(userData);
+    setIsAuthenticated(true);
+  };
+
+  const logout = () => {
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('authUser');
+    setToken(null);
+    setUser(null);
+    setIsAuthenticated(false);
+  };
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated, user, token, isLoading, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+// Hook personalizado para usar el contexto fácilmente
+export const useAuth = (): AuthContextType => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};