xertica-ui 2.5.0 → 2.5.2

package/contexts/AuthContext.tsx

@@ -1,121 +1,121 @@
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Types
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface AuthUser {
-  email: string;
-  name?: string;
-  avatar?: string;
-}
-
-interface AuthContextValue {
-  /** Currently authenticated user, or null when logged out */
-  user: AuthUser | null;
-  /** True while the initial session hydration from localStorage is pending */
-  isLoading: boolean;
-  /** Attempt login — returns true on success, false on invalid credentials */
-  login: (email: string, password: string) => boolean;
-  /** Clear session and redirect to /login */
-  logout: () => void;
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Context
-// ─────────────────────────────────────────────────────────────────────────────
-
-const AuthContext = createContext<AuthContextValue | null>(null);
-
-const STORAGE_KEY = 'xertica_user';
-const AUTH_PATHS = ['/login', '/forgot-password', '/verify-email', '/reset-password'];
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Provider
-// ─────────────────────────────────────────────────────────────────────────────
-
-/**
- * `AuthProvider` — manages authentication state for the devops app.
- *
- * Must be rendered **inside** `<BrowserRouter>` so that `useNavigate` is available.
- * Wrap your `<Routes>` tree with this provider to give all pages access to
- * `user`, `login`, and `logout` via `useAuth()` without prop-drilling.
- *
- * @example
- * ```tsx
- * <Router>
- *   <AuthProvider>
- *     <AppRoutes />
- *   </AuthProvider>
- * </Router>
- * ```
- */
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const [user, setUser] = useState<AuthUser | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const navigate = useNavigate();
-
-  // Hydrate session from localStorage on mount
-  useEffect(() => {
-    try {
-      const raw = localStorage.getItem(STORAGE_KEY);
-      if (raw) setUser(JSON.parse(raw));
-    } catch {
-      localStorage.removeItem(STORAGE_KEY);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  // Redirect authenticated users away from auth-only pages
-  useEffect(() => {
-    if (!isLoading && user && AUTH_PATHS.includes(window.location.pathname)) {
-      navigate('/home', { replace: true });
-    }
-  }, [isLoading, user, navigate]);
-
-  const login = useCallback(
-    (email: string, password: string): boolean => {
-      if (!email.trim() || !password.trim()) return false;
-      const userData: AuthUser = { email };
-      setUser(userData);
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(userData));
-      navigate('/home');
-      return true;
-    },
-    [navigate]
-  );
-
-  const logout = useCallback(() => {
-    setUser(null);
-    localStorage.removeItem(STORAGE_KEY);
-    navigate('/login');
-  }, [navigate]);
-
-  return (
-    <AuthContext.Provider value={{ user, isLoading, login, logout }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Hook
-// ─────────────────────────────────────────────────────────────────────────────
-
-/**
- * `useAuth` — consume authentication state anywhere inside `<AuthProvider>`.
- *
- * @throws if called outside `<AuthProvider>`
- *
- * @example
- * ```tsx
- * const { user, logout } = useAuth();
- * ```
- */
-export function useAuth(): AuthContextValue {
-  const ctx = useContext(AuthContext);
-  if (!ctx) throw new Error('useAuth must be used within <AuthProvider>');
-  return ctx;
-}
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface AuthUser {
+  email: string;
+  name?: string;
+  avatar?: string;
+}
+
+interface AuthContextValue {
+  /** Currently authenticated user, or null when logged out */
+  user: AuthUser | null;
+  /** True while the initial session hydration from localStorage is pending */
+  isLoading: boolean;
+  /** Attempt login — returns true on success, false on invalid credentials */
+  login: (email: string, password: string) => boolean;
+  /** Clear session and redirect to /login */
+  logout: () => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────────
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+const STORAGE_KEY = 'xertica_user';
+const AUTH_PATHS = ['/login', '/forgot-password', '/verify-email', '/reset-password'];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * `AuthProvider` — manages authentication state for the devops app.
+ *
+ * Must be rendered **inside** `<BrowserRouter>` so that `useNavigate` is available.
+ * Wrap your `<Routes>` tree with this provider to give all pages access to
+ * `user`, `login`, and `logout` via `useAuth()` without prop-drilling.
+ *
+ * @example
+ * ```tsx
+ * <Router>
+ *   <AuthProvider>
+ *     <AppRoutes />
+ *   </AuthProvider>
+ * </Router>
+ * ```
+ */
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const navigate = useNavigate();
+
+  // Hydrate session from localStorage on mount
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (raw) setUser(JSON.parse(raw));
+    } catch {
+      localStorage.removeItem(STORAGE_KEY);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Redirect authenticated users away from auth-only pages
+  useEffect(() => {
+    if (!isLoading && user && AUTH_PATHS.includes(window.location.pathname)) {
+      navigate('/home', { replace: true });
+    }
+  }, [isLoading, user, navigate]);
+
+  const login = useCallback(
+    (email: string, password: string): boolean => {
+      if (!email.trim() || !password.trim()) return false;
+      const userData: AuthUser = { email };
+      setUser(userData);
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(userData));
+      navigate('/home');
+      return true;
+    },
+    [navigate]
+  );
+
+  const logout = useCallback(() => {
+    setUser(null);
+    localStorage.removeItem(STORAGE_KEY);
+    navigate('/login');
+  }, [navigate]);
+
+  return (
+    <AuthContext.Provider value={{ user, isLoading, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * `useAuth` — consume authentication state anywhere inside `<AuthProvider>`.
+ *
+ * @throws if called outside `<AuthProvider>`
+ *
+ * @example
+ * ```tsx
+ * const { user, logout } = useAuth();
+ * ```
+ */
+export function useAuth(): AuthContextValue {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used within <AuthProvider>');
+  return ctx;
+}