From 9abcae1b0e9e24a54668d4196aa133f2a395e268 Mon Sep 17 00:00:00 2001 From: Dietmar Maurer Date: Thu, 9 Apr 2020 13:37:14 +0200 Subject: [PATCH] gui: improve login view (use realms) --- www/LoginView.js | 126 ++++++++++++++++++++++++++++++++++--------- www/Makefile | 1 + www/RealmComboBox.js | 67 +++++++++++++++++++++++ 3 files changed, 170 insertions(+), 24 deletions(-) create mode 100644 www/RealmComboBox.js diff --git a/www/LoginView.js b/www/LoginView.js index b00d169a..6a03ab3a 100644 --- a/www/LoginView.js +++ b/www/LoginView.js @@ -9,31 +9,89 @@ Ext.define('PBS.LoginView', { var me = this; var view = me.getView(); var loginForm = me.lookupReference('loginForm'); + var unField = me.lookupReference('usernameField'); + var saveunField = me.lookupReference('saveunField'); - if (loginForm.isValid()) { - if (loginForm.isVisible()) { - loginForm.mask(gettext('Please wait...'), 'x-mask-loading'); - } - loginForm.submit({ - success: function(form, action) { - // save login data and create cookie - PBS.Utils.updateLoginData(action.result.data); - PBS.app.changeView('mainview'); - }, - failure: function(form, action) { - loginForm.unmask(); - Ext.MessageBox.alert( - gettext('Error'), - gettext('Login failed. Please try again') - ); - } - }); + if (!loginForm.isValid()) { + return; } + + let params = loginForm.getValues(); + + params.username = params.username + '@' + params.realm; + delete(params.realm); + + if (loginForm.isVisible()) { + loginForm.mask(gettext('Please wait...'), 'x-mask-loading'); + } + + // set or clear username + var sp = Ext.state.Manager.getProvider(); + if (saveunField.getValue() === true) { + sp.set(unField.getStateId(), unField.getValue()); + } else { + sp.clear(unField.getStateId()); + } + sp.set(saveunField.getStateId(), saveunField.getValue()); + + Proxmox.Utils.API2Request({ + url: '/api2/extjs/access/ticket', + params: params, + method: 'POST', + success: function(resp, opts) { + // save login data and create cookie + PBS.Utils.updateLoginData(resp.result.data); + PBS.app.changeView('mainview'); + }, + failure: function(resp, opts) { + Proxmox.Utils.authClear(); + loginForm.unmask(); + Ext.MessageBox.alert( + gettext('Error'), + gettext('Login failed. Please try again') + ); + } + }); }, control: { + 'field[name=username]': { + specialkey: function(f, e) { + if (e.getKey() === e.ENTER) { + var pf = this.lookupReference('passwordField'); + if (!pf.getValue()) { + pf.focus(false); + } + } + } + }, + 'field[name=lang]': { + change: function(f, value) { + var dt = Ext.Date.add(new Date(), Ext.Date.YEAR, 10); + Ext.util.Cookies.set('PBSLangCookie', value, dt); + this.getView().mask(gettext('Please wait...'), 'x-mask-loading'); + window.location.reload(); + } + }, 'button[reference=loginButton]': { click: 'submitForm' + }, + 'window[reference=loginwindow]': { + show: function() { + var sp = Ext.state.Manager.getProvider(); + var checkboxField = this.lookupReference('saveunField'); + var unField = this.lookupReference('usernameField'); + + var checked = sp.get(checkboxField.getStateId()); + checkboxField.setValue(checked); + + if(checked === true) { + var username = sp.get(unField.getStateId()); + unField.setValue(username); + var pwField = this.lookupReference('passwordField'); + pwField.focus(); + } + } } } }, @@ -74,11 +132,9 @@ Ext.define('PBS.LoginView', { reference: 'loginwindow', autoShow: true, modal: true, + width: 400, - //defaultFocus: 'usernameField', - // TODO: use usernameField again once we have a real user-, - // permission system and root@pam isn't the default anymore - defaultFocus: 'passwordField', + defaultFocus: 'usernameField', layout: { type: 'auto' @@ -102,13 +158,17 @@ Ext.define('PBS.LoginView', { }, items: [ + { + xtype: 'pbsRealmComboBox', + name: 'realm' + }, { xtype: 'textfield', fieldLabel: gettext('User name'), name: 'username', - value: 'root@pam', itemId: 'usernameField', - reference: 'usernameField' + reference: 'usernameField', + stateId: 'login-username' }, { xtype: 'textfield', @@ -117,9 +177,27 @@ Ext.define('PBS.LoginView', { name: 'password', itemId: 'passwordField', reference: 'passwordField', + }, + { + xtype: 'proxmoxLanguageSelector', + fieldLabel: gettext('Language'), + value: Ext.util.Cookies.get('PBSLangCookie') || Proxmox.defaultLang || 'en', + name: 'lang', + reference: 'langField', + submitValue: false } ], buttons: [ + { + xtype: 'checkbox', + fieldLabel: gettext('Save User name'), + name: 'saveusername', + reference: 'saveunField', + stateId: 'login-saveusername', + labelWidth: 250, + labelAlign: 'right', + submitValue: false + }, { text: gettext('Login'), reference: 'loginButton', diff --git a/www/Makefile b/www/Makefile index 506e9b67..4c1efccb 100644 --- a/www/Makefile +++ b/www/Makefile @@ -7,6 +7,7 @@ IMAGES := \ JSSRC= \ Utils.js \ Logo.js \ + RealmComboBox.js \ LoginView.js \ VersionInfo.js \ SystemConfiguration.js \ diff --git a/www/RealmComboBox.js b/www/RealmComboBox.js new file mode 100644 index 00000000..001b1d74 --- /dev/null +++ b/www/RealmComboBox.js @@ -0,0 +1,67 @@ +Ext.define('pbs-domains', { + extend: "Ext.data.Model", + fields: [ 'realm', 'comment', 'default' ], + idProperty: 'realm', + proxy: { + type: 'proxmox', + url: "/api2/json/access/domains" + } +}); + +Ext.define('PBS.form.RealmComboBox', { + extend: 'Ext.form.field.ComboBox', + alias: ['widget.pbsRealmComboBox'], + + controller: { + xclass: 'Ext.app.ViewController', + + init: function(view) { + view.store.on('load', this.onLoad, view); + }, + + onLoad: function(store, records, success) { + if (!success) { + return; + } + var me = this; + var val = me.getValue(); + if (!val || !me.store.findRecord('realm', val)) { + var def = 'pam'; + Ext.each(records, function(rec) { + if (rec.data && rec.data['default']) { + def = rec.data.realm; + } + }); + me.setValue(def); + } + } + }, + + fieldLabel: gettext('Realm'), + name: 'realm', + queryMode: 'local', + allowBlank: false, + editable: false, + forceSelection: true, + autoSelect: false, + triggerAction: 'all', + valueField: 'realm', + displayField: 'comment', + getState: function() { + return { value: this.getValue() }; + }, + applyState : function(state) { + if (state && state.value) { + this.setValue(state.value); + } + }, + stateEvents: [ 'select' ], + stateful: true, // last chosen auth realm is saved between page reloads + id: 'pbsloginrealm', // We need stable ids when using stateful, not autogenerated + stateID: 'pbsloginrealm', + + store: { + model: 'pbs-domains', + autoLoad: true + } +});