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
|
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;
onBack: () => void;
}
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({ onBack }: Props): VNode {
const [verifying, setVerifying] = useState<{ url: string, provider: BackupBackupProviderTerms } | undefined>(undefined)
if (!verifying) {
return <SetUrlView
onCancel={onBack}
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)
}}
/>
}
return <ConfirmProviderView
provider={verifying.provider}
url={verifying.url}
onCancel={() => {
setVerifying(undefined);
}}
onConfirm={() => {
wxApi.addBackupProvider(verifying.url).then(onBack)
}}
/>
}
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';
import { Button, ButtonPrimary, ErrorBox, Input, LightText, PopupBox, SmallTextLight } from "../components/styled/index";
import { Checkbox } from "../components/Checkbox";
function ErrorMessage({ title, description }: { title?: string, description?: string }) {
const [showErrorDetail, setShowErrorDetail] = useState(false);
if (!title) return null
return <ErrorBox>
<div>
<p>{title}</p>
<button onClick={() => { setShowErrorDetail(v => !v) }} >
<img style={{ height: '1.5em' }} src={arrowDown} />
</button>
</div>
{showErrorDetail && <p>{description}</p>}
</ErrorBox>
}
export function SetUrlView({ initialValue, onCancel, onVerify, withError }: SetUrlViewProps) {
const [value, setValue] = useState<string>(initialValue || "")
const [error, setError] = useState<string | undefined>(withError)
return <PopupBox>
<section>
<h1> Add backup provider</h1>
<ErrorMessage title={error && "Could not get provider information"} description={error} />
<LightText> Backup providers may charge for their service</LightText>
<p>
<Input>
<label>URL</label>
<input type="text" placeholder="https://" value={value} onChange={(e) => setValue(e.currentTarget.value)} />
</Input>
<Input>
<label>Name</label>
<input type="text" disabled />
</Input>
</p>
</section>
<footer style={{ justifyContent: 'space-between' }}>
<Button onClick={onCancel}><i18n.Translate> < Back</i18n.Translate></Button>
<ButtonPrimary
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></ButtonPrimary>
</footer>
</PopupBox>
}
export interface ConfirmProviderViewProps {
provider: BackupBackupProviderTerms,
url: string,
onCancel: () => void;
onConfirm: () => void;
}
export function ConfirmProviderView({ url, provider, onCancel, onConfirm }: ConfirmProviderViewProps) {
const [accepted, setAccepted] = useState(false);
return <PopupBox>
<section>
<h1>Review terms of service</h1>
<div>Provider URL: <a href={url} target="_blank">{url}</a></div>
<SmallTextLight>Please review and accept this provider's terms of service</SmallTextLight>
<h2>1. Pricing</h2>
<p>
{Amounts.isZero(provider.annual_fee) ? 'free of charge' : `${provider.annual_fee} per year of service`}
</p>
<h2>2. Storage</h2>
<p>
{provider.storage_limit_in_megabytes} megabytes of storage per year of service
</p>
<Checkbox label="Accept terms of service" name="terms" onToggle={() => setAccepted(old => !old)} enabled={accepted}/>
</section>
<footer style={{ justifyContent: 'space-between' }}>
<Button onClick={onCancel}><i18n.Translate> < Back</i18n.Translate></Button>
<ButtonPrimary
disabled={!accepted}
onClick={onConfirm}><i18n.Translate>Add provider</i18n.Translate></ButtonPrimary>
</footer>
</PopupBox>
}
|
