]> git.proxmox.com Git - pve-manager.git/blobdiff - www/manager6/lxc/CreateWizard.js
ui: eslint: enforce "dot-notation" rule
[pve-manager.git] / www / manager6 / lxc / CreateWizard.js
index 9b25db5ecedaf0e5eb8a514918d91c7a45e4e641..7be300ad5a476fc9eec398c1fd20ef6ed4848f9b 100644 (file)
-/*global
-  FileReader
-*/
-
 Ext.define('PVE.lxc.CreateWizard', {
     extend: 'PVE.window.Wizard',
+    mixins: ['Proxmox.Mixin.CBind'],
 
-    loadSSHKeyFromFile: function(file) {
-       var me = this;
-       // ssh-keygen produces 740 bytes for an average 4096 bit rsa key, with
-       // a user@host comment, 1420 for 8192 bits; current max is 16kbit
-       // assume: 740*8 for max. 32kbit (5920 byte file)
-       // round upwards to nearest nice number => 8192 bytes, leaves lots of comment space
-       if (file.size > 8192) {
-           Ext.Msg.alert(gettext('Error'), gettext("Invalid file size: ") + file.size);
-           return;
-       }
-       var reader = new FileReader();
-       reader.onload = function(evt) {
-           me.sshkeyfield.setValue(evt.target.result);
-       };
-       reader.readAsText(file);
+    viewModel: {
+       data: {
+           nodename: '',
+           storage: '',
+           unprivileged: true,
+       },
     },
 
-    initComponent: function() {
-       var me = this;
-
-       var summarystore = Ext.create('Ext.data.Store', {
-           model: 'KeyValue',
-           sorters: [
-               {
-                   property : 'key',
-                   direction: 'ASC'
-               }
-           ]
-       });
-
-       var tmplsel = Ext.create('PVE.form.FileSelector', {
-           name: 'ostemplate',
-           storageContent: 'vztmpl',
-           fieldLabel: gettext('Template'),
-           allowBlank: false
-       });
-
-       var tmplstoragesel = Ext.create('PVE.form.StorageSelector', {
-           name: 'tmplstorage',
-           fieldLabel: gettext('Storage'),
-           storageContent: 'vztmpl',
-           autoSelect: true,
-           allowBlank: false,
-           listeners: {
-               change: function(f, value) {
-                   tmplsel.setStorage(value);
-               }
-           }
-       });
-
-       var rootfspanel = Ext.create('PVE.lxc.MountPointInputPanel', {
-           title: gettext('Root Disk'),
-           insideWizard: true,
-           isCreate: true,
-           unused: false,
-           confid: 'rootfs'
-       });
-
-       var networkpanel = Ext.create('PVE.lxc.NetworkInputPanel', {
-           title: gettext('Network'),
-           insideWizard: true,
-           dataCache: {},
-           isCreate: true
-       });
-
-       var passwordfield = Ext.createWidget('textfield', {
-           inputType: 'password',
-           name: 'password',
-           value: '',
-           fieldLabel: gettext('Password'),
-           allowBlank: false,
-           minLength: 5,
-           change: function(f, value) {
-               if (!me.rendered) {
-                   return;
-               }
-               me.down('field[name=confirmpw]').validate();
-           }
-       });
-
-       /*jslint confusion: true */
-       /* the validator function can return either a string or a boolean */
-       me.sshkeyfield = Ext.createWidget('pvetextfield', {
-           name: 'ssh-public-keys',
-           value: '',
-           fieldLabel: gettext('SSH public key'),
-           allowBlank: true,
-           validator: function(value) {
-               if (value.length) {
-                   var key = PVE.Parser.parseSSHKey(value);
-                   if (!key) {
-                       return "Failed to recognize ssh key";
-                   }
-                   me.down('field[name=password]').allowBlank = true;
-               } else {
-                   me.down('field[name=password]').allowBlank = false;
-               }
-               me.down('field[name=password]').validate();
-               return true;
-           },
-           afterRender: function() {
-               if (!window.FileReader) {
-                   // No FileReader support in this browser
-                   return;
-               }
-               var cancel = function(ev) {
-                   ev = ev.event;
-                   if (ev.preventDefault) {
-                       ev.preventDefault();
-                   }
-               };
-               me.sshkeyfield.inputEl.on('dragover', cancel);
-               me.sshkeyfield.inputEl.on('dragenter', cancel);
-               me.sshkeyfield.inputEl.on('drop', function(ev) {
-                   ev = ev.event;
-                   if (ev.preventDefault) {
-                       ev.preventDefault();
-                   }
-                   var files = ev.dataTransfer.files;
-                   me.loadSSHKeyFromFile(files[0]);
-               });
-           }
-       });
-
-       var column2 = [
-           {
-               xtype: 'pvePoolSelector',
-               fieldLabel: gettext('Resource Pool'),
-               name: 'pool',
-               value: '',
-               allowBlank: true
-           },
-           passwordfield,
-           {
-               xtype: 'textfield',
-               inputType: 'password',
-               name: 'confirmpw',
-               value: '',
-               fieldLabel: gettext('Confirm password'),
-               allowBlank: true,
-               validator: function(value) {
-                   var pw = me.down('field[name=password]').getValue();
-                   if (pw !== value) {
-                       return "Passwords do not match!";
-                   }
-                   return true;
-               }
-           },
-           me.sshkeyfield
-       ];
-       /*jslint confusion: false */
+    cbindData: {
+       nodename: undefined,
+    },
 
-       if (window.FileReader) {
-           column2.push({
-               xtype: 'filebutton',
-               name: 'file',
-               text: gettext('Load SSH Key File'),
-               listeners: {
-                   change: function(btn, e, value) {
-                       e = e.event;
-                       me.loadSSHKeyFromFile(e.target.files[0]);
-                       btn.reset();
-                   }
-               }
-           });
-       }
+    subject: gettext('LXC Container'),
 
-       Ext.applyIf(me, {
-           subject: gettext('LXC Container'),
-           items: [
+    items: [
+       {
+           xtype: 'inputpanel',
+           title: gettext('General'),
+           onlineHelp: 'pct_general',
+           column1: [
+               {
+                   xtype: 'pveNodeSelector',
+                   name: 'nodename',
+                   cbind: {
+                       selectCurNode: '{!nodename}',
+                       preferredValue: '{nodename}',
+                   },
+                   bind: {
+                       value: '{nodename}',
+                   },
+                   fieldLabel: gettext('Node'),
+                   allowBlank: false,
+                   onlineValidator: true,
+               },
+               {
+                   xtype: 'pveGuestIDSelector',
+                   name: 'vmid', // backend only knows vmid
+                   guestType: 'lxc',
+                   value: '',
+                   loadNextFreeID: true,
+                   validateExists: false,
+               },
+               {
+                   xtype: 'proxmoxtextfield',
+                   name: 'hostname',
+                   vtype: 'DnsName',
+                   value: '',
+                   fieldLabel: gettext('Hostname'),
+                   skipEmptyText: true,
+                   allowBlank: true,
+               },
+               {
+                   xtype: 'proxmoxcheckbox',
+                   name: 'unprivileged',
+                   value: true,
+                   bind: {
+                       value: '{unprivileged}',
+                   },
+                   fieldLabel: gettext('Unprivileged container'),
+               },
+           ],
+           column2: [
+               {
+                   xtype: 'pvePoolSelector',
+                   fieldLabel: gettext('Resource Pool'),
+                   name: 'pool',
+                   value: '',
+                   allowBlank: true,
+               },
+               {
+                   xtype: 'textfield',
+                   inputType: 'password',
+                   name: 'password',
+                   value: '',
+                   fieldLabel: gettext('Password'),
+                   allowBlank: false,
+                   minLength: 5,
+                   change: function(f, value) {
+                       if (f.rendered) {
+                           f.up().down('field[name=confirmpw]').validate();
+                       }
+                   },
+               },
+               {
+                   xtype: 'textfield',
+                   inputType: 'password',
+                   name: 'confirmpw',
+                   value: '',
+                   fieldLabel: gettext('Confirm password'),
+                   allowBlank: true,
+                   submitValue: false,
+                   validator: function(value) {
+                       var pw = this.up().down('field[name=password]').getValue();
+                       if (pw !== value) {
+                           return "Passwords do not match!";
+                       }
+                       return true;
+                   },
+               },
                {
-                   xtype: 'inputpanel',
-                   title: gettext('General'),
-                   onlineHelp: 'pct_general',
-                   column1: [
-                       {
-                           xtype: 'pveNodeSelector',
-                           name: 'nodename',
-                           selectCurNode: !me.nodename,
-                           preferredValue: me.nodename,
-                           fieldLabel: gettext('Node'),
-                           allowBlank: false,
-                           onlineValidator: true,
-                           listeners: {
-                               change: function(f, value) {
-                                   tmplstoragesel.setNodename(value);
-                                   tmplsel.setStorage(undefined, value);
-                                   networkpanel.setNodename(value);
-                                   rootfspanel.setNodename(value);
-                               }
+                   xtype: 'proxmoxtextfield',
+                   name: 'ssh-public-keys',
+                   value: '',
+                   fieldLabel: gettext('SSH public key'),
+                   allowBlank: true,
+                   validator: function(value) {
+                       var pwfield = this.up().down('field[name=password]');
+                       if (value.length) {
+                           var key = PVE.Parser.parseSSHKey(value);
+                           if (!key) {
+                               return "Failed to recognize ssh key";
                            }
-                       },
-                       {
-                           xtype: 'pveGuestIDSelector',
-                           name: 'vmid', // backend only knows vmid
-                           guestType: 'lxc',
-                           value: '',
-                           loadNextFreeID: true,
-                           validateExists: false
-                       },
-                       {
-                           xtype: 'pvetextfield',
-                           name: 'hostname',
-                           vtype: 'DnsName',
-                           value: '',
-                           fieldLabel: gettext('Hostname'),
-                           skipEmptyText: true,
-                           allowBlank: true
-                       },
-                       {
-                           xtype: 'pvecheckbox',
-                           name: 'unprivileged',
-                           value: '',
-                           fieldLabel: gettext('Unprivileged container')
+                           pwfield.allowBlank = true;
+                       } else {
+                           pwfield.allowBlank = false;
                        }
-                   ],
-                   column2: column2,
-                   onGetValues: function(values) {
-                       delete values.confirmpw;
-                       if (!values.pool) {
-                           delete values.pool;
+                       pwfield.validate();
+                       return true;
+                   },
+                   afterRender: function() {
+                       if (!window.FileReader) {
+                           // No FileReader support in this browser
+                           return;
                        }
-                       return values;
-                   }
+                       var cancel = function(ev) {
+                           ev = ev.event;
+                           if (ev.preventDefault) {
+                               ev.preventDefault();
+                           }
+                       };
+                       var field = this;
+                       field.inputEl.on('dragover', cancel);
+                       field.inputEl.on('dragenter', cancel);
+                       field.inputEl.on('drop', function(ev) {
+                           ev = ev.event;
+                           if (ev.preventDefault) {
+                               ev.preventDefault();
+                           }
+                           let files = ev.dataTransfer.files;
+                           PVE.Utils.loadSSHKeyFromFile(files[0], v => field.setValue(v));
+                       });
+                   },
                },
                {
-                   xtype: 'inputpanel',
-                   title: gettext('Template'),
-                   onlineHelp: 'pct_container_images',
-                   column1: [ tmplstoragesel, tmplsel]
+                   xtype: 'filebutton',
+                   name: 'file',
+                   hidden: !window.FileReader,
+                   text: gettext('Load SSH Key File'),
+                   listeners: {
+                       change: function(btn, e, value) {
+                           e = e.event;
+                           var field = this.up().down('proxmoxtextfield[name=ssh-public-keys]');
+                           PVE.Utils.loadSSHKeyFromFile(e.target.files[0], function(v) {
+                               field.setValue(v);
+                           });
+                           btn.reset();
+                       },
+                   },
                },
-               rootfspanel,
+           ],
+       },
+       {
+           xtype: 'inputpanel',
+           title: gettext('Template'),
+           onlineHelp: 'pct_container_images',
+           column1: [
                {
-                   xtype: 'pveLxcCPUInputPanel',
-                   title: gettext('CPU'),
-                   insideWizard: true
+                   xtype: 'pveStorageSelector',
+                   name: 'tmplstorage',
+                   fieldLabel: gettext('Storage'),
+                   storageContent: 'vztmpl',
+                   autoSelect: true,
+                   allowBlank: false,
+                   bind: {
+                       value: '{storage}',
+                       nodename: '{nodename}',
+                   },
                },
                {
-                   xtype: 'pveLxcMemoryInputPanel',
-                   title: gettext('Memory'),
-                   insideWizard: true
+                   xtype: 'pveFileSelector',
+                   name: 'ostemplate',
+                   storageContent: 'vztmpl',
+                   fieldLabel: gettext('Template'),
+                   bind: {
+                       storage: '{storage}',
+                       nodename: '{nodename}',
+                   },
+                   allowBlank: false,
                },
-               networkpanel,
+           ],
+       },
+       {
+           xtype: 'pveLxcMountPointInputPanel',
+           title: gettext('Root Disk'),
+           insideWizard: true,
+           isCreate: true,
+           unused: false,
+           bind: {
+               nodename: '{nodename}',
+               unprivileged: '{unprivileged}',
+           },
+           confid: 'rootfs',
+       },
+       {
+           xtype: 'pveLxcCPUInputPanel',
+           title: gettext('CPU'),
+           insideWizard: true,
+       },
+       {
+           xtype: 'pveLxcMemoryInputPanel',
+           title: gettext('Memory'),
+           insideWizard: true,
+       },
+       {
+           xtype: 'pveLxcNetworkInputPanel',
+           title: gettext('Network'),
+           insideWizard: true,
+           bind: {
+               nodename: '{nodename}',
+           },
+           isCreate: true,
+       },
+       {
+           xtype: 'pveLxcDNSInputPanel',
+           title: gettext('DNS'),
+           insideWizard: true,
+       },
+       {
+           title: gettext('Confirm'),
+           layout: 'fit',
+           items: [
                {
-                   xtype: 'pveLxcDNSInputPanel',
-                   title: gettext('DNS'),
-                   insideWizard: true
+                   xtype: 'grid',
+                   store: {
+                       model: 'KeyValue',
+                       sorters: [{
+                               property: 'key',
+                               direction: 'ASC',
+                       }],
+                   },
+                   columns: [
+                       { header: 'Key', width: 150, dataIndex: 'key' },
+                       { header: 'Value', flex: 1, dataIndex: 'value' },
+                   ],
                },
+           ],
+           dockedItems: [
                {
-                   title: gettext('Confirm'),
-                   layout: 'fit',
-                   items: [
-                       {
-                           xtype: 'grid',
-                           store: summarystore,
-                           columns: [
-                               {header: 'Key', width: 150, dataIndex: 'key'},
-                               {header: 'Value', flex: 1, dataIndex: 'value'}
-                           ]
+                   xtype: 'proxmoxcheckbox',
+                   name: 'start',
+                   dock: 'bottom',
+                   margin: '5 0 0 0',
+                   boxLabel: gettext('Start after created'),
+               },
+           ],
+           listeners: {
+               show: function(panel) {
+                   var wizard = this.up('window');
+                   var kv = wizard.getValues();
+                   var data = [];
+                   Ext.Object.each(kv, function(key, value) {
+                       if (key === 'delete' || key === 'tmplstorage') { // ignore
+                           return;
                        }
-                   ],
-                   listeners: {
-                       show: function(panel) {
-                           var form = me.down('form').getForm();
-                           var kv = me.getValues();
-                           var data = [];
-                           Ext.Object.each(kv, function(key, value) {
-                               if (key === 'delete' || key === 'tmplstorage') { // ignore
-                                   return;
-                               }
-                               if (key === 'password') { // don't show pw
-                                   return;
-                               }
-                               var html = Ext.htmlEncode(Ext.JSON.encode(value));
-                               data.push({ key: key, value: value });
-                           });
-                           summarystore.suspendEvents();
-                           summarystore.removeAll();
-                           summarystore.add(data);
-                           summarystore.sort();
-                           summarystore.resumeEvents();
-                           summarystore.fireEvent('refresh');
+                       if (key === 'password') { // don't show pw
+                           return;
                        }
-                   },
-                   onSubmit: function() {
-                       var kv = me.getValues();
-                       delete kv['delete'];
+                       var html = Ext.htmlEncode(Ext.JSON.encode(value));
+                       data.push({ key: key, value: value });
+                   });
 
-                       var nodename = kv.nodename;
-                       delete kv.nodename;
-                       delete kv.tmplstorage;
+                   var summarystore = panel.down('grid').getStore();
+                   summarystore.suspendEvents();
+                   summarystore.removeAll();
+                   summarystore.add(data);
+                   summarystore.sort();
+                   summarystore.resumeEvents();
+                   summarystore.fireEvent('refresh');
+               },
+           },
+           onSubmit: function() {
+               var wizard = this.up('window');
+               var kv = wizard.getValues();
+               delete kv.delete;
 
-                       if (!kv.password.length && kv['ssh-public-keys']) {
-                           delete kv.password;
-                       }
+               var nodename = kv.nodename;
+               delete kv.nodename;
+               delete kv.tmplstorage;
 
-                       PVE.Utils.API2Request({
-                           url: '/nodes/' + nodename + '/lxc',
-                           waitMsgTarget: me,
-                           method: 'POST',
-                           params: kv,
-                           success: function(response, opts){
-                               var upid = response.result.data;
+               if (!kv.pool.length) {
+                   delete kv.pool;
+               }
 
-                               var win = Ext.create('PVE.window.TaskViewer', {
-                                   upid: upid
-                               });
-                               win.show();
-                               me.close();
-                           },
-                           failure: function(response, opts) {
-                               Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-                           }
-                       });
-                   }
+               if (!kv.password.length && kv['ssh-public-keys']) {
+                   delete kv.password;
                }
-           ]
-       });
 
-       me.callParent();
-    }
-});
+               Proxmox.Utils.API2Request({
+                   url: '/nodes/' + nodename + '/lxc',
+                   waitMsgTarget: wizard,
+                   method: 'POST',
+                   params: kv,
+                   success: function(response, opts) {
+                       var upid = response.result.data;
 
+                       var win = Ext.create('Proxmox.window.TaskViewer', {
+                           upid: upid,
+                       });
+                       win.show();
+                       wizard.close();
+                   },
+                   failure: function(response, opts) {
+                       Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+                   },
+               });
+           },
+       },
+    ],
+});