initial commit

frontend/src/routes/settings/account/passkey-list.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
+	import { Button } from '$lib/components/ui/button';
+	import { Separator } from '$lib/components/ui/separator';
+	import WebauthnService from '$lib/services/webauthn-service';
+	import type { Passkey } from '$lib/types/passkey.type';
+	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { LucideKeyRound, LucidePencil, LucideTrash } from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
+	import RenamePasskeyModal from './rename-passkey-modal.svelte';
+
+	let { passkeys: initialsPasskeys }: { passkeys: Passkey[] } = $props();
+	let passkeys = $state<Passkey[]>(initialsPasskeys);
+
+	const webauthnService = new WebauthnService();
+
+	$effect(() => {
+		passkeys = initialsPasskeys;
+	});
+
+	let passkeyToRename: Passkey | null = $state(null);
+
+	async function deletePasskey(passkey: Passkey) {
+		openConfirmDialog({
+			title: `Delete ${passkey.name}`,
+			message: 'Are you sure you want to delete this passkey?',
+			confirm: {
+				label: 'Delete',
+				destructive: true,
+				action: async () => {
+					try {
+						await webauthnService.removeCredential(passkey.id);
+						passkeys = await webauthnService.listCredentials();
+						toast.success('Passkey deleted successfully');
+					} catch (e) {
+						axiosErrorToast(e);
+					}
+				}
+			}
+		});
+	}
+</script>
+
+<div class="flex flex-col">
+	{#each passkeys as passkey, i}
+		<div class="flex justify-between">
+			<div class="flex items-center">
+				<LucideKeyRound class="mr-4 inline h-6 w-6" />
+				<div>
+					<p>{passkey.name}</p>
+					<p class="text-xs text-muted-foreground">
+						Added on {new Date(passkey.createdAt).toLocaleDateString()}
+					</p>
+				</div>
+			</div>
+			<div>
+				<Button
+					on:click={() => (passkeyToRename = passkey)}
+					size="sm"
+					variant="outline"
+					aria-label="Rename"><LucidePencil class="h-3 w-3" /></Button
+				>
+				<Button
+					on:click={() => deletePasskey(passkey)}
+					size="sm"
+					variant="outline"
+					aria-label="Delete"><LucideTrash class="h-3 w-3 text-red-500" /></Button
+				>
+			</div>
+		</div>
+		{#if i !== passkeys.length - 1}
+			<Separator class="my-2" />
+		{/if}
+	{/each}
+</div>
+<RenamePasskeyModal
+	bind:passkey={passkeyToRename}
+	callback={async () => (passkeys = await webauthnService.listCredentials())}
+/>