feat: add ability to revoke passkeys of users as admin (#1386)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jose-d <7630424+jose-d@users.noreply.github.com>
Co-authored-by: Alessandro (Ale) Segala <43508+ItalyPaleAle@users.noreply.github.com>
Co-authored-by: Elias Schneider <login@eliasschneider.com>

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

@@ -5,23 +5,27 @@
 	import Badge from '$lib/components/ui/badge/badge.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
+	import * as Item from '$lib/components/ui/item/index.js';
 	import UserGroupSelection from '$lib/components/user-group-selection.svelte';
 	import { m } from '$lib/paraglide/messages';
 	import CustomClaimService from '$lib/services/custom-claim-service';
 	import UserService from '$lib/services/user-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
+	import type { Passkey } from '$lib/types/passkey.type';
 	import type { UserCreate } from '$lib/types/user.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideChevronLeft } from '@lucide/svelte';
+	import { KeyRound, LucideChevronLeft } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import { backNavigate } from '../navigate-back-util';
 	import UserForm from '../user-form.svelte';
+	import AdminPasskeyList from './admin-passkey-list.svelte';
 
 	let { data } = $props();
 	let user = $state({
 		...data.user,
 		userGroupIds: data.user.userGroups.map((g) => g.id)
 	});
+	let passkeys: Passkey[] = $state(data.passkeys);
 
 	const userService = new UserService();
 	const customClaimService = new CustomClaimService();
@@ -128,6 +132,21 @@
 	</div>
 </CollapsibleCard>
 
+<Item.Group class="bg-card rounded-xl border p-4 shadow-sm">
+	<Item.Root class="border-none bg-transparent p-0">
+		<Item.Media class="text-primary/80">
+			<KeyRound class="size-5" />
+		</Item.Media>
+		<Item.Content class="min-w-52">
+			<Item.Title class="text-xl font-semibold">{m.passkeys()}</Item.Title>
+			<Item.Description>{passkeys.length > 0 ? m.manage_this_users_passkeys() : m.user_has_no_passkeys_yet()}</Item.Description>
+		</Item.Content>
+	</Item.Root>
+	{#if passkeys.length > 0}
+		<AdminPasskeyList userId={user.id} bind:passkeys />
+	{/if}
+</Item.Group>
+
 <CollapsibleCard
 	id="user-custom-claims"
 	title={m.custom_claims()}

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

@@ -3,9 +3,13 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params }) => {
 	const userService = new UserService();
-	const user = await userService.get(params.id);
+	const [user, passkeys] = await Promise.all([
+		userService.get(params.id),
+		userService.listUserPasskeys(params.id)
+	]);
 
 	return {
-		user
+		user,
+		passkeys
 	};
 };

frontend/src/routes/settings/admin/users/[id]/admin-passkey-list.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { openConfirmDialog } from '$lib/components/confirm-dialog';
+	import PasskeyRow from '$lib/components/passkey-row.svelte';
+	import * as Item from '$lib/components/ui/item/index.js';
+	import { m } from '$lib/paraglide/messages';
+	import UserService from '$lib/services/user-service';
+	import type { Passkey } from '$lib/types/passkey.type';
+	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { LucideKeyRound } from '@lucide/svelte';
+	import { toast } from 'svelte-sonner';
+
+	let {
+		userId,
+		passkeys = $bindable()
+	}: {
+		userId: string;
+		passkeys: Passkey[];
+	} = $props();
+
+	const userService = new UserService();
+
+	async function refreshPasskeys() {
+		passkeys = await userService.listUserPasskeys(userId);
+	}
+
+	function deletePasskey(passkey: Passkey) {
+		openConfirmDialog({
+			title: m.delete_passkey_name({ passkeyName: passkey.name }),
+			message: m.are_you_sure_you_want_to_delete_this_passkey(),
+			confirm: {
+				label: m.delete(),
+				destructive: true,
+				action: async () => {
+					try {
+						await userService.removeUserPasskey(userId, passkey.id);
+						await refreshPasskeys();
+						toast.success(m.passkey_deleted_successfully());
+					} catch (e) {
+						axiosErrorToast(e);
+					}
+				}
+			}
+		});
+	}
+</script>
+
+<Item.Group class="mt-3">
+	{#each [...passkeys].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()) as passkey}
+		<PasskeyRow
+			label={passkey.name}
+			description={m.added_on() + ' ' + new Date(passkey.createdAt).toLocaleDateString()}
+			icon={LucideKeyRound}
+			showRenameAction={false}
+			onDelete={() => deletePasskey(passkey)}
+		/>
+	{/each}
+</Item.Group>