www/manager6/window/LoginWindow.js

   1 /*global u2f*/
   2 Ext.define('PVE.window.LoginWindow', {
   3     extend: 'Ext.window.Window',
   4
   5     controller: {
   6
   7         xclass: 'Ext.app.ViewController',
   8
   9         onLogon: function() {
  10             var me = this;
  11
  12             var form = this.lookupReference('loginForm');
  13             var unField = this.lookupReference('usernameField');
  14             var saveunField = this.lookupReference('saveunField');
  15             var view = this.getView();
  16
  17             if (!form.isValid()) {
  18                 return;
  19             }
  20
  21             view.el.mask(gettext('Please wait...'), 'x-mask-loading');
  22
  23             // set or clear username
  24             var sp = Ext.state.Manager.getProvider();
  25             if (saveunField.getValue() === true) {
  26                 sp.set(unField.getStateId(), unField.getValue());
  27             } else {
  28                 sp.clear(unField.getStateId());
  29             }
  30             sp.set(saveunField.getStateId(), saveunField.getValue());
  31
  32             form.submit({
  33                 failure: function(f, resp) {
  34                     me.failure(resp);
  35                 },
  36                 success: function(f, resp) {
  37                     view.el.unmask();
  38
  39                     var data = resp.result.data;
  40                     if (Ext.isDefined(data.NeedTFA)) {
  41                         // Store first factor login information first:
  42                         data.LoggedOut = true;
  43                         Proxmox.Utils.setAuthData(data);
  44
  45                         if (Ext.isDefined(data.U2FChallenge)) {
  46                             me.perform_u2f(data);
  47                         } else {
  48                             me.perform_otp();
  49                         }
  50                     } else {
  51                         me.success(data);
  52                     }
  53                 },
  54             });
  55         },
  56         failure: function(resp) {
  57             var me = this;
  58             var view = me.getView();
  59             view.el.unmask();
  60             var handler = function() {
  61                 var uf = me.lookupReference('usernameField');
  62                 uf.focus(true, true);
  63             };
  64
  65             let emsg = gettext("Login failed. Please try again");
  66
  67             if (resp.failureType === "connect") {
  68                 emsg = gettext("Connection failure. Network error or Proxmox VE services not running?");
  69             }
  70
  71             Ext.MessageBox.alert(gettext('Error'), emsg, handler);
  72         },
  73         success: function(data) {
  74             var me = this;
  75             var view = me.getView();
  76             var handler = view.handler || Ext.emptyFn;
  77             handler.call(me, data);
  78             view.close();
  79         },
  80
  81         perform_otp: function() {
  82             var me = this;
  83             var win = Ext.create('PVE.window.TFALoginWindow', {
  84                 onLogin: function(value) {
  85                     me.finish_tfa(value);
  86                 },
  87                 onCancel: function() {
  88                     Proxmox.LoggedOut = false;
  89                     Proxmox.Utils.authClear();
  90                     me.getView().show();
  91                 },
  92             });
  93             win.show();
  94         },
  95
  96         perform_u2f: function(data) {
  97             var me = this;
  98             // Show the message:
  99             var msg = Ext.Msg.show({
 100                 title: 'U2F: '+gettext('Verification'),
 101                 message: gettext('Please press the button on your U2F Device'),
 102                 buttons: [],
 103             });
 104             var chlg = data.U2FChallenge;
 105             var key = {
 106                 version: chlg.version,
 107                 keyHandle: chlg.keyHandle,
 108             };
 109             u2f.sign(chlg.appId, chlg.challenge, [key], function(res) {
 110                 msg.close();
 111                 if (res.errorCode) {
 112                     Proxmox.Utils.authClear();
 113                     Ext.Msg.alert(gettext('Error'), PVE.Utils.render_u2f_error(res.errorCode));
 114                     return;
 115                 }
 116                 delete res.errorCode;
 117                 me.finish_tfa(JSON.stringify(res));
 118             });
 119         },
 120         finish_tfa: function(res) {
 121             var me = this;
 122             var view = me.getView();
 123             view.el.mask(gettext('Please wait...'), 'x-mask-loading');
 124             var params = { response: res };
 125             Proxmox.Utils.API2Request({
 126                 url: '/api2/extjs/access/tfa',
 127                 params: params,
 128                 method: 'POST',
 129                 timeout: 5000, // it'll delay both success & failure
 130                 success: function(resp, opts) {
 131                     view.el.unmask();
 132                     // Fill in what we copy over from the 1st factor:
 133                     var data = resp.result.data;
 134                     data.CSRFPreventionToken = Proxmox.CSRFPreventionToken;
 135                     data.username = Proxmox.UserName;
 136                     // Finish logging in:
 137                     me.success(data);
 138                 },
 139                 failure: function(resp, opts) {
 140                     Proxmox.Utils.authClear();
 141                     me.failure(resp);
 142                 },
 143             });
 144         },
 145
 146         control: {
 147             'field[name=username]': {
 148                 specialkey: function(f, e) {
 149                     if (e.getKey() === e.ENTER) {
 150                         var pf = this.lookupReference('passwordField');
 151                         if (!pf.getValue()) {
 152                             pf.focus(false);
 153                         }
 154                     }
 155                 },
 156             },
 157             'field[name=lang]': {
 158                 change: function(f, value) {
 159                     var dt = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
 160                     Ext.util.Cookies.set('PVELangCookie', value, dt);
 161                     this.getView().mask(gettext('Please wait...'), 'x-mask-loading');
 162                     window.location.reload();
 163                 },
 164             },
 165             'button[reference=loginButton]': {
 166                 click: 'onLogon',
 167             },
 168             '#': {
 169                 show: function() {
 170                     var sp = Ext.state.Manager.getProvider();
 171                     var checkboxField = this.lookupReference('saveunField');
 172                     var unField = this.lookupReference('usernameField');
 173
 174                     var checked = sp.get(checkboxField.getStateId());
 175                     checkboxField.setValue(checked);
 176
 177                     if (checked === true) {
 178                         var username = sp.get(unField.getStateId());
 179                         unField.setValue(username);
 180                         var pwField = this.lookupReference('passwordField');
 181                         pwField.focus();
 182                     }
 183                 },
 184             },
 185         },
 186     },
 187
 188     width: 400,
 189     modal: true,
 190     border: false,
 191     draggable: true,
 192     closable: false,
 193     resizable: false,
 194     layout: 'auto',
 195
 196     title: gettext('Proxmox VE Login'),
 197
 198     defaultFocus: 'usernameField',
 199     defaultButton: 'loginButton',
 200
 201     items: [{
 202         xtype: 'form',
 203         layout: 'form',
 204         url: '/api2/extjs/access/ticket',
 205         reference: 'loginForm',
 206
 207         fieldDefaults: {
 208             labelAlign: 'right',
 209             allowBlank: false,
 210         },
 211
 212         items: [
 213             {
 214                 xtype: 'textfield',
 215                 fieldLabel: gettext('User name'),
 216                 name: 'username',
 217                 itemId: 'usernameField',
 218                 reference: 'usernameField',
 219                 stateId: 'login-username',
 220             },
 221             {
 222                 xtype: 'textfield',
 223                 inputType: 'password',
 224                 fieldLabel: gettext('Password'),
 225                 name: 'password',
 226                 reference: 'passwordField',
 227             },
 228             {
 229                 xtype: 'pmxRealmComboBox',
 230                 name: 'realm',
 231             },
 232             {
 233                 xtype: 'proxmoxLanguageSelector',
 234                 fieldLabel: gettext('Language'),
 235                 value: Ext.util.Cookies.get('PVELangCookie') || Proxmox.defaultLang || 'en',
 236                 name: 'lang',
 237                 reference: 'langField',
 238                 submitValue: false,
 239             },
 240         ],
 241         buttons: [
 242             {
 243                 xtype: 'checkbox',
 244                 fieldLabel: gettext('Save User name'),
 245                 name: 'saveusername',
 246                 reference: 'saveunField',
 247                 stateId: 'login-saveusername',
 248                 labelWidth: 250,
 249                 labelAlign: 'right',
 250                 submitValue: false,
 251             },
 252             {
 253                 text: gettext('Login'),
 254                 reference: 'loginButton',
 255             },
 256         ],
 257     }],
 258  });
 259 Ext.define('PVE.window.TFALoginWindow', {
 260     extend: 'Ext.window.Window',
 261
 262     modal: true,
 263     resizable: false,
 264     title: 'Two-Factor Authentication',
 265     layout: 'form',
 266     defaultButton: 'loginButton',
 267     defaultFocus: 'otpField',
 268
 269     controller: {
 270         xclass: 'Ext.app.ViewController',
 271         login: function() {
 272             var me = this;
 273             var view = me.getView();
 274             view.onLogin(me.lookup('otpField').getValue());
 275             view.close();
 276         },
 277         cancel: function() {
 278             var me = this;
 279             var view = me.getView();
 280             view.onCancel();
 281             view.close();
 282         },
 283     },
 284
 285     items: [
 286         {
 287             xtype: 'textfield',
 288             fieldLabel: gettext('Please enter your OTP verification code:'),
 289             name: 'otp',
 290             itemId: 'otpField',
 291             reference: 'otpField',
 292             allowBlank: false,
 293         },
 294     ],
 295
 296     buttons: [
 297         {
 298             text: gettext('Login'),
 299             reference: 'loginButton',
 300             handler: 'login',
 301         },
 302         {
 303             text: gettext('Cancel'),
 304             handler: 'cancel',
 305         },
 306     ],
 307 });