AgentHub/client/src/pages/GitCredentialsConfig.tsx

/**
 * @file GitCredentialsConfig.tsx
 * @description The **Git credentials** tab of Settings (issue #45) — the
 * logins AgentHub itself gives git for a dashboard fetch/pull/push, one per
 * host, shared by everyone using this install. Lists them, replaces a token,
 * adds one, deletes one. A token is write-only here: the server never returns
 * one, so the form starts blank and the list shows only that one is saved.
 * The git bar's login form saves into the same store. A right-click on a row
 * opens the same Replace / Remove (plus Copy host) as a menu. A bare host
 * (`git.example.com`) means https; Replace keeps the host fixed (it replaces
 * that host's login, never moves it), and a remove asks through `confirmDialog`.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Pencil, Plus, Trash2 } from "lucide-react";
import { api, type GitCredential } from "../lib/api";
import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../components/ContextMenu";
import { confirmDialog } from "../lib/confirm";
import { copyText } from "../lib/clipboard";
import { toast } from "../lib/toast";

const INPUT =
  "w-full rounded border border-border-light bg-surface-0 px-2 py-1 text-xs text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none";

export function GitCredentialsConfig() {
  const { t } = useTranslation("settings");
  const [items, setItems] = useState<GitCredential[]>([]);
  const [error, setError] = useState<string | null>(null);
  // `replacing`: the host is the saved one's and stays fixed.
  const [form, setForm] = useState<{
    url: string;
    username: string;
    token: string;
    replacing?: boolean;
  } | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const ctx = useContextMenu<GitCredential>();
  // A menu item: close the menu, then act on the row it was opened on.
  const pick = (fn: (c: GitCredential) => unknown) => () => {
    const c = ctx.menu?.item;
    ctx.close();
    if (c) fn(c);
  };

  const load = useCallback(async () => {
    try {
      setItems((await api.gitCredentials.list()).items);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setLoading(false);
    }
  }, []);
  useEffect(() => {
    void load();
  }, [load]);

  const save = async () => {
    if (!form) return;
    setError(null);
    let url: URL;
    const typed = form.url.trim();
    try {
      // A bare host (no scheme) is the common case: take it as https.
      url = new URL(/^[a-z][a-z0-9+.-]*:\/\//i.test(typed) ? typed : `https://${typed}`);
    } catch {
      setError(t("gitCreds.badUrl"));
      return;
    }
    setSaving(true);
    try {
      const r = await api.gitCredentials.save({
        protocol: url.protocol.replace(/:$/, ""),
        host: url.host,
        username: form.username.trim(),
        password: form.token,
      });
      setItems(r.items);
      setForm(null);
      toast.success(t("gitCreds.saved", { host: url.host }));
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setSaving(false);
    }
  };

  const replace = (c: GitCredential) =>
    setForm({ url: `${c.protocol}://${c.host}`, username: c.username, token: "", replacing: true });

  const remove = async (c: GitCredential) => {
    if (
      !(await confirmDialog({
        title: t("gitCreds.removeConfirm"),
        confirmLabel: t("gitCreds.remove"),
      }))
    )
      return;
    try {
      setItems((await api.gitCredentials.remove(c.protocol, c.host)).items);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-start justify-between gap-4">
        {/* The page header above already names the section. */}
        <p className="max-w-2xl text-xs text-fg-muted">{t("gitCreds.description")}</p>
        <button
          type="button"
          onClick={() => setForm({ url: "", username: "", token: "" })}
          className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-accent/40 bg-accent/15 px-3 py-1.5 text-xs font-medium text-accent transition-colors hover:bg-accent/25"
        >
          <Plus className="h-3.5 w-3.5" />
          {t("gitCreds.add")}
        </button>
      </div>

      {error && (
        <p className="rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
          {error}
        </p>
      )}

      {form && (
        <form
          className="grid max-w-2xl gap-2 rounded-lg border border-border p-3 sm:grid-cols-3"
          onSubmit={(e) => {
            e.preventDefault();
            void save();
          }}
        >
          <input
            aria-label={t("gitCreds.fieldHost")}
            placeholder="https://git.example.com"
            value={form.url}
            readOnly={form.replacing}
            onChange={(e) => setForm({ ...form, url: e.target.value })}
            className={`${INPUT} font-mono read-only:opacity-70`}
          />
          <input
            aria-label={t("gitCreds.fieldUser")}
            placeholder={t("gitCreds.fieldUser")}
            autoComplete="off"
            value={form.username}
            onChange={(e) => setForm({ ...form, username: e.target.value })}
            className={INPUT}
          />
          <input
            type="password"
            aria-label={t("gitCreds.fieldToken")}
            placeholder={t("gitCreds.fieldToken")}
            autoComplete="new-password"
            value={form.token}
            onChange={(e) => setForm({ ...form, token: e.target.value })}
            className={INPUT}
          />
          <div className="flex gap-2 sm:col-span-3">
            <button
              type="submit"
              disabled={saving || !form.url.trim() || !form.username.trim() || !form.token}
              className="rounded border border-accent/40 bg-accent/15 px-3 py-1 text-xs text-accent hover:bg-accent/25 disabled:cursor-not-allowed disabled:opacity-40"
            >
              {t("gitCreds.save")}
            </button>
            <button
              type="button"
              onClick={() => setForm(null)}
              className="rounded border border-border-light px-3 py-1 text-xs text-fg-secondary hover:bg-surface-3"
            >
              {t("gitCreds.cancel")}
            </button>
          </div>
        </form>
      )}

      <div className="overflow-hidden rounded-lg border border-border">
        <table className="w-full text-left text-xs">
          <thead className="bg-surface-2 text-[10px] uppercase tracking-wider text-fg-muted">
            <tr>
              <th className="px-3 py-2 font-medium">{t("gitCreds.colHost")}</th>
              <th className="px-3 py-2 font-medium">{t("gitCreds.colUser")}</th>
              <th className="px-3 py-2 font-medium">{t("gitCreds.colSaved")}</th>
              <th className="px-3 py-2" />
            </tr>
          </thead>
          <tbody>
            {items.map((c) => (
              <tr
                key={`${c.protocol}://${c.host}`}
                onContextMenu={(e) => ctx.open(e, c)}
                className="border-t border-border"
              >
                <td className="px-3 py-2 font-mono text-[11px] text-fg-primary">{c.host}</td>
                <td className="px-3 py-2 text-fg-secondary">{c.username}</td>
                <td className="px-3 py-2 text-fg-secondary">
                  {new Date(c.savedAt).toLocaleString()}
                </td>
                <td className="px-3 py-2 text-right">
                  <span className="inline-flex gap-1">
                    <button
                      type="button"
                      aria-label={`${t("gitCreds.replace")} ${c.host}`}
                      title={t("gitCreds.replace")}
                      onClick={() => replace(c)}
                      className="rounded p-1 text-fg-muted transition-colors hover:bg-surface-3 hover:text-fg-primary"
                    >
                      <Pencil className="h-3.5 w-3.5" />
                    </button>
                    <button
                      type="button"
                      aria-label={`${t("gitCreds.remove")} ${c.host}`}
                      title={t("gitCreds.remove")}
                      onClick={() => void remove(c)}
                      className="rounded p-1 text-fg-muted transition-colors hover:bg-surface-3 hover:text-status-danger"
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </button>
                  </span>
                </td>
              </tr>
            ))}
            {items.length === 0 && (
              <tr className="border-t border-border">
                <td colSpan={4} className="px-3 py-4 text-center text-fg-muted">
                  {loading ? t("gitCreds.loading") : t("gitCreds.empty")}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      {ctx.menu && (
        <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="git-cred-menu">
          <MenuItem onSelect={pick(replace)}>{t("gitCreds.replace")}</MenuItem>
          <MenuItem onSelect={pick((c) => void copyText(c.host))}>{t("rowMenu.copyHost")}</MenuItem>
          <MenuSeparator />
          <MenuItem danger onSelect={pick((c) => void remove(c))}>
            {t("gitCreds.remove")}
          </MenuItem>
        </ContextMenu>
      )}
    </div>
  );
}