AgentHub/client/src/components/AuthGate.tsx

/**
 * @file AuthGate.tsx
 * @description Server mode's login gate around the whole app (docs/SERVER-MODE.md).
 * Asks `GET /api/auth/me` (again every 2 s while it gets no answer): in local
 * mode — the default — it renders the app and nothing else changes, at once
 * when this browser last saw local mode (`agenthub.authMode`); in server mode it renders the login page until
 * someone logs in, and again whenever a request answers 401 `EAUTH`
 * (`AUTH_REQUIRED_EVENT`). Logging out unmounts the app, so no page keeps the
 * previous user's data. `useAuth()` gives the sidebar the user, `logout`, and
 * `updateUser` (Settings → Account's saved display name shows at once);
 * `usePermissions()` says what that user's role may do, so pages hide the rest.
 * Once an account is known (local mode is one), its own UI preferences are
 * loaded into this browser (`lib/userPrefs.ts`).
 * The login page follows the OS's light/dark (`AuthCard`). An account whose
 * password an admin gave (`mustChangePassword`) sees only
 * `FirstPasswordPage` until it picks its own.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useState,
  type FormEvent,
  type ReactNode,
} from "react";
import { useTranslation } from "react-i18next";
import { Eye, EyeOff } from "lucide-react";
import { AuthCard } from "./AuthCard";
import { FirstPasswordPage } from "./FirstPasswordPage";
import { api, AUTH_REQUIRED_EVENT, type AuthState, type AuthUser } from "../lib/api";
import { hydrate } from "../lib/userPrefs";

type AuthValue = {
  state: AuthState;
  logout: () => Promise<void>;
  updateUser: (patch: Partial<AuthUser>) => void;
};

const AuthContext = createContext<AuthValue>({
  state: { mode: "local" },
  logout: async () => {},
  updateUser: () => {},
});

/** The current login; `{mode: "local"}` outside server mode (and in tests). */
export const useAuth = () => useContext(AuthContext);

/**
 * What the logged-in user may do — the server's rules (server/lib/auth.js,
 * scope.js) mirrored so the UI hides what would only be refused. Local mode:
 * everything. `isAdmin`: the host's own setup (Settings → System, updates,
 * AI tools, proxies, users, alert rules…). `seesAll`: every user's rows
 * (admin, analyst). `canEditLane`: an admin any workspace, everyone else
 * only their own — the one that matters is an analyst looking at another
 * user's.
 */
export function usePermissions() {
  const { state } = useAuth();
  const user = state.mode === "server" ? state.user : null;
  const local = state.mode !== "server";
  const isAdmin = local || user?.role === "admin";
  return {
    isAdmin,
    // Local mode: one person on their own machine — what only serves a
    // shared server (File Explorer, uploads, AgentHub's own git logins) is
    // hidden; their desktop and their own git config already do it.
    local,
    seesAll: local || (!!user && user.role !== "developer"),
    // A developer only ever sees their own rows, so everything shown is theirs.
    canEditLane: (lane?: { owner_id?: number | null } | null) =>
      isAdmin || user?.role === "developer" || (!!user && lane?.owner_id === user.id),
  };
}

/** The mode this browser last saw, so a local dashboard paints at once. */
const MODE_KEY = "agenthub.authMode";
const RETRY_MS = 2000;

function cachedState(): AuthState | null {
  try {
    return localStorage.getItem(MODE_KEY) === "local" ? { mode: "local" } : null;
  } catch {
    return null;
  }
}

export function AuthGate({ children }: { children: ReactNode }) {
  // null = still asking the server. A browser that last saw local mode starts
  // there and is corrected by the answer (or by a 401) if that changed.
  const [state, setState] = useState<AuthState | null>(cachedState);

  useEffect(() => {
    let timer: number | undefined;
    let alive = true;
    const ask = () => {
      api.auth
        .me()
        .then((next) => {
          if (!alive) return;
          try {
            localStorage.setItem(MODE_KEY, next.mode);
          } catch {
            /* storage blocked */
          }
          setState(next);
        })
        .catch((err: { status?: number; code?: string }) => {
          if (!alive) return;
          // An answer that is not this build's: an older server still running
          // under a freshly built UI (404, or its index.html → EBADRESPONSE), or
          // DASHBOARD_TOKEN's own 401 — neither is server mode, so render the
          // app as before and let it show its own state.
          if (
            err?.status === 404 ||
            err?.code === "EBADRESPONSE" ||
            (err?.status === 401 && err?.code !== "EAUTH")
          ) {
            setState({ mode: "local" });
            return;
          }
          // No answer at all (a restart, a proxy's 502): ask again rather than
          // guess — "local" would hide a server-mode dashboard's login page.
          timer = window.setTimeout(ask, RETRY_MS);
        });
    };
    ask();
    // Any request answering 401 EAUTH means server mode with no valid login.
    const onRequired = () => setState({ mode: "server", user: null });
    window.addEventListener(AUTH_REQUIRED_EVENT, onRequired);
    return () => {
      alive = false;
      window.clearTimeout(timer);
      window.removeEventListener(AUTH_REQUIRED_EVENT, onRequired);
    };
  }, []);

  // The signed-in account's own preferences (lib/userPrefs.ts): loaded once
  // per account, so a second login in this browser brings that account's.
  const account =
    state?.mode === "local"
      ? "local"
      : state?.mode === "server" && state.user
        ? `u${state.user.id}`
        : null;
  useEffect(() => {
    if (account) void hydrate();
  }, [account]);

  // Stable, so a page may list it as an effect dependency.
  const updateUser = useCallback(
    (patch: Partial<AuthUser>) =>
      setState((s) =>
        s && s.mode === "server" && s.user ? { ...s, user: { ...s.user, ...patch } } : s
      ),
    []
  );

  if (!state) return null;
  if (state.mode === "server" && !state.user) {
    return <LoginPage onLoggedIn={(user) => setState({ mode: "server", user })} />;
  }
  const logout = async () => {
    await api.auth.logout().catch(() => {});
    setState({ mode: "server", user: null });
  };
  // A password an admin gave: nothing else until the user picks their own
  // (the server refuses the rest anyway — EPWCHANGE).
  if (state.mode === "server" && state.user?.mustChangePassword) {
    return (
      <FirstPasswordPage
        user={state.user}
        onDone={() => updateUser({ mustChangePassword: false })}
        onLogout={() => void logout()}
      />
    );
  }
  return (
    <AuthContext.Provider value={{ state, logout, updateUser }}>{children}</AuthContext.Provider>
  );
}

function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
  const { t } = useTranslation();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setError(null);
    try {
      onLoggedIn((await api.auth.login(username, password)).user);
    } catch (err) {
      const code = (err as { code?: string }).code;
      setError(code === "ETOOMANY" ? t("auth.tooMany") : t("auth.failed"));
      setPassword("");
    } finally {
      setBusy(false);
    }
  };

  // Nobody is signed in, so no account's theme applies: AuthCard follows the OS.
  return (
    <AuthCard title={t("auth.title")} subtitle={t("auth.subtitle")} onSubmit={submit}>
      <label className="block space-y-1.5 text-sm font-medium text-fg-primary">
        <span>{t("auth.username")}</span>
        <input
          className="input h-11 w-full px-4"
          autoComplete="username"
          autoFocus
          required
          placeholder={t("auth.username")}
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </label>
      <div className="space-y-1.5 text-sm font-medium text-fg-primary">
        <label htmlFor="login-password">{t("auth.password")}</label>
        <div className="relative">
          <input
            id="login-password"
            className="input h-11 w-full pl-4 pr-11"
            type={showPassword ? "text" : "password"}
            autoComplete="current-password"
            required
            placeholder="••••••••"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <button
            type="button"
            onClick={() => setShowPassword((v) => !v)}
            aria-label={showPassword ? t("auth.hidePassword") : t("auth.showPassword")}
            aria-pressed={showPassword}
            className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg text-fg-muted hover:text-fg-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
          >
            {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
          </button>
        </div>
      </div>
      {error && (
        <p role="alert" className="text-sm text-status-danger">
          {error}
        </p>
      )}
      {/* Inverted fill (text colour behind the surface colour): black in a
              light theme, light in a dark one, like the reference design. */}
      <button
        type="submit"
        className="h-11 w-full rounded-xl bg-fg-primary text-sm font-medium text-surface-0 shadow-sm transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50"
        disabled={busy}
      >
        {busy ? t("auth.submitting") : t("auth.submit")}
      </button>
      <p className="text-center text-sm text-fg-secondary">{t("auth.noAccount")}</p>
    </AuthCard>
  );
}