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</script>
10
11<div class="key-choice-step">
12 <div class="info-box">
13 <strong>External did:web Setup</strong>
14 <p>
15 To use your own domain ({flow.extractDomain(flow.info.externalDid || '')}) as your identity,
16 you'll need to host a DID document. Choose how you'd like to set up the signing key:
17 </p>
18 </div>
19
20 <div class="key-choice-options">
21 <button
22 class="key-choice-btn"
23 onclick={() => flow.selectKeyMode('reserved')}
24 disabled={flow.state.submitting}
25 >
26 <span class="key-choice-title">Let the PDS generate a key</span>
27 <span class="key-choice-desc">Simpler setup - we'll provide the public key for your DID document</span>
28 </button>
29
30 <button
31 class="key-choice-btn"
32 onclick={() => flow.selectKeyMode('byod')}
33 disabled={flow.state.submitting}
34 >
35 <span class="key-choice-title">I'll provide my own key</span>
36 <span class="key-choice-desc">Advanced - generate a key in your browser for initial authentication</span>
37 </button>
38 </div>
39
40 {#if flow.state.submitting}
41 <p class="loading">Generating key...</p>
42 {/if}
43
44 <button type="button" class="secondary" onclick={() => flow.goBack()} disabled={flow.state.submitting}>
45 Back
46 </button>
47</div>
48
49<style>
50 .key-choice-step {
51 display: flex;
52 flex-direction: column;
53 gap: var(--space-4);
54 }
55
56 .info-box {
57 background: var(--bg-secondary);
58 border: 1px solid var(--border-color);
59 border-radius: var(--radius-lg);
60 padding: var(--space-5);
61 font-size: var(--text-sm);
62 }
63
64 .info-box strong {
65 display: block;
66 margin-bottom: var(--space-3);
67 }
68
69 .info-box p {
70 margin: 0;
71 color: var(--text-secondary);
72 }
73
74 .key-choice-options {
75 display: flex;
76 flex-direction: column;
77 gap: var(--space-3);
78 }
79
80 .key-choice-btn {
81 display: flex;
82 flex-direction: column;
83 align-items: flex-start;
84 gap: var(--space-2);
85 padding: var(--space-5);
86 background: var(--bg-card);
87 border: 2px solid var(--border-color);
88 border-radius: var(--radius-lg);
89 text-align: left;
90 cursor: pointer;
91 transition: border-color 0.2s;
92 }
93
94 .key-choice-btn:hover:not(:disabled) {
95 border-color: var(--accent);
96 }
97
98 .key-choice-btn:disabled {
99 opacity: 0.6;
100 cursor: not-allowed;
101 }
102
103 .key-choice-title {
104 font-weight: var(--font-semibold);
105 color: var(--text-primary);
106 }
107
108 .key-choice-desc {
109 font-size: var(--text-sm);
110 color: var(--text-secondary);
111 }
112
113 .loading {
114 text-align: center;
115 color: var(--text-secondary);
116 }
117</style>