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: function() {
   9             var me = this;
  10             var view = me.getView();
  11             var loginForm = me.lookupReference('loginForm');
  12             var unField = me.lookupReference('usernameField');
  13             var saveunField = me.lookupReference('saveunField');
  14
  15             if (!loginForm.isValid()) {
  16                 return;
  17             }
  18
  19             let params = loginForm.getValues();
  20
  21             params.username = params.username + '@' + params.realm;
  22             delete(params.realm);
  23
  24             if (loginForm.isVisible()) {
  25                 loginForm.mask(gettext('Please wait...'), 'x-mask-loading');
  26             }
  27
  28             // set or clear username
  29             var sp = Ext.state.Manager.getProvider();
  30             if (saveunField.getValue() === true) {
  31                 sp.set(unField.getStateId(), unField.getValue());
  32             } else {
  33                 sp.clear(unField.getStateId());
  34             }
  35             sp.set(saveunField.getStateId(), saveunField.getValue());
  36
  37             Proxmox.Utils.API2Request({
  38                 url: '/api2/extjs/access/ticket',
  39                 params: params,
  40                 method: 'POST',
  41                 success: function(resp, opts) {
  42                     // save login data and create cookie
  43                     PBS.Utils.updateLoginData(resp.result.data);
  44                     PBS.app.changeView('mainview');
  45                 },
  46                 failure: function(resp, opts) {
  47                     Proxmox.Utils.authClear();
  48                     loginForm.unmask();
  49                     Ext.MessageBox.alert(
  50                         gettext('Error'),
  51                         gettext('Login failed. Please try again')
  52                     );
  53                 }
  54             });
  55         },
  56
  57         control: {
  58             'field[name=username]': {
  59                 specialkey: function(f, e) {
  60                     if (e.getKey() === e.ENTER) {
  61                         var pf = this.lookupReference('passwordField');
  62                         if (!pf.getValue()) {
  63                             pf.focus(false);
  64                         }
  65                     }
  66                 }
  67             },
  68             'field[name=lang]': {
  69                 change: function(f, value) {
  70                     var dt = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
  71                     Ext.util.Cookies.set('PBSLangCookie', value, dt);
  72                     this.getView().mask(gettext('Please wait...'), 'x-mask-loading');
  73                     window.location.reload();
  74                 }
  75             },
  76             'button[reference=loginButton]': {
  77                 click: 'submitForm'
  78             },
  79             'window[reference=loginwindow]': {
  80                 show: function() {
  81                     var sp = Ext.state.Manager.getProvider();
  82                     var checkboxField = this.lookupReference('saveunField');
  83                     var unField = this.lookupReference('usernameField');
  84
  85                     var checked = sp.get(checkboxField.getStateId());
  86                     checkboxField.setValue(checked);
  87
  88                     if(checked === true) {
  89                         var username = sp.get(unField.getStateId());
  90                         unField.setValue(username);
  91                         var pwField = this.lookupReference('passwordField');
  92                         pwField.focus();
  93                     }
  94                 }
  95             }
  96         }
  97     },
  98
  99     plugins: 'viewport',
 100
 101     layout: {
 102         type: 'border'
 103     },
 104
 105     items: [
 106         {
 107             region: 'north',
 108             xtype: 'container',
 109             layout: {
 110                 type: 'hbox',
 111                 align: 'middle'
 112             },
 113             margin: '2 5 2 5',
 114             height: 38,
 115             items: [
 116                 {
 117                     xtype: 'proxmoxlogo',
 118                     prefix: '',
 119                 },
 120                 {
 121                     xtype: 'versioninfo',
 122                     makeApiCall: false
 123                 }
 124             ]
 125         },
 126         {
 127             region: 'center'
 128         },
 129         {
 130             xtype: 'window',
 131             closable: false,
 132             resizable: false,
 133             reference: 'loginwindow',
 134             autoShow: true,
 135             modal: true,
 136             width: 400,
 137
 138             defaultFocus: 'usernameField',
 139
 140             layout: {
 141                 type: 'auto'
 142             },
 143
 144             title: gettext('Proxmox Backup Server Login'),
 145
 146             items: [
 147                 {
 148                     xtype: 'form',
 149                     layout: {
 150                         type: 'form'
 151                     },
 152                     defaultButton: 'loginButton',
 153                     url: '/api2/extjs/access/ticket',
 154                     reference: 'loginForm',
 155
 156                     fieldDefaults: {
 157                         labelAlign: 'right',
 158                         allowBlank: false
 159                     },
 160
 161                     items: [
 162                         {
 163                             xtype: 'textfield',
 164                             fieldLabel: gettext('User name'),
 165                             name: 'username',
 166                             itemId: 'usernameField',
 167                             reference: 'usernameField',
 168                             stateId: 'login-username'
 169                         },
 170                         {
 171                             xtype: 'textfield',
 172                             inputType: 'password',
 173                             fieldLabel: gettext('Password'),
 174                             name: 'password',
 175                             itemId: 'passwordField',
 176                             reference: 'passwordField',
 177                         },
 178                         {
 179                             xtype: 'pmxRealmComboBox',
 180                             name: 'realm'
 181                         },
 182                         {
 183                             xtype: 'proxmoxLanguageSelector',
 184                             fieldLabel: gettext('Language'),
 185                             value: Ext.util.Cookies.get('PBSLangCookie') || Proxmox.defaultLang || 'en',
 186                             name: 'lang',
 187                             reference: 'langField',
 188                             submitValue: false
 189                         }
 190                     ],
 191                     buttons: [
 192                         {
 193                             xtype: 'checkbox',
 194                             fieldLabel: gettext('Save User name'),
 195                             name: 'saveusername',
 196                             reference: 'saveunField',
 197                             stateId: 'login-saveusername',
 198                             labelWidth: 250,
 199                             labelAlign: 'right',
 200                             submitValue: false
 201                         },
 202                         {
 203                             text: gettext('Login'),
 204                             reference: 'loginButton',
 205                             formBind: true
 206                         }
 207                     ]
 208                 }
 209             ]
 210         }
 211     ]
 212 });