blob: 713655625fd3d00317fca044ee09985a01d1225a (
plain)
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
|
/* eslint-disable @typescript-eslint/camelcase */
import { BackupStates, ContinentInfo, RecoveryStates } from "anastasis-core";
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
import { useAnastasisContext } from "../../context/anastasis";
import { AnastasisClientFrame, withProcessLabel } from "./index";
export function ContinentSelectionScreen(): VNode {
const reducer = useAnastasisContext()
//FIXME: remove this when #7056 is fixed
const [countryCode, setCountryCode] = useState("")
if (!reducer || !reducer.currentReducerState || !("continents" in reducer.currentReducerState)) {
return <div />
}
const selectContinent = (continent: string): void => {
reducer.transition("select_continent", { continent })
};
const selectCountry = (country: string): void => {
setCountryCode(country)
};
const continentList = reducer.currentReducerState.continents || [];
const countryList = reducer.currentReducerState.countries || [];
const theContinent = reducer.currentReducerState.selected_continent || ""
// const cc = reducer.currentReducerState.selected_country || "";
const theCountry = countryList.find(c => c.code === countryCode)
const selectCountryAction = () => {
//selection should be when the select box changes it value
if (!theCountry) return;
reducer.transition("select_country", {
country_code: countryCode,
currencies: [theCountry.currency],
})
}
const step1 = reducer.currentReducerState.backup_state === BackupStates.ContinentSelecting ||
reducer.currentReducerState.recovery_state === RecoveryStates.ContinentSelecting;
const errors = !theCountry ? "Select a country" : undefined
return (
<AnastasisClientFrame hideNext={errors} title={withProcessLabel(reducer, "Select location")} onNext={selectCountryAction}>
<div class="columns">
<div class="column is-half">
<div class="field">
<label class="label">Continent</label>
<div class="control has-icons-left">
<div class="select " >
<select onChange={(e) => selectContinent(e.currentTarget.value)} value={theContinent} disabled={!step1}>
<option key="none" disabled selected value=""> Choose a continent </option>
{continentList.map(prov => (
<option key={prov.name} value={prov.name}>
{prov.name}
</option>
))}
</select>
<div class="icon is-small is-left">
<i class="mdi mdi-earth" />
</div>
</div>
{!step1 && <span class="control">
<a class="button is-danger" onClick={() => reducer.back()}>
X
</a>
</span>}
</div>
</div>
<div class="field">
<label class="label">Country</label>
<div class="control has-icons-left">
<div class="select" >
<select onChange={(e) => selectCountry((e.target as any).value)} disabled={!theContinent} value={theCountry?.code || ""}>
<option key="none" disabled selected value=""> Choose a country </option>
{countryList.map(prov => (
<option key={prov.name} value={prov.code}>
{prov.name}
</option>
))}
</select>
<div class="icon is-small is-left">
<i class="mdi mdi-earth" />
</div>
</div>
</div>
</div>
{theCountry && <div class="field">
<label class="label">Available currencies:</label>
<div class="control">
<input class="input is-small" type="text" readonly value={theCountry.currency} />
</div>
</div>}
</div>
<div class="column is-half">
<p>
A location will help to define a common information that will be use to locate your secret and a currency
for payments if needed.
</p>
</div>
</div>
</AnastasisClientFrame>
);
}
|