forked from
tranquil.farm/tranquil-pds
Our Personal Data Server from scratch!
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