@mrgnw/anahtar 0.0.18 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -15,6 +15,7 @@ interface PasskeyInfo {
|
|
|
15
15
|
interface Props {
|
|
16
16
|
apiBase?: string;
|
|
17
17
|
user?: { email: string } | null;
|
|
18
|
+
compact?: boolean;
|
|
18
19
|
locale?: string;
|
|
19
20
|
messages?: Partial<AuthMessages>;
|
|
20
21
|
onSuccess?: () => void | Promise<void>;
|
|
@@ -26,6 +27,7 @@ interface Props {
|
|
|
26
27
|
let {
|
|
27
28
|
apiBase = '/api/auth',
|
|
28
29
|
user = null,
|
|
30
|
+
compact = false,
|
|
29
31
|
locale,
|
|
30
32
|
messages: messageOverrides,
|
|
31
33
|
onSuccess,
|
|
@@ -34,6 +36,8 @@ let {
|
|
|
34
36
|
getPasskeys,
|
|
35
37
|
}: Props = $props();
|
|
36
38
|
|
|
39
|
+
let expanded = $state(false);
|
|
40
|
+
|
|
37
41
|
let m = $derived(resolveMessages(locale ?? detectLocaleClient(), messageOverrides));
|
|
38
42
|
|
|
39
43
|
let email = $state('');
|
|
@@ -72,6 +76,7 @@ async function handleSignOut() {
|
|
|
72
76
|
otpStep = false;
|
|
73
77
|
passkeyOnboarding = false;
|
|
74
78
|
showPasskeys = false;
|
|
79
|
+
expanded = false;
|
|
75
80
|
error = '';
|
|
76
81
|
await onSignOut?.();
|
|
77
82
|
}
|
|
@@ -313,7 +318,13 @@ async function removePasskey(id: string) {
|
|
|
313
318
|
|
|
314
319
|
<div class="anahtar-pill-island" class:anahtar-pill-loading={loading}>
|
|
315
320
|
<div class="anahtar-pill">
|
|
316
|
-
{#if isAuthenticated}
|
|
321
|
+
{#if isAuthenticated && compact && !expanded}
|
|
322
|
+
<button class="anahtar-pill-icon" onclick={() => (expanded = true)} title={user?.email}>
|
|
323
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
324
|
+
<circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/>
|
|
325
|
+
</svg>
|
|
326
|
+
</button>
|
|
327
|
+
{:else if isAuthenticated}
|
|
317
328
|
<span class="anahtar-pill-email">{user?.email}</span>
|
|
318
329
|
<span class="anahtar-pill-sep">·</span>
|
|
319
330
|
{#if getPasskeys}
|
|
@@ -335,6 +346,14 @@ async function removePasskey(id: string) {
|
|
|
335
346
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>
|
|
336
347
|
</svg>
|
|
337
348
|
</button>
|
|
349
|
+
{#if compact}
|
|
350
|
+
<span class="anahtar-pill-sep">·</span>
|
|
351
|
+
<button class="anahtar-pill-icon" onclick={() => { expanded = false; showPasskeys = false; }} title="Collapse">
|
|
352
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
353
|
+
<line x1="18" x2="6" y1="6" y2="18"/><line x1="6" x2="18" y1="6" y2="18"/>
|
|
354
|
+
</svg>
|
|
355
|
+
</button>
|
|
356
|
+
{/if}
|
|
338
357
|
|
|
339
358
|
{:else if otpStep}
|
|
340
359
|
<span class="anahtar-pill-otp-label">{email}</span>
|