feat(join): implement A4 join household page (/join/[token])
- schema.d.ts: add GET /v1/invites/{code}, InviteInfoResponse, AcceptInviteRequest; update acceptInvite operation
- hooks.server.ts: add /join to PUBLIC_ROUTES; redirect authenticated users on /join/* to /
- +page.server.ts: load validates token (invalid:true on 404); action creates account + joins + sets session cookie
- HouseholdIdentityPanel.svelte: logo, household name (Fraunces), inviter text, static permissions list
- JoinForm.svelte: name/email/password + show/hide toggle, "Haushalt beitreten" CTA, field errors, pre-fill
- +page.svelte: no-chrome layout, mobile (banner+form stacked) / desktop (400px panel + flex:1) split, invalid-token inline state
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -42,7 +42,7 @@ describe('auth guard (hooks.server.ts handle)', () => {
|
|||||||
expect(resolve).toHaveBeenCalledWith(event);
|
expect(resolve).toHaveBeenCalledWith(event);
|
||||||
});
|
});
|
||||||
|
|
||||||
it.each(['/login', '/login/', '/register', '/signup', '/signup/', '/invite/abc123'])(
|
it.each(['/login', '/login/', '/register', '/signup', '/signup/', '/invite/abc123', '/join/ABC12XYZ'])(
|
||||||
'allows public route %s without auth',
|
'allows public route %s without auth',
|
||||||
async (path) => {
|
async (path) => {
|
||||||
const { event, resolve } = createEvent(path);
|
const { event, resolve } = createEvent(path);
|
||||||
@@ -51,6 +51,17 @@ describe('auth guard (hooks.server.ts handle)', () => {
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
it('redirects authenticated user on /join/[token] to /', async () => {
|
||||||
|
const { event, resolve } = createEvent('/join/ABC12XYZ', 'valid-session');
|
||||||
|
try {
|
||||||
|
await handle({ event, resolve });
|
||||||
|
expect.unreachable();
|
||||||
|
} catch (e: any) {
|
||||||
|
expect(e.status).toBe(302);
|
||||||
|
expect(e.location).toBe('/');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
it.each(['/_app/immutable/chunks/app.js', '/favicon.ico'])(
|
it.each(['/_app/immutable/chunks/app.js', '/favicon.ico'])(
|
||||||
'allows static asset %s without auth',
|
'allows static asset %s without auth',
|
||||||
async (path) => {
|
async (path) => {
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import type { Handle } from '@sveltejs/kit';
|
|||||||
import { redirect } from '@sveltejs/kit';
|
import { redirect } from '@sveltejs/kit';
|
||||||
import { apiClient } from '$lib/server/api';
|
import { apiClient } from '$lib/server/api';
|
||||||
|
|
||||||
const PUBLIC_ROUTES = ['/login', '/register', '/signup', '/invite'];
|
const PUBLIC_ROUTES = ['/login', '/register', '/signup', '/invite', '/join'];
|
||||||
|
|
||||||
const STATIC_PREFIXES = ['/_app/', '/favicon'];
|
const STATIC_PREFIXES = ['/_app/', '/favicon'];
|
||||||
|
|
||||||
@@ -20,6 +20,10 @@ function loginRedirect(pathname: string): never {
|
|||||||
|
|
||||||
export const handle: Handle = async ({ event, resolve }) => {
|
export const handle: Handle = async ({ event, resolve }) => {
|
||||||
if (isPublicRoute(event.url.pathname)) {
|
if (isPublicRoute(event.url.pathname)) {
|
||||||
|
const isJoinRoute = event.url.pathname.startsWith('/join/');
|
||||||
|
if (isJoinRoute && event.cookies.get('JSESSIONID')) {
|
||||||
|
throw redirect(302, '/');
|
||||||
|
}
|
||||||
return resolve(event);
|
return resolve(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
73
frontend/src/lib/api/schema.d.ts
vendored
73
frontend/src/lib/api/schema.d.ts
vendored
@@ -148,6 +148,22 @@ export interface paths {
|
|||||||
patch?: never;
|
patch?: never;
|
||||||
trace?: never;
|
trace?: never;
|
||||||
};
|
};
|
||||||
|
"/v1/invites/{code}": {
|
||||||
|
parameters: {
|
||||||
|
query?: never;
|
||||||
|
header?: never;
|
||||||
|
path?: never;
|
||||||
|
cookie?: never;
|
||||||
|
};
|
||||||
|
get: operations["getInviteInfo"];
|
||||||
|
put?: never;
|
||||||
|
post?: never;
|
||||||
|
delete?: never;
|
||||||
|
options?: never;
|
||||||
|
head?: never;
|
||||||
|
patch?: never;
|
||||||
|
trace?: never;
|
||||||
|
};
|
||||||
"/v1/invites/{code}/accept": {
|
"/v1/invites/{code}/accept": {
|
||||||
parameters: {
|
parameters: {
|
||||||
query?: never;
|
query?: never;
|
||||||
@@ -739,6 +755,20 @@ export interface components {
|
|||||||
data?: components["schemas"]["AcceptInviteResponse"];
|
data?: components["schemas"]["AcceptInviteResponse"];
|
||||||
meta?: components["schemas"]["Meta"];
|
meta?: components["schemas"]["Meta"];
|
||||||
};
|
};
|
||||||
|
InviteInfoResponse: {
|
||||||
|
householdName?: string;
|
||||||
|
inviterName?: string;
|
||||||
|
};
|
||||||
|
ApiResponseInviteInfoResponse: {
|
||||||
|
status?: string;
|
||||||
|
data?: components["schemas"]["InviteInfoResponse"];
|
||||||
|
meta?: components["schemas"]["Meta"];
|
||||||
|
};
|
||||||
|
AcceptInviteRequest: {
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
};
|
||||||
Meta: {
|
Meta: {
|
||||||
pagination?: components["schemas"]["Pagination"];
|
pagination?: components["schemas"]["Pagination"];
|
||||||
};
|
};
|
||||||
@@ -1345,7 +1375,7 @@ export interface operations {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
acceptInvite: {
|
getInviteInfo: {
|
||||||
parameters: {
|
parameters: {
|
||||||
query?: never;
|
query?: never;
|
||||||
header?: never;
|
header?: never;
|
||||||
@@ -1355,6 +1385,37 @@ export interface operations {
|
|||||||
cookie?: never;
|
cookie?: never;
|
||||||
};
|
};
|
||||||
requestBody?: never;
|
requestBody?: never;
|
||||||
|
responses: {
|
||||||
|
/** @description OK */
|
||||||
|
200: {
|
||||||
|
headers: {
|
||||||
|
[name: string]: unknown;
|
||||||
|
};
|
||||||
|
content: {
|
||||||
|
"*/*": components["schemas"]["ApiResponseInviteInfoResponse"];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
/** @description Not found */
|
||||||
|
404: {
|
||||||
|
headers: { [name: string]: unknown };
|
||||||
|
content: { "*/*": components["schemas"]["ApiError"] };
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
acceptInvite: {
|
||||||
|
parameters: {
|
||||||
|
query?: never;
|
||||||
|
header?: never;
|
||||||
|
path: {
|
||||||
|
code: string;
|
||||||
|
};
|
||||||
|
cookie?: never;
|
||||||
|
};
|
||||||
|
requestBody: {
|
||||||
|
content: {
|
||||||
|
"application/json": components["schemas"]["AcceptInviteRequest"];
|
||||||
|
};
|
||||||
|
};
|
||||||
responses: {
|
responses: {
|
||||||
/** @description OK */
|
/** @description OK */
|
||||||
200: {
|
200: {
|
||||||
@@ -1365,6 +1426,16 @@ export interface operations {
|
|||||||
"*/*": components["schemas"]["ApiResponseAcceptInviteResponse"];
|
"*/*": components["schemas"]["ApiResponseAcceptInviteResponse"];
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
/** @description Email already registered */
|
||||||
|
409: {
|
||||||
|
headers: { [name: string]: unknown };
|
||||||
|
content: { "*/*": components["schemas"]["ApiError"] };
|
||||||
|
};
|
||||||
|
/** @description Invite not found or invalid */
|
||||||
|
404: {
|
||||||
|
headers: { [name: string]: unknown };
|
||||||
|
content: { "*/*": components["schemas"]["ApiError"] };
|
||||||
|
};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
listCategories: {
|
listCategories: {
|
||||||
|
|||||||
83
frontend/src/routes/(public)/join/[token]/+page.server.ts
Normal file
83
frontend/src/routes/(public)/join/[token]/+page.server.ts
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
import { fail, redirect } from '@sveltejs/kit';
|
||||||
|
import { apiClient } from '$lib/server/api';
|
||||||
|
import type { Actions, PageServerLoad } from './$types';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ params, fetch }) => {
|
||||||
|
const api = apiClient(fetch);
|
||||||
|
const { data, error } = await api.GET('/v1/invites/{code}', {
|
||||||
|
params: { path: { code: params.token } }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error || !data?.data) {
|
||||||
|
return { invalid: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
invalid: false,
|
||||||
|
householdName: data.data.householdName ?? '',
|
||||||
|
inviterName: data.data.inviterName ?? ''
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const actions = {
|
||||||
|
default: async ({ params, request, fetch, cookies }) => {
|
||||||
|
const formData = await request.formData();
|
||||||
|
const name = (formData.get('name') ?? '').toString().trim();
|
||||||
|
const email = (formData.get('email') ?? '').toString().trim();
|
||||||
|
const password = (formData.get('password') ?? '').toString();
|
||||||
|
|
||||||
|
const errors: Record<string, string> = {};
|
||||||
|
|
||||||
|
if (!name) {
|
||||||
|
errors.name = 'Name ist erforderlich';
|
||||||
|
}
|
||||||
|
|
||||||
|
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
if (!emailPattern.test(email)) {
|
||||||
|
errors.email = 'Ungültige E-Mail-Adresse';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.length < 8) {
|
||||||
|
errors.password = 'Mindestens 8 Zeichen';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Object.keys(errors).length > 0) {
|
||||||
|
return fail(400, { errors, name, email });
|
||||||
|
}
|
||||||
|
|
||||||
|
const api = apiClient(fetch);
|
||||||
|
const { error, response } = await api.POST('/v1/invites/{code}/accept', {
|
||||||
|
params: { path: { code: params.token } },
|
||||||
|
body: { name, email, password }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
if (error.status === 409) {
|
||||||
|
return fail(409, {
|
||||||
|
errors: {
|
||||||
|
email: 'Diese E-Mail-Adresse ist bereits registriert. Anmelden →'
|
||||||
|
},
|
||||||
|
name,
|
||||||
|
email
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return fail(400, {
|
||||||
|
errors: { form: 'Einladung ungültig oder abgelaufen.' },
|
||||||
|
name,
|
||||||
|
email
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const sessionId = response?.headers.get('set-cookie')?.match(/JSESSIONID=([^;]+)/i)?.[1];
|
||||||
|
if (sessionId) {
|
||||||
|
cookies.set('JSESSIONID', sessionId, {
|
||||||
|
path: '/',
|
||||||
|
httpOnly: true,
|
||||||
|
sameSite: 'lax',
|
||||||
|
secure: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
redirect(303, '/');
|
||||||
|
}
|
||||||
|
} satisfies Actions;
|
||||||
46
frontend/src/routes/(public)/join/[token]/+page.svelte
Normal file
46
frontend/src/routes/(public)/join/[token]/+page.svelte
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { PageData, ActionData } from './$types';
|
||||||
|
import HouseholdIdentityPanel from './HouseholdIdentityPanel.svelte';
|
||||||
|
import JoinForm from './JoinForm.svelte';
|
||||||
|
|
||||||
|
let { data, form }: { data: PageData; form: ActionData } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Haushalt beitreten — Mealplan</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
{#if data.invalid}
|
||||||
|
<div class="flex min-h-screen items-center justify-center bg-[var(--color-page)] px-6">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="font-[var(--font-display)] text-[22px] font-semibold tracking-[-0.02em] text-[var(--color-text)]">
|
||||||
|
Einladung ungültig oder abgelaufen
|
||||||
|
</h1>
|
||||||
|
<p class="mt-3 font-[var(--font-sans)] text-[14px] text-[var(--color-text-muted)]">
|
||||||
|
Bitte bitte den Einladenden, einen neuen Link zu senden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<!-- Mobile layout (< 1024px): stacked banner + form -->
|
||||||
|
<!-- Desktop layout (≥ 1024px): two-column side by side -->
|
||||||
|
<div class="flex min-h-screen flex-col lg:flex-row">
|
||||||
|
<!-- Left / top: green-tint panel -->
|
||||||
|
<div class="bg-[var(--green-tint)] p-6 lg:flex lg:w-[400px] lg:flex-shrink-0 lg:items-center lg:justify-center lg:p-12">
|
||||||
|
<HouseholdIdentityPanel
|
||||||
|
householdName={data.householdName ?? ''}
|
||||||
|
inviterName={data.inviterName ?? ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right / bottom: form -->
|
||||||
|
<div class="flex flex-1 items-center justify-center bg-[var(--color-page)] p-6 lg:p-12">
|
||||||
|
<div class="w-full max-w-sm">
|
||||||
|
<h1 class="mb-6 font-[var(--font-display)] text-[22px] font-semibold tracking-[-0.02em] text-[var(--color-text)]">
|
||||||
|
Konto erstellen & beitreten
|
||||||
|
</h1>
|
||||||
|
<JoinForm {form} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
let { householdName, inviterName }: { householdName: string; inviterName: string } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center gap-4 rounded-2xl bg-[var(--green-tint)] p-6 text-center">
|
||||||
|
<!-- App logo -->
|
||||||
|
<span class="text-[48px]" aria-hidden="true">🥗</span>
|
||||||
|
|
||||||
|
<!-- Household name -->
|
||||||
|
<div>
|
||||||
|
<h2
|
||||||
|
class="font-[var(--font-display)] text-[22px] font-semibold tracking-[-0.02em] text-[var(--color-text)]"
|
||||||
|
>
|
||||||
|
{householdName}
|
||||||
|
</h2>
|
||||||
|
<p class="mt-1 font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)]">
|
||||||
|
Eingeladen von {inviterName}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Permissions info box -->
|
||||||
|
<div class="w-full rounded-xl bg-white/20 px-4 py-3 text-left">
|
||||||
|
<p class="mb-2 font-[var(--font-sans)] text-[11px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
|
||||||
|
Als Mitglied kannst du
|
||||||
|
</p>
|
||||||
|
<ul class="flex flex-col gap-1.5">
|
||||||
|
<li class="flex items-center gap-2 font-[var(--font-sans)] text-[13px] text-[var(--color-text)]">
|
||||||
|
<span class="text-[var(--green)] font-semibold" aria-hidden="true">✓</span>
|
||||||
|
Wochenplan einsehen
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center gap-2 font-[var(--font-sans)] text-[13px] text-[var(--color-text)]">
|
||||||
|
<span class="text-[var(--green)] font-semibold" aria-hidden="true">✓</span>
|
||||||
|
Einkaufsliste abhaken
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center gap-2 font-[var(--font-sans)] text-[13px] text-[var(--color-text)]">
|
||||||
|
<span class="text-[var(--green)] font-semibold" aria-hidden="true">✓</span>
|
||||||
|
Artikel zur Liste hinzufügen
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import { describe, it, expect } from 'vitest';
|
||||||
|
import { render, screen } from '@testing-library/svelte';
|
||||||
|
import HouseholdIdentityPanel from './HouseholdIdentityPanel.svelte';
|
||||||
|
|
||||||
|
describe('HouseholdIdentityPanel', () => {
|
||||||
|
it('renders household name', () => {
|
||||||
|
render(HouseholdIdentityPanel, {
|
||||||
|
props: { householdName: 'Smith family', inviterName: 'Sarah' }
|
||||||
|
});
|
||||||
|
expect(screen.getByText('Smith family')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders inviter name', () => {
|
||||||
|
render(HouseholdIdentityPanel, {
|
||||||
|
props: { householdName: 'Smith family', inviterName: 'Sarah' }
|
||||||
|
});
|
||||||
|
expect(screen.getByText(/Sarah/)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders all three member permissions', () => {
|
||||||
|
render(HouseholdIdentityPanel, {
|
||||||
|
props: { householdName: 'Smith family', inviterName: 'Sarah' }
|
||||||
|
});
|
||||||
|
expect(screen.getByText(/Wochenplan/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByText(/Einkaufsliste/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders app logo', () => {
|
||||||
|
render(HouseholdIdentityPanel, {
|
||||||
|
props: { householdName: 'Smith family', inviterName: 'Sarah' }
|
||||||
|
});
|
||||||
|
expect(screen.getByText('🥗')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
113
frontend/src/routes/(public)/join/[token]/JoinForm.svelte
Normal file
113
frontend/src/routes/(public)/join/[token]/JoinForm.svelte
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { enhance } from '$app/forms';
|
||||||
|
|
||||||
|
type FormData = {
|
||||||
|
errors?: Record<string, string>;
|
||||||
|
name?: string;
|
||||||
|
email?: string;
|
||||||
|
} | null;
|
||||||
|
|
||||||
|
let { form = null }: { form?: FormData } = $props();
|
||||||
|
|
||||||
|
let showPassword = $state(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<form method="POST" use:enhance>
|
||||||
|
<!-- Form-level error -->
|
||||||
|
{#if form?.errors?.form}
|
||||||
|
<p
|
||||||
|
class="mb-4 rounded-[var(--radius-md)] bg-[color-mix(in_srgb,var(--color-error),transparent_90%)] px-[12px] py-[10px] font-[var(--font-sans)] text-[12px] text-[var(--color-error)]"
|
||||||
|
>
|
||||||
|
{form.errors.form}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Name field -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label
|
||||||
|
for="name"
|
||||||
|
class="mb-[6px] block font-[var(--font-sans)] text-[12px] font-medium text-[var(--color-text)]"
|
||||||
|
>
|
||||||
|
Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
autocomplete="given-name"
|
||||||
|
value={form?.name ?? ''}
|
||||||
|
class="w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none
|
||||||
|
{form?.errors?.name ? 'border-[var(--color-error)]' : ''}"
|
||||||
|
/>
|
||||||
|
{#if form?.errors?.name}
|
||||||
|
<p class="mt-1 font-[var(--font-sans)] text-[12px] text-[var(--color-error)]">
|
||||||
|
{form.errors.name}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Email field -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label
|
||||||
|
for="email"
|
||||||
|
class="mb-[6px] block font-[var(--font-sans)] text-[12px] font-medium text-[var(--color-text)]"
|
||||||
|
>
|
||||||
|
E-Mail
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
autocomplete="email"
|
||||||
|
value={form?.email ?? ''}
|
||||||
|
class="w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none
|
||||||
|
{form?.errors?.email ? 'border-[var(--color-error)]' : ''}"
|
||||||
|
/>
|
||||||
|
{#if form?.errors?.email}
|
||||||
|
<p class="mt-1 font-[var(--font-sans)] text-[12px] text-[var(--color-error)]">
|
||||||
|
{form.errors.email}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Password field -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
class="mb-[6px] block font-[var(--font-sans)] text-[12px] font-medium text-[var(--color-text)]"
|
||||||
|
>
|
||||||
|
Passwort
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
autocomplete="new-password"
|
||||||
|
class="w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-[12px] py-[10px] pr-[80px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none
|
||||||
|
{form?.errors?.password ? 'border-[var(--color-error)]' : ''}"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick={() => (showPassword = !showPassword)}
|
||||||
|
aria-label="Passwort anzeigen"
|
||||||
|
class="absolute top-1/2 right-[12px] -translate-y-1/2 cursor-pointer bg-transparent p-0 font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)]"
|
||||||
|
>
|
||||||
|
{showPassword ? 'Verbergen' : 'Anzeigen'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{#if form?.errors?.password}
|
||||||
|
<p class="mt-1 font-[var(--font-sans)] text-[12px] text-[var(--color-error)]">
|
||||||
|
{form.errors.password}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Submit button -->
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full cursor-pointer rounded-[var(--radius-md)] bg-[var(--green-dark)] px-[24px] py-[12px] font-[var(--font-sans)] text-[var(--btn-font-size)] font-[var(--btn-font-weight)] tracking-[var(--btn-letter-spacing)] text-white"
|
||||||
|
>
|
||||||
|
Haushalt beitreten
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
74
frontend/src/routes/(public)/join/[token]/JoinForm.test.ts
Normal file
74
frontend/src/routes/(public)/join/[token]/JoinForm.test.ts
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
import { describe, it, expect, vi } from 'vitest';
|
||||||
|
import { render, screen } from '@testing-library/svelte';
|
||||||
|
import { userEvent } from '@testing-library/user-event';
|
||||||
|
import JoinForm from './JoinForm.svelte';
|
||||||
|
|
||||||
|
vi.mock('$app/forms', () => ({
|
||||||
|
enhance: () => ({ destroy: () => {} })
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('JoinForm', () => {
|
||||||
|
it('renders name, email and password fields', () => {
|
||||||
|
render(JoinForm);
|
||||||
|
expect(screen.getByLabelText('Name')).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText('E-Mail')).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText('Passwort')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders "Haushalt beitreten" submit button', () => {
|
||||||
|
render(JoinForm);
|
||||||
|
expect(screen.getByRole('button', { name: /Haushalt beitreten/i })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('password field is initially of type password', () => {
|
||||||
|
render(JoinForm);
|
||||||
|
expect(screen.getByLabelText('Passwort')).toHaveAttribute('type', 'password');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('password toggle switches type to text', async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
render(JoinForm);
|
||||||
|
|
||||||
|
const toggle = screen.getByRole('button', { name: /passwort anzeigen/i });
|
||||||
|
await user.click(toggle);
|
||||||
|
expect(screen.getByLabelText('Passwort')).toHaveAttribute('type', 'text');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows form-level error from form prop', () => {
|
||||||
|
render(JoinForm, {
|
||||||
|
props: {
|
||||||
|
form: {
|
||||||
|
errors: { form: 'Einladung ungültig oder abgelaufen.' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
expect(screen.getByText('Einladung ungültig oder abgelaufen.')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows email-taken error with login link', () => {
|
||||||
|
render(JoinForm, {
|
||||||
|
props: {
|
||||||
|
form: {
|
||||||
|
errors: {
|
||||||
|
email: 'Diese E-Mail-Adresse ist bereits registriert. Anmelden →'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
expect(screen.getByText(/bereits registriert/)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('pre-fills name and email from form prop', () => {
|
||||||
|
render(JoinForm, {
|
||||||
|
props: {
|
||||||
|
form: {
|
||||||
|
errors: {},
|
||||||
|
name: 'Tom',
|
||||||
|
email: 'tom@example.com'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
expect(screen.getByLabelText('Name')).toHaveValue('Tom');
|
||||||
|
expect(screen.getByLabelText('E-Mail')).toHaveValue('tom@example.com');
|
||||||
|
});
|
||||||
|
});
|
||||||
200
frontend/src/routes/(public)/join/[token]/page.server.test.ts
Normal file
200
frontend/src/routes/(public)/join/[token]/page.server.test.ts
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
vi.mock('$env/dynamic/private', () => ({
|
||||||
|
env: { BACKEND_URL: 'http://localhost:8080' }
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockGet = vi.fn();
|
||||||
|
const mockPost = vi.fn();
|
||||||
|
vi.mock('$lib/server/api', () => ({
|
||||||
|
apiClient: () => ({ GET: mockGet, POST: mockPost })
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('join page load function', () => {
|
||||||
|
let load: any;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
mockGet.mockReset();
|
||||||
|
vi.resetModules();
|
||||||
|
const mod = await import('./+page.server');
|
||||||
|
load = mod.load;
|
||||||
|
});
|
||||||
|
|
||||||
|
function createLoadEvent(token: string) {
|
||||||
|
return {
|
||||||
|
params: { token },
|
||||||
|
fetch: vi.fn()
|
||||||
|
} as any;
|
||||||
|
}
|
||||||
|
|
||||||
|
it('returns householdName and inviterName for valid token', async () => {
|
||||||
|
mockGet.mockResolvedValue({
|
||||||
|
data: { data: { householdName: 'Smith family', inviterName: 'Sarah' } },
|
||||||
|
error: undefined
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await load(createLoadEvent('ABC12XYZ'));
|
||||||
|
|
||||||
|
expect(result.invalid).toBeFalsy();
|
||||||
|
expect(result.householdName).toBe('Smith family');
|
||||||
|
expect(result.inviterName).toBe('Sarah');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns invalid:true on 404 (expired/used/unknown token)', async () => {
|
||||||
|
mockGet.mockResolvedValue({
|
||||||
|
data: undefined,
|
||||||
|
error: { status: 404 }
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await load(createLoadEvent('BADTOKEN'));
|
||||||
|
|
||||||
|
expect(result.invalid).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('join page form action', () => {
|
||||||
|
let actions: any;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
mockPost.mockReset();
|
||||||
|
vi.resetModules();
|
||||||
|
const mod = await import('./+page.server');
|
||||||
|
actions = mod.actions;
|
||||||
|
});
|
||||||
|
|
||||||
|
function createRequest(token: string, formData: Record<string, string>) {
|
||||||
|
const fd = new FormData();
|
||||||
|
for (const [key, value] of Object.entries(formData)) {
|
||||||
|
fd.append(key, value);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
params: { token },
|
||||||
|
request: { formData: () => Promise.resolve(fd) },
|
||||||
|
fetch: vi.fn(),
|
||||||
|
cookies: { get: vi.fn(), set: vi.fn() }
|
||||||
|
} as any;
|
||||||
|
}
|
||||||
|
|
||||||
|
it('calls POST /v1/invites/{token}/accept with form data', async () => {
|
||||||
|
mockPost.mockResolvedValue({
|
||||||
|
data: { data: { householdName: 'Smith family', role: 'member' } },
|
||||||
|
error: undefined,
|
||||||
|
response: { headers: { get: vi.fn().mockReturnValue(null) } }
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
await actions.default(createRequest('ABC12XYZ', {
|
||||||
|
name: 'Tom',
|
||||||
|
email: 'tom@example.com',
|
||||||
|
password: 'secret123'
|
||||||
|
}));
|
||||||
|
} catch {
|
||||||
|
// redirect throws
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(mockPost).toHaveBeenCalledWith('/v1/invites/{code}/accept', {
|
||||||
|
params: { path: { code: 'ABC12XYZ' } },
|
||||||
|
body: { name: 'Tom', email: 'tom@example.com', password: 'secret123' }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('sets JSESSIONID cookie and redirects to / on success', async () => {
|
||||||
|
mockPost.mockResolvedValue({
|
||||||
|
data: { data: { householdName: 'Smith family', role: 'member' } },
|
||||||
|
error: undefined,
|
||||||
|
response: {
|
||||||
|
headers: { get: vi.fn().mockReturnValue('JSESSIONID=abc123; Path=/; HttpOnly') }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const event = createRequest('ABC12XYZ', {
|
||||||
|
name: 'Tom',
|
||||||
|
email: 'tom@example.com',
|
||||||
|
password: 'secret123'
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
await actions.default(event);
|
||||||
|
expect.unreachable();
|
||||||
|
} catch (e: any) {
|
||||||
|
expect(e.status).toBe(303);
|
||||||
|
expect(e.location).toBe('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(event.cookies.set).toHaveBeenCalledWith(
|
||||||
|
'JSESSIONID',
|
||||||
|
'abc123',
|
||||||
|
expect.objectContaining({ path: '/', secure: true })
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 409 fail with email-taken message on conflict', async () => {
|
||||||
|
mockPost.mockResolvedValue({
|
||||||
|
data: undefined,
|
||||||
|
error: { status: 409 },
|
||||||
|
response: { headers: { get: vi.fn().mockReturnValue(null) } }
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await actions.default(createRequest('ABC12XYZ', {
|
||||||
|
name: 'Tom',
|
||||||
|
email: 'tom@example.com',
|
||||||
|
password: 'secret123'
|
||||||
|
}));
|
||||||
|
|
||||||
|
expect(result.status).toBe(409);
|
||||||
|
expect(result.data.errors.email).toContain('registriert');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 400 fail on invalid token (404 from backend)', async () => {
|
||||||
|
mockPost.mockResolvedValue({
|
||||||
|
data: undefined,
|
||||||
|
error: { status: 404 },
|
||||||
|
response: { headers: { get: vi.fn().mockReturnValue(null) } }
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await actions.default(createRequest('BADTOKEN', {
|
||||||
|
name: 'Tom',
|
||||||
|
email: 'tom@example.com',
|
||||||
|
password: 'secret123'
|
||||||
|
}));
|
||||||
|
|
||||||
|
expect(result.status).toBe(400);
|
||||||
|
expect(result.data.errors.form).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('rejects empty name with validation error', async () => {
|
||||||
|
const result = await actions.default(createRequest('ABC12XYZ', {
|
||||||
|
name: '',
|
||||||
|
email: 'tom@example.com',
|
||||||
|
password: 'secret123'
|
||||||
|
}));
|
||||||
|
|
||||||
|
expect(result.status).toBe(400);
|
||||||
|
expect(result.data.errors.name).toBeTruthy();
|
||||||
|
expect(mockPost).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('rejects invalid email with validation error', async () => {
|
||||||
|
const result = await actions.default(createRequest('ABC12XYZ', {
|
||||||
|
name: 'Tom',
|
||||||
|
email: 'notanemail',
|
||||||
|
password: 'secret123'
|
||||||
|
}));
|
||||||
|
|
||||||
|
expect(result.status).toBe(400);
|
||||||
|
expect(result.data.errors.email).toBeTruthy();
|
||||||
|
expect(mockPost).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('rejects short password with validation error', async () => {
|
||||||
|
const result = await actions.default(createRequest('ABC12XYZ', {
|
||||||
|
name: 'Tom',
|
||||||
|
email: 'tom@example.com',
|
||||||
|
password: 'short'
|
||||||
|
}));
|
||||||
|
|
||||||
|
expect(result.status).toBe(400);
|
||||||
|
expect(result.data.errors.password).toBeTruthy();
|
||||||
|
expect(mockPost).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user