feat(auth): add signup page with form action
Composes BrandPanel + SignupForm in responsive split layout. Server action POSTs to /v1/auth/signup and redirects to /household/setup on success. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
23
frontend/src/routes/(public)/signup/+page.server.ts
Normal file
23
frontend/src/routes/(public)/signup/+page.server.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { redirect, fail } from '@sveltejs/kit';
|
||||
import { apiClient } from '$lib/server/api';
|
||||
import type { Actions } from './$types';
|
||||
|
||||
export const actions = {
|
||||
default: async ({ request, fetch }) => {
|
||||
const formData = await request.formData();
|
||||
const displayName = formData.get('displayName') as string;
|
||||
const email = formData.get('email') as string;
|
||||
const password = formData.get('password') as string;
|
||||
|
||||
const api = apiClient(fetch);
|
||||
const { data, error } = await api.POST('/v1/auth/signup', {
|
||||
body: { displayName, email, password }
|
||||
});
|
||||
|
||||
if (error) {
|
||||
return fail(400, { error: 'Registrierung fehlgeschlagen. Bitte versuche es erneut.' });
|
||||
}
|
||||
|
||||
redirect(303, '/household/setup');
|
||||
}
|
||||
} satisfies Actions;
|
||||
14
frontend/src/routes/(public)/signup/+page.svelte
Normal file
14
frontend/src/routes/(public)/signup/+page.svelte
Normal file
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import BrandPanel from '$lib/auth/BrandPanel.svelte';
|
||||
import SignupForm from '$lib/auth/SignupForm.svelte';
|
||||
</script>
|
||||
|
||||
<!-- Mobile: stacked, Desktop: side by side -->
|
||||
<div class="flex min-h-screen flex-col md:flex-row">
|
||||
<BrandPanel />
|
||||
<div class="flex flex-1 flex-col justify-center px-[20px] py-[24px] md:px-[56px] md:py-[48px]">
|
||||
<div class="max-w-[380px]">
|
||||
<SignupForm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
85
frontend/src/routes/(public)/signup/page.server.test.ts
Normal file
85
frontend/src/routes/(public)/signup/page.server.test.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
|
||||
vi.mock('$env/dynamic/private', () => ({
|
||||
env: { BACKEND_URL: 'http://localhost:8080' }
|
||||
}));
|
||||
|
||||
const mockPost = vi.fn();
|
||||
vi.mock('$lib/server/api', () => ({
|
||||
apiClient: () => ({ POST: mockPost })
|
||||
}));
|
||||
|
||||
describe('signup form action', () => {
|
||||
let actions: any;
|
||||
|
||||
beforeEach(async () => {
|
||||
mockPost.mockReset();
|
||||
const mod = await import('./+page.server');
|
||||
actions = mod.actions;
|
||||
});
|
||||
|
||||
function createRequest(formData: Record<string, string>) {
|
||||
const fd = new FormData();
|
||||
for (const [key, value] of Object.entries(formData)) {
|
||||
fd.append(key, value);
|
||||
}
|
||||
return {
|
||||
request: { formData: () => Promise.resolve(fd) },
|
||||
fetch: vi.fn(),
|
||||
cookies: { get: vi.fn(), set: vi.fn() }
|
||||
} as any;
|
||||
}
|
||||
|
||||
it('calls POST /v1/auth/signup with form data', async () => {
|
||||
mockPost.mockResolvedValue({ data: { data: { id: '123' } }, error: undefined });
|
||||
|
||||
try {
|
||||
await actions.default(createRequest({
|
||||
displayName: 'Sarah',
|
||||
email: 'sarah@example.com',
|
||||
password: 'password123'
|
||||
}));
|
||||
} catch {
|
||||
// redirect throws
|
||||
}
|
||||
|
||||
expect(mockPost).toHaveBeenCalledWith('/v1/auth/signup', {
|
||||
body: {
|
||||
displayName: 'Sarah',
|
||||
email: 'sarah@example.com',
|
||||
password: 'password123'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('redirects to /household/setup on success', async () => {
|
||||
mockPost.mockResolvedValue({ data: { data: { id: '123' } }, error: undefined });
|
||||
|
||||
try {
|
||||
await actions.default(createRequest({
|
||||
displayName: 'Sarah',
|
||||
email: 'sarah@example.com',
|
||||
password: 'password123'
|
||||
}));
|
||||
expect.unreachable();
|
||||
} catch (e: any) {
|
||||
expect(e.status).toBe(303);
|
||||
expect(e.location).toBe('/household/setup');
|
||||
}
|
||||
});
|
||||
|
||||
it('returns fail with error message on API error', async () => {
|
||||
mockPost.mockResolvedValue({
|
||||
data: undefined,
|
||||
error: { status: 409, message: 'Email already registered' }
|
||||
});
|
||||
|
||||
const result = await actions.default(createRequest({
|
||||
displayName: 'Sarah',
|
||||
email: 'sarah@example.com',
|
||||
password: 'password123'
|
||||
}));
|
||||
|
||||
expect(result.status).toBe(400);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user