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