js/UserEdit.js: rewrite, use a view model

js/UserEdit.js

@@ -1,139 +1,11 @@
-Ext.define('PMG.UserInputPanel', {
+Ext.define('PMG.UserViewModel', {
-    extend: 'Proxmox.panel.InputPanel',
+    extend: 'Ext.app.ViewModel',
-    alias: 'widget.pmgUserInputPanel',
+    alias: 'viewmodel.pmgUserViewModel',
 
-    onGetValues: function(values) {
+    data: {
-	var me = this;
+	userid: undefined,
-
+	isCreate: true,
-	// hack: ExtJS datefield does not submit 0, so we need to set that
+	isSuperUser: false,
-	if (!values.expire) {
-	    values.expire = 0;
-	}
-
-	if (me.create) {
-	    values.userid = values.userid + '@pmg';
-	}
-
-	if (!values.password) {
-	    delete values.password;
-	}
-
-	return values;
-    },
-
-    initComponent : function() {
-        var me = this;
-
-	me.create = !me.userid;
-
-	var verifypw;
-	var pwfield;
-
-	var validate_pw = function() {
-	    if (verifypw.getValue() !== pwfield.getValue()) {
-		return gettext("Passwords does not match");
-	    }
-	    return true;
-	};
-
-	verifypw = Ext.createWidget('textfield', {
-	    inputType: 'password',
-	    fieldLabel: gettext('Confirm password'),
-	    name: 'verifypassword',
-	    submitValue: false,
-	    validator: validate_pw
-	});
-
-	pwfield = Ext.createWidget('textfield', {
-	    inputType: 'password',
-	    fieldLabel: gettext('Password'),
-	    minLength: 5,
-	    name: 'password',
-	    validator: validate_pw
-	});
-
-        me.column1 = [
-            {
-                xtype: me.create ? 'textfield' : 'displayfield',
-                name: 'userid',
-                fieldLabel: gettext('User name'),
-                value: me.userid,
-                allowBlank: false,
-                submitValue: me.create ? true : false
-            }
-	];
-
-	if (me.create) {
-	    me.column1.push(pwfield, verifypw);
-	}
-
-	me.column1.push(
-	    {
-		xtype: 'pmgRoleSelector',
-		name: 'role',
-		disabled: me.userid === 'root@pam',
-		allowBlank: false,
-		fieldLabel: gettext('Role')
-	    },
-            {
-                xtype: 'datefield',
-                name: 'expire',
-		emptyText: Proxmox.Utils.neverText,
-		format: 'Y-m-d',
-		disabled: me.userid === 'root@pam',
-		submitFormat: 'U',
-                fieldLabel: gettext('Expire')
-            },
-	    {
-		xtype: 'proxmoxcheckbox',
-		fieldLabel: gettext('Enabled'),
-		name: 'enable',
-		disabled: me.userid === 'root@pam',
-		uncheckedValue: 0,
-		defaultValue: 1,
-		checked: true
-	    }
-        );
-
-        me.column2 = [
-	    {
-		xtype: 'proxmoxtextfield',
-		deleteEmpty: me.create ? false : true,
-		name: 'firstname',
-		fieldLabel: gettext('First Name')
-	    },
-	    {
-		xtype: 'proxmoxtextfield',
-		deleteEmpty: me.create ? false : true,
-		name: 'lastname',
-		fieldLabel: gettext('Last Name')
-	    },
-	    {
-		xtype: 'proxmoxtextfield',
-		name: 'email',
-		deleteEmpty: me.create ? false : true,
-		fieldLabel: gettext('E-Mail'),
-		vtype: 'proxmoxMail'
-	    }
-	];
-
-	me.columnB = [
-	    {
-		xtype: 'proxmoxtextfield',
-		name: 'comment',
-		deleteEmpty: me.create ? false : true,
-		disabled: me.userid === 'root@pam',
-		fieldLabel: gettext('Comment')
-	    },
-	    {
-		xtype: 'proxmoxtextfield',
-		deleteEmpty: me.create ? false : true,
-		name: 'keys',
-		fieldLabel: gettext('Key IDs')
-	    }
-	];
-
-	me.callParent();
     }
 });
 
@@ -141,35 +13,197 @@ Ext.define('PMG.UserEdit', {
     extend: 'Proxmox.window.Edit',
     alias: ['widget.pmgUserEdit'],
 
+    viewModel: { type: 'pmgUserViewModel' },
+
     isAdd: true,
 
     subject: gettext('User'),
 
-    fieldDefaults: {
+    fieldDefaults: { labelWidth: 120 },
-	labelWidth: 120
+
+    items: {
+	xtype: 'inputpanel',
+	onGetValues: function(values) {
+	    var me = this;
+
+	    // hack: ExtJS datefield does not submit 0, so we need to set that
+	    if (!values.expire) {
+		values.expire = 0;
+	    }
+
+	    if (me.create) {
+		values.userid = values.userid + '@pmg';
+	    }
+
+	    if (!values.password) {
+		delete values.password;
+	    }
+
+	    return values;
+	},
+
+	column1: [
+	    {
+		xtype: 'textfield',
+		name: 'userid',
+		fieldLabel: gettext('User name'),
+		allowBlank: false,
+		bind: {
+		    value: '{userid}',
+		    submitValue: '{isCreate}',
+		    editable: '{isCreate}'
+		}
+	    },
+	    {
+		xtype: 'textfield',
+		inputType: 'password',
+		fieldLabel: gettext('Password'),
+		minLength: 5,
+		name: 'password',
+		listeners: {
+                    change: function(field){
+			field.next().validate();
+                    },
+                    blur: function(field){
+			field.next().validate();
+                    }
+		},
+		bind: {
+		    hidden: '{!isCreate}',
+		    disabled: '{!isCreate}'
+		}
+	    },
+	    {
+	    	xtype: 'textfield',
+		inputType: 'password',
+		fieldLabel: gettext('Confirm password'),
+		name: 'verifypassword',
+		vtype: 'password',
+		initialPassField: 'password',
+		submitValue: false,
+		bind: {
+		    hidden: '{!isCreate}',
+		    disabled: '{!isCreate}'
+		}
+	    },
+	    {
+		xtype: 'pmgRoleSelector',
+		name: 'role',
+		allowBlank: false,
+		fieldLabel: gettext('Role'),
+		bind: {
+		    disabled: '{isSuperUser}'
+		}
+	    },
+	    {
+                xtype: 'datefield',
+                name: 'expire',
+		emptyText: Proxmox.Utils.neverText,
+		format: 'Y-m-d',
+		submitFormat: 'U',
+                fieldLabel: gettext('Expire'),
+		bind: {
+		    disabled: '{isSuperUser}'
+		}
+            },
+	    {
+		xtype: 'proxmoxcheckbox',
+		fieldLabel: gettext('Enabled'),
+		name: 'enable',
+		uncheckedValue: 0,
+		defaultValue: 1,
+		checked: true,
+		bind: {
+		    disabled: '{isSuperUser}'
+		}
+	    }
+	],
+
+	column2: [
+	    {
+		xtype: 'proxmoxtextfield',
+		name: 'firstname',
+		fieldLabel: gettext('First Name'),
+		bind: {
+		    deleteEmpty: '{!isCreate}'
+		}
+	    },
+	    {
+		xtype: 'proxmoxtextfield',
+		name: 'lastname',
+		fieldLabel: gettext('Last Name'),
+		bind: {
+		    deleteEmpty: '{!isCreate}'
+		}
+	    },
+	    {
+		xtype: 'proxmoxtextfield',
+		name: 'email',
+		fieldLabel: gettext('E-Mail'),
+		vtype: 'proxmoxMail',
+		bind: {
+		    deleteEmpty: '{!isCreate}'
+		}
+	    }
+	],
+
+	columnB: [
+	    {
+		xtype: 'proxmoxtextfield',
+		name: 'comment',
+		fieldLabel: gettext('Comment'),
+		bind: {
+		    disabled: '{isSuperUser}',
+		    deleteEmpty: '{!isCreate}'
+		}
+	    },
+	    {
+		xtype: 'proxmoxtextfield',
+		name: 'keys',
+		fieldLabel: gettext('Key IDs'),
+		bind: {
+		    deleteEmpty: '{!isCreate}'
+		}
+	    }
+	]
+    },
+
+    controller: {
+
+	xclass: 'Ext.app.ViewController',
+
+	init: function(view) {
+	    var userid = view.userid;
+	    var viewModel = view.getViewModel();
+
+	    view.getViewModel().set('isCreate', !view.userid);
+
+	    if (userid) {
+		viewModel.set('userid', userid);
+		if (userid === 'root@pam') {
+		    viewModel.set('isSuperUser', true);
+		}
+	    }
+	}
     },
 
     initComponent : function() {
         var me = this;
 
-        me.create = !me.userid;
+	var userid = me.userid;
+	me.create = !userid; // fixme
 
-        if (me.create) {
+        if (!userid) {
             me.url = '/api2/extjs/access/users';
             me.method = 'POST';
         } else {
-            me.url = '/api2/extjs/access/users/' + me.userid;
+            me.url = '/api2/extjs/access/users/' + userid;
             me.method = 'PUT';
 	}
 
-	me.items = {
+	me.callParent();
-	    xtype: 'pmgUserInputPanel',
-	    userid: me.userid
-	};
 
-        me.callParent();
+	if (userid) {
-
-        if (!me.create) {
             me.load({
 		success: function(response, options) {
 		    var data = response.result.data;
@@ -181,6 +215,7 @@ Ext.define('PMG.UserEdit', {
 			    data.expire = null;
 			}
 		    }
+
 		    me.setValues(data);
                 }
             });