From 2ccabf835c2c923d6986d9cafb4e878f5110b91a Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Thu, 31 Oct 2024 17:22:58 +0100
Subject: [PATCH] feat: add ability to define expiration of one time link

---
 frontend/src/lib/services/user-service.ts     |  4 +-
 .../admin/users/one-time-link-modal.svelte    | 68 +++++++++++++++++--
 .../settings/admin/users/user-list.svelte     | 31 +++------
 frontend/tests/user-settings.spec.ts          |  5 ++
 4 files changed, 79 insertions(+), 29 deletions(-)

diff --git a/frontend/src/lib/services/user-service.ts b/frontend/src/lib/services/user-service.ts
index e5c6ea7..e93de92 100644
--- a/frontend/src/lib/services/user-service.ts
+++ b/frontend/src/lib/services/user-service.ts
@@ -42,10 +42,10 @@ export default class UserService extends APIService {
 		await this.api.delete(`/users/${id}`);
 	}
 
-	async createOneTimeAccessToken(userId: string) {
+	async createOneTimeAccessToken(userId: string, expiresAt: Date) {
 		const res = await this.api.post(`/users/${userId}/one-time-access-token`, {
 			userId,
-			expiresAt: new Date(Date.now() + 1000 * 60 * 5).toISOString()
+			expiresAt
 		});
 		return res.data.token;
 	}
diff --git a/frontend/src/routes/settings/admin/users/one-time-link-modal.svelte b/frontend/src/routes/settings/admin/users/one-time-link-modal.svelte
index 75b2380..184fc83 100644
--- a/frontend/src/routes/settings/admin/users/one-time-link-modal.svelte
+++ b/frontend/src/routes/settings/admin/users/one-time-link-modal.svelte
@@ -1,22 +1,51 @@
 <script lang="ts">
+	import { page } from '$app/stores';
+	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 UserService from '$lib/services/user-service';
+	import { axiosErrorToast } from '$lib/utils/error-util';
 
 	let {
-		oneTimeLink = $bindable()
+		userId = $bindable()
 	}: {
-		oneTimeLink: string | null;
+		userId: string | null;
 	} = $props();
 
+	const userService = new UserService();
+
+	let oneTimeLink: string | null = $state(null);
+	let selectedExpiration: keyof typeof availableExpirations = $state('1 hour');
+
+	let availableExpirations = {
+		'1 hour': 60 * 60,
+		'12 hours': 60 * 60 * 12,
+		'1 day': 60 * 60 * 24,
+		'1 week': 60 * 60 * 24 * 7,
+		'1 month': 60 * 60 * 24 * 30
+	};
+
+	async function createOneTimeAccessToken() {
+		try {
+			const expiration = new Date(Date.now() + availableExpirations[selectedExpiration] * 1000);
+			const token = await userService.createOneTimeAccessToken(userId!, expiration);
+			oneTimeLink = `${$page.url.origin}/login/${token}`;
+		} catch (e) {
+			axiosErrorToast(e);
+		}
+	}
+
 	function onOpenChange(open: boolean) {
 		if (!open) {
 			oneTimeLink = null;
+			userId = null;
 		}
 	}
 </script>
 
-<Dialog.Root open={!!oneTimeLink} {onOpenChange}>
+<Dialog.Root open={!!userId} {onOpenChange}>
 	<Dialog.Content class="max-w-md">
 		<Dialog.Header>
 			<Dialog.Title>One Time Link</Dialog.Title>
@@ -25,9 +54,36 @@
 				have lost it.</Dialog.Description
 			>
 		</Dialog.Header>
-		<div>
-			<Label for="one-time-link">One Time Link</Label>
+		{#if oneTimeLink === null}
+			<div>
+				<Label for="expiration">Expiration</Label>
+				<Select.Root
+					selected={{
+						label: Object.keys(availableExpirations)[0],
+						value: Object.keys(availableExpirations)[0]
+					}}
+					onSelectedChange={(v) =>
+						(selectedExpiration = v!.value as keyof typeof availableExpirations)}
+				>
+					<Select.Trigger class="h-9 ">
+						<Select.Value>{selectedExpiration}</Select.Value>
+					</Select.Trigger>
+					<Select.Content>
+						{#each Object.keys(availableExpirations) as key}
+							<Select.Item value={key}>{key}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
+			<Button
+				onclick={() => createOneTimeAccessToken()}
+				disabled={!selectedExpiration}
+			>
+				Generate Link
+			</Button>
+		{:else}
+			<Label for="one-time-link" class="sr-only">One Time Link</Label>
 			<Input id="one-time-link" value={oneTimeLink} readonly />
-		</div>
+		{/if}
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/frontend/src/routes/settings/admin/users/user-list.svelte b/frontend/src/routes/settings/admin/users/user-list.svelte
index b43b8cb..5faa2c2 100644
--- a/frontend/src/routes/settings/admin/users/user-list.svelte
+++ b/frontend/src/routes/settings/admin/users/user-list.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import AdvancedTable from '$lib/components/advanced-table.svelte';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
 	import { Badge } from '$lib/components/ui/badge/index';
-	import { Button } from '$lib/components/ui/button';
+	import { buttonVariants } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Table from '$lib/components/ui/table';
 	import UserService from '$lib/services/user-service';
@@ -21,7 +21,7 @@
 		users = initialUsers;
 	});
 
-	let oneTimeLink = $state<string | null>(null);
+	let userIdToCreateOneTimeLink: string | null =  $state(null);;
 
 	const userService = new UserService();
 
@@ -48,15 +48,6 @@
 			}
 		});
 	}
-
-	async function createOneTimeAccessToken(userId: string) {
-		try {
-			const token = await userService.createOneTimeAccessToken(userId);
-			oneTimeLink = `${$page.url.origin}/login/${token}`;
-		} catch (e) {
-			axiosErrorToast(e);
-		}
-	}
 </script>
 
 <AdvancedTable
@@ -82,22 +73,20 @@
 		</Table.Cell>
 		<Table.Cell>
 			<DropdownMenu.Root>
-				<DropdownMenu.Trigger asChild let:builder>
-					<Button aria-haspopup="true" size="icon" variant="ghost" builders={[builder]}>
-						<Ellipsis class="h-4 w-4" />
-						<span class="sr-only">Toggle menu</span>
-					</Button>
+				<DropdownMenu.Trigger class={buttonVariants({ variant: 'ghost', size: 'icon' })}>
+					<Ellipsis class="h-4 w-4" />
+					<span class="sr-only">Toggle menu</span>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content align="end">
-					<DropdownMenu.Item on:click={() => createOneTimeAccessToken(item.id)}
+					<DropdownMenu.Item onclick={() => (userIdToCreateOneTimeLink = item.id)}
 						><LucideLink class="mr-2 h-4 w-4" />One-time link</DropdownMenu.Item
 					>
-					<DropdownMenu.Item href="/settings/admin/users/{item.id}"
+					<DropdownMenu.Item onclick={() => goto(`/settings/admin/users/${item.id}`)}
 						><LucidePencil class="mr-2 h-4 w-4" /> Edit</DropdownMenu.Item
 					>
 					<DropdownMenu.Item
 						class="text-red-500 focus:!text-red-700"
-						on:click={() => deleteUser(item)}
+						onclick={() => deleteUser(item)}
 						><LucideTrash class="mr-2 h-4 w-4" />Delete</DropdownMenu.Item
 					>
 				</DropdownMenu.Content>
@@ -106,4 +95,4 @@
 	{/snippet}
 </AdvancedTable>
 
-<OneTimeLinkModal {oneTimeLink} />
+<OneTimeLinkModal userId={userIdToCreateOneTimeLink} />
diff --git a/frontend/tests/user-settings.spec.ts b/frontend/tests/user-settings.spec.ts
index 3603ea8..bd60938 100644
--- a/frontend/tests/user-settings.spec.ts
+++ b/frontend/tests/user-settings.spec.ts
@@ -57,8 +57,13 @@ test('Create one time access token', async ({ page }) => {
 		.getByRole('row', { name: `${users.craig.firstname} ${users.craig.lastname}` })
 		.getByRole('button')
 		.click();
+
 	await page.getByRole('menuitem', { name: 'One-time link' }).click();
 
+	await page.getByLabel('One Time Link').getByRole('combobox').click();
+	await page.getByRole('option', { name: '12 hours' }).click();
+	await page.getByRole('button', { name: 'Generate Link' }).click();
+
 	await expect(page.getByRole('textbox', { name: 'One Time Link' })).toHaveValue(
 		/http:\/\/localhost\/login\/.*/
 	);