feat: custom claims (#53)

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pocket-id-frontend",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pocket-id-frontend",
-      "version": "0.9.0",
+      "version": "0.10.0",
       "dependencies": {
         "@simplewebauthn/browser": "^10.0.0",
         "axios": "^1.7.7",

frontend/src/lib/components/auto-complete-input.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import Input from '$lib/components/ui/input/input.svelte';
+	import * as Popover from '$lib/components/ui/popover/index.js';
+
+	let {
+		value = $bindable(''),
+		placeholder,
+		suggestionLimit = 5,
+		suggestions
+	}: {
+		value: string;
+		placeholder: string;
+		suggestionLimit?: number;
+		suggestions: string[];
+	} = $props();
+
+	let filteredSuggestions: string[] = $state(suggestions.slice(0, suggestionLimit));
+	let selectedIndex = $state(-1);
+
+	let isInputFocused = $state(false);
+
+	function handleSuggestionClick(suggestion: (typeof suggestions)[0]) {
+		value = suggestion;
+		filteredSuggestions = [];
+	}
+
+	function handleOnInput() {
+		filteredSuggestions = suggestions
+			.filter((s) => s.includes(value.toLowerCase()))
+			.slice(0, suggestionLimit);
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!isOpen) return;
+		switch (e.key) {
+			case 'ArrowDown':
+				selectedIndex = Math.min(selectedIndex + 1, filteredSuggestions.length - 1);
+				break;
+			case 'ArrowUp':
+				selectedIndex = Math.max(selectedIndex - 1, -1);
+				break;
+			case 'Enter':
+				if (selectedIndex >= 0) {
+					handleSuggestionClick(filteredSuggestions[selectedIndex]);
+				}
+				break;
+			case 'Escape':
+				isInputFocused = false;
+				break;
+		}
+	}
+
+	let isOpen = $derived(filteredSuggestions.length > 0 && isInputFocused);
+
+	$effect(() => {
+		// Reset selection when suggestions change
+		if (filteredSuggestions) {
+			selectedIndex = -1;
+		}
+	});
+</script>
+
+<div
+	class="grid w-full"
+	role="combobox"
+	onkeydown={handleKeydown}
+	aria-controls="suggestion-list"
+	aria-expanded={isOpen}
+	tabindex="-1"
+>
+	<Input
+		{placeholder}
+		bind:value
+		oninput={handleOnInput}
+		onfocus={() => (isInputFocused = true)}
+		onblur={() => (isInputFocused = false)}
+	/>
+	<Popover.Root
+		open={isOpen}
+		disableFocusTrap
+		openFocus={() => {}}
+		closeOnOutsideClick={false}
+		closeOnEscape={false}
+	>
+		<Popover.Trigger tabindex={-1} class="h-0 w-full" aria-hidden />
+		<Popover.Content class="p-0" sideOffset={5} sameWidth>
+			{#each filteredSuggestions as suggestion, index}
+				<div
+					role="button"
+					tabindex="0"
+					onmousedown={() => handleSuggestionClick(suggestion)}
+					onkeydown={(e) => {
+						if (e.key === 'Enter') handleSuggestionClick(suggestion);
+					}}
+					class="hover:bg-accent hover:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 {selectedIndex ===
+					index
+						? 'bg-accent text-accent-foreground'
+						: ''}"
+				>
+					{suggestion}
+				</div>
+			{/each}
+		</Popover.Content>
+	</Popover.Root>
+</div>

frontend/src/lib/components/custom-claims-input.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import FormInput from '$lib/components/form-input.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import CustomClaimService from '$lib/services/custom-claim-service';
+	import type { CustomClaim } from '$lib/types/custom-claim.type';
+	import { LucideMinus, LucidePlus } from 'lucide-svelte';
+	import { onMount, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import AutoCompleteInput from './auto-complete-input.svelte';
+
+	let {
+		customClaims = $bindable(),
+		error = $bindable(null),
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		customClaims: CustomClaim[];
+		error?: string | null;
+		children?: Snippet;
+	} = $props();
+
+	const limit = 20;
+
+	const customClaimService = new CustomClaimService();
+
+	let suggestions: string[] = $state([]);
+	let filteredSuggestions: string[] = $derived(
+		suggestions.filter(
+			(suggestion) => !customClaims.some((customClaim) => customClaim.key === suggestion)
+		)
+	);
+
+	onMount(() => {
+		customClaimService.getSuggestions().then((data) => (suggestions = data));
+	});
+</script>
+
+<div {...restProps}>
+	<FormInput>
+		<div class="flex flex-col gap-y-2">
+			{#each customClaims as _, i}
+				<div class="flex gap-x-2">
+					<AutoCompleteInput
+						placeholder="Key"
+						suggestions={filteredSuggestions}
+						bind:value={customClaims[i].key}
+					/>
+					<Input placeholder="Value" bind:value={customClaims[i].value} />
+					<Button
+						variant="outline"
+						size="sm"
+						aria-label="Remove custom claim"
+						on:click={() => (customClaims = customClaims.filter((_, index) => index !== i))}
+					>
+						<LucideMinus class="h-4 w-4" />
+					</Button>
+				</div>
+			{/each}
+		</div>
+	</FormInput>
+	{#if error}
+		<p class="mt-1 text-sm text-red-500">{error}</p>
+	{/if}
+	{#if customClaims.length < limit}
+		<Button
+			class="mt-2"
+			variant="secondary"
+			size="sm"
+			on:click={() => (customClaims = [...customClaims, { key: '', value: '' }])}
+		>
+			<LucidePlus class="mr-1 h-4 w-4" />
+			{customClaims.length === 0 ? 'Add custom claim' : 'Add another'}
+		</Button>
+	{/if}
+</div>

frontend/src/lib/components/form-input.svelte

@@ -16,7 +16,7 @@
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
 		input?: FormInput<string | boolean | number>;
-		label: string;
+		label?: string;
 		description?: string;
 		disabled?: boolean;
 		type?: 'text' | 'password' | 'email' | 'number' | 'checkbox';
@@ -24,15 +24,17 @@
 		children?: Snippet;
 	} = $props();
 
-	const id = label.toLowerCase().replace(/ /g, '-');
+	const id = label?.toLowerCase().replace(/ /g, '-');
 </script>
 
 <div {...restProps}>
-	<Label class="mb-0" for={id}>{label}</Label>
+	{#if label}
+		<Label class="mb-0" for={id}>{label}</Label>
+	{/if}
 	{#if description}
 		<p class="text-muted-foreground mt-1 text-xs">{description}</p>
 	{/if}
-	<div class="mt-2">
+	<div class={label || description ? 'mt-2' : ''}>
 		{#if children}
 			{@render children()}
 		{:else if input}

frontend/src/lib/components/ui/popover/index.ts

@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+};

frontend/src/lib/components/ui/popover/popover-content.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils/style.js";
+
+	type $$Props = PopoverPrimitive.ContentProps;
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<PopoverPrimitive.Content
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</PopoverPrimitive.Content>

frontend/src/lib/services/custom-claim-service.ts

@@ -0,0 +1,19 @@
+import type { CustomClaim } from '$lib/types/custom-claim.type';
+import APIService from './api-service';
+
+export default class CustomClaimService extends APIService {
+	async getSuggestions() {
+		const res = await this.api.get('/custom-claims/suggestions');
+		return res.data as string[];
+	}
+
+	async updateUserCustomClaims(userId: string, claims: CustomClaim[]) {
+		const res = await this.api.put(`/custom-claims/user/${userId}`, claims);
+		return res.data as CustomClaim[];
+	}
+
+	async updateUserGroupCustomClaims(userGroupId: string, claims: CustomClaim[]) {
+		const res = await this.api.put(`/custom-claims/user-group/${userGroupId}`, claims);
+		return res.data as CustomClaim[];
+	}
+}

frontend/src/lib/types/custom-claim.type.ts

@@ -0,0 +1,4 @@
+export type CustomClaim = {
+	key: string;
+	value: string;
+};

frontend/src/lib/types/user-group.type.ts

@@ -1,3 +1,4 @@
+import type { CustomClaim } from './custom-claim.type';
 import type { User } from './user.type';
 
 export type UserGroup = {
@@ -5,6 +6,7 @@ export type UserGroup = {
 	friendlyName: string;
 	name: string;
 	createdAt: string;
+	customClaims: CustomClaim[];
 };
 
 export type UserGroupWithUsers = UserGroup & {

frontend/src/lib/types/user.type.ts

@@ -1,3 +1,5 @@
+import type { CustomClaim } from './custom-claim.type';
+
 export type User = {
 	id: string;
 	username: string;
@@ -5,6 +7,7 @@ export type User = {
 	firstName: string;
 	lastName: string;
 	isAdmin: boolean;
+	customClaims: CustomClaim[];
 };
 
-export type UserCreate = Omit<User, 'id'>;
+export type UserCreate = Omit<User, 'id' | 'customClaims'>;

frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import CustomClaimsInput from '$lib/components/custom-claims-input.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
+	import CustomClaimService from '$lib/services/custom-claim-service';
 	import UserGroupService from '$lib/services/user-group-service';
 	import UserService from '$lib/services/user-service';
 	import type { UserGroupCreate } from '$lib/types/user-group.type';
@@ -18,6 +20,7 @@
 
 	const userGroupService = new UserGroupService();
 	const userService = new UserService();
+	const customClaimService = new CustomClaimService();
 
 	async function updateUserGroup(updatedUserGroup: UserGroupCreate) {
 		let success = true;
@@ -40,6 +43,15 @@
 				axiosErrorToast(e);
 			});
 	}
+
+	async function updateCustomClaims() {
+		await customClaimService
+			.updateUserGroupCustomClaims(userGroup.id, userGroup.customClaims)
+			.then(() => toast.success('Custom claims updated successfully'))
+			.catch((e) => {
+				axiosErrorToast(e);
+			});
+	}
 </script>
 
 <svelte:head>
@@ -53,7 +65,7 @@
 </div>
 <Card.Root>
 	<Card.Header>
-		<Card.Title>Meta data</Card.Title>
+		<Card.Title>General</Card.Title>
 	</Card.Header>
 
 	<Card.Content>
@@ -76,3 +88,20 @@
 		</div>
 	</Card.Content>
 </Card.Root>
+
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Custom Claims</Card.Title>
+		<Card.Description>
+			Custom claims are key-value pairs that can be used to store additional information about a
+			user. These claims will be included in the ID token if the scope "profile" is requested.
+			Custom claims defined on the user will be prioritized if there are conflicts.
+		</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<CustomClaimsInput bind:customClaims={userGroup.customClaims} />
+		<div class="mt-5 flex justify-end">
+			<Button onclick={updateCustomClaims} type="submit">Save</Button>
+		</div>
+	</Card.Content>
+</Card.Root>

frontend/src/routes/settings/admin/users/[id]/+page.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
+	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
+	import CustomClaimService from '$lib/services/custom-claim-service';
 	import UserService from '$lib/services/user-service';
 	import type { UserCreate } from '$lib/types/user.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucideChevronLeft } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
+	import CustomClaimsInput from '../../../../../lib/components/custom-claims-input.svelte';
 	import UserForm from '../user-form.svelte';
 
 	let { data } = $props();
 	let user = $state(data);
 
 	const userService = new UserService();
+	const customClaimService = new CustomClaimService();
 
 	async function updateUser(updatedUser: UserCreate) {
 		let success = true;
@@ -24,6 +28,15 @@
 
 		return success;
 	}
+
+	async function updateCustomClaims() {
+		await customClaimService
+			.updateUserCustomClaims(user.id, user.customClaims)
+			.then(() => toast.success('Custom claims updated successfully'))
+			.catch((e) => {
+				axiosErrorToast(e);
+			});
+	}
 </script>
 
 <svelte:head>
@@ -37,10 +50,25 @@
 </div>
 <Card.Root>
 	<Card.Header>
-		<Card.Title>{user.firstName} {user.lastName}</Card.Title>
+		<Card.Title>General</Card.Title>
 	</Card.Header>
-
 	<Card.Content>
 		<UserForm existingUser={user} callback={updateUser} />
 	</Card.Content>
 </Card.Root>
+
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Custom Claims</Card.Title>
+		<Card.Description>
+			Custom claims are key-value pairs that can be used to store additional information about a
+			user. These claims will be included in the ID token if the scope "profile" is requested.
+		</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<CustomClaimsInput bind:customClaims={user.customClaims} />
+		<div class="mt-5 flex justify-end">
+			<Button onclick={updateCustomClaims} type="submit">Save</Button>
+		</div>
+	</Card.Content>
+</Card.Root>

frontend/tests/account-settings.spec.ts

@@ -24,7 +24,7 @@ test('Update account details fails with already taken email', async ({ page }) =
 
 	await page.getByRole('button', { name: 'Save' }).click();
 
-	await expect(page.getByRole('status')).toHaveText('Email is already taken');
+	await expect(page.getByRole('status')).toHaveText('Email is already in use');
 });
 
 test('Update account details fails with already taken username', async ({ page }) => {
@@ -34,7 +34,7 @@ test('Update account details fails with already taken username', async ({ page }
 
 	await page.getByRole('button', { name: 'Save' }).click();
 
-	await expect(page.getByRole('status')).toHaveText('Username is already taken');
+	await expect(page.getByRole('status')).toHaveText('Username is already in use');
 });
 
 test('Add passkey to an account', async ({ page }) => {

frontend/tests/user-group.spec.ts

@@ -73,3 +73,39 @@ test('Delete user group', async ({ page }) => {
 	await expect(page.getByRole('status')).toHaveText('User group deleted successfully');
 	await expect(page.getByRole('row', { name: group.name })).not.toBeVisible();
 });
+
+test('Update user group custom claims', async ({ page }) => {
+	await page.goto(`/settings/admin/user-groups/${userGroups.designers.id}`);
+
+	// Add two custom claims
+	await page.getByRole('button', { name: 'Add custom claim' }).click();
+
+	await page.getByPlaceholder('Key').fill('custom_claim_1');
+	await page.getByPlaceholder('Value').fill('custom_claim_1_value');
+
+	await page.getByRole('button', { name: 'Add another' }).click();
+	await page.getByPlaceholder('Key').nth(1).fill('custom_claim_2');
+	await page.getByPlaceholder('Value').nth(1).fill('custom_claim_2_value');
+
+	await page.getByRole('button', { name: 'Save' }).nth(2).click();
+
+	await expect(page.getByRole('status')).toHaveText('Custom claims updated successfully');
+
+	await page.reload();
+
+	// Check if custom claims are saved
+	await expect(page.getByPlaceholder('Key').first()).toHaveValue('custom_claim_1');
+	await expect(page.getByPlaceholder('Value').first()).toHaveValue('custom_claim_1_value');
+	await expect(page.getByPlaceholder('Key').nth(1)).toHaveValue('custom_claim_2');
+	await expect(page.getByPlaceholder('Value').nth(1)).toHaveValue('custom_claim_2_value');
+
+	// Remove one custom claim
+	await page.getByLabel('Remove custom claim').first().click();
+	await page.getByRole('button', { name: 'Save' }).nth(2).click();
+
+	await page.reload();
+
+	// Check if custom claim is removed
+	await expect(page.getByPlaceholder('Key').first()).toHaveValue('custom_claim_2');
+	await expect(page.getByPlaceholder('Value').first()).toHaveValue('custom_claim_2_value');
+});

frontend/tests/user-settings.spec.ts

@@ -32,7 +32,7 @@ test('Create user fails with already taken email', async ({ page }) => {
 	await page.getByLabel('Username').fill(user.username);
 	await page.getByRole('button', { name: 'Save' }).click();
 
-	await expect(page.getByRole('status')).toHaveText('Email is already taken');
+	await expect(page.getByRole('status')).toHaveText('Email is already in use');
 });
 
 test('Create user fails with already taken username', async ({ page }) => {
@@ -47,7 +47,7 @@ test('Create user fails with already taken username', async ({ page }) => {
 	await page.getByLabel('Username').fill(users.tim.username);
 	await page.getByRole('button', { name: 'Save' }).click();
 
-	await expect(page.getByRole('status')).toHaveText('Username is already taken');
+	await expect(page.getByRole('status')).toHaveText('Username is already in use');
 });
 
 test('Create one time access token', async ({ page }) => {
@@ -95,7 +95,7 @@ test('Update user', async ({ page }) => {
 	await page.getByLabel('Last name').fill('Apple');
 	await page.getByLabel('Email').fill('crack.apple@test.com');
 	await page.getByLabel('Username').fill('crack');
-	await page.getByRole('button', { name: 'Save' }).click();
+	await page.getByRole('button', { name: 'Save' }).first().click();
 
 	await expect(page.getByRole('status')).toHaveText('User updated successfully');
 });
@@ -112,9 +112,9 @@ test('Update user fails with already taken email', async ({ page }) => {
 	await page.getByRole('menuitem', { name: 'Edit' }).click();
 
 	await page.getByLabel('Email').fill(users.tim.email);
-	await page.getByRole('button', { name: 'Save' }).click();
+	await page.getByRole('button', { name: 'Save' }).first().click();
 
-	await expect(page.getByRole('status')).toHaveText('Email is already taken');
+	await expect(page.getByRole('status')).toHaveText('Email is already in use');
 });
 
 test('Update user fails with already taken username', async ({ page }) => {
@@ -129,7 +129,43 @@ test('Update user fails with already taken username', async ({ page }) => {
 	await page.getByRole('menuitem', { name: 'Edit' }).click();
 
 	await page.getByLabel('Username').fill(users.tim.username);
-	await page.getByRole('button', { name: 'Save' }).click();
+	await page.getByRole('button', { name: 'Save' }).first().click();
 
-	await expect(page.getByRole('status')).toHaveText('Username is already taken');
+	await expect(page.getByRole('status')).toHaveText('Username is already in use');
+});
+
+test('Update user custom claims', async ({ page }) => {
+	await page.goto(`/settings/admin/users/${users.craig.id}`);
+
+	// Add two custom claims
+	await page.getByRole('button', { name: 'Add custom claim' }).click();
+
+	await page.getByPlaceholder('Key').fill('custom_claim_1');
+	await page.getByPlaceholder('Value').fill('custom_claim_1_value');
+
+	await page.getByRole('button', { name: 'Add another' }).click();
+	await page.getByPlaceholder('Key').nth(1).fill('custom_claim_2');
+	await page.getByPlaceholder('Value').nth(1).fill('custom_claim_2_value');
+
+	await page.getByRole('button', { name: 'Save' }).nth(1).click();
+
+	await expect(page.getByRole('status')).toHaveText('Custom claims updated successfully');
+
+	await page.reload();
+
+	// Check if custom claims are saved
+	await expect(page.getByPlaceholder('Key').first()).toHaveValue('custom_claim_1');
+	await expect(page.getByPlaceholder('Value').first()).toHaveValue('custom_claim_1_value');
+	await expect(page.getByPlaceholder('Key').nth(1)).toHaveValue('custom_claim_2');
+	await expect(page.getByPlaceholder('Value').nth(1)).toHaveValue('custom_claim_2_value');
+
+	// Remove one custom claim
+	await page.getByLabel('Remove custom claim').first().click();
+	await page.getByRole('button', { name: 'Save' }).nth(1).click();
+
+	await page.reload();
+
+	// Check if custom claim is removed
+	await expect(page.getByPlaceholder('Key').first()).toHaveValue('custom_claim_2');
+	await expect(page.getByPlaceholder('Value').first()).toHaveValue('custom_claim_2_value');
 });