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

feat(auth): add SignupForm component with validation and password toggle

Browse Source 
Form with name/email/password fields, client-side validation,
inline error messages, and password show/hide toggle.
Uses native form action for progressive enhancement.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-02 14:45:54 +02:00
parent d5d85d1156
commit d3a8518298
4 changed files with 295 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/package-lock.json generated
View File

@@ -19,6 +19,7 @@
"@tailwindcss/vite": "^4.2.2",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/svelte": "^5.3.1",
"@testing-library/user-event": "^14.6.1",
"@types/node": "^25.5.0",
"@vitest/ui": "^4.1.2",
"jsdom": "^29.0.1",
@@ -1809,6 +1810,20 @@
"svelte": "^3 || ^4 || ^5 || ^5.0.0-next.0"
}
},
"node_modules/@testing-library/user-event": {
"version": "14.6.1",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
"integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12",
"npm": ">=6"
},
"peerDependencies": {
"@testing-library/dom": ">=7.21.4"
}
},
"node_modules/@types/aria-query": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",

1
frontend/package.json
View File

@@ -25,6 +25,7 @@
"@tailwindcss/vite": "^4.2.2",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/svelte": "^5.3.1",
"@testing-library/user-event": "^14.6.1",
"@types/node": "^25.5.0",
"@vitest/ui": "^4.1.2",
"jsdom": "^29.0.1",

154
frontend/src/lib/auth/SignupForm.svelte Normal file
View File

@@ -0,0 +1,154 @@
<script lang="ts">
let displayName = $state('');
let email = $state('');
let password = $state('');
let showPassword = $state(false);
let errors = $state({
displayName: '',
email: '',
password: ''
});
function handleSubmit(event: SubmitEvent) {
let hasError = false;
errors.displayName = '';
errors.email = '';
errors.password = '';
if (!displayName.trim()) {
errors.displayName = 'Name ist erforderlich';
hasError = true;
}
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
errors.email = 'Ungültige E-Mail-Adresse';
hasError = true;
}
if (password.length < 8) {
errors.password = 'Mindestens 8 Zeichen';
hasError = true;
}
if (hasError) {
event.preventDefault();
}
}
</script>
<form method="POST" novalidate onsubmit={handleSubmit}>
<h1
class="font-[var(--font-display)] text-[18px] font-medium tracking-[-0.02em] text-[var(--color-text)]
md:text-[28px]"
>
Konto erstellen
</h1>
<p
class="mb-[20px] text-[12px] text-[var(--color-text-muted)]
md:mb-[32px] md:text-[14px]"
>
Danach richtest du deinen Haushalt ein.
</p>
<!-- Name field -->
<div class="mb-[16px]">
<label
for="displayName"
class="mb-[6px] block text-[12px] font-medium text-[var(--color-text)]"
>
Dein Name
</label>
<input
type="text"
id="displayName"
name="displayName"
placeholder="z.B. Sarah"
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)]'}"
/>
{#if errors.displayName}
<p class="mt-1 font-[var(--font-sans)] text-[12px] text-[var(--color-error)]">
{errors.displayName}
</p>
{/if}
</div>
<!-- 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"
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="Mindestens 8 Zeichen"
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>
<!-- Submit button -->
<button
type="submit"
class="w-full cursor-pointer rounded-[var(--radius-md)] bg-[var(--green)] px-[24px] py-[12px] text-[var(--btn-font-size)] font-[var(--btn-font-weight)] tracking-[var(--btn-letter-spacing)] text-white"
>
Konto erstellen &rarr;
</button>
<!-- Login link -->
<p
class="mt-[16px] text-center text-[12px] text-[var(--color-text-muted)]
md:text-[13px]"
>
Du hast bereits ein Konto? <a href="/login" class="text-[var(--color-text)] underline">Anmelden</a>
</p>
</form>

125
frontend/src/lib/auth/SignupForm.test.ts Normal file
View File

@@ -0,0 +1,125 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import { userEvent } from '@testing-library/user-event';
import SignupForm from './SignupForm.svelte';
describe('SignupForm', () => {
it('renders all form fields with correct labels', () => {
render(SignupForm);
expect(screen.getByLabelText('Dein Name')).toBeInTheDocument();
expect(screen.getByLabelText('E-Mail')).toBeInTheDocument();
expect(screen.getByLabelText('Passwort')).toBeInTheDocument();
});
it('renders submit button with correct text', () => {
render(SignupForm);
expect(screen.getByRole('button', { name: /konto erstellen/i })).toBeInTheDocument();
});
it('renders login link', () => {
render(SignupForm);
const link = screen.getByRole('link', { name: /anmelden/i });
expect(link).toHaveAttribute('href', '/login');
});
it('renders heading and subtitle', () => {
render(SignupForm);
expect(screen.getByText('Konto erstellen')).toBeInTheDocument();
expect(screen.getByText('Danach richtest du deinen Haushalt ein.')).toBeInTheDocument();
});
it('password field is initially of type password', () => {
render(SignupForm);
const input = screen.getByLabelText('Passwort');
expect(input).toHaveAttribute('type', 'password');
});
it('password toggle switches to text and back', async () => {
const user = userEvent.setup();
render(SignupForm);
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('shows validation error for empty name on submit', async () => {
const user = userEvent.setup();
render(SignupForm);
const email = screen.getByLabelText('E-Mail');
const password = screen.getByLabelText('Passwort');
await user.type(email, 'test@example.com');
await user.type(password, 'password123');
const submit = screen.getByRole('button', { name: /konto erstellen/i });
await user.click(submit);
expect(screen.getByText('Name ist erforderlich')).toBeInTheDocument();
});
it('shows validation error for invalid email on submit', async () => {
const user = userEvent.setup();
render(SignupForm);
const name = screen.getByLabelText('Dein Name');
const email = screen.getByLabelText('E-Mail');
const password = screen.getByLabelText('Passwort');
await user.type(name, 'Sarah');
await user.type(email, 'notanemail');
await user.type(password, 'password123');
const submit = screen.getByRole('button', { name: /konto erstellen/i });
await user.click(submit);
expect(screen.getByText('Ungültige E-Mail-Adresse')).toBeInTheDocument();
});
it('shows validation error for short password on submit', async () => {
const user = userEvent.setup();
render(SignupForm);
const name = screen.getByLabelText('Dein Name');
const email = screen.getByLabelText('E-Mail');
const password = screen.getByLabelText('Passwort');
await user.type(name, 'Sarah');
await user.type(email, 'test@example.com');
await user.type(password, 'short');
const submit = screen.getByRole('button', { name: /konto erstellen/i });
await user.click(submit);
expect(screen.getByText('Mindestens 8 Zeichen')).toBeInTheDocument();
});
it('shows no validation errors when all fields are valid', async () => {
const user = userEvent.setup();
render(SignupForm);
const name = screen.getByLabelText('Dein Name');
const email = screen.getByLabelText('E-Mail');
const password = screen.getByLabelText('Passwort');
await user.type(name, 'Sarah');
await user.type(email, 'test@example.com');
await user.type(password, 'password123');
const submit = screen.getByRole('button', { name: /konto erstellen/i });
await user.click(submit);
expect(screen.queryByText('Name ist erforderlich')).not.toBeInTheDocument();
expect(screen.queryByText('Ungültige E-Mail-Adresse')).not.toBeInTheDocument();
expect(screen.queryByText('Mindestens 8 Zeichen')).not.toBeInTheDocument();
});
it('renders placeholders on inputs', () => {
render(SignupForm);
expect(screen.getByPlaceholderText('z.B. Sarah')).toBeInTheDocument();
expect(screen.getByPlaceholderText('du@beispiel.de')).toBeInTheDocument();
expect(screen.getByPlaceholderText('Mindestens 8 Zeichen')).toBeInTheDocument();
});
});