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
|
import { Amounts, BackupBackupProviderTerms, i18n } from "@gnu-taler/taler-util";
import { Fragment, VNode } from "preact";
import { useState } from "preact/hooks";
import * as wxApi from "../wxApi";
interface Props {
currency: string;
}
function getJsonIfOk(r: Response) {
if (r.ok) {
return r.json()
} else {
if (r.status >= 400 && r.status < 500) {
throw new Error(`URL may not be right: (${r.status}) ${r.statusText}`)
} else {
throw new Error(`Try another server: (${r.status}) ${r.statusText || 'internal server error'}`)
}
}
}
export function ProviderAddPage({ }: Props): VNode {
const [verifying, setVerifying] = useState<{ url: string, provider: BackupBackupProviderTerms } | undefined>(undefined)
const [readingTerms, setReadingTerms] = useState<boolean | undefined>(undefined)
const alreadyCheckedTheTerms = readingTerms === false
if (!verifying) {
return <SetUrlView
onCancel={() => {
setVerifying(undefined);
}}
onVerify={(url) => {
return fetch(`${url}/config`)
.catch(e => { throw new Error(`Network error`) })
.then(getJsonIfOk)
.then((provider) => { setVerifying({ url, provider }); return undefined })
.catch((e) => e.message)
}}
/>
}
if (readingTerms) {
return <TermsOfService
onCancel={() => setReadingTerms(undefined)}
onAccept={() => setReadingTerms(false)}
/>
}
return <ConfirmProviderView
provider={verifying.provider}
termsChecked={alreadyCheckedTheTerms}
url={verifying.url}
onCancel={() => {
setVerifying(undefined);
}}
onShowTerms={() => {
setReadingTerms(true)
}}
onConfirm={() => {
wxApi.addBackupProvider(verifying.url).then(_ => history.go(-1))
}}
/>
}
interface TermsOfServiceProps {
onCancel: () => void;
onAccept: () => void;
}
function TermsOfService({ onCancel, onAccept }: TermsOfServiceProps) {
return <div style={{ display: 'flex', flexDirection: 'column' }}>
<section style={{ height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
<div>
Here we will place the complete text of terms of service
</div>
</section>
<footer style={{ marginTop: 'auto', display: 'flex', flexShrink: 0 }}>
<button class="pure-button" onClick={onCancel}><i18n.Translate>cancel</i18n.Translate></button>
<div style={{ width: '100%', flexDirection: 'row', justifyContent: 'flex-end', display: 'flex' }}>
<button class="pure-button" onClick={onAccept}><i18n.Translate>accept</i18n.Translate></button>
</div>
</footer>
</div>
}
export interface SetUrlViewProps {
initialValue?: string;
onCancel: () => void;
onVerify: (s: string) => Promise<string | undefined>;
withError?: string;
}
import arrowDown from '../../static/img/chevron-down.svg';
export function SetUrlView({ initialValue, onCancel, onVerify, withError }: SetUrlViewProps) {
const [value, setValue] = useState<string>(initialValue || "")
const [error, setError] = useState<string | undefined>(withError)
const [showErrorDetail, setShowErrorDetail] = useState(false);
return <div style={{ display: 'flex', flexDirection: 'column' }}>
<section style={{ height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
<div>
Add backup provider for saving coins
</div>
<h3>Backup provider URL</h3>
<div style={{ width: '3em', display: 'inline-block' }}>https://</div>
<input style={{ width: 'calc(100% - 8px - 4em)', marginLeft: 5 }} value={value} onChange={(e) => setValue(e.currentTarget.value)} />
<p>
Backup providers may charge for their service
</p>
{error && <Fragment>
<div class="errorbox" style={{ marginTop: 10 }} >
<div style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', display: 'flex' }}>
<p style={{ alignSelf: 'center' }}>Could not get provider information</p>
<p>
<button style={{ fontSize: '100%', padding: 0, height: 28, width: 28 }} onClick={() => { setShowErrorDetail(v => !v) }} >
<img style={{ height: '1.5em' }} src={arrowDown} />
</button>
</p>
</div>
{showErrorDetail && <div>{error}</div>}
</div>
</Fragment>
}
</section>
<footer style={{ marginTop: 'auto', display: 'flex', flexShrink: 0 }}>
<button class="pure-button" onClick={onCancel}><i18n.Translate>cancel</i18n.Translate></button>
<div style={{ width: '100%', flexDirection: 'row', justifyContent: 'flex-end', display: 'flex' }}>
<button class="pure-button button-secondary" style={{ marginLeft: 5 }}
disabled={!value}
onClick={() => {
let url = value.startsWith('http://') || value.startsWith('https://') ? value : `https://${value}`
url = url.endsWith('/') ? url.substring(0, url.length - 1) : url;
return onVerify(url).then(r => r ? setError(r) : undefined)
}}><i18n.Translate>next</i18n.Translate></button>
</div>
</footer>
</div>
}
export interface ConfirmProviderViewProps {
provider: BackupBackupProviderTerms,
url: string,
onCancel: () => void;
onConfirm: () => void;
onShowTerms: () => void;
termsChecked: boolean;
}
export function ConfirmProviderView({ url, termsChecked, onShowTerms, provider, onCancel, onConfirm }: ConfirmProviderViewProps) {
return <div style={{ display: 'flex', flexDirection: 'column' }}>
<section style={{ height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
<div>Verify provider service terms for <b>{url}</b> backup provider</div>
<p>
{Amounts.isZero(provider.annual_fee) ? 'free of charge' : provider.annual_fee} for a year of backup service
</p>
<p>
{provider.storage_limit_in_megabytes} megabytes of storage
</p>
</section>
<footer style={{ marginTop: 'auto', display: 'flex', flexShrink: 0 }}>
<button class="pure-button" onClick={onCancel}>
<i18n.Translate>cancel</i18n.Translate>
</button>
<div style={{ width: '100%', flexDirection: 'row', justifyContent: 'flex-end', display: 'flex' }}>
{termsChecked ?
<button class="pure-button button-success" style={{ marginLeft: 5 }} onClick={onConfirm}>
<i18n.Translate>confirm</i18n.Translate>
</button> :
<button class="pure-button button-success" style={{ marginLeft: 5 }} onClick={onShowTerms}>
<i18n.Translate>review terms</i18n.Translate>
</button>
}
</div>
</footer>
</div>
}
|
