mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-07-06 21:52:43 +08:00
72ff134b31
* fix: add name and autocomplete attributes to auth form inputs Password managers (1Password, Bitwarden, etc.) rely on the HTML `name` and `autocomplete` attributes to detect and fill credential fields. The login and setup forms were missing both, preventing password managers from offering autofill. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: add JSDoc docstrings to auth form components Adds JSDoc comments to all exported functions and the internal validateSetupForm helper in the auth form files, bringing docstring coverage above the 80% threshold required by CodeRabbit. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: explicitly set name props on SetupForm credential inputs The three AuthInputField calls in SetupForm were relying on the id-to-name fallback (name={name ?? id}) inside AuthInputField. Adding explicit name props makes the password-manager contract self-contained in SetupForm and resilient to future id changes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Benjamin <1159333+benjaminburzan@users.noreply.github.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
type AuthInputFieldProps = {
|
|
id: string;
|
|
label: string;
|
|
value: string;
|
|
onChange: (nextValue: string) => void;
|
|
placeholder: string;
|
|
isDisabled: boolean;
|
|
type?: 'text' | 'password' | 'email';
|
|
name?: string;
|
|
autoComplete?: string;
|
|
};
|
|
|
|
/**
|
|
* A labelled input field for authentication forms.
|
|
* Renders a `<label>` / `<input>` pair and forwards browser autofill hints
|
|
* (`name`, `autoComplete`) so that password managers can identify and fill
|
|
* the field correctly.
|
|
*/
|
|
export default function AuthInputField({
|
|
id,
|
|
label,
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
isDisabled,
|
|
type = 'text',
|
|
name,
|
|
autoComplete,
|
|
}: AuthInputFieldProps) {
|
|
return (
|
|
<div>
|
|
<label htmlFor={id} className="mb-1 block text-sm font-medium text-foreground">
|
|
{label}
|
|
</label>
|
|
<input
|
|
id={id}
|
|
type={type}
|
|
name={name ?? id}
|
|
autoComplete={autoComplete}
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
className="w-full rounded-md border border-border bg-background px-3 py-2 text-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder={placeholder}
|
|
required
|
|
disabled={isDisabled}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|