this repo has no description
lewis.moe
1<script lang="ts">
2 import type { RegistrationFlow } from './flow.svelte'
3
4 interface Props {
5 flow: RegistrationFlow
6 }
7
8 let { flow }: Props = $props()
9
10 let copied = $state(false)
11 let acknowledged = $state(false)
12
13 function copyToClipboard() {
14 if (flow.account?.appPassword) {
15 navigator.clipboard.writeText(flow.account.appPassword)
16 copied = true
17 }
18 }
19</script>
20
21<div class="app-password-step">
22 <div class="warning-box">
23 <strong>Important: Save this app password!</strong>
24 <p>
25 This app password is required to sign into apps that don't support passkeys yet (like bsky.app).
26 You will only see this password once.
27 </p>
28 </div>
29
30 <div class="app-password-display">
31 <div class="app-password-label">
32 App Password for: <strong>{flow.account?.appPasswordName}</strong>
33 </div>
34 <code class="app-password-code">{flow.account?.appPassword}</code>
35 <button type="button" class="copy-btn" onclick={copyToClipboard}>
36 {copied ? 'Copied!' : 'Copy to Clipboard'}
37 </button>
38 </div>
39
40 <div class="field">
41 <label class="checkbox-label">
42 <input type="checkbox" bind:checked={acknowledged} />
43 <span>I have saved my app password in a secure location</span>
44 </label>
45 </div>
46
47 <button onclick={() => flow.proceedFromAppPassword()} disabled={!acknowledged}>
48 Continue
49 </button>
50</div>
51
52<style>
53 .app-password-step {
54 display: flex;
55 flex-direction: column;
56 gap: var(--space-4);
57 }
58
59 .warning-box {
60 padding: var(--space-5);
61 background: var(--warning-bg);
62 border: 1px solid var(--warning-border);
63 border-radius: var(--radius-lg);
64 font-size: var(--text-sm);
65 }
66
67 .warning-box strong {
68 display: block;
69 margin-bottom: var(--space-3);
70 color: var(--warning-text);
71 }
72
73 .warning-box p {
74 margin: 0;
75 color: var(--warning-text);
76 }
77
78 .app-password-display {
79 background: var(--bg-card);
80 border: 2px solid var(--accent);
81 border-radius: var(--radius-xl);
82 padding: var(--space-6);
83 text-align: center;
84 }
85
86 .app-password-label {
87 font-size: var(--text-sm);
88 color: var(--text-secondary);
89 margin-bottom: var(--space-4);
90 }
91
92 .app-password-code {
93 display: block;
94 font-size: var(--text-xl);
95 font-family: ui-monospace, monospace;
96 letter-spacing: 0.1em;
97 padding: var(--space-5);
98 background: var(--bg-input);
99 border-radius: var(--radius-md);
100 margin-bottom: var(--space-4);
101 user-select: all;
102 }
103
104 .copy-btn {
105 padding: var(--space-3) var(--space-5);
106 font-size: var(--text-sm);
107 }
108
109 .checkbox-label {
110 display: flex;
111 align-items: center;
112 gap: var(--space-3);
113 cursor: pointer;
114 font-weight: var(--font-normal);
115 }
116
117 .checkbox-label input[type="checkbox"] {
118 width: auto;
119 padding: 0;
120 }
121</style>