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/routes/AppRoutes.tsx

@@ -0,0 +1,63 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import LoginPage from '../pages/LoginPage';
+import HomePage from '../pages/HomePage'; // Crearemos esta página simple
+import { useAuth } from '../contexts/AuthContext';
+import ChangePasswordPage from '../pages/ChangePasswordPage'; // Crearemos esta
+import MainLayout from '../layouts/MainLayout'; // Crearemos este
+
+// Componente para proteger rutas
+const ProtectedRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {
+    const { isAuthenticated, isLoading } = useAuth();
+
+    if (isLoading) {
+         // Muestra algo mientras verifica el token (ej: un spinner)
+         return <div>Cargando...</div>;
+    }
+
+    return isAuthenticated ? children : <Navigate to="/login" replace />;
+};
+
+// Componente para rutas públicas (redirige si ya está logueado)
+const PublicRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  if (isLoading) {
+       return <div>Cargando...</div>;
+  }
+
+  return !isAuthenticated ? children : <Navigate to="/" replace />;
+};
+
+
+const AppRoutes = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        {/* Rutas Públicas */}
+        <Route path="/login" element={<PublicRoute><LoginPage /></PublicRoute>} />
+        <Route path="/change-password" element={<ProtectedRoute><ChangePasswordPage /></ProtectedRoute>} /> {/* Asumimos que se accede logueado */}
+
+        {/* Rutas Protegidas dentro del Layout Principal */}
+        <Route
+          path="/*" // Captura todas las demás rutas
+          element={
+            <ProtectedRoute>
+              <MainLayout> {/* Layout que tendrá la navegación principal */}
+                 {/* Aquí irán las rutas de los módulos */}
+                 <Routes>
+                      <Route index element={<HomePage />} /> {/* Página por defecto al loguearse */}
+                      {/* <Route path="/usuarios" element={<GestionUsuariosPage />} /> */}
+                      {/* <Route path="/zonas" element={<GestionZonasPage />} /> */}
+                      {/* ... otras rutas de módulos ... */}
+                      <Route path="*" element={<Navigate to="/" replace />} /> {/* Redirige rutas no encontradas al home */}
+                 </Routes>
+              </MainLayout>
+            </ProtectedRoute>
+          }
+        />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default AppRoutes;