object editors: rework so that default label width fits everywhere

[pmg-gui.git] / js / UserEdit.js

diff --git a/js/UserEdit.js b/js/UserEdit.js
index 6b31d3b803f183cdc50d22ca669453099778143e..e2125305fa92b382fee6beb757938b2327837c69 100644 (file)
--- a/js/UserEdit.js
+++ b/js/UserEdit.js
@@ -1,31 +1,10 @@
-Ext.define('PMG.UserViewModel', {
-    extend: 'Ext.app.ViewModel',
-    alias: 'viewmodel.pmgUserViewModel',
-
-    data: {
-       userid: undefined,
-       isCreate: true
-    },
-
-    formulas: {
-        isCreate: function (get) {
-            return !get('userid');
-        },
-        isSuperUser: function (get) {
-            return get('userid') === 'root@pam';
-        }
-    }
-});
-
 Ext.define('PMG.UserEdit', {
     extend: 'Proxmox.window.Edit',
-    alias: ['widget.pmgUserEdit'],
-
-    config: {
-       userid: undefined
-    },
+    alias: 'widget.pmgUserEdit',
+    mixins: ['Proxmox.Mixin.CBind'],
+    onlineHelp: 'pmgconfig_localuser',
 
-    viewModel: { type: 'pmgUserViewModel' },
+    userid: undefined,
 
     isAdd: true,
 
@@ -33,6 +12,23 @@ Ext.define('PMG.UserEdit', {
 
     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',
+           isSuperUser: userid === 'root@pam',
+       };
+    },
+
     items: {
        xtype: 'inputpanel',
        column1: [
@@ -40,11 +36,13 @@ Ext.define('PMG.UserEdit', {
                xtype: 'textfield',
                name: 'username',
                fieldLabel: gettext('User name'),
+               renderer: Ext.htmlEncode,
                allowBlank: false,
-               bind: {
+               minLength: 4,
+               cbind: {
                    submitValue: '{isCreate}',
-                   editable: '{isCreate}'
-               }
+                   xtype: '{useridXType}',
+               },
            },
            {
                xtype: 'textfield',
@@ -54,21 +52,20 @@ Ext.define('PMG.UserEdit', {
                allowBlank: false,
                name: 'password',
                listeners: {
-                    change: function(field){
+                    change: function(field) {
                        field.next().validate();
                     },
-                    blur: function(field){
+                    blur: function(field) {
                        field.next().validate();
-                    }
+                    },
                },
-               hidden: true, // avoid flicker
-               bind: {
+               cbind: {
                    hidden: '{!isCreate}',
-                   disabled: '{!isCreate}'
-               }
+                   disabled: '{!isCreate}',
+               },
            },
            {
-               xtype: 'textfield',
+               xtype: 'textfield',
                inputType: 'password',
                fieldLabel: gettext('Confirm password'),
                name: 'verifypassword',
@@ -76,20 +73,19 @@ Ext.define('PMG.UserEdit', {
                initialPassField: 'password',
                allowBlank: false,
                submitValue: false,
-               hidden: true,  // avoid flicker
-               bind: {
+               cbind: {
                    hidden: '{!isCreate}',
-                   disabled: '{!isCreate}'
-               }
+                   disabled: '{!isCreate}',
+               },
            },
            {
                xtype: 'pmgRoleSelector',
                name: 'role',
                allowBlank: false,
                fieldLabel: gettext('Role'),
-               bind: {
-                   disabled: '{isSuperUser}'
-               }
+               cbind: {
+                   disabled: '{isSuperUser}',
+               },
            },
            {
                 xtype: 'datefield',
@@ -98,9 +94,9 @@ Ext.define('PMG.UserEdit', {
                format: 'Y-m-d',
                submitFormat: 'U',
                 fieldLabel: gettext('Expire'),
-               bind: {
-                   disabled: '{isSuperUser}'
-               }
+               cbind: {
+                   disabled: '{isSuperUser}',
+               },
             },
            {
                xtype: 'proxmoxcheckbox',
@@ -109,10 +105,10 @@ Ext.define('PMG.UserEdit', {
                uncheckedValue: 0,
                defaultValue: 1,
                checked: true,
-               bind: {
-                   disabled: '{isSuperUser}'
-               }
-           }
+               cbind: {
+                   disabled: '{isSuperUser}',
+               },
+           },
        ],
 
        column2: [
@@ -120,27 +116,27 @@ Ext.define('PMG.UserEdit', {
                xtype: 'proxmoxtextfield',
                name: 'firstname',
                fieldLabel: gettext('First Name'),
-               bind: {
-                   deleteEmpty: '{!isCreate}'
-               }
+               cbind: {
+                   deleteEmpty: '{!isCreate}',
+               },
            },
            {
                xtype: 'proxmoxtextfield',
                name: 'lastname',
                fieldLabel: gettext('Last Name'),
-               bind: {
-                   deleteEmpty: '{!isCreate}'
-               }
+               cbind: {
+                   deleteEmpty: '{!isCreate}',
+               },
            },
            {
                xtype: 'proxmoxtextfield',
                name: 'email',
                fieldLabel: gettext('E-Mail'),
                vtype: 'proxmoxMail',
-               bind: {
-                   deleteEmpty: '{!isCreate}'
-               }
-           }
+               cbind: {
+                   deleteEmpty: '{!isCreate}',
+               },
+           },
        ],
 
        columnB: [
@@ -148,33 +144,20 @@ Ext.define('PMG.UserEdit', {
                xtype: 'proxmoxtextfield',
                name: 'comment',
                fieldLabel: gettext('Comment'),
-               bind: {
+               cbind: {
                    disabled: '{isSuperUser}',
-                   deleteEmpty: '{!isCreate}'
-               }
+                   deleteEmpty: '{!isCreate}',
+               },
            },
            {
                xtype: 'proxmoxtextfield',
                name: 'keys',
                fieldLabel: gettext('Key IDs'),
-               bind: {
-                   deleteEmpty: '{!isCreate}'
-               }
-           }
-       ]
-    },
-
-    controller: {
-
-       xclass: 'Ext.app.ViewController',
-
-       initViewModel: function(viewModel) {
-
-           var view = this.getView();
-           var userid = view.getUserid();
-
-           viewModel.set('userid', userid);
-       }
+               cbind: {
+                   deleteEmpty: '{!isCreate}',
+               },
+           },
+       ],
     },
 
     getValues: function(dirtyOnly) {
@@ -187,7 +170,7 @@ Ext.define('PMG.UserEdit', {
            values.expire = 0;
        }
 
-       if (me.create) {
+       if (me.isCreate) {
            values.userid = values.username + '@pmg';
        }
 
@@ -214,27 +197,4 @@ Ext.define('PMG.UserEdit', {
 
        me.callParent([values]);
     },
-
-    create: true,
-    url: '/api2/extjs/access/users',
-    autoLoad: false,
-    method: 'POST',
-
-    updateUserid: function(userid) {
-       var me = this;
-
-       me.create = !userid; // fixme
-
-       if (!userid) {
-           autoLoad = false;
-            me.url = '/api2/extjs/access/users';
-            me.method = 'POST';
-        } else {
-           me.autoLoad = true;
-            me.url = '/api2/extjs/access/users/' + userid;
-            me.method = 'PUT';
-       }
-
-       return userid;
-    }
 });