]> git.proxmox.com Git - proxmox-backup.git/blob - www/LoginView.js
ae443e0f08cb95ee83b3224bf22b1e276798ceb6
[proxmox-backup.git] / www / LoginView.js
1 Ext.define('PBS.LoginView', {
2 extend: 'Ext.container.Container',
3 xtype: 'loginview',
4
5 controller: {
6 xclass: 'Ext.app.ViewController',
7
8 submitForm: async function() {
9 var me = this;
10 var loginForm = me.lookupReference('loginForm');
11 var unField = me.lookupReference('usernameField');
12 var saveunField = me.lookupReference('saveunField');
13
14 if (!loginForm.isValid()) {
15 return;
16 }
17
18 let params = loginForm.getValues();
19
20 params.username = params.username + '@' + params.realm;
21 delete params.realm;
22
23 if (loginForm.isVisible()) {
24 loginForm.mask(gettext('Please wait...'), 'x-mask-loading');
25 }
26
27 // set or clear username
28 var sp = Ext.state.Manager.getProvider();
29 if (saveunField.getValue() === true) {
30 sp.set(unField.getStateId(), unField.getValue());
31 } else {
32 sp.clear(unField.getStateId());
33 }
34 sp.set(saveunField.getStateId(), saveunField.getValue());
35
36 try {
37 let resp = await PBS.Async.api2({
38 url: '/api2/extjs/access/ticket',
39 params: params,
40 method: 'POST',
41 });
42
43 let data = resp.result.data;
44 if (data.ticket.startsWith("PBS:!tfa!")) {
45 data = await me.performTFAChallenge(data);
46 }
47
48 PBS.Utils.updateLoginData(data);
49 PBS.app.changeView('mainview');
50 } catch (error) {
51 Proxmox.Utils.authClear();
52 loginForm.unmask();
53 Ext.MessageBox.alert(
54 gettext('Error'),
55 gettext('Login failed. Please try again'),
56 );
57 }
58 },
59
60 performTFAChallenge: async function(data) {
61 let me = this;
62
63 let userid = data.username;
64 let ticket = data.ticket;
65 let challenge = JSON.parse(decodeURIComponent(
66 ticket.split(':')[1].slice("!tfa!".length),
67 ));
68
69 let resp = await new Promise((resolve, reject) => {
70 Ext.create('PBS.login.TfaWindow', {
71 userid,
72 ticket,
73 challenge,
74 onResolve: value => resolve(value),
75 onReject: reject,
76 }).show();
77 });
78
79 return resp.result.data;
80 },
81
82 control: {
83 'field[name=username]': {
84 specialkey: function(f, e) {
85 if (e.getKey() === e.ENTER) {
86 var pf = this.lookupReference('passwordField');
87 if (!pf.getValue()) {
88 pf.focus(false);
89 }
90 }
91 },
92 },
93 'field[name=lang]': {
94 change: function(f, value) {
95 var dt = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
96 Ext.util.Cookies.set('PBSLangCookie', value, dt);
97 this.getView().mask(gettext('Please wait...'), 'x-mask-loading');
98 window.location.reload();
99 },
100 },
101 'button[reference=loginButton]': {
102 click: 'submitForm',
103 },
104 'window[reference=loginwindow]': {
105 show: function() {
106 var sp = Ext.state.Manager.getProvider();
107 var checkboxField = this.lookupReference('saveunField');
108 var unField = this.lookupReference('usernameField');
109
110 var checked = sp.get(checkboxField.getStateId());
111 checkboxField.setValue(checked);
112
113 if (checked === true) {
114 var username = sp.get(unField.getStateId());
115 unField.setValue(username);
116 var pwField = this.lookupReference('passwordField');
117 pwField.focus();
118 }
119 },
120 },
121 },
122 },
123
124 plugins: 'viewport',
125
126 layout: {
127 type: 'border',
128 },
129
130 items: [
131 {
132 region: 'north',
133 xtype: 'container',
134 layout: {
135 type: 'hbox',
136 align: 'middle',
137 },
138 margin: '2 5 2 5',
139 height: 38,
140 items: [
141 {
142 xtype: 'proxmoxlogo',
143 prefix: '',
144 },
145 {
146 xtype: 'versioninfo',
147 makeApiCall: false,
148 },
149 ],
150 },
151 {
152 region: 'center',
153 },
154 {
155 xtype: 'window',
156 closable: false,
157 resizable: false,
158 reference: 'loginwindow',
159 autoShow: true,
160 modal: true,
161 width: 400,
162
163 defaultFocus: 'usernameField',
164
165 layout: {
166 type: 'auto',
167 },
168
169 title: gettext('Proxmox Backup Server Login'),
170
171 items: [
172 {
173 xtype: 'form',
174 layout: {
175 type: 'form',
176 },
177 defaultButton: 'loginButton',
178 url: '/api2/extjs/access/ticket',
179 reference: 'loginForm',
180
181 fieldDefaults: {
182 labelAlign: 'right',
183 allowBlank: false,
184 },
185
186 items: [
187 {
188 xtype: 'textfield',
189 fieldLabel: gettext('User name'),
190 name: 'username',
191 itemId: 'usernameField',
192 reference: 'usernameField',
193 stateId: 'login-username',
194 },
195 {
196 xtype: 'textfield',
197 inputType: 'password',
198 fieldLabel: gettext('Password'),
199 name: 'password',
200 itemId: 'passwordField',
201 reference: 'passwordField',
202 },
203 {
204 xtype: 'pmxRealmComboBox',
205 name: 'realm',
206 },
207 {
208 xtype: 'proxmoxLanguageSelector',
209 fieldLabel: gettext('Language'),
210 value: Ext.util.Cookies.get('PBSLangCookie') || Proxmox.defaultLang || 'en',
211 name: 'lang',
212 reference: 'langField',
213 submitValue: false,
214 },
215 ],
216 buttons: [
217 {
218 xtype: 'checkbox',
219 fieldLabel: gettext('Save User name'),
220 name: 'saveusername',
221 reference: 'saveunField',
222 stateId: 'login-saveusername',
223 labelWidth: 250,
224 labelAlign: 'right',
225 submitValue: false,
226 },
227 {
228 text: gettext('Login'),
229 reference: 'loginButton',
230 formBind: true,
231 },
232 ],
233 },
234 ],
235 },
236 ],
237 });
238
239 Ext.define('PBS.login.TfaWindow', {
240 extend: 'Ext.window.Window',
241 mixins: ['Proxmox.Mixin.CBind'],
242
243 title: gettext("Second login factor required"),
244
245 modal: true,
246 resizable: false,
247 width: 512,
248 layout: {
249 type: 'vbox',
250 align: 'stretch',
251 },
252
253 defaultButton: 'tfaButton',
254
255 viewModel: {
256 data: {
257 canConfirm: false,
258 availabelChallenge: {},
259 },
260 },
261
262 cancelled: true,
263
264 controller: {
265 xclass: 'Ext.app.ViewController',
266
267 init: function(view) {
268 let me = this;
269 let vm = me.getViewModel();
270
271 if (!view.userid) {
272 throw "no userid given";
273 }
274 if (!view.ticket) {
275 throw "no ticket given";
276 }
277 const challenge = view.challenge;
278 if (!challenge) {
279 throw "no challenge given";
280 }
281
282 let lastTabId = me.getLastTabUsed();
283 let initialTab = -1, i = 0;
284 for (const k of ['webauthn', 'totp', 'recovery']) {
285 const available = !!challenge[k];
286 vm.set(`availabelChallenge.${k}`, available);
287
288 if (available) {
289 if (i === lastTabId) {
290 initialTab = i;
291 } else if (initialTab < 0) {
292 initialTab = i;
293 }
294 }
295 i++;
296 }
297 view.down('tabpanel').setActiveTab(initialTab);
298
299 if (challenge.recovery) {
300 me.lookup('availableRecovery').update(Ext.String.htmlEncode(
301 gettext('Available recovery keys: ') + view.challenge.recovery.join(', '),
302 ));
303 me.lookup('availableRecovery').setVisible(true);
304 if (view.challenge.recovery.length <= 3) {
305 me.lookup('recoveryLow').setVisible(true);
306 }
307 }
308
309 if (challenge.webauthn) {
310 let _promise = me.loginWebauthn();
311 }
312 },
313 control: {
314 'tabpanel': {
315 tabchange: function(tabPanel, newCard, oldCard) {
316 // for now every TFA method has at max one field, so keep it simple..
317 let oldField = oldCard.down('field');
318 if (oldField) {
319 oldField.setDisabled(true);
320 }
321 let newField = newCard.down('field');
322 if (newField) {
323 newField.setDisabled(false);
324 newField.focus();
325 newField.validate();
326 }
327 this.saveLastTabUsed(tabPanel, newCard);
328 },
329 },
330 'field': {
331 validitychange: function(field, valid) {
332 // triggers only for enabled fields and we disable the one from the
333 // non-visible tab, so we can just directly use the valid param
334 this.getViewModel().set('canConfirm', valid);
335 },
336 },
337 },
338
339 saveLastTabUsed: function(tabPanel, card) {
340 let id = tabPanel.items.indexOf(card);
341 window.localStorage.setItem('PBS.TFALogin.lastTab', JSON.stringify({ id }));
342 },
343
344 getLastTabUsed: function() {
345 let data = window.localStorage.getItem('PBS.TFALogin.lastTab');
346 if (typeof data === 'string') {
347 let last = JSON.parse(data);
348 return last.id;
349 }
350 return null;
351 },
352
353 onClose: function() {
354 let me = this;
355 let view = me.getView();
356
357 if (!view.cancelled) {
358 return;
359 }
360
361 view.onReject();
362 },
363
364 cancel: function() {
365 this.getView().close();
366 },
367
368 loginTotp: function() {
369 let me = this;
370
371 let code = me.lookup('totp').getValue();
372 let _promise = me.finishChallenge(`totp:${code}`);
373 },
374
375 loginWebauthn: async function() {
376 let me = this;
377 let view = me.getView();
378
379 me.lookup('webAuthnWaiting').setVisible(true);
380
381 let challenge = view.challenge.webauthn;
382
383 // Byte array fixup, keep challenge string:
384 let challenge_str = challenge.publicKey.challenge;
385 challenge.publicKey.challenge = PBS.Utils.base64url_to_bytes(challenge_str);
386 for (const cred of challenge.publicKey.allowCredentials) {
387 cred.id = PBS.Utils.base64url_to_bytes(cred.id);
388 }
389
390 let controller = new AbortController();
391 challenge.signal = controller.signal;
392
393 let hwrsp;
394 try {
395 //Promise.race( ...
396 hwrsp = await navigator.credentials.get(challenge);
397 } catch (error) {
398 view.onReject(error);
399 return;
400 } finally {
401 let waitingMessage = me.lookup('webAuthnWaiting');
402 if (waitingMessage) {
403 waitingMessage.setVisible(false);
404 }
405 }
406
407 let response = {
408 id: hwrsp.id,
409 type: hwrsp.type,
410 challenge: challenge_str,
411 rawId: PBS.Utils.bytes_to_base64url(hwrsp.rawId),
412 response: {
413 authenticatorData: PBS.Utils.bytes_to_base64url(
414 hwrsp.response.authenticatorData,
415 ),
416 clientDataJSON: PBS.Utils.bytes_to_base64url(hwrsp.response.clientDataJSON),
417 signature: PBS.Utils.bytes_to_base64url(hwrsp.response.signature),
418 },
419 };
420
421 await me.finishChallenge("webauthn:" + JSON.stringify(response));
422 },
423
424 loginRecovery: function() {
425 let me = this;
426
427 let key = me.lookup('recoveryKey').getValue();
428 let _promise = me.finishChallenge(`recovery:${key}`);
429 },
430
431 loginTFA: function() {
432 let me = this;
433 let view = me.getView();
434 let tfaPanel = view.down('tabpanel').getActiveTab();
435 me[tfaPanel.handler]();
436 },
437
438 finishChallenge: function(password) {
439 let me = this;
440 let view = me.getView();
441 view.cancelled = false;
442
443 let params = {
444 username: view.userid,
445 'tfa-challenge': view.ticket,
446 password,
447 };
448
449 let resolve = view.onResolve;
450 let reject = view.onReject;
451 view.close();
452
453 return PBS.Async.api2({
454 url: '/api2/extjs/access/ticket',
455 method: 'POST',
456 params,
457 })
458 .then(resolve)
459 .catch(reject);
460 },
461 },
462
463 listeners: {
464 close: 'onClose',
465 },
466
467 items: [{
468 xtype: 'tabpanel',
469 region: 'center',
470 layout: 'fit',
471 bodyPadding: 10,
472 stateId: 'pbs-tfa-login-panel', // FIXME: do manually - get/setState miss
473 stateful: true,
474 stateEvents: ['tabchange'],
475 items: [
476 {
477 xtype: 'panel',
478 title: 'WebAuthn',
479 iconCls: 'fa fa-fw fa-shield',
480 handler: 'loginWebauthn',
481 bind: {
482 disabled: '{!availabelChallenge.webauthn}',
483 },
484 items: [
485 {
486 xtype: 'box',
487 html: `<i class="fa fa-refresh fa-spin fa-fw"></i>` +
488 gettext('Please insert your authenticator device and press its button'),
489 },
490 {
491 xtype: 'box',
492 html: gettext('Waiting for second factor.'),
493 reference: 'webAuthnWaiting',
494 hidden: true,
495 },
496 ],
497 },
498 {
499 xtype: 'panel',
500 title: gettext('TOTP App'),
501 iconCls: 'fa fa-fw fa-clock-o',
502 handler: 'loginTotp',
503 bind: {
504 disabled: '{!availabelChallenge.totp}',
505 },
506 items: [
507 {
508 xtype: 'textfield',
509 fieldLabel: gettext('Please enter your TOTP verification code'),
510 labelWidth: 300,
511 name: 'totp',
512 disabled: true,
513 reference: 'totp',
514 allowBlank: false,
515 regex: /^[0-9]{6}$/,
516 regexText: 'TOTP codes consist of six decimal digits',
517 },
518 ],
519 },
520 {
521 xtype: 'panel',
522 title: gettext('Recovery Key'),
523 iconCls: 'fa fa-fw fa-file-text-o',
524 handler: 'loginRecovery',
525 bind: {
526 disabled: '{!availabelChallenge.recovery}',
527 },
528 items: [
529 {
530 xtype: 'box',
531 reference: 'availableRecovery',
532 hidden: true,
533 },
534 {
535 xtype: 'textfield',
536 fieldLabel: gettext('Please enter one of your single-use recovery keys'),
537 labelWidth: 300,
538 name: 'recoveryKey',
539 disabled: true,
540 reference: 'recoveryKey',
541 allowBlank: false,
542 regex: /^[0-9a-f]{4}(-[0-9a-f]{4}){3}$/,
543 regexText: 'Does not looks like a valid recovery key',
544 },
545 {
546 xtype: 'box',
547 reference: 'recoveryInfo',
548 hidden: true, // FIXME: remove this?
549 html: gettext('Note that each recovery code can only be used once!'),
550 },
551 {
552 xtype: 'box',
553 reference: 'recoveryLow',
554 hidden: true,
555 html: '<i class="fa fa-exclamation-triangle warning"></i>'
556 + gettext('Less than {0} recovery keys available. Please generate a new set!'),
557 },
558 ],
559 },
560 ],
561 }],
562
563 buttons: [
564 {
565 text: gettext('Confirm Second Factor'),
566 handler: 'loginTFA',
567 reference: 'tfaButton',
568 disabled: true,
569 bind: {
570 disabled: '{!canConfirm}',
571 },
572 },
573 ],
574 });