@mrgnw/anahtar 0.0.18 → 0.0.20
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>
|
|
@@ -366,9 +385,15 @@ async function removePasskey(id: string) {
|
|
|
366
385
|
autocomplete="username webauthn"
|
|
367
386
|
disabled={loading}
|
|
368
387
|
/>
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
388
|
+
<button type="submit" class="anahtar-pill-go" disabled={loading || !email.includes('@')}>
|
|
389
|
+
{#if loading}
|
|
390
|
+
...
|
|
391
|
+
{:else}
|
|
392
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
393
|
+
<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
|
|
394
|
+
</svg>
|
|
395
|
+
{/if}
|
|
396
|
+
</button>
|
|
372
397
|
</form>
|
|
373
398
|
{/if}
|
|
374
399
|
</div>
|
|
@@ -456,6 +481,7 @@ async function removePasskey(id: string) {
|
|
|
456
481
|
white-space: nowrap;
|
|
457
482
|
height: 2.25rem;
|
|
458
483
|
box-sizing: border-box;
|
|
484
|
+
overflow: hidden;
|
|
459
485
|
}
|
|
460
486
|
|
|
461
487
|
.anahtar-pill-sep {
|
|
@@ -496,6 +522,9 @@ async function removePasskey(id: string) {
|
|
|
496
522
|
display: flex;
|
|
497
523
|
align-items: center;
|
|
498
524
|
gap: 0.375rem;
|
|
525
|
+
flex: 1;
|
|
526
|
+
min-width: 0;
|
|
527
|
+
overflow: hidden;
|
|
499
528
|
}
|
|
500
529
|
|
|
501
530
|
.anahtar-pill-email-input {
|
|
@@ -504,7 +533,8 @@ async function removePasskey(id: string) {
|
|
|
504
533
|
outline: none;
|
|
505
534
|
font-size: 0.875rem;
|
|
506
535
|
color: var(--anahtar-pill-fg, #111827);
|
|
507
|
-
|
|
536
|
+
flex: 1;
|
|
537
|
+
min-width: 0;
|
|
508
538
|
padding: 0.125rem 0;
|
|
509
539
|
}
|
|
510
540
|
.anahtar-pill-email-input::placeholder { color: var(--anahtar-pill-placeholder, #9ca3af); }
|
|
@@ -514,12 +544,14 @@ async function removePasskey(id: string) {
|
|
|
514
544
|
color: var(--anahtar-primary-fg, #fff);
|
|
515
545
|
border: none;
|
|
516
546
|
border-radius: 9999px;
|
|
517
|
-
padding: 0.
|
|
518
|
-
|
|
519
|
-
|
|
547
|
+
padding: 0.3rem;
|
|
548
|
+
display: flex;
|
|
549
|
+
align-items: center;
|
|
550
|
+
justify-content: center;
|
|
551
|
+
flex-shrink: 0;
|
|
520
552
|
cursor: pointer;
|
|
521
553
|
transition: opacity 0.15s;
|
|
522
|
-
|
|
554
|
+
line-height: 1;
|
|
523
555
|
}
|
|
524
556
|
.anahtar-pill-go:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
525
557
|
.anahtar-pill-go:hover:not(:disabled) { opacity: 0.85; }
|