marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): add autocomplete attributes to signup form inputs

Browse Source 
name, email, new-password for better browser/password-manager support.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-02 14:58:59 +02:00
parent 75a13d9df1
commit afcea6590d
2 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/lib/auth/SignupForm.svelte
View File

@@ -67,6 +67,7 @@
id="displayName" id="displayName"
name="displayName" name="displayName"
placeholder="z.B. Sarah" placeholder="z.B. Sarah"
autocomplete="name"
bind:value={displayName} 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 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)]'}" {errors.displayName ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}"
@@ -91,6 +92,7 @@
id="email" id="email"
name="email" name="email"
placeholder="du@beispiel.de" placeholder="du@beispiel.de"
autocomplete="email"
bind:value={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 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)]'}" {errors.email ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}"
@@ -116,6 +118,7 @@
id="password" id="password"
name="password" name="password"
placeholder="Mindestens 8 Zeichen" placeholder="Mindestens 8 Zeichen"
autocomplete="new-password"
bind:value={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 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)]'}" {errors.password ? 'border-[var(--color-error)]' : 'border-[var(--color-border)]'}"

7
frontend/src/lib/auth/SignupForm.test.ts
View File

@@ -124,6 +124,13 @@ describe('SignupForm', () => {
expect(button.className).toContain('bg-[var(--green-dark)]'); 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', () => { it('renders placeholders on inputs', () => {
render(SignupForm); render(SignupForm);
expect(screen.getByPlaceholderText('z.B. Sarah')).toBeInTheDocument(); expect(screen.getByPlaceholderText('z.B. Sarah')).toBeInTheDocument();