| 1 | import { DraftInput, type DraftInputProps } from "../ui/draft-input"; |
| 2 | import { Input, type InputProps } from "../ui/input"; |
| 3 | |
| 4 | type SecretInputProps = Omit<InputProps, "type" | "autoComplete" | "defaultValue" | "value"> & { |
| 5 | /** Whether the server already holds a value. Pass only the replacement draft as `value`. */ |
| 6 | readonly configured?: boolean; |
| 7 | readonly value: string; |
| 8 | readonly onCommit?: DraftInputProps["onCommit"]; |
| 9 | }; |
| 10 | |
| 11 | /** Shared presentation for write-only settings. Clearing a saved value belongs to its form. */ |
| 12 | export function SecretInput({ |
| 13 | configured = false, |
| 14 | placeholder, |
| 15 | onCommit, |
| 16 | ...props |
| 17 | }: SecretInputProps) { |
| 18 | const shared = { |
| 19 | ...props, |
| 20 | type: "password" as const, |
| 21 | autoComplete: "off", |
| 22 | spellCheck: false, |
| 23 | placeholder: configured |
| 24 | ? "Stored secret, enter a new value to replace" |
| 25 | : (placeholder ?? "Not set"), |
| 26 | }; |
| 27 | if (onCommit) { |
| 28 | return ( |
| 29 | <DraftInput |
| 30 | {...shared} |
| 31 | onCommit={(next) => { |
| 32 | if (configured && next === "") return; |
| 33 | onCommit(next); |
| 34 | }} |
| 35 | /> |
| 36 | ); |
| 37 | } |
| 38 | return <Input {...shared} />; |
| 39 | } |