From e38dc02ebaa168c04c82b3f0ebc0432a86a664fc Mon Sep 17 00:00:00 2001
From: Benjamin <1159333+benjaminburzan@users.noreply.github.com>
Date: Mon, 9 Mar 2026 21:33:13 +0100
Subject: [PATCH 1/3] 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>
---
 src/components/auth/view/AuthInputField.tsx | 6 ++++++
 src/components/auth/view/LoginForm.tsx      | 2 ++
 src/components/auth/view/SetupForm.tsx      | 3 +++
 3 files changed, 11 insertions(+)

diff --git a/src/components/auth/view/AuthInputField.tsx b/src/components/auth/view/AuthInputField.tsx
index 9ffcfc83d..f1c59ab51 100644
--- a/src/components/auth/view/AuthInputField.tsx
+++ b/src/components/auth/view/AuthInputField.tsx
@@ -6,6 +6,8 @@ type AuthInputFieldProps = {
   placeholder: string;
   isDisabled: boolean;
   type?: 'text' | 'password' | 'email';
+  name?: string;
+  autoComplete?: string;
 };
 
 export default function AuthInputField({
@@ -16,6 +18,8 @@ export default function AuthInputField({
   placeholder,
   isDisabled,
   type = 'text',
+  name,
+  autoComplete,
 }: AuthInputFieldProps) {
   return (
     <div>
@@ -25,6 +29,8 @@ export default function AuthInputField({
       <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"
diff --git a/src/components/auth/view/LoginForm.tsx b/src/components/auth/view/LoginForm.tsx
index 633c9728a..b8f568c42 100644
--- a/src/components/auth/view/LoginForm.tsx
+++ b/src/components/auth/view/LoginForm.tsx
@@ -63,6 +63,7 @@ export default function LoginForm() {
           onChange={(value) => updateField('username', value)}
           placeholder={t('login.placeholders.username')}
           isDisabled={isSubmitting}
+          autoComplete="username"
         />
 
         <AuthInputField
@@ -73,6 +74,7 @@ export default function LoginForm() {
           placeholder={t('login.placeholders.password')}
           isDisabled={isSubmitting}
           type="password"
+          autoComplete="current-password"
         />
 
         <AuthErrorAlert errorMessage={errorMessage} />
diff --git a/src/components/auth/view/SetupForm.tsx b/src/components/auth/view/SetupForm.tsx
index a67a8be62..ed6d73d28 100644
--- a/src/components/auth/view/SetupForm.tsx
+++ b/src/components/auth/view/SetupForm.tsx
@@ -84,6 +84,7 @@ export default function SetupForm() {
           onChange={(value) => updateField('username', value)}
           placeholder="Enter your username"
           isDisabled={isSubmitting}
+          autoComplete="username"
         />
 
         <AuthInputField
@@ -94,6 +95,7 @@ export default function SetupForm() {
           placeholder="Enter your password"
           isDisabled={isSubmitting}
           type="password"
+          autoComplete="new-password"
         />
 
         <AuthInputField
@@ -104,6 +106,7 @@ export default function SetupForm() {
           placeholder="Confirm your password"
           isDisabled={isSubmitting}
           type="password"
+          autoComplete="new-password"
         />
 
         <AuthErrorAlert errorMessage={errorMessage} />

From f531fedf84b8106819e490f4b49f9748e5a6a5b0 Mon Sep 17 00:00:00 2001
From: Benjamin <1159333+benjaminburzan@users.noreply.github.com>
Date: Thu, 12 Mar 2026 19:21:39 +0100
Subject: [PATCH 2/3] 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>
---
 src/components/auth/view/AuthInputField.tsx |  6 ++++++
 src/components/auth/view/LoginForm.tsx      |  5 +++++
 src/components/auth/view/SetupForm.tsx      | 11 +++++++++++
 3 files changed, 22 insertions(+)

diff --git a/src/components/auth/view/AuthInputField.tsx b/src/components/auth/view/AuthInputField.tsx
index f1c59ab51..b382a059f 100644
--- a/src/components/auth/view/AuthInputField.tsx
+++ b/src/components/auth/view/AuthInputField.tsx
@@ -10,6 +10,12 @@ type AuthInputFieldProps = {
   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,
diff --git a/src/components/auth/view/LoginForm.tsx b/src/components/auth/view/LoginForm.tsx
index b8f568c42..4e0973e2d 100644
--- a/src/components/auth/view/LoginForm.tsx
+++ b/src/components/auth/view/LoginForm.tsx
@@ -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();
diff --git a/src/components/auth/view/SetupForm.tsx b/src/components/auth/view/SetupForm.tsx
index ed6d73d28..dc2d14c47 100644
--- a/src/components/auth/view/SetupForm.tsx
+++ b/src/components/auth/view/SetupForm.tsx
@@ -17,6 +17,11 @@ const initialState: SetupFormState = {
   confirmPassword: '',
 };
 
+/**
+ * Validates the account-setup form state.
+ * @returns An error message string if validation fails, or `null` when the
+ *   form is valid.
+ */
 function validateSetupForm(formState: SetupFormState): string | null {
   if (!formState.username.trim() || !formState.password || !formState.confirmPassword) {
     return 'Please fill in all fields.';
@@ -37,6 +42,12 @@ function validateSetupForm(formState: SetupFormState): string | null {
   return null;
 }
 
+/**
+ * Account setup / registration form.
+ * Uses `autoComplete="new-password"` on password fields so that password
+ * managers recognise this as a registration flow and offer to save the new
+ * credentials after submission.
+ */
 export default function SetupForm() {
   const { register } = useAuth();
 

From a50510882859ff62cab9efc41c985425c01446dd Mon Sep 17 00:00:00 2001
From: Benjamin <1159333+benjaminburzan@users.noreply.github.com>
Date: Thu, 12 Mar 2026 19:28:08 +0100
Subject: [PATCH 3/3] 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>
---
 src/components/auth/view/SetupForm.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/auth/view/SetupForm.tsx b/src/components/auth/view/SetupForm.tsx
index dc2d14c47..9b9800742 100644
--- a/src/components/auth/view/SetupForm.tsx
+++ b/src/components/auth/view/SetupForm.tsx
@@ -90,6 +90,7 @@ export default function SetupForm() {
       <form onSubmit={handleSubmit} className="space-y-4">
         <AuthInputField
           id="username"
+          name="username"
           label="Username"
           value={formState.username}
           onChange={(value) => updateField('username', value)}
@@ -100,6 +101,7 @@ export default function SetupForm() {
 
         <AuthInputField
           id="password"
+          name="password"
           label="Password"
           value={formState.password}
           onChange={(value) => updateField('password', value)}
@@ -111,6 +113,7 @@ export default function SetupForm() {
 
         <AuthInputField
           id="confirmPassword"
+          name="confirmPassword"
           label="Confirm Password"
           value={formState.confirmPassword}
           onChange={(value) => updateField('confirmPassword', value)}