CIAgent/apps/web/components/ui/system-secret-row.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { Check, Eye, EyeOff, Loader2, Save } from "lucide-react";
import { useSetSystemSecret } from "@/hooks/use-auth";
import type { SystemSecretStatus } from "@/lib/types";

/** One server-wide secret's admin-editable row - label, masked textbox with
 * a hide/unhide toggle, and a blue Update button, using the same
 * crossfade-icon transition language as UserApiKeyRow. Unlike that
 * component, this is one shared value for the whole app (Turnstile site
 * key/secret today), not scoped to the calling user. */
export function SystemSecretRow({ secret }: { secret: SystemSecretStatus }) {
  const [value, setValue] = useState(secret.value ?? "");
  const [revealed, setRevealed] = useState(false);
  const [justSaved, setJustSaved] = useState(false);
  const savedTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
  const setSecret = useSetSystemSecret();

  useEffect(
    () => () => {
      if (savedTimeout.current) clearTimeout(savedTimeout.current);
    },
    [],
  );

  const dirty = value !== (secret.value ?? "");

  const handleUpdate = () => {
    setSecret.mutate(
      { key: secret.key, payload: { value } },
      {
        onSuccess: (updated) => {
          setValue(updated.value ?? "");
          setJustSaved(true);
          if (savedTimeout.current) clearTimeout(savedTimeout.current);
          savedTimeout.current = setTimeout(() => setJustSaved(false), 1800);
        },
      },
    );
  };

  return (
    <div>
      <label className="block text-sm font-medium text-slate-700">{secret.label}</label>
      <div className="mt-1 flex items-center gap-2">
        <input
          type={revealed ? "text" : "password"}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder={secret.configured ? undefined : "Not set"}
          className="focus-ring block w-full rounded-md border border-slate-300 px-3 py-2 font-mono text-sm text-slate-900 shadow-sm transition-colors duration-150 placeholder:font-sans placeholder:text-slate-400"
        />
        <button
          type="button"
          onClick={() => setRevealed((r) => !r)}
          title={revealed ? "Hide key" : "Show key"}
          className="focus-ring inline-flex shrink-0 items-center justify-center rounded-md border border-slate-300 p-2 text-slate-500 transition-colors duration-200 hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700"
        >
          <span className="relative block h-4 w-4">
            <Eye
              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${revealed ? "opacity-0" : "opacity-100"}`}
              aria-hidden
            />
            <EyeOff
              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${revealed ? "opacity-100" : "opacity-0"}`}
              aria-hidden
            />
          </span>
        </button>
        <button
          type="button"
          onClick={handleUpdate}
          disabled={!dirty || setSecret.isPending}
          title="Update key"
          className="focus-ring inline-flex shrink-0 items-center gap-1.5 rounded-md bg-brand-600 px-3 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-50"
        >
          <span className="relative block h-4 w-4">
            <Save
              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${
                setSecret.isPending || justSaved ? "opacity-0" : "opacity-100"
              }`}
              aria-hidden
            />
            <Loader2
              className={`absolute inset-0 h-4 w-4 animate-spin transition-opacity duration-200 ${
                setSecret.isPending ? "opacity-100" : "opacity-0"
              }`}
              aria-hidden
            />
            <Check
              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${
                justSaved && !setSecret.isPending ? "opacity-100" : "opacity-0"
              }`}
              aria-hidden
            />
          </span>
          Update
        </button>
      </div>
      {setSecret.isError && (
        <p className="mt-1 text-xs text-red-600">Couldn&apos;t save that key. Try again.</p>
      )}
    </div>
  );
}