js/LoginView.js

   1 Ext.define('PMG.LoginView', {
   2     extend: 'Ext.container.Container',
   3     xtype: 'loginview',
   4
   5     controller: {
   6         xclass: 'Ext.app.ViewController',
   7
   8         init: function(view) {
   9             let me = this;
  10
  11             let realmfield = me.lookup('realmfield');
  12
  13             me.lookup('quarantineButton').setVisible(!!Proxmox.QuarantineLink);
  14
  15             if (view.targetview !== 'quarantineview') {
  16                 return;
  17             }
  18
  19             // hide save username field for quarantine view
  20             me.lookup('saveunField').setVisible(false);
  21
  22             realmfield.setValue('quarantine');
  23
  24             // try autologin with quarantine ticket from URL
  25
  26             let qs = Ext.Object.fromQueryString(location.search);
  27             if (qs.ticket === undefined) {
  28                 return;
  29             }
  30             let ticket = decodeURIComponent(qs.ticket);
  31             let match = ticket.match(/^PMGQUAR:([^\s:]+):/);
  32             if (!match) {
  33                 return;
  34             }
  35             let username = match[1];
  36             let loginwin = me.lookup('loginwindow');
  37             loginwin.autoShow = false;
  38             loginwin.setVisible(false);
  39             realmfield.setDisabled(true);
  40
  41             me.lookup('usernameField').setValue(username);
  42             me.lookup('passwordField').setValue(ticket);
  43
  44             me.submitForm();
  45         },
  46
  47         submitForm: async function() {
  48             let me = this;
  49             let view = me.getView();
  50             let loginForm = me.lookupReference('loginForm');
  51             var unField = me.lookupReference('usernameField');
  52             var saveunField = me.lookupReference('saveunField');
  53
  54             if (loginForm.isValid()) {
  55                 if (loginForm.isVisible()) {
  56                     loginForm.mask(gettext('Please wait...'), 'x-mask-loading');
  57                 }
  58
  59                 // set or clear username for admin view
  60                 if (view.targetview !== 'quarantineview') {
  61                     var sp = Ext.state.Manager.getProvider();
  62                     if (saveunField.getValue() === true) {
  63                         sp.set(unField.getStateId(), unField.getValue());
  64                     } else {
  65                         sp.clear(unField.getStateId());
  66                     }
  67                     sp.set(saveunField.getStateId(), saveunField.getValue());
  68                 }
  69
  70                 let creds = loginForm.getValues();
  71
  72                 try {
  73                     let resp = await Proxmox.Async.api2({
  74                         url: '/api2/extjs/access/ticket',
  75                         params: creds,
  76                         method: 'POST',
  77                     });
  78
  79                     let data = resp.result.data;
  80                     if (data.ticket.startsWith('PMG:!tfa!')) {
  81                         data = await me.performTFAChallenge(data);
  82                     }
  83                     PMG.Utils.updateLoginData(data);
  84                     PMG.app.changeView(view.targetview);
  85                 } catch (error) {
  86                     Proxmox.Utils.authClear();
  87                     loginForm.unmask();
  88                     Ext.MessageBox.alert(
  89                         gettext('Error'),
  90                         gettext('Login failed. Please try again'),
  91                     );
  92                 }
  93             }
  94         },
  95
  96         performTFAChallenge: async function(data) {
  97             let me = this;
  98
  99             let userid = data.username;
 100             let ticket = data.ticket;
 101             let challenge = JSON.parse(decodeURIComponent(
 102                 ticket.split(':')[1].slice("!tfa!".length),
 103             ));
 104
 105             let resp = await new Promise((resolve, reject) => {
 106                 Ext.create('Proxmox.window.TfaLoginWindow', {
 107                     userid,
 108                     ticket,
 109                     challenge,
 110                     onResolve: value => resolve(value),
 111                     onReject: reject,
 112                 }).show();
 113             });
 114
 115             return resp.result.data;
 116         },
 117
 118         openQuarantineLinkWindow: function() {
 119             let me = this;
 120             me.lookup('loginwindow').setVisible(false);
 121             Ext.create('Proxmox.window.Edit', {
 122                 title: gettext('Request Quarantine Link'),
 123                 url: '/quarantine/sendlink',
 124                 isCreate: true,
 125                 submitText: gettext('OK'),
 126                 method: 'POST',
 127                 items: [
 128                     {
 129                         xtype: 'proxmoxtextfield',
 130                         name: 'mail',
 131                         fieldLabel: gettext('Your E-Mail'),
 132                     },
 133                 ],
 134                 listeners: {
 135                     destroy: function() {
 136                         me.lookup('loginwindow').show(true);
 137                     },
 138                 },
 139             }).show();
 140         },
 141
 142         control: {
 143             'field[name=lang]': {
 144                 change: function(f, value) {
 145                     let dt = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
 146                     Ext.util.Cookies.set('PMGLangCookie', value, dt);
 147
 148                     let loginwin = this.lookupReference('loginwindow');
 149                     loginwin.mask(gettext('Please wait...'), 'x-mask-loading');
 150                     window.location.reload();
 151                 },
 152             },
 153             'button[reference=quarantineButton]': {
 154                 click: 'openQuarantineLinkWindow',
 155             },
 156             'button[reference=loginButton]': {
 157                 click: 'submitForm',
 158             },
 159             'window[reference=loginwindow]': {
 160                 show: function() {
 161                     let me = this;
 162                     let view = me.getView();
 163                     if (view.targetview !== 'quarantineview') {
 164                         var sp = Ext.state.Manager.getProvider();
 165                         var checkboxField = this.lookupReference('saveunField');
 166                         var unField = this.lookupReference('usernameField');
 167
 168                         var checked = sp.get(checkboxField.getStateId());
 169                         checkboxField.setValue(checked);
 170
 171                         if (checked === true) {
 172                             var username = sp.get(unField.getStateId());
 173                             unField.setValue(username);
 174                             var pwField = this.lookupReference('passwordField');
 175                             pwField.focus();
 176                         }
 177                     }
 178                 },
 179             },
 180         },
 181     },
 182
 183     plugins: 'viewport',
 184
 185     layout: {
 186         type: 'border',
 187     },
 188
 189     items: [
 190         {
 191             region: 'north',
 192             xtype: 'container',
 193             layout: {
 194                 type: 'hbox',
 195                 align: 'middle',
 196             },
 197             margin: '2 5 2 5',
 198             height: 38,
 199             items: [
 200                 {
 201                     xtype: 'proxmoxlogo',
 202                 },
 203                 {
 204                     xtype: 'versioninfo',
 205                     makeApiCall: false,
 206                 },
 207             ],
 208         },
 209         {
 210             region: 'center',
 211         },
 212         {
 213             xtype: 'window',
 214             closable: false,
 215             resizable: false,
 216             reference: 'loginwindow',
 217             autoShow: true,
 218             modal: true,
 219             width: 450,
 220
 221             defaultFocus: 'usernameField',
 222
 223             layout: {
 224                 type: 'auto',
 225             },
 226
 227             title: gettext('Proxmox Mail Gateway Login'),
 228
 229             items: [
 230                 {
 231                     xtype: 'form',
 232                     layout: {
 233                         type: 'form',
 234                     },
 235                     defaultButton: 'loginButton',
 236                     url: '/api2/extjs/access/ticket',
 237                     reference: 'loginForm',
 238
 239                     fieldDefaults: {
 240                         labelAlign: 'right',
 241                         allowBlank: false,
 242                     },
 243
 244                     items: [
 245                         {
 246                             xtype: 'textfield',
 247                             fieldLabel: gettext('User name'),
 248                             name: 'username',
 249                             itemId: 'usernameField',
 250                             reference: 'usernameField',
 251                             stateId: 'login-username',
 252                         },
 253                         {
 254                             xtype: 'textfield',
 255                             inputType: 'password',
 256                             fieldLabel: gettext('Password'),
 257                             name: 'password',
 258                             reference: 'passwordField',
 259                         },
 260                         {
 261                             xtype: 'proxmoxLanguageSelector',
 262                             fieldLabel: gettext('Language'),
 263                             value: Ext.util.Cookies.get('PMGLangCookie') || 'en',
 264                             name: 'lang',
 265                             submitValue: false,
 266                         },
 267                         {
 268                             xtype: 'hiddenfield',
 269                             reference: 'realmfield',
 270                             name: 'realm',
 271                             value: 'pmg',
 272                         },
 273                     ],
 274                     buttons: [
 275                         {
 276                             xtype: 'checkbox',
 277                             fieldLabel: gettext('Save User name'),
 278                             name: 'saveusername',
 279                             reference: 'saveunField',
 280                             stateId: 'login-saveusername',
 281                             labelAlign: 'right',
 282                             labelWidth: 150,
 283                             submitValue: false,
 284                         },
 285                         {
 286                             text: gettext('Request Quarantine Link'),
 287                             reference: 'quarantineButton',
 288                         },
 289                         {
 290                             text: gettext('Login'),
 291                             reference: 'loginButton',
 292                             formBind: true,
 293                         },
 294                     ],
 295                 },
 296             ],
 297         },
 298     ],
 299 });