UHD_Media_Tool/apps/web/app/components/console/secret-input.tsx

import { Undo2, X } from "lucide-react";
import { useState } from "react";
import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
import { Button } from "~/components/ui/button.tsx";
import { Input } from "~/components/ui/input.tsx";
import { Textarea } from "~/components/ui/textarea.tsx";
import { SECRET_CLEAR, secretView } from "~/lib/secret.ts";
import { cn } from "~/lib/utils.ts";

/**
 * 只写凭证输入框。已保存时框里显示掩码占位(「已设置 ••••••••」,服务端给了末 4 位就带上),
 * 聚焦后直接输入即替换;留空保存 = 保持原值;「清除」确认后把值设为 SECRET_CLEAR,保存时才生效。
 * 值约定见 ~/lib/secret.ts。明文只在用户输入时存在于这个表单里,从不由服务端回填。
 */
export function SecretInput({
  id,
  value,
  onChange,
  isSet,
  mask,
  clearable = false,
  label = "凭证",
  placeholder,
  multiline = false,
  disabled,
  invalid,
  className,
}: {
  id?: string;
  value: string;
  onChange: (v: string) => void;
  /** 服务端已保存(secretRef / hasCredential 等) */
  isSet: boolean;
  /** 服务端给的掩码 hint(如 credentialMask),只取末 4 位显示 */
  mask?: string | null;
  /** 允许清除(必填凭证不给) */
  clearable?: boolean;
  /** 确认弹窗里的名字:"API Key"、"密码" */
  label?: string;
  placeholder?: string;
  /** Cookie 这类长串用多行 */
  multiline?: boolean;
  disabled?: boolean;
  invalid?: boolean;
  className?: string;
}) {
  const [confirming, setConfirming] = useState(false);
  const view = secretView(value, { isSet, mask, clearable });

  if (view.state === "cleared") {
    return (
      <div className={cn("flex min-w-0 items-center gap-2", className)}>
        <Input
          id={id}
          readOnly
          value=""
          placeholder="保存后清除"
          aria-label={`${label}：保存后清除`}
          className="min-w-0 flex-1 border-dashed placeholder:text-destructive"
          disabled={disabled}
        />
        <Button type="button" variant="ghost" size="sm" onClick={() => onChange("")} disabled={disabled}>
          <Undo2 />
          撤销
        </Button>
      </div>
    );
  }

  const shownPlaceholder = view.state === "set" ? view.placeholder : placeholder;
  const common = {
    id,
    value,
    disabled,
    // 没有外部 <label htmlFor> 时用名字作无障碍标签
    "aria-label": id ? undefined : label,
    "aria-invalid": invalid || undefined,
    placeholder: shownPlaceholder,
    // 掩码占位要像"有值",不能像空框
    className: cn("min-w-0 flex-1", view.state === "set" && "placeholder:text-foreground"),
  };
  return (
    <div className={cn("flex min-w-0 items-start gap-2", className)}>
      {multiline ? (
        <Textarea
          {...common}
          rows={3}
          className={cn(common.className, "font-mono text-caption")}
          autoComplete="off"
          spellCheck={false}
          onChange={(e) => onChange(e.target.value)}
        />
      ) : (
        <Input
          {...common}
          type="password"
          autoComplete="new-password"
          spellCheck={false}
          onChange={(e) => onChange(e.target.value)}
        />
      )}
      {view.state === "set" && view.canClear ? (
        <>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="shrink-0 hover:text-destructive"
            onClick={() => setConfirming(true)}
            disabled={disabled}
          >
            <X />
            清除
          </Button>
          <ConfirmDialog
            open={confirming}
            onOpenChange={setConfirming}
            title={`清除已保存的${label}？`}
            description="保存后生效，清除后无法找回，用到它的功能要重新填写。"
            confirmLabel="清除"
            destructive
            onConfirm={() => onChange(SECRET_CLEAR)}
          />
        </>
      ) : null}
      {view.state === "typing" && view.replacing ? (
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className="shrink-0"
          onClick={() => onChange("")}
          disabled={disabled}
          aria-label={`不替换${label}`}
        >
          <Undo2 />
          撤销
        </Button>
      ) : null}
    </div>
  );
}