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.U2FChallenge)) {
  41                         me.perform_u2f(data);
  42                     } else {
  43                         me.success(data);
  44                     }
  45                 }
  46             });
  47
  48         },
  49         failure: function(resp) {
  50             var me = this;
  51             var view = me.getView();
  52             view.el.unmask();
  53             var handler = function() {
  54                 var uf = me.lookupReference('usernameField');
  55                 uf.focus(true, true);
  56             };
  57
  58             Ext.MessageBox.alert(gettext('Error'),
  59                                  gettext("Login failed. Please try again"),
  60                                  handler);
  61         },
  62         success: function(data) {
  63             var me = this;
  64             var view = me.getView();
  65             var handler = view.handler || Ext.emptyFn;
  66             handler.call(me, data);
  67             view.close();
  68         },
  69
  70         perform_u2f: function(data) {
  71             var me = this;
  72             // Store first factor login information first:
  73             data.LoggedOut = true;
  74             Proxmox.Utils.setAuthData(data);
  75             // Show the message:
  76             var msg = Ext.Msg.show({
  77                 title: 'U2F: '+gettext('Verification'),
  78                 message: gettext('Please press the button on your U2F Device'),
  79                 buttons: []
  80             });
  81             var chlg = data.U2FChallenge;
  82             var key = {
  83                 version: chlg.version,
  84                 keyHandle: chlg.keyHandle
  85             };
  86             u2f.sign(chlg.appId, chlg.challenge, [key], function(res) {
  87                 msg.close();
  88                 if (res.errorCode) {
  89                     Proxmox.Utils.authClear();
  90                     Ext.Msg.alert(gettext('Error'), "U2F Error: "+res.errorCode);
  91                     return;
  92                 }
  93                 delete res.errorCode;
  94                 me.finish_u2f(res);
  95             });
  96         },
  97         finish_u2f: function(res) {
  98             var me = this;
  99             var view = me.getView();
 100             view.el.mask(gettext('Please wait...'), 'x-mask-loading');
 101             var params = { response: JSON.stringify(res) };
 102             Proxmox.Utils.API2Request({
 103                 url: '/api2/extjs/access/tfa',
 104                 params: params,
 105                 method: 'POST',
 106                 timeout: 5000, // it'll delay both success & failure
 107                 success: function(resp, opts) {
 108                     view.el.unmask();
 109                     // Fill in what we copy over from the 1st factor:
 110                     var data = resp.result.data;
 111                     data.CSRFPreventionToken = Proxmox.CSRFPreventionToken;
 112                     data.username = Proxmox.UserName;
 113                     // Finish logging in:
 114                     me.success(data);
 115                 },
 116                 failure: function(resp, opts) {
 117                     Proxmox.Utils.authClear();
 118                     me.failure(resp);
 119                 }
 120             });
 121         },
 122
 123         control: {
 124             'field[name=username]': {
 125                 specialkey: function(f, e) {
 126                     if (e.getKey() === e.ENTER) {
 127                         var pf = this.lookupReference('passwordField');
 128                         if (!pf.getValue()) {
 129                             pf.focus(false);
 130                         }
 131                     }
 132                 }
 133             },
 134             'field[name=realm]': {
 135                 change: function(f, value) {
 136                     var otp_field = this.lookupReference('otpField');
 137                     if (f.needOTP(value)) {
 138                         otp_field.setVisible(true);
 139                         otp_field.setDisabled(false);
 140                     } else {
 141                         otp_field.setVisible(false);
 142                         otp_field.setDisabled(true);
 143                     }
 144                 }
 145             },
 146             'field[name=lang]': {
 147                 change: function(f, value) {
 148                     var dt = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
 149                     Ext.util.Cookies.set('PVELangCookie', value, dt);
 150                     this.getView().mask(gettext('Please wait...'), 'x-mask-loading');
 151                     window.location.reload();
 152                 }
 153             },
 154             'button[reference=loginButton]': {
 155                 click: 'onLogon'
 156             },
 157             '#': {
 158                 show: function() {
 159                     var sp = Ext.state.Manager.getProvider();
 160                     var checkboxField = this.lookupReference('saveunField');
 161                     var unField = this.lookupReference('usernameField');
 162
 163                     var checked = sp.get(checkboxField.getStateId());
 164                     checkboxField.setValue(checked);
 165
 166                     if(checked === true) {
 167                         var username = sp.get(unField.getStateId());
 168                         unField.setValue(username);
 169                         var pwField = this.lookupReference('passwordField');
 170                         pwField.focus();
 171                     }
 172                 }
 173             }
 174         }
 175     },
 176
 177     width: 400,
 178
 179     modal: true,
 180
 181     border: false,
 182
 183     draggable: true,
 184
 185     closable: false,
 186
 187     resizable: false,
 188
 189     layout: 'auto',
 190
 191     title: gettext('Proxmox VE Login'),
 192
 193     defaultFocus: 'usernameField',
 194
 195     defaultButton: 'loginButton',
 196
 197     items: [{
 198         xtype: 'form',
 199         layout: 'form',
 200         url: '/api2/extjs/access/ticket',
 201         reference: 'loginForm',
 202
 203         fieldDefaults: {
 204             labelAlign: 'right',
 205             allowBlank: false
 206         },
 207
 208         items: [
 209             {
 210                 xtype: 'textfield',
 211                 fieldLabel: gettext('User name'),
 212                 name: 'username',
 213                 itemId: 'usernameField',
 214                 reference: 'usernameField',
 215                 stateId: 'login-username'
 216             },
 217             {
 218                 xtype: 'textfield',
 219                 inputType: 'password',
 220                 fieldLabel: gettext('Password'),
 221                 name: 'password',
 222                 reference: 'passwordField'
 223             },
 224             {
 225                 xtype: 'textfield',
 226                 fieldLabel: gettext('OTP'),
 227                 name: 'otp',
 228                 reference: 'otpField',
 229                 allowBlank: false,
 230                 hidden: true
 231             },
 232             {
 233                 xtype: 'pveRealmComboBox',
 234                 name: 'realm'
 235             },
 236             {
 237                 xtype: 'proxmoxLanguageSelector',
 238                 fieldLabel: gettext('Language'),
 239                 value: Ext.util.Cookies.get('PVELangCookie') || Proxmox.defaultLang || 'en',
 240                 name: 'lang',
 241                 reference: 'langField',
 242                 submitValue: false
 243             }
 244         ],
 245         buttons: [
 246             {
 247                 xtype: 'checkbox',
 248                 fieldLabel: gettext('Save User name'),
 249                 name: 'saveusername',
 250                 reference: 'saveunField',
 251                 stateId: 'login-saveusername',
 252                 labelWidth: 'auto',
 253                 labelAlign: 'right',
 254                 submitValue: false
 255             },
 256             {
 257                 text: gettext('Login'),
 258                 reference: 'loginButton'
 259             }
 260         ]
 261     }]
 262  });