feat: Browser autofill support for login form (#521)

* 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>
This commit is contained in:
Benjamin
2026-03-16 12:00:14 +01:00
committed by GitHub
parent 95bcee0ec4
commit 72ff134b31
3 changed files with 36 additions and 0 deletions

View File

@@ -16,6 +16,11 @@ const initialState: LoginFormState = {
password: '',
};
/**
* Login form component.
* Handles credential input with browser autofill support (`autocomplete`
* attributes) so that password managers can offer to fill saved credentials.
*/
export default function LoginForm() {
const { t } = useTranslation('auth');
const { login } = useAuth();
@@ -63,6 +68,7 @@ export default function LoginForm() {
onChange={(value) => updateField('username', value)}
placeholder={t('login.placeholders.username')}
isDisabled={isSubmitting}
autoComplete="username"
/>
<AuthInputField
@@ -73,6 +79,7 @@ export default function LoginForm() {
placeholder={t('login.placeholders.password')}
isDisabled={isSubmitting}
type="password"
autoComplete="current-password"
/>
<AuthErrorAlert errorMessage={errorMessage} />