-
Notifications
You must be signed in to change notification settings - Fork 96
/
account-edit.component.html
234 lines (234 loc) · 13.5 KB
/
account-edit.component.html
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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<fieldset [disabled]="(processing$ | async) || (removing$ | async) || false">
<form [formGroup]="form" (ngSubmit)="submit()" novalidate class="form-group">
<div class="rounded mb-2">
<div class="d-inline-block">
<span *ngIf="account; else label" [attr.data-login]="account.login">{{ account.login }}</span>
<ng-template #label>Add Account</ng-template>
</div>
<div class="custom-control custom-switch float-md-right">
<input type="checkbox" class="custom-control-input" formControlName="database" id="databaseCheckbox">
<label class="custom-control-label" for="databaseCheckbox">
Local store
<i class="fa fa-info-circle text-primary"
[popover]="localStorePopoverTemplate" [placement]="'bottom'" container="body" triggers="mouseenter:mouseleave"
></i>
<ng-template #localStorePopoverTemplate>
<p>
The <code>local store</code> feature enables storing your messages in the encrypted <code>database.bin</code> file,
so you could view your messages offline, perform full-text search against them and export them to EML files.
</p>
<p>
Initial data fetching might take a long time, like even hours, depending on the number of emails in the account.
So just wait until data fetching icon on the account handle button stopped blinking in green.
</p>
</ng-template>
<a href="https://github.com/vladimiry/ElectronMail/wiki/FAQ">FAQ</a>
</label>
</div>
</div>
<div class="form-group required">
<ng-template #entryUrlItemTemplate let-item="item" let-index="index">
{{ item.title }}
<div class="badge badge-secondary badge-local">
web client:
</div>
</ng-template>
<div class="clearfix">
<label class="d-block pull-left">API entry point</label>
<div class="pull-right text-muted">
<a href="https://github.com/vladimiry/ElectronMail/issues/29">#29</a>,
<a href="https://github.com/vladimiry/ElectronMail/issues/79">#79</a>,
<a href="https://github.com/vladimiry/ElectronMail/issues/80">#80</a>,
<a href="https://github.com/vladimiry/ElectronMail/issues/164">#164</a>
</div>
</div>
<ng-select [items]="entryUrlItems" [clearable]="false" formControlName="entryUrl" id="accountEditFormEntryUrlField"
bindLabel="title" bindValue="value">
<ng-template ng-label-tmp let-item="item" let-index="index">
<ng-container
[ngTemplateOutlet]="entryUrlItemTemplate" [ngTemplateOutletContext]="{item: item, index: index}"
></ng-container>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<div [attr.entry-url-option-index]="index">
<ng-container
[ngTemplateOutlet]="entryUrlItemTemplate" [ngTemplateOutletContext]="{item: item, index: index}"
></ng-container>
</div>
</ng-template>
</ng-select>
</div>
<div class="row">
<div class="form-group col-sm-6 required" *ngIf="!account">
<label>Login</label>
<input type="text" class="form-control" formControlName="login"
[ngClass]="controls.login.dirty ? {'is-invalid': controls.login.invalid, 'is-valid': controls.login.valid} : {}">
</div>
<div class="form-group" [ngClass]="{'col-sm-6': !account, 'col-sm-12': account}">
<label>Password</label>
<input type="password" class="form-control" formControlName="password"
[ngClass]="controls.password.dirty ? {'is-invalid': controls.password.invalid, 'is-valid': controls.password.valid} : {}">
</div>
</div>
<div class="form-group">
<label class="d-block pull-left">
Two-Factor secret key
<i
class="fa fa-info-circle text-warning align-self-center"
container="body"
[placement]="'bottom'"
popover="This is not the one time password your phone generates for you but a secret seed. Please follow the description link for details."
triggers="mouseenter:mouseleave"
></i>
</label>
<a class="d-block pull-right" href="https://github.com/vladimiry/ElectronMail/issues/10">#10</a>
<input type="password" class="form-control" formControlName="twoFactorCode"
[ngClass]="controls.twoFactorCode.dirty ? {'is-invalid': controls.twoFactorCode.invalid, 'is-valid': controls.twoFactorCode.valid} : {}">
</div>
<div class="form-group">
<label class="d-block pull-left">
Mailbox password
<i
class="fa fa-info-circle text-warning align-self-center"
container="body"
[placement]="'bottom'"
popover="This field is only relevant if you have two-password mode enabled for your account. Please follow the description links for details."
triggers="mouseenter:mouseleave"
></i>
</label>
<div class="pull-right">
<a href="https://protonmail.com/support/knowledge-base/switch-two-password-mode/">description</a>,
<a href="https://github.com/vladimiry/ElectronMail/issues/138">#138</a>
</div>
<input type="password" class="form-control" formControlName="mailPassword"
[ngClass]="controls.mailPassword.dirty ? {'is-invalid': controls.mailPassword.invalid, 'is-valid': controls.mailPassword.valid} : {}">
</div>
<accordion class="mb-3">
<accordion-group heading="Extended Options" [isOpen]="false">
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" formControlName="persistentSession" id="persistentSessionCheckbox">
<label class="custom-control-label d-flex" for="persistentSessionCheckbox">
Persistent session
<i
class="fa fa-info-circle text-warning align-self-center ml-1"
container="body"
[placement]="'bottom'"
popover="If option enabled the saved Proton session will be reused on the next app start, so the login form will be skipped."
triggers="mouseenter:mouseleave"
></i>
<span class="badge badge-secondary align-self-center ml-1">experimental</span>
<a class="ml-1" href="https://github.com/vladimiry/ElectronMail/issues/227">#227</a>
</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" formControlName="rotateUserAgent" id="rotateUserAgentCheckbox">
<label class="custom-control-label d-flex" for="rotateUserAgentCheckbox">
User-agent rotation
<i
class="fa fa-info-circle text-warning align-self-center ml-1"
container="body"
[placement]="'bottom'"
popover="App restart required for the option to take effect."
triggers="mouseenter:mouseleave"
></i>
<a class="ml-1" href="https://github.com/vladimiry/ElectronMail/issues/273">#273</a>
</label>
</div>
</div>
<div class="form-group">
<label class="d-block">
Handle button alias
<i
popover="If specified will be displayed in the UI instead of login."
class="fa fa-info-circle text-primary align-self-center"
container="body"
[placement]="'bottom'"
triggers="mouseenter:mouseleave"
></i>
</label>
<input type="text" class="form-control" formControlName="title">
</div>
<div class="row">
<div class="col-md-6 form-group">
<label class="d-block pull-left">
Proxy rules
<i
popover="Rules indicating which proxies to use."
class="fa fa-info-circle text-primary align-self-center"
container="body"
[placement]="'bottom'"
triggers="mouseenter:mouseleave"
></i>
</label>
<a class="d-block pull-right" href="https://www.electronjs.org/docs/api/session#sessetproxyconfig">
info
</a>
<input type="text" class="form-control" formControlName="proxyRules">
</div>
<div class="col-md-6 form-group">
<label class="d-block pull-left">
Proxy bypass rules
<i
popover="Rules indicating which URLs should bypass the proxy settings."
class="fa fa-info-circle text-primary align-self-center"
container="body"
[placement]="'bottom'"
triggers="mouseenter:mouseleave"
></i>
</label>
<a class="d-block pull-right" href="https://www.electronjs.org/docs/api/session#sessetproxyconfig">
info
</a>
<input type="text" class="form-control" formControlName="proxyBypassRules">
</div>
</div>
<div class="mt-3">
<label class="d-block pull-left">
Login delay range (seconds)
<i
popover="The login delay is picked by either time range or account selection triggers. Whichever kicks in first if both values defined."
class="fa fa-info-circle text-warning align-self-center"
container="body"
[placement]="'bottom'"
triggers="mouseenter:mouseleave"
></i>
</label>
<div class="custom-control custom-switch float-md-right">
<input type="checkbox" class="custom-control-input" formControlName="loginDelayUntilSelected" id="loginDelayUntilSelectedCheckbox">
<label class="custom-control-label" for="loginDelayUntilSelectedCheckbox">
Login on account selection
</label>
</div>
<input type="text" class="form-control" formControlName="loginDelaySecondsRange"
[ngClass]="controls.loginDelaySecondsRange.dirty
? {'is-invalid': controls.loginDelaySecondsRange.invalid, 'is-valid': controls.loginDelaySecondsRange.valid}
: {}">
<div
*ngIf="controls.loginDelaySecondsRange.invalid && controls.loginDelaySecondsRange.errors?.errorMsg"
[innerText]="controls.loginDelaySecondsRange.errors?.errorMsg"
class="invalid-feedback"
></div>
</div>
</accordion-group>
</accordion>
<div class="clearfix">
<button class="btn btn-sm btn-outline-danger pull-left" type="button" *ngIf="account" (click)="remove()">
<i class="fa" [ngClass]="{
'fa-spinner fa-pulse fa-fw': (removing$ | async),
'fa-times': !(removing$ | async)
}"></i>
Remove
</button>
<button class="btn btn-sm btn-primary pull-right" type="submit" [disabled]="form.invalid">
<i class="fa" [ngClass]="{
'fa-spinner fa-pulse fa-fw': (processing$ | async),
'fa-check': !(processing$ | async)
}"></i>
{{ account ? "Update" : "Add" }}
</button>
</div>
</form>
</fieldset>