ui: add UserManagement panel
to add/edit users Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
This commit is contained in:
Dominik Csapak
Dietmar Maurer
parent
1d8ef0dcf7
commit
88acc86129
|
|
@ -5,6 +5,8 @@ IMAGES := \
|
|||
images/proxmox_logo.png
|
||||
|
||||
JSSRC= \
|
||||
config/UserView.js \
|
||||
window/UserEdit.js \
|
||||
Utils.js \
|
||||
LoginView.js \
|
||||
VersionInfo.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',
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
@ -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]);
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue