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 <noreply@anthropic.com>
This commit is contained in:
@@ -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)]'}"
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user