1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
import { AsyncButton } from "../../components/AsyncButton";
import { PhoneNumberInput } from "../../components/fields/NumberInput";
import { useAnastasisContext } from "../../context/anastasis";
import { AddingProviderScreen } from "./AddingProviderScreen";
import { AnastasisClientFrame } from "./index";
export function SecretSelectionScreen(): VNode {
const [selectingVersion, setSelectingVersion] = useState<boolean>(false);
const reducer = useAnastasisContext()
const [manageProvider, setManageProvider] = useState(false)
const currentVersion = (reducer?.currentReducerState
&& ("recovery_document" in reducer.currentReducerState)
&& reducer.currentReducerState.recovery_document?.version) || 0;
if (!reducer) {
return <div>no reducer in context</div>
}
if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) {
return <div>invalid state</div>
}
async function doSelectVersion(p: string, n: number): Promise<void> {
if (!reducer) return Promise.resolve();
return reducer.runTransaction(async (tx) => {
await tx.transition("change_version", {
version: n,
provider_url: p,
});
setSelectingVersion(false);
});
}
const providerList = Object.keys(reducer.currentReducerState.authentication_providers ?? {})
const recoveryDocument = reducer.currentReducerState.recovery_document
if (!recoveryDocument) {
return <ChooseAnotherProviderScreen
providers={providerList} selected=""
onChange={(newProv) => doSelectVersion(newProv, 0)}
/>
}
if (selectingVersion) {
return <SelectOtherVersionProviderScreen providers={providerList}
provider={recoveryDocument.provider_url} version={recoveryDocument.version}
onCancel={() => setSelectingVersion(false)}
onConfirm={doSelectVersion}
/>
}
if (manageProvider) {
return <AddingProviderScreen onCancel={() => setManageProvider(false)} />
}
return (
<AnastasisClientFrame title="Recovery: Select secret">
<div class="columns">
<div class="column">
<div class="box" style={{ border: '2px solid green' }}>
<h1 class="subtitle">{recoveryDocument.provider_url}</h1>
<div class="block">
{currentVersion === 0 ? <p>
Set to recover the latest version
</p> : <p>
Set to recover the version number {currentVersion}
</p>}
</div>
<div class="buttons is-right">
<button class="button" onClick={(e) => setSelectingVersion(true)}>Change secret's version</button>
</div>
</div>
</div>
<div class="column">
<p>Secret found, you can select another version or continue to the challenges solving</p>
<p class="block">
<button class="button is-info" onClick={() => setManageProvider(true)}>
Manage recovery providers
</button>
</p>
</div>
</div>
</AnastasisClientFrame>
);
}
function ChooseAnotherProviderScreen({ providers, selected, onChange }: { selected: string; providers: string[]; onChange: (prov: string) => void }): VNode {
return (
<AnastasisClientFrame hideNext="Recovery document not found" title="Recovery: Problem">
<p>No recovery document found, try with another provider</p>
<div class="field">
<label class="label">Provider</label>
<div class="control is-expanded has-icons-left">
<div class="select is-fullwidth">
<select onChange={(e) => onChange(e.currentTarget.value)} value={selected}>
<option key="none" disabled selected value=""> Choose a provider </option>
{providers.map(prov => (
<option key={prov} value={prov}>
{prov}
</option>
))}
</select>
<div class="icon is-small is-left">
<i class="mdi mdi-earth" />
</div>
</div>
</div>
</div>
</AnastasisClientFrame>
);
}
function SelectOtherVersionProviderScreen({ providers, provider, version, onConfirm, onCancel }: { onCancel: () => void; provider: string; version: number; providers: string[]; onConfirm: (prov: string, v: number) => Promise<void>; }): VNode {
const [otherProvider, setOtherProvider] = useState<string>(provider);
const [otherVersion, setOtherVersion] = useState(version > 0 ? String(version) : "");
return (
<AnastasisClientFrame hideNav title="Recovery: Select secret">
<div class="columns">
<div class="column">
<div class="box">
<h1 class="subtitle">Provider {otherProvider}</h1>
<div class="block">
{version === 0 ? <p>
Set to recover the latest version
</p> : <p>
Set to recover the version number {version}
</p>}
<p>Specify other version below or use the latest</p>
</div>
<div class="field">
<label class="label">Provider</label>
<div class="control is-expanded has-icons-left">
<div class="select is-fullwidth">
<select onChange={(e) => setOtherProvider(e.currentTarget.value)} value={otherProvider}>
<option key="none" disabled selected value=""> Choose a provider </option>
{providers.map(prov => (
<option key={prov} value={prov}>
{prov}
</option>
))}
</select>
<div class="icon is-small is-left">
<i class="mdi mdi-earth" />
</div>
</div>
</div>
</div>
<div class="container">
<PhoneNumberInput
label="Version"
placeholder="version number to recover"
grabFocus
bind={[otherVersion, setOtherVersion]} />
</div>
</div>
<div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
<button class="button" onClick={onCancel}>Cancel</button>
<div class="buttons">
<AsyncButton class="button" onClick={() => onConfirm(otherProvider, 0)}>Use latest</AsyncButton>
<AsyncButton class="button is-info" onClick={() => onConfirm(otherProvider, parseInt(otherVersion, 10))}>Confirm</AsyncButton>
</div>
</div>
</div>
<div class="column">
.
</div>
</div>
</AnastasisClientFrame>
);
}
|
