Function ValueField

packages/react/src/plugins/secret-form.tsx:230–273

(props: { revealable?: boolean; placeholder?: string; autoFocus?: boolean })

}

function ValueField(props: { revealable?: boolean; placeholder?: string; autoFocus?: boolean }) {
  const { state, actions } = useSecretForm();
  const inputId = useId();
  const revealable = props.revealable ?? false;
  const revealed = revealable && state.revealed;
  const errored = state.status.kind === "error";

  return (
    <Field>
      <FieldLabel htmlFor={inputId}>Value</FieldLabel>
      <div className="relative" data-ph-block>
        <Input
          id={inputId}
          type={secretValueInputType({ revealable, revealed })}
          value={state.value}
          onChange={(e) => actions.setValue((e.target as HTMLInputElement).value)}
          placeholder={props.placeholder ?? "ghp_xxxxxxxxxxxxxxxxxxxx"}
          autoFocus={props.autoFocus}
          autoComplete="new-password"
          className={revealable ? "pr-9 font-mono" : "font-mono"}
          style={
            revealable && !revealed ? ({ WebkitTextSecurity: "disc" } as CSSProperties) : undefined
          }
          data-ph-block
        />
        {revealable && (
          <Button
            type="button"
            variant="ghost"
            size="icon-xs"
            className="absolute right-1 top-1/2 size-7 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            onClick={actions.toggleReveal}
            aria-label={state.revealed ? "Hide value" : "Reveal value"}
          >
            <SecretVisibilityIcon revealed={state.revealed} />
          </Button>
        )}
      </div>
      {errored && (
        <FieldError>{state.status.kind === "error" ? state.status.message : ""}</FieldError>
      )}
    </Field>
  );
}

function ErrorBanner() {
  const { state } = useSecretForm();