@axium/client 0.16.6 → 0.17.0

package/assets/styles.css

@@ -54,7 +54,7 @@ input,
 button,
 select,
 textarea {
-	border: 1px solid var(--border-accent);
+	border: var(--border-accent);
 	background-color: var(--bg-normal);
 	font-family: inherit;
 	color: hsl(0 0 var(--fg-light));
@@ -84,7 +84,7 @@ label.checkbox {
 	cursor: pointer;
 	width: 1.5em;
 	height: 1.5em;
-	border: 1px solid var(--border-accent);
+	border: var(--border-accent);
 	border-radius: 0.5em;
 	display: inline-flex;
 	justify-content: center;
@@ -101,7 +101,7 @@ select,
 }
 
 ::picker(select) {
-	border: 1px solid var(--border-accent);
+	border: var(--border-accent);
 	padding: 1em;
 	border-radius: 0.5em;
 	background-color: var(--bg-menu);
@@ -158,7 +158,7 @@ progress {
 	border-radius: 0.5em;
 	overflow: hidden;
 	background-color: var(--bg-normal);
-	border: 1px solid var(--border-accent);
+	border: var(--border-accent);
 }
 
 progress::-webkit-progress-bar {
@@ -212,7 +212,7 @@ input.error {
 }
 
 .danger {
-	border: 1px solid hsl(0 50 var(--fg-light));
+	border: var(--border-error);
 	background-color: hsl(0 20 calc(var(--bg-light) + var(--light-step)));
 	color: hsl(0 33 var(--fg-light));
 	accent-color: hsl(0 33 var(--fg-light));
@@ -321,7 +321,7 @@ h6 {
 
 	.mobile-button {
 		border-radius: 0.5em;
-		border: 1px solid var(--border-accent);
+		border: var(--border-accent);
 		background-color: var(--bg-normal);
 		padding: 0.5em 1em;
 		cursor: pointer;

package/assets/theme.css

@@ -39,5 +39,6 @@ html {
 	--bg-success: hsl(120 40 var(--bg-light-status));
 	--fg-accent: hsl(var(--hue) 15 var(--fg-light));
 	--fg-strong: hsl(var(--hue) 25 calc(var(--fg-light) - var(--light-step)));
-	--border-accent: hsl(var(--hue) 10 calc(var(--bg-light) + (var(--light-step) * 3)));
+	--border-accent: 1px solid hsl(var(--hue) 10 calc(var(--bg-light) + (var(--light-step) * 3)));
+	--border-error: 1px solid hsl(0 50 var(--fg-light));
 }

package/dist/cli/config.d.ts

@@ -21,6 +21,7 @@ export declare function session(): {
         emailVerified?: Date | null | undefined;
         image?: string | null | undefined;
     };
+    name?: string | null | undefined;
 };
 export declare function loadConfig(safe: boolean): Promise<void>;
 export declare function saveConfig(): void;

package/dist/cli/index.js

@@ -60,13 +60,16 @@ import { styleText } from 'node:util';
 import * as z from 'zod';
 import $pkg from '../../package.json' with { type: 'json' };
 import { config, resolveServerURL } from '../config.js';
-import { prefix, setPrefix, setToken } from '../requests.js';
+import { prefix, setPrefix, setToken, useUserAgent } from '../requests.js';
 import { getCurrentSession, logout } from '../user.js';
 import { loadConfig, saveConfig, updateCache } from './config.js';
+import { capitalize } from 'utilium';
 const safe = z.stringbool().default(false).parse(process.env.SAFE?.toLowerCase()) || process.argv.includes('--safe');
 const debug = z.stringbool().default(false).parse(process.env.DEBUG?.toLowerCase()) || process.argv.includes('--debug');
 if (debug)
     io._setDebugOutput(true);
+const clientUA = `Axium Client/${$pkg.version} (${capitalize(process.platform)}; ${process.arch})`;
+useUserAgent(clientUA);
 await loadConfig(safe);
 process.on('SIGHUP', () => {
     io.info('Reloading configuration due to SIGHUP.');
@@ -150,7 +153,7 @@ try {
         });
         server.on('error', e => io.exit('Failed to start local callback server: ' + e.message, 5));
         const port = await serverReady.promise;
-        const authURL = new URL('/login/client?port=' + port, url).href;
+        const authURL = new URL(`/login/client?port=${port}&client=${encodeURIComponent(clientUA)}`, url).href;
         console.log('Authenticate by visiting this URL in your browser: ' + styleText('underline', authURL));
         const { token } = await sessionReady.promise.catch(e => io.exit('Failed to obtain session: ' + e, 6));
         setToken(token);

package/dist/config.d.ts

@@ -7,6 +7,7 @@ export declare const ClientConfig: z.ZodObject<{
         session: z.ZodObject<{
             id: z.ZodUUID;
             userId: z.ZodUUID;
+            name: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             expires: z.ZodCoercedDate<unknown>;
             created: z.ZodCoercedDate<unknown>;
             elevated: z.ZodBoolean;

package/dist/index.d.ts

@@ -1 +1,5 @@
-export {};
+export * from './access.js';
+export * from './config.js';
+export * from './locales.js';
+export * from './requests.js';
+export * from './user.js';

package/dist/index.js

@@ -1 +1,5 @@
-export {};
+export * from './access.js';
+export * from './config.js';
+export * from './locales.js';
+export * from './requests.js';
+export * from './user.js';

package/dist/locales.d.ts

@@ -0,0 +1,249 @@
+import type { FlattenKeys, GetByString, Split, UnionToIntersection } from 'utilium';
+/**
+ * Add translations to a locale.
+ * Note that translations are rendered as HTML, only replacements are escaped.
+ */
+export declare function extendLocale(locale: string, data: object): void;
+declare let currentLoaded: {
+    readonly component: {
+        readonly AccessControlDialog: {
+            readonly named_title: "Permissions for <strong>{name}</strong>";
+            readonly owner: "Owner";
+            readonly title: "Permissions";
+        };
+        readonly AppMenu: {
+            readonly failed: "Couldn't load apps.";
+            readonly none: "No apps available.";
+        };
+        readonly Login: {
+            readonly email: "Email";
+            readonly register: "Register instead";
+        };
+        readonly Logout: {
+            readonly back: "Take me back";
+            readonly question: "Are you sure you want to log out?";
+        };
+        readonly Register: {
+            readonly email: "Email";
+            readonly login: "Login instead";
+            readonly name: "Display Name";
+        };
+        readonly SessionList: {
+            readonly created: "Created {date}";
+            readonly current: "Current";
+            readonly elevated: "Elevated";
+            readonly expires: "Expires {date}";
+            readonly logout_all_question: "Are you sure you want to log out all sessions?";
+            readonly logout_all_submit: "Logout All Sessions";
+            readonly logout_all_trigger: "Logout All";
+            readonly logout_single: "Are you sure you want to log out this session?";
+        };
+        readonly Upload: {
+            readonly upload: "Upload";
+        };
+        readonly UserCard: {
+            readonly you: "(You)";
+        };
+        readonly UserDiscovery: {
+            readonly no_results: "No results";
+            readonly placeholder: "Add users and roles";
+        };
+        readonly UserMenu: {
+            readonly account: "Your Account";
+            readonly admin: "Administration";
+        };
+        readonly Version: {
+            readonly error: "Latest unknown";
+            readonly latest: "Latest";
+            readonly upgrade: "<span class=\"version\">{latest}</span> available";
+        };
+        readonly ZodInput: {
+            readonly invalid_type: "Invalid input type: {type}";
+        };
+    };
+    readonly generic: {
+        readonly action_irreversible: "This action can't be undone.";
+        readonly cancel: "Cancel";
+        readonly change: "Change";
+        readonly create: "Create";
+        readonly delete: "Delete";
+        readonly done: "Done";
+        readonly email: "Email";
+        readonly loading: "Loading...";
+        readonly login: "Login";
+        readonly logout: "Logout";
+        readonly no: "No";
+        readonly none: "None";
+        readonly ok: "Okay";
+        readonly preferences: "Preferences";
+        readonly register: "Register";
+        readonly sessions: "Sessions";
+        readonly unknown: "Unknown";
+        readonly unnamed: "Unnamed";
+        readonly username: "Name";
+        readonly yes: "Yes";
+    };
+    readonly page: {
+        readonly account: {
+            readonly delete_account: "Delete Account";
+            readonly delete_account_confirm: "Are you sure you want to delete your account?";
+            readonly edit_email: "Email Address";
+            readonly edit_name: "What do you want to be called?";
+            readonly email_verified_on: "Email verified on {date}";
+            readonly greeting: "Welcome, {name}";
+            readonly passkeys: {
+                readonly backed_up: "This passkey is backed up";
+                readonly create: "Create";
+                readonly created: "Created {date}";
+                readonly delete: "Delete";
+                readonly delete_confirm: "Are you sure you want to delete this passkey?";
+                readonly edit_name: "Passkey Name";
+                readonly min_one: "You must have at least one passkey";
+                readonly multi_device: "Multiple devices";
+                readonly name_type_error: "Passkey name must be a string";
+                readonly not_backed_up: "This passkey is not backed up";
+                readonly rename: "Rename";
+                readonly single_device: "Single device";
+                readonly title: "Passkeys";
+            };
+            readonly personal_info: "Personal Information";
+            readonly preferences: "Preferences";
+            readonly profile_alt: "User profile";
+            readonly sessions: "Sessions";
+            readonly title: "Your Account";
+            readonly user_id: "User ID";
+            readonly user_id_hint: "This is your UUID. It can't be changed.";
+            readonly verification_sent: "Verification email sent";
+            readonly verify: "Verify";
+        };
+        readonly admin: {
+            readonly heading: "Administration";
+            readonly audit: {
+                readonly any: "Any";
+                readonly apply: "Apply";
+                readonly error_stack: "Error Stack";
+                readonly event_heading: "Audit Event";
+                readonly event_title: "Admin — Audit Log Event #{id}";
+                readonly extra_data: "Extra Data";
+                readonly filter: {
+                    readonly event: "Event Name:";
+                    readonly severity: "Minimum Severity:";
+                    readonly since: "Since:";
+                    readonly source: "Source:";
+                    readonly tags: "Tags:";
+                    readonly until: "Until:";
+                    readonly user: "User UUID:";
+                };
+                readonly filters: "Filters";
+                readonly heading: "Audit Log";
+                readonly invalid_filter: "Invalid Filter:";
+                readonly name: "Name";
+                readonly no_events: "No audit log events found";
+                readonly reset: "Reset";
+                readonly severity: "Severity";
+                readonly source: "Source";
+                readonly tags: "Tags";
+                readonly timestamp: "Timestamp";
+                readonly title: "Admin — Audit Log";
+                readonly user: "User";
+                readonly uuid: "UUID";
+            };
+            readonly config: {
+                readonly active: "Active Configuration";
+                readonly loaded_files: "Loaded Files";
+                readonly title: "Admin — Configuration";
+            };
+            readonly dashboard: {
+                readonly audit_link: "Audit Log";
+                readonly config_files: "{count} files loaded.";
+                readonly config_link: "Configuration";
+                readonly plugins_link: "Plugins";
+                readonly plugins_loaded: "{count} plugins loaded.";
+                readonly stats: "{users} users, {sessions} sessions, {passkeys} passkeys.";
+                readonly title: "Admin — Dashboard";
+                readonly users_link: "Users";
+            };
+            readonly plugins: {
+                readonly author: "Author:";
+                readonly configuration: "Configuration";
+                readonly heading: "Plugins";
+                readonly loaded_from: "Loaded from";
+                readonly none: "No plugins loaded.";
+                readonly provided_apps: "Provided apps:";
+                readonly title: "Admin — Plugins";
+            };
+            readonly users: {
+                readonly admin_tag: "Admin";
+                readonly administrator: "Administrator";
+                readonly attributes: "Attributes";
+                readonly audit: "Audit";
+                readonly back: "Back to all users";
+                readonly create: "Create User";
+                readonly created_title: "New User Created";
+                readonly created_url: "They can log in using this URL:";
+                readonly default_image: "Default";
+                readonly delete_confirm: "Are you sure you want to delete this user?";
+                readonly delete_user: "Delete User";
+                readonly display_name: "Display Name";
+                readonly email_not_verified: "not verified";
+                readonly email_verified: "verified {date}";
+                readonly heading: "Users";
+                readonly manage: "Manage";
+                readonly manage_heading: "User Management";
+                readonly manage_title: "Admin — User Management";
+                readonly none: "No users!";
+                readonly profile_image: "Profile Image";
+                readonly registered: "Registered";
+                readonly roles: "Roles";
+                readonly suspend: "Suspend";
+                readonly suspended: "Suspended";
+                readonly tags: "Tags";
+                readonly title: "Admin — Users";
+                readonly unsuspend: "Unsuspend";
+                readonly uuid: "UUID";
+            };
+        };
+        readonly login: {
+            readonly client: {
+                readonly authorize: "Authorize";
+                readonly confirm: "Are you sure you want to log in to this local client?";
+                readonly success: "Login successful! You can close this tab.";
+                readonly title: "Local Client Login";
+            };
+            readonly failed: "Login Failed";
+        };
+    };
+    readonly preference: {
+        readonly debug: "Debug mode";
+    };
+};
+/**
+ * Current locale
+ */
+export declare let currentLocale: string;
+type _locale = typeof currentLoaded;
+export interface Locale extends _locale {
+}
+export interface ReplacementOptions {
+    $default?: string;
+    /**  */
+    $html?: boolean;
+}
+type _ArgsValue<V extends string[]> = UnionToIntersection<{
+    [I in keyof V]: Split<V[I], '}'> extends [infer Name extends string, string] ? {
+        [N in Name]: string;
+    } : {};
+}[keyof V & number]>;
+type Replacements<K extends string> = ReplacementOptions & (GetByString<Locale, K> extends string ? _ArgsValue<Split<GetByString<Locale, K> & string, '{'>> : Record<string, any>);
+type ReplacementsArgs<K extends string> = {} extends Replacements<K> ? [replacements?: Replacements<K>] : [replacements: Replacements<K>];
+export declare function useLocale(newLocale: string): void;
+export declare function escape(text: string): string;
+/**
+ * Get localized text for a given translation key
+ * @example
+ * ```ts
+ * text(`example.translation.key.${dynamicPart}`, { a: 1, b: 2 });
+ * ```
+ */
+export declare function text<const K extends string = FlattenKeys<Locale>>(key: K, ...args: ReplacementsArgs<K>): string;
+export {};

package/dist/locales.js

@@ -0,0 +1,70 @@
+import { debug, error, info, warn } from '@axium/core/io';
+import { deepAssign, getByString } from 'utilium';
+import en from '../locales/en.json' with { type: 'json' };
+const loadedLocales = Object.assign(Object.create(null), { en });
+/**
+ * Add translations to a locale.
+ * Note that translations are rendered as HTML, only replacements are escaped.
+ */
+export function extendLocale(locale, data) {
+    if (!loadedLocales[locale]) {
+        info('Adding new locale (no built-in): ' + locale);
+        loadedLocales[locale] = {};
+    }
+    else
+        debug('Extending locale: ' + locale);
+    deepAssign(loadedLocales[locale], data);
+}
+let currentLoaded = en;
+/**
+ * Current locale
+ */
+export let currentLocale = 'en';
+export function useLocale(newLocale) {
+    if (!loadedLocales[newLocale])
+        throw new Error('Locale is not available: ' + newLocale);
+    currentLocale = newLocale;
+    currentLoaded = loadedLocales[newLocale];
+}
+const localeReplacement = /\{(\w+)\}/g;
+const escapePattern = /[&<>"']/g;
+const escapes = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+export function escape(text) {
+    return text.replaceAll(escapePattern, ch => escapes[ch]);
+}
+/**
+ * Get localized text for a given translation key
+ * @example
+ * ```ts
+ * text(`example.translation.key.${dynamicPart}`, { a: 1, b: 2 });
+ * ```
+ */
+export function text(key, ...args) {
+    const values = Object.assign(Object.create(null), args[0]);
+    let text = getByString(currentLoaded, key) || values.$default;
+    if (!text && currentLocale != 'en') {
+        warn(`Missing translation in ${currentLocale}: ` + key);
+        text = getByString(en, key);
+    }
+    if (!text) {
+        error('Missing translation for key: ' + key);
+        text = `?${key}?`;
+    }
+    if (typeof text == 'object') {
+        error('Invalid translation key: ' + key);
+        text = values.$default || `!${key}!`;
+    }
+    return text.replaceAll(localeReplacement, (_, name) => {
+        if (!Object.hasOwn(values, name)) {
+            console.error(new Error(`Missing replacement value for ${key}: ${name}`));
+            values[name] = `<missing: ${name}>`;
+        }
+        return values.$html ? escape(String(values[name])) : String(values[name]);
+    });
+}

package/dist/requests.d.ts

@@ -5,4 +5,8 @@ export declare let token: string | null;
 export declare function setToken(value: string | null): void;
 export declare let prefix: string;
 export declare function setPrefix(value: string): void;
+/**
+ * Only for use on non-browser clients, e.g. Node.js
+ */
+export declare function useUserAgent(ua: string | null): void;
 export declare function fetchAPI<const E extends Endpoint, const M extends keyof $API[E] & RequestMethod>(method: M, endpoint: E, data?: RequestBody<M, E>, ...params: APIParameters<E>): Promise<M extends keyof APIValues[E] ? (APIValues[E][M] extends readonly [unknown, infer R] ? R : APIValues[E][M]) : unknown>;

package/dist/requests.js

@@ -8,6 +8,13 @@ export let prefix = '/api/';
 export function setPrefix(value) {
     prefix = value;
 }
+let userAgent = null;
+/**
+ * Only for use on non-browser clients, e.g. Node.js
+ */
+export function useUserAgent(ua) {
+    userAgent = ua;
+}
 export async function fetchAPI(method, endpoint, data, ...params) {
     const options = {
         method,
@@ -31,6 +38,8 @@ export async function fetchAPI(method, endpoint, data, ...params) {
         : '?' + new URLSearchParams(JSON.parse(JSON.stringify(data))).toString();
     if (token)
         options.headers.Authorization = 'Bearer ' + token;
+    if (userAgent)
+        options.headers['User-Agent'] = userAgent;
     const parts = [];
     for (const part of endpoint.split('/')) {
         if (!part.startsWith(':')) {

package/dist/user.js

@@ -112,9 +112,7 @@ export async function createPasskey(userId) {
     _checkId(userId);
     const options = await fetchAPI('OPTIONS', 'users/:id/passkeys', {}, userId);
     const response = await startRegistration({ optionsJSON: options });
-    const passkey = await fetchAPI('PUT', 'users/:id/passkeys', response, userId);
-    passkey.createdAt = new Date(passkey.createdAt);
-    return passkey;
+    return await fetchAPI('PUT', 'users/:id/passkeys', response, userId);
 }
 export async function updatePasskey(passkeyId, data) {
     return await fetchAPI('PATCH', 'passkeys/:id', data, passkeyId);

package/lib/AccessControlDialog.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { addToACL, getACL, updateACL } from '@axium/client/access';
-	import { userInfo } from '@axium/client/user';
+	import { addToACL, getACL, text, updateACL, userInfo } from '@axium/client';
 	import type { AccessControllable, AccessTarget, User } from '@axium/core';
-	import { getTarget, pickPermissions } from '@axium/core/access';
+	import { getTarget, pickPermissions } from '@axium/core';
 	import { errorText } from '@axium/core/io';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
 	import Icon from './Icon.svelte';
@@ -30,9 +29,9 @@
 
 <dialog bind:this={dialog} {...rest}>
 	{#if item.name}
-		<h3>Permissions for <strong>{item.name}</strong></h3>
+		<h3>{@html text('component.AccessControlDialog.named_title', { $html: true, name: item.name })}</h3>
 	{:else}
-		<h3>Permissions</h3>
+		<h3>{text('component.AccessControlDialog.title')}</h3>
 	{/if}
 
 	{#if error}
@@ -45,7 +44,7 @@
 		{:else if item}
 			{#await userInfo(item.userId) then user}<UserCard {user} />{/await}
 		{/if}
-		<span>Owner</span>
+		<span>{text('component.AccessControlDialog.owner')}</span>
 	</div>
 
 	{#each acl as control}
@@ -66,7 +65,7 @@
 					<span>{control.role}</span>
 				</span>
 			{:else}
-				<i>Unknown</i>
+				<i>{text('generic.unknown')}</i>
 			{/if}
 			<div class="permissions">
 				{#each Object.entries(pickPermissions(control) as Record<string, boolean>) as [key, value]}
@@ -90,7 +89,7 @@
 	<UserDiscovery {onSelect} excludeTargets={acl.map(getTarget)} />
 
 	<div>
-		<button class="done" onclick={() => dialog!.close()}>Done</button>
+		<button class="done" onclick={() => dialog!.close()}>{text('generic.done')}</button>
 	</div>
 </dialog>
 
@@ -119,7 +118,7 @@
 		padding: 1em 2em;
 
 		&:not(.public) {
-			border-bottom: 1px solid var(--border-accent);
+			border-bottom: var(--border-accent);
 		}
 	}
 </style>

package/lib/AppMenu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client/locales';
 	import { fetchAPI } from '@axium/client/requests';
 	import Icon from './Icon.svelte';
 	import Popover from './Popover.svelte';
@@ -12,7 +13,7 @@
 	{/snippet}
 
 	{#await fetchAPI('GET', 'apps')}
-		<i>Loading...</i>
+		<i>{text('generic.loading')}</i>
 	{:then apps}
 		{#each apps as app}
 			<a class="menu-item" href="/{app.id}">
@@ -23,12 +24,12 @@
 				{:else}
 					<Icon i="image-circle-xmark" --size="1.5em" />
 				{/if}
-				<span>{app.name}</span>
+				<span>{text('app_name.' + app.id, { $default: app.name })}</span>
 			</a>
 		{:else}
-			<i>No apps available.</i>
+			<i>{text('component.AppMenu.none')}</i>
 		{/each}
 	{:catch}
-		<i>Couldn't load apps.</i>
+		<i>{text('component.AppMenu.failed')}</i>
 	{/await}
 </Popover>

package/lib/ColorPicker.svelte

@@ -87,7 +87,7 @@
 		gap: 0.25em;
 
 		border-radius: 0.5em;
-		border: 1px solid var(--border-accent);
+		border: var(--border-accent);
 		background-color: var(--bg-normal);
 		padding: 0.25em 0.75em;
 	}

package/lib/FormDialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
 
 	let {
@@ -72,7 +73,7 @@
 			{@render submitButton()}
 		{:else}
 			<div class="actions">
-				<button type="button" onclick={() => dialog!.close()}>Cancel</button>
+				<button type="button" onclick={() => dialog!.close()}>{text('generic.cancel')}</button>
 				{@render submitButton()}
 			</div>
 		{/if}

package/lib/Login.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { loginByEmail } from '@axium/client/user';
+	import { loginByEmail, text } from '@axium/client';
 	import FormDialog from './FormDialog.svelte';
 	import authRedirect from './auth_redirect.js';
 
@@ -16,15 +16,15 @@
 	}
 </script>
 
-<FormDialog bind:dialog submitText="Login" {submit} pageMode={fullPage}>
+<FormDialog bind:dialog submitText={text('generic.login')} {submit} pageMode={fullPage}>
 	<div>
-		<label for="email">Email</label>
+		<label for="email">{text('component.Login.email')}</label>
 		<input name="email" type="email" required />
 	</div>
 	{#snippet footer()}
 		{#if fullPage}
 			<div class="footer">
-				<a href="/register">Register instead</a>
+				<a href="/register">{text('component.Login.register')}</a>
 			</div>
 		{/if}
 	{/snippet}

package/lib/Logout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { logoutCurrentSession } from '@axium/client/user';
+	import { logoutCurrentSession, text } from '@axium/client';
 	import FormDialog from './FormDialog.svelte';
 
 	let { fullPage = false }: { fullPage?: boolean } = $props();
@@ -8,10 +8,10 @@
 <FormDialog
 	pageMode={fullPage}
 	id="logout"
-	submitText="Log Out"
+	submitText={text('generic.logout')}
 	submit={() => logoutCurrentSession().then(() => (window.location.href = '/'))}
 >
-	<p>Are you sure you want to log out?</p>
+	<p>{text('component.Logout.question')}</p>
 	{#if fullPage}
 		<button
 			command="close"
@@ -19,7 +19,7 @@
 			onclick={e => {
 				e.preventDefault();
 				history.back();
-			}}>Take me back</button
+			}}>{text('component.Logout.back')}</button
 		>
 	{/if}
 </FormDialog>