feat: Browser autofill support for login form

[b0x42]

Problem

Password managers (1Password, Bitwarden, etc.) were not offering to fill credentials on the login and setup forms. This is because browsers and password manager extensions rely on two standard HTML attributes to detect and autofill credential fields:

• name — identifies the field in form submissions and is used by password managers to recognize field types
• autocomplete — the WHATWG standard hint that tells the browser/extension what type of data a field expects

The AuthInputField component was rendering <input> elements with neither attribute, so password managers could not identify the fields and did not offer autofill.

Solution

• AuthInputField.tsx — added optional name and autoComplete props; name falls back to the id value if not provided
• LoginForm.tsx — passes autoComplete="username" and autoComplete="current-password" to the respective fields
• SetupForm.tsx — passes explicit name props (name="username", name="password", name="confirmPassword") alongside autoComplete="username" and autoComplete="new-password" (signals a registration form so password managers offer to save new credentials); explicit name props make the password-manager contract self-contained and resilient to future id changes

Documentation

Added JSDoc comments to AuthInputField, LoginForm, SetupForm, and the validateSetupForm helper to meet the project's docstring coverage threshold.

Test plan

• Open the login page with a password manager extension active (e.g. Bitwarden, 1Password)
• Click the username or password field — the password manager should offer to fill saved credentials
• Use the extension keyboard shortcut to trigger autofill — it should work
• Open the setup/registration page and verify the password manager offers to save the new credentials after submission

🤖 Generated with Claude Code

[coderabbitai]

📝 Walkthrough

Walkthrough

Authentication form components were updated to improve browser autofill support. AuthInputField now accepts optional name and autoComplete props and forwards them to the input element. LoginForm and SetupForm set specific autoComplete hints and SetupForm adds an internal validateSetupForm function.

Changes

Cohort / File(s)	Summary
AuthInputField enhancement src/components/auth/view/AuthInputField.tsx	Added optional name?: string and autoComplete?: string to AuthInputFieldProps; component forwards name={name ?? id} and autoComplete={autoComplete} to the input; added JSDoc describing labeled input and autofill hint forwarding.
Login form autofill src/components/auth/view/LoginForm.tsx	Added autoComplete="username" to username input and autoComplete="current-password" to password input; inserted comment about autofill behavior; no changes to export signatures or control flow.
Setup form validation & autofill src/components/auth/view/SetupForm.tsx	Added validateSetupForm with checks for required fields, username length, password length, and password match; added autoComplete="username" and autoComplete="new-password" for password fields; documented the validation and component.

Poem

🐰 I hopped through props, left hints in each field,
Name and autocomplete now gracefully yield.
Login remembers, Setup checks with delight,
Inputs sing softly to browsers at night.
Small rabbit patch, big autofill light ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding browser autofill support to the login form by implementing autocomplete attributes and name props.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[b0x42]

@coderabbitai review again

[coderabbitai]

@b0x42 Sure! I'll re-review the changes now.

✅ Actions performed

Full review triggered.

[coderabbitai]

🧹 Nitpick comments (2)

src/components/auth/view/SetupForm.tsx (2)

98-120: Prefer explicit name props on the credential inputs.

This currently works because AuthInputField falls back from name to id. Making the field names explicit here keeps the password-manager contract local to the form and avoids a silent regression if an id is later renamed.

♻️ Suggested change

         <AuthInputField
           id="username"
+          name="username"
           label="Username"
           value={formState.username}
           onChange={(value) => updateField('username', value)}
           placeholder="Enter your username"
           isDisabled={isSubmitting}
           autoComplete="username"
         />
@@
         <AuthInputField
           id="password"
+          name="password"
           label="Password"
           value={formState.password}
           onChange={(value) => updateField('password', value)}
           placeholder="Enter your password"
           isDisabled={isSubmitting}
           type="password"
           autoComplete="new-password"
         />
@@
         <AuthInputField
           id="confirmPassword"
+          name="confirmPassword"
           label="Confirm Password"
           value={formState.confirmPassword}
           onChange={(value) => updateField('confirmPassword', value)}
           placeholder="Confirm your password"
           isDisabled={isSubmitting}
           type="password"
           autoComplete="new-password"
         />

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/auth/view/SetupForm.tsx` around lines 98 - 120, The credential
inputs rely on AuthInputField falling back from id to name; explicitly add name
props to each credential AuthInputField (e.g., the fields with id="password" and
id="confirmPassword" and the username field above) to set name="password",
name="confirmPassword" (and name="username" for the username input) so the
password-manager contract is preserved locally in SetupForm and won't break if
ids change.

---

98-120: Add a render-level regression test for these autofill attributes.

This change is mostly prop wiring, so it’s easy to break later in either SetupForm or AuthInputField without noticing. A component test asserting the rendered name/autocomplete pairs would give this feature CI coverage.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/auth/view/SetupForm.tsx` around lines 98 - 120, Add a
render-level regression test that mounts the SetupForm and asserts the rendered
input elements from AuthInputField have the expected name and autocomplete
attributes (e.g., username -> "username", password -> "new-password",
confirmPassword -> "new-password"). Write a test that renders SetupForm (mocking
any required props/state), queries the inputs by label or placeholder (e.g.,
"Username", "Password", "Confirm Password"), and asserts each input.element.name
and input.getAttribute('autocomplete') match the values wired in SetupForm;
include this test near other auth component tests so future changes to SetupForm
or AuthInputField will fail CI if these props stop being passed through.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/auth/view/SetupForm.tsx`:
- Around line 98-120: The credential inputs rely on AuthInputField falling back
from id to name; explicitly add name props to each credential AuthInputField
(e.g., the fields with id="password" and id="confirmPassword" and the username
field above) to set name="password", name="confirmPassword" (and name="username"
for the username input) so the password-manager contract is preserved locally in
SetupForm and won't break if ids change.
- Around line 98-120: Add a render-level regression test that mounts the
SetupForm and asserts the rendered input elements from AuthInputField have the
expected name and autocomplete attributes (e.g., username -> "username",
password -> "new-password", confirmPassword -> "new-password"). Write a test
that renders SetupForm (mocking any required props/state), queries the inputs by
label or placeholder (e.g., "Username", "Password", "Confirm Password"), and
asserts each input.element.name and input.getAttribute('autocomplete') match the
values wired in SetupForm; include this test near other auth component tests so
future changes to SetupForm or AuthInputField will fail CI if these props stop
being passed through.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: dbbba3a3-7c4d-442f-a9aa-b5f0038e1cc3

📥 Commits

Reviewing files that changed from the base of the PR and between e38dc02 and f531fed.

📒 Files selected for processing (3)

• src/components/auth/view/AuthInputField.tsx
• src/components/auth/view/LoginForm.tsx
• src/components/auth/view/SetupForm.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• src/components/auth/view/LoginForm.tsx
• src/components/auth/view/AuthInputField.tsx

[b0x42]

@coderabbitai review again. I fixed "Prefer explicit name props on the credential inputs.", but fixing "Add a render-level regression test for these autofill attributes." would require to setup a testing framework. More details:

The project has no test framework installed — no vitest, jest, or @testing-library/react in package.json, and no existing
test files anywhere in src/. There is nowhere to place this test and no runner to execute it.

The finding cannot be applied as-is. To do it properly the project would need:

1. A test framework added (vitest + @testing-library/react + jsdom)
2. Vite/TS config updated to include test globals
3. A test script added to package.json

That's non-trivial infrastructure work that goes well beyond the scope of this PR. I'd recommend either:

• Skip this finding — the props are explicitly set and lint/TypeScript already catch prop-type mismatches at the call site.
• Open a separate issue to add a test harness to the project and cover auth components as a first batch.

[coderabbitai]

@b0x42 Acknowledged — thanks for the thorough explanation.

• "Prefer explicit name props on the credential inputs." — Noted as addressed. ✅
• "Add a render-level regression test for these autofill attributes." — Your analysis is exactly right. Without a test runner (vitest/jest + @testing-library/react + jsdom) wired into the project, there is nowhere to place this test and nothing to execute it. Retrofitting that infrastructure is genuinely out of scope for an autofill-attribute PR. I'll drop this finding for the current review.

Would you like me to open a separate GitHub issue to track adding a test harness (vitest + @testing-library/react + jsdom) to the project, with the auth components as a first batch of coverage? Just say the word and I'll create it.

Triggering a fresh review now.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[b0x42]

Ready for Review cc @viper151