From 88acc861291c0b49fbfbb27d989baff54576a8cd Mon Sep 17 00:00:00 2001 From: Dominik Csapak Date: Mon, 18 May 2020 14:18:38 +0200 Subject: [PATCH] ui: add UserManagement panel to add/edit users Signed-off-by: Dominik Csapak --- www/Makefile | 2 + www/NavigationTree.js | 6 ++ www/config/UserView.js | 152 ++++++++++++++++++++++++++++++++++++++ www/window/UserEdit.js | 161 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 321 insertions(+) create mode 100644 www/config/UserView.js create mode 100644 www/window/UserEdit.js diff --git a/www/Makefile b/www/Makefile index fc515a34..ef6673e1 100644 --- a/www/Makefile +++ b/www/Makefile @@ -5,6 +5,8 @@ IMAGES := \ images/proxmox_logo.png JSSRC= \ + config/UserView.js \ + window/UserEdit.js \ Utils.js \ LoginView.js \ VersionInfo.js \ diff --git a/www/NavigationTree.js b/www/NavigationTree.js index d21867cb..c1bf0593 100644 --- a/www/NavigationTree.js +++ b/www/NavigationTree.js @@ -18,6 +18,12 @@ Ext.define('PBS.store.NavigationStore', { path: 'pbsSystemConfiguration', expanded: true, children: [ + { + text: gettext('User Management'), + iconCls: 'fa fa-user', + path: 'pbsUserView', + leaf: true + }, { text: gettext('Data Store'), iconCls: 'fa fa-archive', diff --git a/www/config/UserView.js b/www/config/UserView.js new file mode 100644 index 00000000..bd19632f --- /dev/null +++ b/www/config/UserView.js @@ -0,0 +1,152 @@ +Ext.define('pmx-users', { + extend: 'Ext.data.Model', + fields: [ + 'userid', 'firstname', 'lastname', 'email', 'comment', + { type: 'boolean', name: 'enable', defaultValue: true }, + { type: 'date', dateFormat: 'timestamp', name: 'expire' }, + ], + idProperty: 'userid', + proxy: { + type: 'proxmox', + url: '/api2/json/access/users', + }, +}); + +Ext.define('PBS.config.UserView', { + extend: 'Ext.grid.GridPanel', + alias: 'widget.pbsUserView', + + stateful: true, + stateId: 'grid-users', + + title: gettext('Users'), + + controller: { + xclass: 'Ext.app.ViewController', + + addUser: function() { + let me = this; + Ext.create('PBS.window.UserEdit', { + listeners: { + destroy: function() { + me.reload(); + }, + }, + }).show(); + }, + + editUser: function() { + let me = this; + let view = me.getView(); + let selection = view.getSelection(); + if (selection.length < 1) return; + + Ext.create('PBS.window.UserEdit', { + userid: selection[0].data.userid, + listeners: { + destroy: function() { + me.reload(); + }, + }, + }).show(); + }, + + renderUsername: function(userid) { + return Ext.String.htmlEncode(userid.match(/^(.+)@([^@]+)$/)[1]); + }, + + renderRealm: function(userid) { + return Ext.String.htmlEncode(userid.match(/^(.+)@([^@]+)$/)[2]); + }, + + reload: function() { this.getView().getStore().rstore.load(); }, + }, + + listeners: { + activate: 'reload', + itemdblclick: 'editUser', + }, + + store: { + type: 'diff', + autoDestroy: true, + autoDestroyRstore: true, + sorters: 'userid', + rstore: { + type: 'update', + storeid: 'pmx-users', + model: 'pmx-users', + autoStart: true, + interval: 5000, + }, + }, + + tbar: [ + { + xtype: 'proxmoxButton', + text: gettext('Add'), + handler: 'addUser', + selModel: false, + }, + { + xtype: 'proxmoxButton', + text: gettext('Edit'), + handler: 'editUser', + disabled: true, + }, + { + xtype: 'proxmoxStdRemoveButton', + baseurl: '/access/users/', + enableFn: (rec) => rec.data.userid !== 'root@pam', + callback: 'reload', + }, + ], + + viewConfig: { + trackOver: false, + }, + + columns: [ + { + header: gettext('User name'), + width: 200, + sortable: true, + renderer: 'renderUsername', + dataIndex: 'userid', + }, + { + header: gettext('Realm'), + width: 100, + sortable: true, + renderer: 'renderRealm', + dataIndex: 'userid', + }, + { + header: gettext('Enabled'), + width: 80, + sortable: true, + renderer: Proxmox.Utils.format_boolean, + dataIndex: 'enable', + }, + { + header: gettext('Expire'), + width: 80, + sortable: true, + renderer: Proxmox.Utils.format_expire, + dataIndex: 'expire', + }, + { + header: gettext('Name'), + width: 150, + sortable: true, + dataIndex: 'firstname', + }, + { + header: gettext('Comment'), + sortable: false, + renderer: Ext.String.htmlEncode, + dataIndex: 'comment', + flex: 1, + }, + ], +}); diff --git a/www/window/UserEdit.js b/www/window/UserEdit.js new file mode 100644 index 00000000..d1da9f4b --- /dev/null +++ b/www/window/UserEdit.js @@ -0,0 +1,161 @@ +Ext.define('PBS.window.UserEdit', { + extend: 'Proxmox.window.Edit', + alias: 'widget.pbsUserEdit', + mixins: ['Proxmox.Mixin.CBind'], + + userid: undefined, + + isAdd: true, + + subject: gettext('User'), + + fieldDefaults: { labelWidth: 120 }, + + cbindData: function(initialConfig) { + var me = this; + + var userid = initialConfig.userid; + var baseurl = '/api2/extjs/access/users'; + + me.isCreate = !userid; + me.url = userid ? baseurl + '/' + userid : baseurl; + me.method = userid ? 'PUT' : 'POST'; + me.autoLoad = !!userid; + + return { + useridXType: userid ? 'displayfield' : 'textfield', + }; + }, + + items: { + xtype: 'inputpanel', + column1: [ + { + xtype: 'pmxDisplayEditField', + name: 'userid', + fieldLabel: gettext('User name'), + renderer: Ext.htmlEncode, + allowBlank: false, + minLength: 4, + cbind: { + editable: '{isCreate}', + }, + }, + { + xtype: 'textfield', + inputType: 'password', + fieldLabel: gettext('Password'), + minLength: 5, + allowBlank: false, + name: 'password', + listeners: { + change: function(field) { + field.next().validate(); + }, + blur: function(field) { + field.next().validate(); + }, + }, + cbind: { + hidden: '{!isCreate}', + disabled: '{!isCreate}', + }, + }, + { + xtype: 'textfield', + inputType: 'password', + fieldLabel: gettext('Confirm password'), + name: 'verifypassword', + vtype: 'password', + initialPassField: 'password', + allowBlank: false, + submitValue: false, + cbind: { + hidden: '{!isCreate}', + disabled: '{!isCreate}', + }, + }, + { + xtype: 'datefield', + name: 'expire', + emptyText: Proxmox.Utils.neverText, + format: 'Y-m-d', + submitFormat: 'U', + fieldLabel: gettext('Expire'), + }, + { + xtype: 'proxmoxcheckbox', + fieldLabel: gettext('Enabled'), + name: 'enable', + uncheckedValue: 0, + defaultValue: 1, + checked: true, + }, + ], + + column2: [ + { + xtype: 'proxmoxtextfield', + name: 'firstname', + fieldLabel: gettext('First Name'), + }, + { + xtype: 'proxmoxtextfield', + name: 'lastname', + fieldLabel: gettext('Last Name'), + }, + { + xtype: 'proxmoxtextfield', + name: 'email', + fieldLabel: gettext('E-Mail'), + vtype: 'proxmoxMail', + }, + ], + + columnB: [ + { + xtype: 'proxmoxtextfield', + name: 'comment', + fieldLabel: gettext('Comment'), + }, + ], + }, + + getValues: function(dirtyOnly) { + var me = this; + + var values = me.callParent(arguments); + + // hack: ExtJS datefield does not submit 0, so we need to set that + if (!values.expire) { + values.expire = 0; + } + + if (me.isCreate) { + values.userid = values.userid + '@pbs'; + } + + delete values.username; + + if (!values.password) { + delete values.password; + } + + return values; + }, + + setValues: function(values) { + var me = this; + + if (Ext.isDefined(values.expire)) { + if (values.expire) { + values.expire = new Date(values.expire * 1000); + } else { + // display 'never' instead of '1970-01-01' + values.expire = null; + } + } + + me.callParent([values]); + }, +});