feat: add qrcode representation of one time link (#424) (#436)

Co-authored-by: Kyle Mendell <kmendell@ofkm.us> Co-authored-by: Kyle Mendell <kmendell@outlook.com> Co-authored-by: Elias Schneider <login@eliasschneider.com>
2026-02-04 15:39:45 +00:00 · 2025-04-14 15:16:46 +02:00
parent 57cb8f8795
commit abf17f6211
9 changed files with 5643 additions and 5285 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,60 +1,62 @@
 {
-  "name": "pocket-id-frontend",
-  "version": "0.46.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev --port 3000",
-    "build": "vite build",
-    "preview": "vite preview --port 3000",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  },
-  "dependencies": {
-    "@simplewebauthn/browser": "^13.1.0",
-    "@tailwindcss/vite": "^4.0.0",
-    "axios": "^1.8.2",
-    "clsx": "^2.1.1",
-    "crypto": "^1.0.1",
-    "formsnap": "^1.0.1",
-    "jose": "^5.9.6",
-    "lucide-svelte": "^0.487.0",
-    "mode-watcher": "^0.5.1",
-    "svelte-sonner": "^0.3.28",
-    "sveltekit-superforms": "^2.23.1",
-    "tailwind-merge": "^2.6.0",
-    "tailwind-variants": "^0.3.1",
-    "zod": "^3.24.1"
-  },
-  "devDependencies": {
-    "@inlang/paraglide-js": "^2.0.0",
-    "@inlang/plugin-m-function-matcher": "^2.0.7",
-    "@inlang/plugin-message-format": "^4.0.0",
-    "@internationalized/date": "^3.7.0",
-    "@playwright/test": "^1.50.0",
-    "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/adapter-node": "^5.2.12",
-    "@sveltejs/kit": "^2.16.1",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@types/eslint": "^9.6.1",
-    "@types/node": "^22.10.10",
-    "bits-ui": "^0.22.0",
-    "cmdk-sv": "^0.0.19",
-    "eslint": "^9.19.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-svelte": "^2.46.1",
-    "globals": "^15.14.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "svelte": "^5.19.3",
-    "svelte-check": "^4.1.4",
-    "tailwindcss": "^4.0.0",
-    "tslib": "^2.8.1",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.21.0",
-    "vite": "^6.2.6"
-  }
+	"name": "pocket-id-frontend",
+	"version": "0.46.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev --port 3000",
+		"build": "vite build",
+		"preview": "vite preview --port 3000",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"dependencies": {
+		"@simplewebauthn/browser": "^13.1.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"axios": "^1.8.2",
+		"clsx": "^2.1.1",
+		"crypto": "^1.0.1",
+		"formsnap": "^1.0.1",
+		"jose": "^5.9.6",
+		"lucide-svelte": "^0.487.0",
+		"mode-watcher": "^0.5.1",
+		"qrcode": "^1.5.4",
+		"svelte-sonner": "^0.3.28",
+		"sveltekit-superforms": "^2.23.1",
+		"tailwind-merge": "^2.6.0",
+		"tailwind-variants": "^0.3.1",
+		"zod": "^3.24.1"
+	},
+	"devDependencies": {
+		"@inlang/paraglide-js": "^2.0.0",
+		"@inlang/plugin-m-function-matcher": "^2.0.7",
+		"@inlang/plugin-message-format": "^4.0.0",
+		"@internationalized/date": "^3.7.0",
+		"@playwright/test": "^1.50.0",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/adapter-node": "^5.2.12",
+		"@sveltejs/kit": "^2.16.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@types/eslint": "^9.6.1",
+		"@types/node": "^22.10.10",
+		"@types/qrcode": "^1.5.5",
+		"bits-ui": "^0.22.0",
+		"cmdk-sv": "^0.0.19",
+		"eslint": "^9.19.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^2.46.1",
+		"globals": "^15.14.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"svelte": "^5.19.3",
+		"svelte-check": "^4.1.4",
+		"tailwindcss": "^4.0.0",
+		"tslib": "^2.8.1",
+		"typescript": "^5.7.3",
+		"typescript-eslint": "^8.21.0",
+		"vite": "^6.2.6"
+	}
 }
--- a/frontend/src/lib/components/one-time-link-modal.svelte
+++ b/frontend/src/lib/components/one-time-link-modal.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
+	import Qrcode from '$lib/components/qrcode/qrcode.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
-	import Input from '$lib/components/ui/input/input.svelte';
 	import Label from '$lib/components/ui/label/label.svelte';
 	import * as Select from '$lib/components/ui/select/index.js';
+	import { Separator } from '$lib/components/ui/separator';
 	import { m } from '$lib/paraglide/messages';
 	import UserService from '$lib/services/user-service';
 	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { mode } from 'mode-watcher';

 	let {
 		userId = $bindable()
@@ -18,6 +21,7 @@
 	const userService = new UserService();

 	let oneTimeLink: string | null = $state(null);
+	let code: string | null = $state(null);
 	let selectedExpiration: keyof typeof availableExpirations = $state(m.one_hour());

 	let availableExpirations = {
@@ -31,8 +35,8 @@
 	async function createOneTimeAccessToken() {
 		try {
 			const expiration = new Date(Date.now() + availableExpirations[selectedExpiration] * 1000);
-			const token = await userService.createOneTimeAccessToken(expiration, userId!);
-			oneTimeLink = `${page.url.origin}/lc/${token}`;
+			code = await userService.createOneTimeAccessToken(expiration, userId!);
+			oneTimeLink = `${page.url.origin}/lc/${code}`;
 		} catch (e) {
 			axiosErrorToast(e);
 		}
@@ -41,6 +45,7 @@
 	function onOpenChange(open: boolean) {
 		if (!open) {
 			oneTimeLink = null;
+			code = null;
 			userId = null;
 		}
 	}
@@ -54,6 +59,7 @@
 				>{m.create_a_login_code_to_sign_in_without_a_passkey_once()}</Dialog.Description
 			>
 		</Dialog.Header>
+
 		{#if oneTimeLink === null}
 			<div>
 				<Label for="expiration">{m.expiration()}</Label>
@@ -65,7 +71,7 @@
 					onSelectedChange={(v) =>
 						(selectedExpiration = v!.value as keyof typeof availableExpirations)}
 				>
-					<Select.Trigger class="h-9 ">
+					<Select.Trigger class="h-9 w-full">
 						<Select.Value>{selectedExpiration}</Select.Value>
 					</Select.Trigger>
 					<Select.Content>
@@ -75,12 +81,36 @@
 					</Select.Content>
 				</Select.Root>
 			</div>
-			<Button onclick={() => createOneTimeAccessToken()} disabled={!selectedExpiration}>
+			<Button
+				onclick={() => createOneTimeAccessToken()}
+				disabled={!selectedExpiration}
+				class="mt-2 w-full"
+			>
 				{m.generate_code()}
 			</Button>
 		{:else}
-			<Label for="login-code" class="sr-only">{m.login_code()}</Label>
-			<Input id="login-code" value={oneTimeLink} readonly />
+			<div class="flex flex-col items-center gap-2">
+				<CopyToClipboard value={code!}>
+					<p class="text-3xl font-semibold">{code}</p>
+				</CopyToClipboard>
+
+				<div class="text-muted-foreground my-2 flex items-center justify-center gap-3">
+					<Separator />
+					<p class="text-nowrap text-xs">{m.or_visit()}</p>
+					<Separator />
+				</div>
+
+				<Qrcode
+					class="mb-2"
+					value={oneTimeLink}
+					size={180}
+					color={$mode === 'dark' ? '#FFFFFF' : '#000000'}
+					backgroundColor={$mode === 'dark' ? '#000000' : '#FFFFFF'}
+				/>
+				<CopyToClipboard value={oneTimeLink!}>
+					<p data-testId="login-code-link">{oneTimeLink!}</p>
+				</CopyToClipboard>
+			</div>
 		{/if}
 	</Dialog.Content>
 </Dialog.Root>
--- a/frontend/src/lib/components/qrcode/qrcode.svelte
+++ b/frontend/src/lib/components/qrcode/qrcode.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/style';
+	import QRCode from 'qrcode';
+	import { onMount } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let canvasEl: HTMLCanvasElement | null;
+	let {
+		value,
+		size = 200,
+		color = '#000000',
+		backgroundColor = '#FFFFFF',
+		...restProps
+	}: HTMLAttributes<HTMLCanvasElement> & {
+		value: string | null;
+		size?: number;
+		color?: string;
+		backgroundColor?: string;
+	} = $props();
+
+	onMount(() => {
+		if (value && canvasEl) {
+			// Convert "transparent" to a valid value for the QR code library
+			const lightColor = backgroundColor === 'transparent' ? '#00000000' : backgroundColor;
+
+			const options = {
+				width: size,
+				margin: 0,
+				color: {
+					dark: color,
+					light: lightColor
+				}
+			};
+
+			QRCode.toCanvas(canvasEl, value, options).catch((error: Error) => {
+				console.error('Error generating QR Code:', error);
+			});
+		}
+	});
+</script>
+
+<canvas {...restProps} bind:this={canvasEl} class={cn('rounded-lg', restProps.class)}></canvas>
--- a/frontend/src/routes/settings/account/login-code-modal.svelte
+++ b/frontend/src/routes/settings/account/login-code-modal.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
+	import Qrcode from '$lib/components/qrcode/qrcode.svelte';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { Separator } from '$lib/components/ui/separator';
 	import { m } from '$lib/paraglide/messages';
 	import UserService from '$lib/services/user-service';
 	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { mode } from 'mode-watcher';

 	let {
 		show = $bindable()
@@ -16,13 +18,17 @@
 	const userService = new UserService();

 	let code: string | null = $state(null);
+	let loginCodeLink: string | null = $state(null);

 	$effect(() => {
 		if (show) {
 			const expiration = new Date(Date.now() + 15 * 60 * 1000);
 			userService
 				.createOneTimeAccessToken(expiration, 'me')
-				.then((c) => (code = c))
+				.then((c) => {
+					code = c;
+					loginCodeLink = page.url.origin + '/lc/' + code;
+				})
 				.catch((e) => axiosErrorToast(e));
 		}
 	});
@@ -48,16 +54,22 @@
 			<CopyToClipboard value={code!}>
 				<p class="text-3xl font-semibold">{code}</p>
 			</CopyToClipboard>
-			<div class="text-muted-foreground flex items-center justify-center gap-3">
+			<div class="text-muted-foreground my-2 flex items-center justify-center gap-3">
 				<Separator />
 				<p class="text-nowrap text-xs">{m.or_visit()}</p>
 				<Separator />
 			</div>
-			<div>
-				<CopyToClipboard value={page.url.origin + '/lc/' + code!}>
-					<p data-testId="login-code-link">{page.url.origin + '/lc/' + code!}</p>
-				</CopyToClipboard>
-			</div>
+
+			<Qrcode
+				class="mb-2"
+				value={loginCodeLink}
+				size={180}
+				color={$mode === 'dark' ? '#FFFFFF' : '#000000'}
+				backgroundColor={$mode === 'dark' ? '#000000' : '#FFFFFF'}
+			/>
+			<CopyToClipboard value={loginCodeLink!}>
+				<p data-testId="login-code-link">{loginCodeLink!}</p>
+			</CopyToClipboard>
 		</div>
 	</Dialog.Content>
 </Dialog.Root>
--- a/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte
+++ b/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte
@@ -3,14 +3,13 @@
 	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
 	import { Button } from '$lib/components/ui/button';
 	import * as Table from '$lib/components/ui/table';
+	import { m } from '$lib/paraglide/messages';
 	import OIDCService from '$lib/services/oidc-service';
 	import type { OidcClient } from '$lib/types/oidc.type';
 	import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucidePencil, LucideTrash } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
-	import OneTimeLinkModal from './client-secret.svelte';
-	import { m } from '$lib/paraglide/messages';

 	let {
 		clients = $bindable(),
@@ -20,8 +19,6 @@
 		requestOptions: SearchPaginationSortRequest;
 	} = $props();

-	let oneTimeLink = $state<string | null>(null);
-
 	const oidcService = new OIDCService();

 	async function deleteClient(client: OidcClient) {
@@ -86,5 +83,3 @@
 		</Table.Cell>
 	{/snippet}
 </AdvancedTable>
-
-<OneTimeLinkModal {oneTimeLink} />
--- a/frontend/tests/account-settings.spec.ts
+++ b/frontend/tests/account-settings.spec.ts
@@ -1,8 +1,8 @@
 import test, { expect } from '@playwright/test';
 import { users } from './data';
+import authUtil from './utils/auth.util';
 import { cleanupBackend } from './utils/cleanup.util';
 import passkeyUtil from './utils/passkey.util';
-import authUtil from './utils/auth.util';

 test.beforeEach(cleanupBackend);

--- a/frontend/tests/api-key.spec.ts
+++ b/frontend/tests/api-key.spec.ts
@@ -5,7 +5,7 @@ import { cleanupBackend } from './utils/cleanup.util';

 test.describe('API Key Management', () => {
 	test.beforeEach(async ({ page }) => {
-		await cleanupBackend()
+		await cleanupBackend();
 		await page.goto('/settings/admin/api-keys');
 	});

--- a/frontend/tests/user-settings.spec.ts
+++ b/frontend/tests/user-settings.spec.ts
@@ -50,11 +50,13 @@ test('Create user fails with already taken username', async ({ page }) => {
 	await expect(page.getByRole('status')).toHaveText('Username is already in use');
 });

-test('Create one time access token', async ({ page }) => {
+test('Create one time access token', async ({ page, context }) => {
 	await page.goto('/settings/admin/users');

 	await page
-		.getByRole('row', { name: `${users.craig.firstname} ${users.craig.lastname}` })
+		.getByRole('row', {
+			name: `${users.craig.firstname} ${users.craig.lastname}`
+		})
 		.getByRole('button')
 		.click();

@@ -64,16 +66,20 @@ test('Create one time access token', async ({ page }) => {
 	await page.getByRole('option', { name: '12 hours' }).click();
 	await page.getByRole('button', { name: 'Generate Code' }).click();

-	await expect(page.getByRole('textbox', { name: 'Login Code' })).toHaveValue(
-		/http:\/\/localhost\/lc\/.*/
-	);
+	const link = await page.getByTestId('login-code-link').textContent();
+	await context.clearCookies();
+
+	await page.goto(link!);
+	await page.waitForURL('/settings/account');
 });

 test('Delete user', async ({ page }) => {
 	await page.goto('/settings/admin/users');

 	await page
-		.getByRole('row', { name: `${users.craig.firstname} ${users.craig.lastname}` })
+		.getByRole('row', {
+			name: `${users.craig.firstname} ${users.craig.lastname}`
+		})
 		.getByRole('button')
 		.click();
 	await page.getByRole('menuitem', { name: 'Delete' }).click();
@@ -81,7 +87,9 @@ test('Delete user', async ({ page }) => {

 	await expect(page.getByRole('status')).toHaveText('User deleted successfully');
 	await expect(
-		page.getByRole('row', { name: `${users.craig.firstname} ${users.craig.lastname}` })
+		page.getByRole('row', {
+			name: `${users.craig.firstname} ${users.craig.lastname}`
+		})
 	).not.toBeVisible();
 });