feat(auth): add LoginForm component with validation and password toggle
Email/password fields, client-side validation, password show/hide, server error display via form prop, signup link. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
154
frontend/src/lib/auth/LoginForm.svelte
Normal file
154
frontend/src/lib/auth/LoginForm.svelte
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { enhance } from '$app/forms';
|
||||||
|
|
||||||
|
type FormResult = {
|
||||||
|
errors?: Record<string, string>;
|
||||||
|
email?: string;
|
||||||
|
} | null;
|
||||||
|
|
||||||
|
let { form = null }: { form?: FormResult } = $props();
|
||||||
|
|
||||||
|
let email = $state('');
|
||||||
|
let password = $state('');
|
||||||
|
let showPassword = $state(false);
|
||||||
|
let formError = $state('');
|
||||||
|
|
||||||
|
let errors = $state({
|
||||||
|
email: '',
|
||||||
|
password: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if (form?.errors) {
|
||||||
|
errors.email = form.errors.email ?? '';
|
||||||
|
errors.password = form.errors.password ?? '';
|
||||||
|
formError = form.errors.form ?? '';
|
||||||
|
if (form.email) email = form.email;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function validate(): boolean {
|
||||||
|
let hasError = false;
|
||||||
|
|
||||||
|
errors.email = '';
|
||||||
|
errors.password = '';
|
||||||
|
formError = '';
|
||||||
|
|
||||||
|
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
if (!emailPattern.test(email)) {
|
||||||
|
errors.email = 'Ungültige E-Mail-Adresse';
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!password) {
|
||||||
|
errors.password = 'Passwort ist erforderlich';
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return hasError;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(event: SubmitEvent) {
|
||||||
|
if (validate()) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<form method="POST" novalidate use:enhance onsubmit={handleSubmit}>
|
||||||
|
<h1
|
||||||
|
class="font-[var(--font-display)] text-[18px] font-medium tracking-[-0.02em] text-[var(--color-text)]
|
||||||
|
md:text-[28px]"
|
||||||
|
>
|
||||||
|
Willkommen zurück
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p
|
||||||
|
class="mb-[20px] text-[12px] text-[var(--color-text-muted)]
|
||||||
|
md:mb-[32px] md:text-[14px]"
|
||||||
|
>
|
||||||
|
Melde dich an, um fortzufahren.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Email field -->
|
||||||
|
<div class="mb-[16px]">
|
||||||
|
<label
|
||||||
|
for="email"
|
||||||
|
class="mb-[6px] block text-[12px] font-medium text-[var(--color-text)]"
|
||||||
|
>
|
||||||
|
E-Mail
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
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)]'}"
|
||||||
|
/>
|
||||||
|
{#if errors.email}
|
||||||
|
<p class="mt-1 font-[var(--font-sans)] text-[12px] text-[var(--color-error)]">
|
||||||
|
{errors.email}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Password field -->
|
||||||
|
<div class="mb-[16px]">
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
class="mb-[6px] block text-[12px] font-medium text-[var(--color-text)]"
|
||||||
|
>
|
||||||
|
Passwort
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
placeholder="Dein Passwort"
|
||||||
|
autocomplete="current-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)]'}"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick={() => (showPassword = !showPassword)}
|
||||||
|
aria-label={showPassword ? 'Passwort verbergen' : 'Passwort anzeigen'}
|
||||||
|
class="absolute top-1/2 right-[12px] -translate-y-1/2 cursor-pointer bg-transparent p-0 text-[12px] text-[var(--color-text-muted)]"
|
||||||
|
>
|
||||||
|
{showPassword ? 'Verbergen' : 'Anzeigen'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{#if errors.password}
|
||||||
|
<p class="mt-1 font-[var(--font-sans)] text-[12px] text-[var(--color-error)]">
|
||||||
|
{errors.password}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if formError}
|
||||||
|
<p class="mb-[16px] rounded-[var(--radius-md)] bg-[color-mix(in_srgb,var(--color-error),transparent_90%)] px-[12px] py-[10px] text-[12px] text-[var(--color-error)]">
|
||||||
|
{formError}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Submit button -->
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full cursor-pointer rounded-[var(--radius-md)] bg-[var(--green-dark)] px-[24px] py-[12px] text-[var(--btn-font-size)] font-[var(--btn-font-weight)] tracking-[var(--btn-letter-spacing)] text-white"
|
||||||
|
>
|
||||||
|
Anmelden →
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Signup link -->
|
||||||
|
<p
|
||||||
|
class="mt-[16px] text-center text-[12px] text-[var(--color-text-muted)]
|
||||||
|
md:text-[13px]"
|
||||||
|
>
|
||||||
|
Noch kein Konto? <a href="/signup" class="font-medium text-[var(--green)] hover:underline">Registrieren</a>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
117
frontend/src/lib/auth/LoginForm.test.ts
Normal file
117
frontend/src/lib/auth/LoginForm.test.ts
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
import { describe, it, expect, vi } from 'vitest';
|
||||||
|
import { render, screen } from '@testing-library/svelte';
|
||||||
|
import { userEvent } from '@testing-library/user-event';
|
||||||
|
import LoginForm from './LoginForm.svelte';
|
||||||
|
|
||||||
|
vi.mock('$app/forms', () => ({
|
||||||
|
enhance: () => ({ destroy: () => {} })
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('LoginForm', () => {
|
||||||
|
it('renders email and password fields with correct labels', () => {
|
||||||
|
render(LoginForm);
|
||||||
|
expect(screen.getByLabelText('E-Mail')).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText('Passwort')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders heading and subtitle', () => {
|
||||||
|
render(LoginForm);
|
||||||
|
expect(screen.getByText('Willkommen zurück')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('Melde dich an, um fortzufahren.')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders submit button', () => {
|
||||||
|
render(LoginForm);
|
||||||
|
expect(screen.getByRole('button', { name: /anmelden/i })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders signup link', () => {
|
||||||
|
render(LoginForm);
|
||||||
|
const link = screen.getByRole('link', { name: /registrieren/i });
|
||||||
|
expect(link).toHaveAttribute('href', '/signup');
|
||||||
|
expect(link.className).toContain('text-[var(--green)]');
|
||||||
|
expect(link.className).toContain('font-medium');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('submit button uses --green-dark for WCAG AA', () => {
|
||||||
|
render(LoginForm);
|
||||||
|
const button = screen.getByRole('button', { name: /anmelden/i });
|
||||||
|
expect(button.className).toContain('bg-[var(--green-dark)]');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('password field is initially of type password', () => {
|
||||||
|
render(LoginForm);
|
||||||
|
expect(screen.getByLabelText('Passwort')).toHaveAttribute('type', 'password');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('password toggle switches type', async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
render(LoginForm);
|
||||||
|
|
||||||
|
const input = screen.getByLabelText('Passwort');
|
||||||
|
const toggle = screen.getByRole('button', { name: /passwort anzeigen/i });
|
||||||
|
|
||||||
|
await user.click(toggle);
|
||||||
|
expect(input).toHaveAttribute('type', 'text');
|
||||||
|
|
||||||
|
await user.click(toggle);
|
||||||
|
expect(input).toHaveAttribute('type', 'password');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('inputs have correct autocomplete attributes', () => {
|
||||||
|
render(LoginForm);
|
||||||
|
expect(screen.getByLabelText('E-Mail')).toHaveAttribute('autocomplete', 'email');
|
||||||
|
expect(screen.getByLabelText('Passwort')).toHaveAttribute('autocomplete', 'current-password');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows validation error for invalid email on submit', async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
render(LoginForm);
|
||||||
|
|
||||||
|
await user.type(screen.getByLabelText('E-Mail'), 'notanemail');
|
||||||
|
await user.type(screen.getByLabelText('Passwort'), 'password123');
|
||||||
|
await user.click(screen.getByRole('button', { name: /anmelden/i }));
|
||||||
|
|
||||||
|
expect(screen.getByText('Ungültige E-Mail-Adresse')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows validation error for empty password on submit', async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
render(LoginForm);
|
||||||
|
|
||||||
|
await user.type(screen.getByLabelText('E-Mail'), 'test@example.com');
|
||||||
|
await user.click(screen.getByRole('button', { name: /anmelden/i }));
|
||||||
|
|
||||||
|
expect(screen.getByText('Passwort ist erforderlich')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows no errors when fields are valid', async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
render(LoginForm);
|
||||||
|
|
||||||
|
await user.type(screen.getByLabelText('E-Mail'), 'test@example.com');
|
||||||
|
await user.type(screen.getByLabelText('Passwort'), 'password123');
|
||||||
|
await user.click(screen.getByRole('button', { name: /anmelden/i }));
|
||||||
|
|
||||||
|
expect(screen.queryByText('Ungültige E-Mail-Adresse')).not.toBeInTheDocument();
|
||||||
|
expect(screen.queryByText('Passwort ist erforderlich')).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('displays server-side form error from form prop', () => {
|
||||||
|
render(LoginForm, {
|
||||||
|
props: {
|
||||||
|
form: {
|
||||||
|
errors: { form: 'E-Mail oder Passwort ist falsch.' },
|
||||||
|
email: 'test@example.com'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
expect(screen.getByText('E-Mail oder Passwort ist falsch.')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders placeholders', () => {
|
||||||
|
render(LoginForm);
|
||||||
|
expect(screen.getByPlaceholderText('du@beispiel.de')).toBeInTheDocument();
|
||||||
|
expect(screen.getByPlaceholderText('Dein Passwort')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user