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 });