From afcea6590dc4df45e6652796f4bfa542cd60dae5 Mon Sep 17 00:00:00 2001 From: Marcel Raddatz Date: Thu, 2 Apr 2026 14:58:59 +0200 Subject: [PATCH] feat(auth): add autocomplete attributes to signup form inputs name, email, new-password for better browser/password-manager support. Co-Authored-By: Claude Opus 4.6 --- frontend/src/lib/auth/SignupForm.svelte | 3 +++ frontend/src/lib/auth/SignupForm.test.ts | 7 +++++++ 2 files changed, 10 insertions(+) diff --git a/frontend/src/lib/auth/SignupForm.svelte b/frontend/src/lib/auth/SignupForm.svelte index ec1cf02..8ba5125 100644 --- a/frontend/src/lib/auth/SignupForm.svelte +++ b/frontend/src/lib/auth/SignupForm.svelte @@ -67,6 +67,7 @@ id="displayName" name="displayName" placeholder="z.B. Sarah" + autocomplete="name" bind:value={displayName} class="w-full rounded-[var(--radius-md)] border bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none {errors.displayName ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}" @@ -91,6 +92,7 @@ id="email" name="email" placeholder="du@beispiel.de" + autocomplete="email" bind:value={email} class="w-full rounded-[var(--radius-md)] border bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none {errors.email ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}" @@ -116,6 +118,7 @@ id="password" name="password" placeholder="Mindestens 8 Zeichen" + autocomplete="new-password" bind:value={password} class="w-full rounded-[var(--radius-md)] border bg-[var(--color-page)] px-[12px] py-[10px] pr-[44px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none {errors.password ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}" diff --git a/frontend/src/lib/auth/SignupForm.test.ts b/frontend/src/lib/auth/SignupForm.test.ts index f891b69..20778df 100644 --- a/frontend/src/lib/auth/SignupForm.test.ts +++ b/frontend/src/lib/auth/SignupForm.test.ts @@ -124,6 +124,13 @@ describe('SignupForm', () => { expect(button.className).toContain('bg-[var(--green-dark)]'); }); + it('inputs have correct autocomplete attributes', () => { + render(SignupForm); + expect(screen.getByLabelText('Dein Name')).toHaveAttribute('autocomplete', 'name'); + expect(screen.getByLabelText('E-Mail')).toHaveAttribute('autocomplete', 'email'); + expect(screen.getByLabelText('Passwort')).toHaveAttribute('autocomplete', 'new-password'); + }); + it('renders placeholders on inputs', () => { render(SignupForm); expect(screen.getByPlaceholderText('z.B. Sarah')).toBeInTheDocument();