diff --git a/frontend/src/routes/admin/EntityNav.svelte b/frontend/src/routes/admin/EntityNav.svelte
index 41cd32b6..668c36a3 100644
--- a/frontend/src/routes/admin/EntityNav.svelte
+++ b/frontend/src/routes/admin/EntityNav.svelte
@@ -9,6 +9,7 @@ let {
userCount,
groupCount,
tagCount,
+ inviteCount,
canManageUsers,
canManageTags,
canManagePermissions,
@@ -17,6 +18,7 @@ let {
userCount: number;
groupCount: number;
tagCount: number;
+ inviteCount: number;
canManageUsers: boolean;
canManageTags: boolean;
canManagePermissions: boolean;
@@ -86,6 +88,23 @@ function handleKeydown(event: KeyboardEvent) {
{/snippet}
+{#snippet invitesIcon()}
+
+{/snippet}
+
{#snippet tagsIcon()}
{/if}
+ {#if canManageUsers}
+
+ {/if}
+
{#if canManageTags}
{/if}
+ {#if canManageUsers}
+
+ {/if}
+
{#if canManageTags}
{
+ const status = url.searchParams.get('status') ?? 'active';
+ const apiUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+ const res = await fetch(`${apiUrl}/api/invites?status=${encodeURIComponent(status)}`);
+
+ if (!res.ok) {
+ const backendError = await parseBackendError(res);
+ return {
+ invites: [] as InviteListItem[],
+ status,
+ loadError: backendError?.code ?? 'INTERNAL_ERROR'
+ };
+ }
+
+ const invites: InviteListItem[] = await res.json();
+ return { invites, status, loadError: null };
+};
+
+export const actions = {
+ create: async ({ request, fetch }) => {
+ const formData = await request.formData();
+ const label = (formData.get('label') as string) || undefined;
+ const maxUsesRaw = formData.get('maxUses') as string;
+ const maxUses = maxUsesRaw ? parseInt(maxUsesRaw, 10) : undefined;
+ const prefillFirstName = (formData.get('prefillFirstName') as string) || undefined;
+ const prefillLastName = (formData.get('prefillLastName') as string) || undefined;
+ const prefillEmail = (formData.get('prefillEmail') as string) || undefined;
+ const expiresAt = (formData.get('expiresAt') as string) || undefined;
+
+ const apiUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+ const res = await fetch(`${apiUrl}/api/invites`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ label,
+ maxUses,
+ prefillFirstName,
+ prefillLastName,
+ prefillEmail,
+ expiresAt
+ })
+ });
+
+ if (!res.ok) {
+ const backendError = await parseBackendError(res);
+ return fail(res.status, { createError: backendError?.code ?? 'INTERNAL_ERROR' });
+ }
+
+ const created: InviteListItem = await res.json();
+ return { created };
+ },
+
+ revoke: async ({ request, fetch }) => {
+ const formData = await request.formData();
+ const id = formData.get('id') as string;
+
+ const apiUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+ const res = await fetch(`${apiUrl}/api/invites/${encodeURIComponent(id)}`, {
+ method: 'DELETE'
+ });
+
+ if (!res.ok) {
+ const backendError = await parseBackendError(res);
+ return fail(res.status, { revokeError: backendError?.code ?? 'INTERNAL_ERROR' });
+ }
+
+ return { revoked: id };
+ }
+} satisfies Actions;
diff --git a/frontend/src/routes/admin/invites/+page.svelte b/frontend/src/routes/admin/invites/+page.svelte
new file mode 100644
index 00000000..56832109
--- /dev/null
+++ b/frontend/src/routes/admin/invites/+page.svelte
@@ -0,0 +1,343 @@
+
+
+
+ {m.admin_tab_invites()} · Familienarchiv
+
+
+
+
+
+ {m.admin_invites_list_title()}
+
+
+
+
+
+
+
+
+
+
+
+ {#if data.loadError}
+
+ {getErrorMessage(data.loadError)}
+
+ {/if}
+
+ {#if form?.created}
+
+
+ {m.admin_invite_created_title()}
+
+
{m.admin_invite_created_desc()}
+
+
+ {form.created.shareableUrl}
+
+
+
+
+ {/if}
+
+ {#if showNewForm}
+
+
+ {m.admin_btn_new_invite()}
+
+
+
+ {/if}
+
+
+
+ {#if data.invites.length === 0}
+
{m.admin_invites_empty()}
+ {:else}
+
+
+
+
+ | {m.admin_invite_col_code()} |
+ {m.admin_invite_col_label()} |
+ {m.admin_invite_col_uses()} |
+ {m.admin_invite_col_expiry()} |
+ {m.admin_invite_col_status()} |
+ {m.admin_invite_col_link()} |
+ |
+
+
+
+ {#each data.invites as invite (invite.id)}
+
+ | {invite.displayCode} |
+ {invite.label ?? '–'} |
+
+ {invite.useCount} / {invite.maxUses != null ? invite.maxUses : m.admin_invite_unlimited()}
+ |
+
+ {invite.expiresAt
+ ? new Intl.DateTimeFormat('de-DE', { dateStyle: 'medium' }).format(new Date(invite.expiresAt))
+ : m.admin_invite_no_expiry()}
+ |
+
+
+ {statusLabel(invite.status)}
+
+ |
+
+
+ |
+
+ {#if invite.status === 'active'}
+
+ {/if}
+ |
+
+ {/each}
+
+
+
+ {/if}
+
+
+
+ {#if data.registered}
+
+ {m.login_registered_success()}
+
+ {/if}
+
{m.login_heading()}
diff --git a/frontend/src/routes/login/page.svelte.spec.ts b/frontend/src/routes/login/page.svelte.spec.ts
index 64681752..9a162be7 100644
--- a/frontend/src/routes/login/page.svelte.spec.ts
+++ b/frontend/src/routes/login/page.svelte.spec.ts
@@ -9,7 +9,7 @@ afterEach(cleanup);
describe('Login page – rendering', () => {
it('renders the page title', async () => {
- render(LoginPage, {});
+ render(LoginPage, { data: { registered: false } });
await expect
.element(page.getByRole('link', { name: 'Familienarchiv' }).first())
.toBeInTheDocument();
@@ -17,54 +17,54 @@ describe('Login page – rendering', () => {
});
it('renders the submit button', async () => {
- render(LoginPage, {});
+ render(LoginPage, { data: { registered: false } });
await expect.element(page.getByRole('button', { name: 'Anmelden' })).toBeInTheDocument();
});
it('renders the email input', async () => {
- render(LoginPage, {});
+ render(LoginPage, { data: { registered: false } });
await tick();
const input = document.querySelector
('input[name="email"]');
expect(input).not.toBeNull();
});
it('renders the password input', async () => {
- render(LoginPage, {});
+ render(LoginPage, { data: { registered: false } });
await tick();
const input = document.querySelector('input[name="password"]');
expect(input).not.toBeNull();
});
it('email field is required', async () => {
- render(LoginPage, {});
+ render(LoginPage, { data: { registered: false } });
await tick();
const input = document.querySelector('input[name="email"]');
expect(input?.required).toBe(true);
});
it('password field is required', async () => {
- render(LoginPage, {});
+ render(LoginPage, { data: { registered: false } });
await tick();
const input = document.querySelector('input[name="password"]');
expect(input?.required).toBe(true);
});
it('email field has type="email"', async () => {
- render(LoginPage, {});
+ render(LoginPage, { data: { registered: false } });
await tick();
const input = document.querySelector('input[name="email"]');
expect(input?.type).toBe('email');
});
it('password field has type="password"', async () => {
- render(LoginPage, {});
+ render(LoginPage, { data: { registered: false } });
await tick();
const input = document.querySelector('input[name="password"]');
expect(input?.type).toBe('password');
});
it('form submits to the login action', async () => {
- render(LoginPage, {});
+ render(LoginPage, { data: { registered: false } });
await tick();
const form = document.querySelector('form');
expect(form?.action).toMatch(/\?\/login$/);
@@ -73,25 +73,25 @@ describe('Login page – rendering', () => {
describe('Login page – error state', () => {
it('shows no error when form is undefined', async () => {
- render(LoginPage, {});
+ render(LoginPage, { data: { registered: false } });
await tick();
expect(document.querySelector('.text-red-600')).toBeNull();
});
it('shows no error when form has no error property', async () => {
- render(LoginPage, { form: {} });
+ render(LoginPage, { data: { registered: false }, form: {} });
await tick();
expect(document.querySelector('.text-red-600')).toBeNull();
});
it('displays the error message from the form action', async () => {
- render(LoginPage, { form: { error: 'Ungültige Anmeldedaten.' } });
+ render(LoginPage, { data: { registered: false }, form: { error: 'Ungültige Anmeldedaten.' } });
await expect.element(page.getByText('Ungültige Anmeldedaten.')).toBeInTheDocument();
await page.screenshot({ path: 'test-results/screenshots/login-error.png' });
});
it('applies red styling to the error text', async () => {
- render(LoginPage, { form: { error: 'Fehler!' } });
+ render(LoginPage, { data: { registered: false }, form: { error: 'Fehler!' } });
await tick();
expect(document.querySelector('.text-red-600')).not.toBeNull();
});
diff --git a/frontend/src/routes/login/test-results/screenshots/login-default.png b/frontend/src/routes/login/test-results/screenshots/login-default.png
new file mode 100644
index 00000000..6b15416c
Binary files /dev/null and b/frontend/src/routes/login/test-results/screenshots/login-default.png differ
diff --git a/frontend/src/routes/login/test-results/screenshots/login-error.png b/frontend/src/routes/login/test-results/screenshots/login-error.png
new file mode 100644
index 00000000..3765f5ff
Binary files /dev/null and b/frontend/src/routes/login/test-results/screenshots/login-error.png differ
diff --git a/frontend/src/routes/register/+page.server.ts b/frontend/src/routes/register/+page.server.ts
new file mode 100644
index 00000000..0b67ea44
--- /dev/null
+++ b/frontend/src/routes/register/+page.server.ts
@@ -0,0 +1,53 @@
+import { fail, redirect } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
+import { parseBackendError } from '$lib/errors';
+import type { Actions, PageServerLoad } from './$types';
+
+interface InvitePrefill {
+ firstName?: string;
+ lastName?: string;
+ email?: string;
+}
+
+export const load: PageServerLoad = async ({ url, fetch }) => {
+ const code = url.searchParams.get('code');
+ if (!code) {
+ return { code: null, prefill: null, codeError: null };
+ }
+
+ const apiUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+ const res = await fetch(`${apiUrl}/api/auth/invite/${encodeURIComponent(code)}`);
+
+ if (!res.ok) {
+ const backendError = await parseBackendError(res);
+ return { code, prefill: null, codeError: backendError?.code ?? 'INTERNAL_ERROR' };
+ }
+
+ const prefill: InvitePrefill = await res.json();
+ return { code, prefill, codeError: null };
+};
+
+export const actions = {
+ default: async ({ request, fetch }) => {
+ const formData = await request.formData();
+ const code = formData.get('code') as string;
+ const email = formData.get('email') as string;
+ const password = formData.get('password') as string;
+ const firstName = formData.get('firstName') as string;
+ const lastName = formData.get('lastName') as string;
+
+ const apiUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+ const res = await fetch(`${apiUrl}/api/auth/register`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ code, email, password, firstName, lastName })
+ });
+
+ if (!res.ok) {
+ const backendError = await parseBackendError(res);
+ return fail(res.status, { error: backendError?.code ?? 'INTERNAL_ERROR' });
+ }
+
+ throw redirect(303, '/login?registered=1');
+ }
+} satisfies Actions;
diff --git a/frontend/src/routes/register/+page.svelte b/frontend/src/routes/register/+page.svelte
new file mode 100644
index 00000000..c13c3cc9
--- /dev/null
+++ b/frontend/src/routes/register/+page.svelte
@@ -0,0 +1,193 @@
+
+
+
+ {m.register_heading()} – Familienarchiv
+
+
+
+
+
+
+
+
+
+ {#if data.codeError}
+
+
+
+ {m.register_invalid_code()}
+
+
{m.register_invalid_code_desc()}
+
+ {:else}
+
+
+ {m.register_heading()}
+
+ {#if data.code}
+
{m.register_subtext()}
+ {/if}
+
+
+
+ {/if}
+
+
+
+
+