@tollwyn/baukasten 0.0.2 → 1.2.3

package/dist/texts.js

@@ -0,0 +1,265 @@
+const en = {
+    frame: {
+        navigation: 'Main',
+        accountMenu: 'Account',
+        logIn: 'Log in',
+        signUp: 'Sign up',
+        account: 'Account',
+        logOut: 'Log out',
+        unverified: 'Please confirm your email address with the link we sent you.',
+        unverifiedLink: 'No email?',
+        legal: 'Legal',
+        imprint: 'Imprint',
+        privacy: 'Privacy',
+        terms: 'Terms'
+    },
+    error: {
+        notFound: 'Page not found',
+        failed: 'Something went wrong',
+        back: 'Back to the start page'
+    },
+    wait: 'Please wait …',
+    signup: {
+        email: 'Work email',
+        password: 'Password (at least 10 characters)',
+        terms: { before: 'I accept the ', link: 'terms', after: '.' },
+        business: 'I sign up for my business, not as a consumer.',
+        button: 'Create account',
+        haveAccount: { before: 'Already have an account? ', link: 'Log in', after: '.' },
+        takenLogIn: 'Log in',
+        takenReset: 'Set a new password'
+    },
+    login: {
+        title: 'Log in',
+        email: 'Email',
+        password: 'Password',
+        button: 'Log in',
+        forgot: 'Forgot your password?',
+        noAccount: { before: 'No account yet? ', link: 'Sign up', after: '.' },
+        verified: 'Your email address is confirmed. Log in to continue.',
+        emailChanged: 'Your email address was changed. Log in with the new one.'
+    },
+    logout: {
+        title: 'Log out',
+        button: 'Log out',
+        done: 'You are logged out.',
+        deleted: 'Your account and its data were deleted.',
+        again: 'Log in again'
+    },
+    forgot: {
+        title: 'Forgot your password?',
+        lead: 'We send you a link to set a new one.',
+        email: 'Email',
+        button: 'Send link',
+        sent: 'If an account exists for this address, we sent it a link to set a new password. The link is valid for one hour.',
+        again: 'Send again'
+    },
+    reset: {
+        title: 'Set a new password',
+        password: 'New password (at least 10 characters)',
+        button: 'Save password and log in',
+        invalid: {
+            before: 'This link is invalid, used or expired. ',
+            link: 'Ask for a new one',
+            after: '.'
+        }
+    },
+    verify: {
+        title: 'Confirm your email address',
+        button: 'Confirm email address',
+        apiAccount: 'Your account was created over the API. Set a password to log in here too, or leave it empty.',
+        password: 'Password (optional, at least 10 characters)',
+        invalid: 'This link is invalid, used or expired.',
+        newLink: { before: '', link: 'Ask for a new link', after: '.' },
+        logIn: { before: '', link: 'Log in', after: ' to get a new link.' },
+        pending: (email) => `We sent a link to ${email}. Open it to confirm your address.`,
+        unsent: 'We could not send the email. Please send it again.',
+        resend: 'Send the link again',
+        resent: (email) => `We sent a new link to ${email}.`,
+        confirmed: 'Your email address is confirmed.',
+        continue: 'Continue'
+    },
+    confirm: {
+        title: 'Confirm your new email address',
+        becomes: (email) => `Your login address becomes ${email}.`,
+        button: 'Confirm',
+        invalid: 'This link is invalid, used or expired.'
+    },
+    account: {
+        title: 'Account',
+        loggedIn: (email) => `You are logged in as ${email}.`,
+        verified: 'Your email address is confirmed.',
+        emailChanged: 'Your email address was changed.',
+        email: {
+            title: 'Email address',
+            current: (email) => `Your login address is ${email}.`,
+            new: 'New email address',
+            password: 'Your password',
+            button: 'Change email address',
+            sent: (email) => `We sent a link to ${email}. Your address changes once you open it; until then the old one stays.`
+        },
+        password: {
+            title: 'Password',
+            current: 'Current password',
+            new: 'New password (at least 10 characters)',
+            change: 'Change password',
+            set: 'Set password',
+            done: 'Your password was changed. Your other sessions were logged out.'
+        },
+        keys: {
+            title: 'API keys',
+            lead: (example) => `Send a key in the header "Authorization: Bearer ${example}". A key is shown only once, when you create it.`,
+            name: 'Name of the key',
+            button: 'Create key',
+            created: 'Your new key; it is shown only now:',
+            confirmFirst: 'Confirm your email address to create keys.',
+            none: 'You have no keys.',
+            columns: { name: 'Name', key: 'Key', created: 'Created' },
+            revoke: 'Revoke'
+        },
+        billing: {
+            title: 'Billing',
+            lead: 'Your payment method, invoices and subscription are with Stripe.',
+            button: 'Open billing'
+        },
+        delete: {
+            title: 'Delete account',
+            lead: 'This deletes your account and its data and ends your subscriptions at once, and cannot be undone. What the books need stays, without your email address.',
+            confirm: 'Type your email address to confirm',
+            button: 'Delete my account'
+        }
+    }
+};
+const de = {
+    frame: {
+        navigation: 'Hauptnavigation',
+        accountMenu: 'Konto',
+        logIn: 'Anmelden',
+        signUp: 'Registrieren',
+        account: 'Konto',
+        logOut: 'Abmelden',
+        unverified: 'Bitte bestätigen Sie Ihre E-Mail-Adresse mit dem Link, den wir Ihnen geschickt haben.',
+        unverifiedLink: 'Keine E-Mail erhalten?',
+        legal: 'Rechtliches',
+        imprint: 'Impressum',
+        privacy: 'Datenschutz',
+        terms: 'Bedingungen'
+    },
+    error: {
+        notFound: 'Seite nicht gefunden',
+        failed: 'Etwas ist schiefgegangen',
+        back: 'Zurück zur Startseite'
+    },
+    wait: 'Bitte warten …',
+    signup: {
+        email: 'Geschäftliche E-Mail-Adresse',
+        password: 'Passwort (mindestens 10 Zeichen)',
+        terms: { before: 'Ich akzeptiere die ', link: 'Bedingungen', after: '.' },
+        business: 'Ich registriere mich für mein Unternehmen, nicht als Konsument.',
+        button: 'Konto eröffnen',
+        haveAccount: { before: 'Sie haben schon ein Konto? ', link: 'Anmelden', after: '.' },
+        takenLogIn: 'Anmelden',
+        takenReset: 'Neues Passwort setzen'
+    },
+    login: {
+        title: 'Anmelden',
+        email: 'E-Mail-Adresse',
+        password: 'Passwort',
+        button: 'Anmelden',
+        forgot: 'Passwort vergessen?',
+        noAccount: { before: 'Noch kein Konto? ', link: 'Registrieren', after: '.' },
+        verified: 'Ihre E-Mail-Adresse ist bestätigt. Melden Sie sich an, um weiterzufahren.',
+        emailChanged: 'Ihre E-Mail-Adresse wurde geändert. Melden Sie sich mit der neuen an.'
+    },
+    logout: {
+        title: 'Abmelden',
+        button: 'Abmelden',
+        done: 'Sie sind abgemeldet.',
+        deleted: 'Ihr Konto und seine Daten wurden gelöscht.',
+        again: 'Wieder anmelden'
+    },
+    forgot: {
+        title: 'Passwort vergessen?',
+        lead: 'Wir schicken Ihnen einen Link, mit dem Sie ein neues setzen.',
+        email: 'E-Mail-Adresse',
+        button: 'Link senden',
+        sent: 'Falls zu dieser Adresse ein Konto besteht, haben wir ihr einen Link für ein neues Passwort geschickt. Der Link gilt eine Stunde.',
+        again: 'Nochmals senden'
+    },
+    reset: {
+        title: 'Neues Passwort setzen',
+        password: 'Neues Passwort (mindestens 10 Zeichen)',
+        button: 'Passwort speichern und anmelden',
+        invalid: {
+            before: 'Dieser Link ist ungültig, schon benutzt oder abgelaufen. ',
+            link: 'Fordern Sie einen neuen an',
+            after: '.'
+        }
+    },
+    verify: {
+        title: 'E-Mail-Adresse bestätigen',
+        button: 'E-Mail-Adresse bestätigen',
+        apiAccount: 'Ihr Konto wurde über die API eröffnet. Setzen Sie ein Passwort, um sich auch hier anzumelden, oder lassen Sie das Feld leer.',
+        password: 'Passwort (freiwillig, mindestens 10 Zeichen)',
+        invalid: 'Dieser Link ist ungültig, schon benutzt oder abgelaufen.',
+        newLink: { before: '', link: 'Fordern Sie einen neuen Link an', after: '.' },
+        logIn: { before: '', link: 'Melden Sie sich an', after: ', um einen neuen Link zu erhalten.' },
+        pending: (email) => `Wir haben einen Link an ${email} geschickt. Öffnen Sie ihn, um Ihre Adresse zu bestätigen.`,
+        unsent: 'Wir konnten die E-Mail nicht senden. Bitte senden Sie sie nochmals.',
+        resend: 'Link nochmals senden',
+        resent: (email) => `Wir haben einen neuen Link an ${email} geschickt.`,
+        confirmed: 'Ihre E-Mail-Adresse ist bestätigt.',
+        continue: 'Weiter'
+    },
+    confirm: {
+        title: 'Neue E-Mail-Adresse bestätigen',
+        becomes: (email) => `Ihre Anmeldeadresse wird ${email}.`,
+        button: 'Bestätigen',
+        invalid: 'Dieser Link ist ungültig, schon benutzt oder abgelaufen.'
+    },
+    account: {
+        title: 'Konto',
+        loggedIn: (email) => `Sie sind angemeldet als ${email}.`,
+        verified: 'Ihre E-Mail-Adresse ist bestätigt.',
+        emailChanged: 'Ihre E-Mail-Adresse wurde geändert.',
+        email: {
+            title: 'E-Mail-Adresse',
+            current: (email) => `Ihre Anmeldeadresse ist ${email}.`,
+            new: 'Neue E-Mail-Adresse',
+            password: 'Ihr Passwort',
+            button: 'E-Mail-Adresse ändern',
+            sent: (email) => `Wir haben einen Link an ${email} geschickt. Ihre Adresse ändert sich, sobald Sie ihn öffnen; bis dahin bleibt die alte.`
+        },
+        password: {
+            title: 'Passwort',
+            current: 'Aktuelles Passwort',
+            new: 'Neues Passwort (mindestens 10 Zeichen)',
+            change: 'Passwort ändern',
+            set: 'Passwort setzen',
+            done: 'Ihr Passwort wurde geändert. Ihre anderen Sitzungen wurden abgemeldet.'
+        },
+        keys: {
+            title: 'API-Schlüssel',
+            lead: (example) => `Senden Sie einen Schlüssel in der Kopfzeile «Authorization: Bearer ${example}». Ein Schlüssel wird nur einmal angezeigt, beim Anlegen.`,
+            name: 'Name des Schlüssels',
+            button: 'Schlüssel anlegen',
+            created: 'Ihr neuer Schlüssel; er wird nur jetzt angezeigt:',
+            confirmFirst: 'Bestätigen Sie Ihre E-Mail-Adresse, um Schlüssel anzulegen.',
+            none: 'Sie haben keine Schlüssel.',
+            columns: { name: 'Name', key: 'Schlüssel', created: 'Angelegt' },
+            revoke: 'Widerrufen'
+        },
+        billing: {
+            title: 'Abrechnung',
+            lead: 'Zahlungsmittel, Rechnungen und Abo verwalten Sie bei Stripe.',
+            button: 'Abrechnung öffnen'
+        },
+        delete: {
+            title: 'Konto löschen',
+            lead: 'Damit löschen Sie Ihr Konto und seine Daten und beenden Ihre Abos sofort, unwiderruflich. Was die Buchhaltung braucht, bleibt, ohne Ihre E-Mail-Adresse.',
+            confirm: 'Geben Sie zur Bestätigung Ihre E-Mail-Adresse ein',
+            button: 'Mein Konto löschen'
+        }
+    }
+};
+export const TEXTS = { en, de };

package/dist/ui/AccountPage.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">import Field from "./Field.svelte";
+import Form from "./Form.svelte";
+import { useFrame } from "./frame.js";
+let { data, form } = $props();
+const { t, name } = useFrame();
+const a = t.account;
+const account = $derived(data.account);
+const created = $derived(form?.action === "createKey" ? form : null);
+const emailForm = $derived(form?.action === "changeEmail" ? form : null);
+const passwordForm = $derived(form?.action === "changePassword" ? form : null);
+const deleteForm = $derived(form?.action === "delete" ? form : null);
+</script>
+
+<svelte:head>
+	<title>{a.title} – {name}</title>
+</svelte:head>
+
+<div class="bk-ui bk-narrow">
+	<h1>{a.title}</h1>
+	{#if account.notice === 'verified'}
+		<p class="bk-success" role="status">{a.verified}</p>
+	{:else if account.notice === 'emailChanged'}
+		<p class="bk-success" role="status">{a.emailChanged}</p>
+	{/if}
+
+	<section aria-labelledby="bk-email">
+		<h2 id="bk-email">{a.email.title}</h2>
+		<p>{a.email.current(account.email)}</p>
+		{#if emailForm?.sentTo}
+			<p class="bk-success" role="status">{a.email.sent(emailForm.sentTo)}</p>
+		{/if}
+		<Form action="?/changeEmail" button={a.email.button} error={emailForm?.error}>
+			<Field
+				label={a.email.new}
+				name="email"
+				type="email"
+				autocomplete="email"
+				required
+				value={emailForm?.email ?? ''}
+			/>
+			{#if account.hasPassword}
+				<Field
+					label={a.email.password}
+					name="password"
+					type="password"
+					autocomplete="current-password"
+					required
+				/>
+			{/if}
+		</Form>
+	</section>
+
+	<section aria-labelledby="bk-password">
+		<h2 id="bk-password">{a.password.title}</h2>
+		{#if passwordForm?.done}
+			<p class="bk-success" role="status">{a.password.done}</p>
+		{/if}
+		<Form
+			action="?/changePassword"
+			button={account.hasPassword ? a.password.change : a.password.set}
+			error={passwordForm?.error}
+		>
+			{#if account.hasPassword}
+				<Field
+					label={a.password.current}
+					name="current"
+					type="password"
+					autocomplete="current-password"
+					required
+				/>
+			{/if}
+			<Field
+				label={a.password.new}
+				name="next"
+				type="password"
+				autocomplete="new-password"
+				minlength={10}
+				required
+			/>
+		</Form>
+	</section>
+
+	<section aria-labelledby="bk-keys">
+		<h2 id="bk-keys">{a.keys.title}</h2>
+		<p class="bk-muted">{a.keys.lead(account.keyExample)}</p>
+		{#if created?.key}
+			<p class="bk-success" role="status">
+				{a.keys.created} <code class="bk-secret">{created.key}</code>
+			</p>
+		{/if}
+		{#if account.keys.length === 0}
+			<p>{a.keys.none}</p>
+		{:else}
+			<table class="bk-table">
+				<thead>
+					<tr>
+						<th>{a.keys.columns.name}</th>
+						<th>{a.keys.columns.key}</th>
+						<th>{a.keys.columns.created}</th>
+						<th></th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each account.keys as key (key.id)}
+						<tr>
+							<td>{key.name}</td>
+							<td><code>{key.prefix}…</code></td>
+							<td>{key.created}</td>
+							<td>
+								<Form action="?/revokeKey" button={a.keys.revoke}>
+									<input type="hidden" name="id" value={key.id} />
+								</Form>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+		{#if account.emailVerified}
+			<Form action="?/createKey" button={a.keys.button} error={created?.error}>
+				<Field label={a.keys.name} name="name" maxlength={80} />
+			</Form>
+		{:else}
+			<p class="bk-muted">{a.keys.confirmFirst}</p>
+		{/if}
+	</section>
+
+	{#if account.customer}
+		<section aria-labelledby="bk-billing">
+			<h2 id="bk-billing">{a.billing.title}</h2>
+			<p class="bk-muted">{a.billing.lead}</p>
+			<Form action="?/portal" button={a.billing.button} />
+		</section>
+	{/if}
+
+	<section aria-labelledby="bk-delete">
+		<h2 id="bk-delete">{a.delete.title}</h2>
+		<p class="bk-muted">{a.delete.lead}</p>
+		<Form action="?/delete" button={a.delete.button} error={deleteForm?.error}>
+			<Field label={a.delete.confirm} name="confirm" type="email" autocomplete="off" required />
+		</Form>
+	</section>
+</div>

package/dist/ui/AccountPage.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { AccountData, AccountForm } from './data.js';
+type $$ComponentProps = {
+    data: {
+        account: AccountData;
+    };
+    form?: AccountForm | null;
+};
+declare const AccountPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type AccountPage = ReturnType<typeof AccountPage>;
+export default AccountPage;

package/dist/ui/ConfirmEmailPage.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">import Form from "./Form.svelte";
+import { useFrame } from "./frame.js";
+let { data, form } = $props();
+const { t, name } = useFrame();
+</script>
+
+<svelte:head>
+	<title>{t.confirm.title} – {name}</title>
+</svelte:head>
+
+<div class="bk-ui bk-narrow">
+	<h1>{t.confirm.title}</h1>
+	{#if data.confirm.newEmail === null}
+		<p class="bk-error" role="alert">{t.confirm.invalid}</p>
+	{:else}
+		<p>{t.confirm.becomes(data.confirm.newEmail)}</p>
+		<Form button={t.confirm.button} error={form?.error}>
+			<input type="hidden" name="token" value={data.confirm.token} />
+		</Form>
+	{/if}
+</div>

package/dist/ui/ConfirmEmailPage.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ConfirmData, ConfirmForm } from './data.js';
+type $$ComponentProps = {
+    data: {
+        confirm: ConfirmData;
+    };
+    form?: ConfirmForm | null;
+};
+declare const ConfirmEmailPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConfirmEmailPage = ReturnType<typeof ConfirmEmailPage>;
+export default ConfirmEmailPage;

package/dist/ui/ErrorPage.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import { page } from "$app/state";
+import { useFrame } from "./frame.js";
+const { t, name, link } = useFrame();
+const heading = $derived(page.status === 404 ? t.error.notFound : t.error.failed);
+</script>
+
+<svelte:head>
+	<title>{heading} – {name}</title>
+</svelte:head>
+
+<div class="bk-ui bk-narrow">
+	<h1>{heading}</h1>
+	<p><a href={link('/')}>{t.error.back}</a></p>
+</div>

package/dist/ui/ErrorPage.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ErrorPage: import("svelte").Component<Record<string, never>, {}, "">;
+type ErrorPage = ReturnType<typeof ErrorPage>;
+export default ErrorPage;

package/dist/ui/Field.svelte

@@ -0,0 +1,12 @@
+<!--
+	A labelled input. Its value is a string from the start, so that it never shows "undefined", neither
+	in the HTML of the server nor after the hydration.
+-->
+<script lang="ts">let { label, name, type = "text", value = "", ...rest } = $props();
+export {};
+</script>
+
+<label class="bk-field">
+	<span>{label}</span>
+	<input {name} {type} {value} {...rest} />
+</label>

package/dist/ui/Field.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    label: string;
+    name: string;
+    type?: 'text' | 'email' | 'password';
+    value?: string;
+} & Pick<HTMLInputAttributes, 'autocomplete' | 'required' | 'minlength' | 'maxlength'>;
+declare const Field: import("svelte").Component<$$ComponentProps, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/ui/ForgotPasswordPage.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">import Field from "./Field.svelte";
+import Form from "./Form.svelte";
+import { useFrame } from "./frame.js";
+let { form } = $props();
+const { t, name } = useFrame();
+</script>
+
+<svelte:head>
+	<title>{t.forgot.title} – {name}</title>
+</svelte:head>
+
+<div class="bk-ui bk-narrow">
+	<h1>{t.forgot.title}</h1>
+	{#if form?.sent}
+		<p class="bk-success" role="status">{t.forgot.sent}</p>
+		<Form button={t.forgot.again}>
+			<input type="hidden" name="email" value={form.email} />
+		</Form>
+	{:else}
+		<p class="bk-lead">{t.forgot.lead}</p>
+		<Form button={t.forgot.button} error={form?.error}>
+			<Field
+				label={t.forgot.email}
+				name="email"
+				type="email"
+				autocomplete="email"
+				required
+				value={form?.email ?? ''}
+			/>
+		</Form>
+	{/if}
+</div>

package/dist/ui/ForgotPasswordPage.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ForgotForm } from './data.js';
+type $$ComponentProps = {
+    form?: ForgotForm | null;
+};
+declare const ForgotPasswordPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ForgotPasswordPage = ReturnType<typeof ForgotPasswordPage>;
+export default ForgotPasswordPage;

package/dist/ui/Form.svelte

@@ -0,0 +1,30 @@
+<!--
+	A form of the baukasten or the product: posted to its action, enhanced once the page is interactive,
+	with its error and a waiting state that keeps it from being sent twice.
+-->
+<script lang="ts">import { enhance } from "$app/forms";
+import { useFrame } from "./frame.js";
+let { action, button, error, children } = $props();
+const { t } = useFrame();
+let pending = $state(false);
+</script>
+
+<form
+	class="bk-form"
+	method="POST"
+	{action}
+	aria-busy={pending}
+	use:enhance={() => {
+		pending = true;
+		return async ({ update }) => {
+			await update();
+			pending = false;
+		};
+	}}
+>
+	{#if error}
+		<p class="bk-error" role="alert">{error}</p>
+	{/if}
+	{@render children?.()}
+	<button type="submit" disabled={pending}>{pending ? t.wait : button}</button>
+</form>

package/dist/ui/Form.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** `?/name` for a named action; without it the default action of the page. */
+    action?: string;
+    button: string;
+    error?: string | null;
+    children?: Snippet;
+};
+declare const Form: import("svelte").Component<$$ComponentProps, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/ui/Frame.svelte

@@ -0,0 +1,84 @@
+<!--
+	Once the page is interactive the frame marks <html data-hydrated>, on which the test helpers wait.
+-->
+<script lang="ts">import "./base.css";
+import { onMount } from "svelte";
+import { TEXTS } from "../texts.js";
+import { provideFrame, withVia } from "./frame.js";
+let { data, children } = $props();
+const frame = $derived(data.frame);
+const t = $derived(TEXTS[frame.language]);
+const link = (path) => withVia(path, frame.via);
+provideFrame({
+	get t() {
+		return t;
+	},
+	get name() {
+		return frame.name;
+	},
+	link
+});
+onMount(() => {
+	document.documentElement.dataset.hydrated = "";
+});
+</script>
+
+<svelte:head>
+	{#if frame.brand}
+		<link rel="icon" href={frame.brand.icon.href} type={frame.brand.icon.type} />
+		<meta property="og:site_name" content={frame.name} />
+		<meta property="og:image" content={frame.brand.image} />
+		<meta property="og:image:width" content="1200" />
+		<meta property="og:image:height" content="630" />
+	{/if}
+</svelte:head>
+
+<div class="bk-page">
+	<header class="bk-head">
+		<a class="bk-name" href={link('/')}>
+			{#if frame.brand}
+				<img
+					class="bk-logo"
+					src={frame.brand.logo.src}
+					width={frame.brand.logo.width}
+					height={frame.brand.logo.height}
+					alt={frame.name}
+				/>
+			{:else}
+				{frame.name}
+			{/if}
+		</a>
+		<nav class="bk-nav" aria-label={t.frame.navigation}>
+			{#each frame.navigation as item (item.href)}
+				<a href={link(item.href)}>{item.label}</a>
+			{/each}
+		</nav>
+		<nav class="bk-nav bk-account" aria-label={t.frame.accountMenu}>
+			{#if frame.account}
+				<a href="/account">{t.frame.account}</a>
+				<form method="POST" action="/logout">
+					<button class="bk-link" type="submit">{t.frame.logOut}</button>
+				</form>
+			{:else}
+				<a href={link('/login')}>{t.frame.logIn}</a>
+				<a class="bk-button" href={link('/signup')}>{t.frame.signUp}</a>
+			{/if}
+		</nav>
+	</header>
+	{#if frame.account && !frame.account.emailVerified}
+		<p class="bk-notice" role="status">
+			{t.frame.unverified}
+			<a href="/verify-email">{t.frame.unverifiedLink}</a>
+		</p>
+	{/if}
+	<main class="bk-main">
+		{@render children()}
+	</main>
+	<footer class="bk-foot">
+		<nav class="bk-nav" aria-label={t.frame.legal}>
+			<a href={link('/imprint')}>{t.frame.imprint}</a>
+			<a href={link('/privacy')}>{t.frame.privacy}</a>
+			<a href={link('/terms')}>{t.frame.terms}</a>
+		</nav>
+	</footer>
+</div>