feat: include passkey icons based on AAGUID (#1756)

This commit is contained in:
Mike Beaumont
2026-09-19 09:41:53 -07:00
committed by GitHub
parent c22003f6de
commit b5a07a29ef
90 changed files with 2934 additions and 49 deletions
@@ -5,8 +5,10 @@
import { m } from '$lib/paraglide/messages';
import WebauthnService from '$lib/services/webauthn-service';
import type { Passkey } from '$lib/types/passkey.type';
import { authenticatorIconUrl } from '$lib/utils/cached-image-util';
import { axiosErrorToast } from '$lib/utils/error-util';
import { LucideKeyRound } from '@lucide/svelte';
import { mode } from 'mode-watcher';
import { toast } from 'svelte-sonner';
import RenamePasskeyModal from './rename-passkey-modal.svelte';
@@ -16,6 +18,8 @@
let passkeyToRename: Passkey | null = $state(null);
const isLightMode = $derived(mode.current === 'light');
async function deletePasskey(passkey: Passkey) {
openConfirmDialog({
title: m.delete_passkey_name({ passkeyName: passkey.name }),
@@ -43,6 +47,9 @@
label={passkey.name}
description={m.added_on() + ' ' + new Date(passkey.createdAt).toLocaleDateString()}
icon={LucideKeyRound}
providerIconUrl={passkey.hasIcon
? authenticatorIconUrl(passkey.aaguid, isLightMode)
: undefined}
onRename={() => (passkeyToRename = passkey)}
onDelete={() => deletePasskey(passkey)}
/>
@@ -5,8 +5,10 @@
import { m } from '$lib/paraglide/messages';
import UserService from '$lib/services/user-service';
import type { Passkey } from '$lib/types/passkey.type';
import { authenticatorIconUrl } from '$lib/utils/cached-image-util';
import { axiosErrorToast } from '$lib/utils/error-util';
import { LucideKeyRound } from '@lucide/svelte';
import { mode } from 'mode-watcher';
import { toast } from 'svelte-sonner';
let {
@@ -19,6 +21,8 @@
const userService = new UserService();
const isLightMode = $derived(mode.current === 'light');
async function refreshPasskeys() {
passkeys = await userService.listUserPasskeys(userId);
}
@@ -50,6 +54,9 @@
label={passkey.name}
description={m.added_on() + ' ' + new Date(passkey.createdAt).toLocaleDateString()}
icon={LucideKeyRound}
providerIconUrl={passkey.hasIcon
? authenticatorIconUrl(passkey.aaguid, isLightMode)
: undefined}
showRenameAction={false}
onDelete={() => deletePasskey(passkey)}
/>