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 type: 'initial' | 'updated'
7 onConfirm: () => void
8 onBack?: () => void
9 }
10
11 let { flow, type, onConfirm, onBack }: Props = $props()
12
13 let copied = $state(false)
14 let confirmed = $state(false)
15
16 const didDocument = $derived(
17 type === 'initial'
18 ? flow.externalDidWeb.initialDidDocument
19 : flow.externalDidWeb.updatedDidDocument
20 )
21
22 const title = $derived(
23 type === 'initial'
24 ? 'Step 1: Upload your DID document'
25 : 'Step 2: Update your DID document'
26 )
27
28 const description = $derived(
29 type === 'initial'
30 ? 'Copy the JSON below and save it at:'
31 : 'The PDS has assigned a new signing key for your account. Update your DID document with this new key:'
32 )
33
34 const confirmLabel = $derived(
35 type === 'initial'
36 ? 'I have uploaded the DID document to my domain'
37 : 'I have updated the DID document on my domain'
38 )
39
40 const buttonLabel = $derived(
41 type === 'initial' ? 'Continue' : 'Activate Account'
42 )
43
44 function copyToClipboard() {
45 if (didDocument) {
46 navigator.clipboard.writeText(didDocument)
47 copied = true
48 }
49 }
50
51 function handleConfirm() {
52 if (!confirmed) {
53 flow.setError(`Please confirm you have ${type === 'initial' ? 'uploaded' : 'updated'} the DID document`)
54 return
55 }
56 onConfirm()
57 }
58</script>
59
60<div class="did-doc-step">
61 <div class="warning-box">
62 <strong>{title}</strong>
63 <p>{description}</p>
64 <code class="did-url">https://{flow.extractDomain(flow.info.externalDid || '')}/.well-known/did.json</code>
65 </div>
66
67 <div class="did-doc-display">
68 <pre class="did-doc-code">{didDocument}</pre>
69 <button type="button" class="copy-btn" onclick={copyToClipboard}>
70 {copied ? 'Copied!' : 'Copy to Clipboard'}
71 </button>
72 </div>
73
74 <div class="field">
75 <label class="checkbox-label">
76 <input type="checkbox" bind:checked={confirmed} />
77 <span>{confirmLabel}</span>
78 </label>
79 </div>
80
81 <button onclick={handleConfirm} disabled={flow.state.submitting || !confirmed}>
82 {flow.state.submitting ? (type === 'initial' ? 'Creating account...' : 'Activating...') : buttonLabel}
83 </button>
84
85 {#if onBack}
86 <button type="button" class="secondary" onclick={onBack} disabled={flow.state.submitting}>
87 Back
88 </button>
89 {/if}
90</div>
91
92<style>
93 .did-doc-step {
94 display: flex;
95 flex-direction: column;
96 gap: var(--space-4);
97 }
98
99 .warning-box {
100 padding: var(--space-5);
101 background: var(--warning-bg);
102 border: 1px solid var(--warning-border);
103 border-radius: var(--radius-lg);
104 font-size: var(--text-sm);
105 }
106
107 .warning-box strong {
108 display: block;
109 margin-bottom: var(--space-3);
110 color: var(--warning-text);
111 }
112
113 .warning-box p {
114 margin: 0;
115 color: var(--warning-text);
116 }
117
118 .did-url {
119 display: block;
120 margin-top: var(--space-3);
121 padding: var(--space-3);
122 background: var(--bg-input);
123 border-radius: var(--radius-md);
124 font-size: var(--text-sm);
125 word-break: break-all;
126 }
127
128 .did-doc-display {
129 background: var(--bg-card);
130 border: 1px solid var(--border-color);
131 border-radius: var(--radius-lg);
132 overflow: hidden;
133 }
134
135 .did-doc-code {
136 margin: 0;
137 padding: var(--space-4);
138 background: var(--bg-input);
139 font-size: var(--text-xs);
140 overflow-x: auto;
141 white-space: pre;
142 max-height: 300px;
143 overflow-y: auto;
144 }
145
146 .copy-btn {
147 width: 100%;
148 border-radius: 0;
149 margin: 0;
150 padding: var(--space-3) var(--space-5);
151 font-size: var(--text-sm);
152 }
153
154 .checkbox-label {
155 display: flex;
156 align-items: center;
157 gap: var(--space-3);
158 cursor: pointer;
159 font-weight: var(--font-normal);
160 }
161
162 .checkbox-label input[type="checkbox"] {
163 width: auto;
164 padding: 0;
165 }
166</style>