An easy-to-host PDS on the ATProtocol, iPhone and MacOS. Maintain control of your keys and data, always.
feat: add RecoveryInfoScreen component showing Shamir share status
Implements read-only display of recovery share status for MM-150.AC3:
- Share 1 shows live Keychain check result (✓ or ✗)
- Share 2 shows static relay custody fact (always ✓)
- Share 3 shows manual backup reminder (clipboard icon)
- Back button returns to home screen
Verifies MM-150.AC3.11, AC3.12, AC3.13, AC3.14
+178
-1
+178
-1
apps/identity-wallet/src/lib/components/home/RecoveryInfoScreen.svelte
+178
-1
apps/identity-wallet/src/lib/components/home/RecoveryInfoScreen.svelte
···
8
8
} = $props();
9
9
</script>
10
10
11
-
<div>RecoveryInfoScreen stub — replaced by Phase 6</div>
11
+
<div class="screen">
12
+
<div class="header">
13
+
<button class="back-btn" onclick={onback} aria-label="Back">‹ Back</button>
14
+
<h2 class="title">Recovery Info</h2>
15
+
</div>
16
+
17
+
<p class="description">
18
+
Your identity can be recovered with any 2 of 3 recovery shares.
19
+
</p>
20
+
21
+
<!-- Share 1 -->
22
+
<div class="share-row" class:share-row--ok={share1InKeychain} class:share-row--err={!share1InKeychain}>
23
+
<div class="share-icon" class:share-icon--ok={share1InKeychain} class:share-icon--err={!share1InKeychain} aria-hidden="true">
24
+
{share1InKeychain ? '✓' : '✗'}
25
+
</div>
26
+
<div class="share-info">
27
+
<p class="share-label">Share 1 of 3</p>
28
+
<p class="share-desc">
29
+
{share1InKeychain
30
+
? 'Saved to iCloud Keychain — backed up automatically'
31
+
: 'Not found in Keychain — this device may have lost it'}
32
+
</p>
33
+
</div>
34
+
</div>
35
+
36
+
<!-- Share 2 -->
37
+
<div class="share-row share-row--ok">
38
+
<div class="share-icon share-icon--ok" aria-hidden="true">✓</div>
39
+
<div class="share-info">
40
+
<p class="share-label">Share 2 of 3</p>
41
+
<p class="share-desc">Held by the relay — stored during account setup</p>
42
+
</div>
43
+
</div>
44
+
45
+
<!-- Share 3 -->
46
+
<div class="share-row share-row--neutral">
47
+
<div class="share-icon share-icon--neutral" aria-hidden="true">📋</div>
48
+
<div class="share-info">
49
+
<p class="share-label">Share 3 of 3</p>
50
+
<p class="share-desc">Your manual backup — shown during setup. Keep it safe.</p>
51
+
</div>
52
+
</div>
53
+
54
+
<div class="note">
55
+
<p>Any 2 shares together can restore your identity. Keep Share 3 somewhere safe and offline.</p>
56
+
</div>
57
+
</div>
58
+
59
+
<style>
60
+
.screen {
61
+
display: flex;
62
+
flex-direction: column;
63
+
height: 100%;
64
+
padding: 2rem 1.5rem;
65
+
gap: 1.25rem;
66
+
overflow-y: auto;
67
+
}
68
+
69
+
.header {
70
+
display: flex;
71
+
align-items: center;
72
+
gap: 0.75rem;
73
+
}
74
+
75
+
.back-btn {
76
+
background: none;
77
+
border: none;
78
+
font-size: 1rem;
79
+
color: #007aff;
80
+
cursor: pointer;
81
+
padding: 0;
82
+
font-weight: 500;
83
+
white-space: nowrap;
84
+
}
85
+
86
+
.title {
87
+
font-size: 1.2rem;
88
+
font-weight: 700;
89
+
color: #111827;
90
+
margin: 0;
91
+
}
92
+
93
+
.description {
94
+
font-size: 0.9rem;
95
+
color: #6b7280;
96
+
margin: 0;
97
+
line-height: 1.5;
98
+
}
99
+
100
+
.share-row {
101
+
display: flex;
102
+
align-items: flex-start;
103
+
gap: 0.75rem;
104
+
padding: 1rem 1.25rem;
105
+
border-radius: 12px;
106
+
border: 1px solid transparent;
107
+
}
108
+
109
+
.share-row--ok {
110
+
background: #f0fdf4;
111
+
border-color: #bbf7d0;
112
+
}
113
+
114
+
.share-row--err {
115
+
background: #fef2f2;
116
+
border-color: #fecaca;
117
+
}
118
+
119
+
.share-row--neutral {
120
+
background: #f9fafb;
121
+
border-color: #d1d5db;
122
+
}
123
+
124
+
.share-icon {
125
+
width: 36px;
126
+
height: 36px;
127
+
border-radius: 50%;
128
+
display: flex;
129
+
align-items: center;
130
+
justify-content: center;
131
+
font-size: 1rem;
132
+
font-weight: 700;
133
+
flex-shrink: 0;
134
+
}
135
+
136
+
.share-icon--ok {
137
+
background: #22c55e;
138
+
color: #fff;
139
+
}
140
+
141
+
.share-icon--err {
142
+
background: #ef4444;
143
+
color: #fff;
144
+
}
145
+
146
+
.share-icon--neutral {
147
+
background: #e5e7eb;
148
+
color: #374151;
149
+
font-size: 1.1rem;
150
+
}
151
+
152
+
.share-info {
153
+
display: flex;
154
+
flex-direction: column;
155
+
gap: 0.2rem;
156
+
}
157
+
158
+
.share-label {
159
+
font-size: 0.8rem;
160
+
font-weight: 600;
161
+
color: #374151;
162
+
margin: 0;
163
+
text-transform: uppercase;
164
+
letter-spacing: 0.04em;
165
+
}
166
+
167
+
.share-desc {
168
+
font-size: 0.875rem;
169
+
color: #6b7280;
170
+
margin: 0;
171
+
line-height: 1.4;
172
+
}
173
+
174
+
.note {
175
+
background: #f9fafb;
176
+
border: 1px solid #d1d5db;
177
+
border-radius: 12px;
178
+
padding: 1rem 1.25rem;
179
+
margin-top: auto;
180
+
}
181
+
182
+
.note p {
183
+
font-size: 0.85rem;
184
+
color: #6b7280;
185
+
margin: 0;
186
+
line-height: 1.5;
187
+
}
188
+
</style>