[pmg-devel] [PATCH pmg-gui 1/3] LoginView: add save username checkbox

[pmg-devel] [PATCH pmg-gui 1/3] LoginView: add save username checkbox

[Dominik Csapak]

like we have in pbs/pve but only for non-quarantine view

we have to increase the width of the window, so it fits together
with the 'send quarantine link' button

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 js/LoginView.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/js/LoginView.js b/js/LoginView.js
index 4770494..7ad695c 100644
--- a/js/LoginView.js
+++ b/js/LoginView.js
@@ -16,6 +16,9 @@ Ext.define('PMG.LoginView', {
 		return;
 	    }
 
+	    // hide save username field for quarantine view
+	    me.lookup('saveunField').setVisible(false);
+
 	    realmfield.setValue('quarantine');
 
 	    // try autologin with quarantine ticket from URL
@@ -45,11 +48,25 @@ Ext.define('PMG.LoginView', {
 	    let me = this;
 	    let view = me.getView();
 	    let loginForm = me.lookupReference('loginForm');
+	    var unField = me.lookupReference('usernameField');
+	    var saveunField = me.lookupReference('saveunField');
 
 	    if (loginForm.isValid()) {
 		if (loginForm.isVisible()) {
 		    loginForm.mask(gettext('Please wait...'), 'x-mask-loading');
 		}
+
+		// set or clear username for admin view
+		if (view.targetview !== 'quarantineview') {
+		    var sp = Ext.state.Manager.getProvider();
+		    if (saveunField.getValue() === true) {
+			sp.set(unField.getStateId(), unField.getValue());
+		    } else {
+			sp.clear(unField.getStateId());
+		    }
+		    sp.set(saveunField.getStateId(), saveunField.getValue());
+		}
+
 		loginForm.submit({
 		    success: function(form, action) {
 			// save login data and create cookie
@@ -108,6 +125,27 @@ Ext.define('PMG.LoginView', {
 	    'button[reference=loginButton]': {
 		click: 'submitForm',
 	    },
+	    'window[reference=loginwindow]': {
+		show: function() {
+		    let me = this;
+		    let view = me.getView();
+		    if (view.targetview !== 'quarantineview') {
+			var sp = Ext.state.Manager.getProvider();
+			var checkboxField = this.lookupReference('saveunField');
+			var unField = this.lookupReference('usernameField');
+
+			var checked = sp.get(checkboxField.getStateId());
+			checkboxField.setValue(checked);
+
+			if (checked === true) {
+			    var username = sp.get(unField.getStateId());
+			    unField.setValue(username);
+			    var pwField = this.lookupReference('passwordField');
+			    pwField.focus();
+			}
+		    }
+		},
+	    },
 	},
     },
 
@@ -147,6 +185,7 @@ Ext.define('PMG.LoginView', {
 	    reference: 'loginwindow',
 	    autoShow: true,
 	    modal: true,
+	    width: 450,
 
 	    defaultFocus: 'usernameField',
 
@@ -178,6 +217,7 @@ Ext.define('PMG.LoginView', {
 			    name: 'username',
 			    itemId: 'usernameField',
 			    reference: 'usernameField',
+			    stateId: 'login-username',
 			},
 			{
 			    xtype: 'textfield',
@@ -201,6 +241,16 @@ Ext.define('PMG.LoginView', {
                         },
 		    ],
 		    buttons: [
+			{
+			    xtype: 'checkbox',
+			    fieldLabel: gettext('Save User name'),
+			    name: 'saveusername',
+			    reference: 'saveunField',
+			    stateId: 'login-saveusername',
+			    labelAlign: 'right',
+			    labelWidth: 150,
+			    submitValue: false,
+			},
 			{
 			    text: gettext('Request Quarantine Link'),
 			    reference: 'quarantineButton',
-- 
2.30.2

[pmg-devel] [PATCH pmg-gui 2/3] ServerStatus: update column width on state change

[Dominik Csapak]

when having the settings window (when implemented) open there

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 js/ServerStatus.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/js/ServerStatus.js b/js/ServerStatus.js
index ba34a65..f006080 100644
--- a/js/ServerStatus.js
+++ b/js/ServerStatus.js
@@ -172,6 +172,14 @@ Ext.define('PMG.ServerStatus', {
 	    },
 	});
 	me.callParent();
+
+	let sp = Ext.state.Manager.getProvider();
+	me.mon(sp, 'statechange', function(provider, key, value) {
+	    if (key !== 'summarycolumns') {
+		return;
+	    }
+	    Proxmox.Utils.updateColumnWidth(me);
+	});
    },
 });
 
-- 
2.30.2

[pmg-devel] [PATCH pmg-gui 3/3] add Settings window

[Dominik Csapak]

copied from pbs and changed PBS to PMG

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 js/MainView.js |   5 +
 js/Makefile    |   1 +
 js/Settings.js | 293 +++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 299 insertions(+)
 create mode 100644 js/Settings.js

diff --git a/js/MainView.js b/js/MainView.js
index 4c4f28c..311b8c7 100644
--- a/js/MainView.js
+++ b/js/MainView.js
@@ -203,6 +203,11 @@ Ext.define('PMG.MainView', {
 		    margin: '0 5 0 0',
 		    iconCls: 'fa fa-user',
 		    menu: [
+			{
+			    iconCls: 'fa fa-gear',
+			    text: gettext('My Settings'),
+			    handler: () => Ext.create('PMG.window.Settings').show(),
+			},
 			{
 			    iconCls: 'fa fa-language',
 			    text: gettext('Language'),
diff --git a/js/Makefile b/js/Makefile
index 43d3ad8..165436b 100644
--- a/js/Makefile
+++ b/js/Makefile
@@ -92,6 +92,7 @@ JSSRC=							\
 	HourlyMailDistribution.js			\
 	SpamContextMenu.js				\
 	Certificates.js					\
+	Settings.js					\
 	Application.js
 
 OnlineHelpInfo.js: /usr/bin/asciidoc-pmg
diff --git a/js/Settings.js b/js/Settings.js
new file mode 100644
index 0000000..4e9fe8d
--- /dev/null
+++ b/js/Settings.js
@@ -0,0 +1,293 @@
+Ext.define('PMG.window.Settings', {
+    extend: 'Ext.window.Window',
+
+    width: '800px',
+    title: gettext('My Settings'),
+    iconCls: 'fa fa-gear',
+    modal: true,
+    bodyPadding: 10,
+    resizable: false,
+
+    buttons: [
+	'->',
+	{
+	    text: gettext('Close'),
+	    handler: function() {
+		this.up('window').close();
+	    },
+	},
+    ],
+
+    layout: 'hbox',
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	init: function(view) {
+	    let me = this;
+	    let sp = Ext.state.Manager.getProvider();
+
+	    let username = sp.get('login-username') || Proxmox.Utils.noneText;
+	    me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username));
+
+	    let summarycolumns = sp.get('summarycolumns', 'auto');
+	    me.lookup('summarycolumns').setValue(summarycolumns);
+
+	    let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
+	    settings.forEach(function(setting) {
+		let val = localStorage.getItem('pve-xterm-' + setting);
+		if (val !== undefined && val !== null) {
+		    let field = me.lookup(setting);
+		    field.setValue(val);
+		    field.resetOriginalValue();
+		}
+	    });
+	},
+
+	set_button_status: function() {
+	    let me = this;
+
+	    let form = me.lookup('xtermform');
+	    let valid = form.isValid();
+	    let dirty = form.isDirty();
+
+	    let hasvalues = false;
+	    let values = form.getValues();
+	    Ext.Object.eachValue(values, function(value) {
+		if (value) {
+		    hasvalues = true;
+		    return false;
+		}
+		return true;
+	    });
+
+	    me.lookup('xtermsave').setDisabled(!dirty || !valid);
+	    me.lookup('xtermreset').setDisabled(!hasvalues);
+	},
+
+	control: {
+	    '#xtermjs form': {
+		dirtychange: 'set_button_status',
+		validitychange: 'set_button_status',
+	    },
+	    '#xtermjs button': {
+		click: function(button) {
+		    let me = this;
+		    let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
+		    settings.forEach(function(setting) {
+			let field = me.lookup(setting);
+			if (button.reference === 'xtermsave') {
+			    let value = field.getValue();
+			    if (value) {
+				localStorage.setItem('pve-xterm-' + setting, value);
+			    } else {
+				localStorage.removeItem('pve-xterm-' + setting);
+			    }
+			} else if (button.reference === 'xtermreset') {
+			    field.setValue(undefined);
+			    localStorage.removeItem('pve-xterm-' + setting);
+			}
+			field.resetOriginalValue();
+		    });
+		    me.set_button_status();
+		},
+	    },
+	    'button[name=reset]': {
+		click: function() {
+		    let blacklist = ['login-username'];
+		    let sp = Ext.state.Manager.getProvider();
+		    for (const state of Object.values(sp.state)) {
+			if (blacklist.indexOf(state) !== -1) {
+			    continue;
+			}
+
+			sp.clear(state);
+		    }
+
+		    window.location.reload();
+		},
+	    },
+	    'button[name=clear-username]': {
+		click: function() {
+		    let me = this;
+		    let usernamefield = me.lookupReference('savedUserName');
+		    let sp = Ext.state.Manager.getProvider();
+
+		    usernamefield.setValue(Proxmox.Utils.noneText);
+		    sp.clear('login-username');
+		},
+	    },
+	    'field[reference=summarycolumns]': {
+		change: function(el, newValue) {
+		    var sp = Ext.state.Manager.getProvider();
+		    sp.set('summarycolumns', newValue);
+		},
+	    },
+	},
+    },
+
+    items: [{
+	xtype: 'fieldset',
+	flex: 1,
+	title: gettext('Webinterface Settings'),
+	margin: '5',
+	layout: {
+	    type: 'vbox',
+	    align: 'left',
+	},
+	defaults: {
+	    width: '100%',
+	    margin: '0 0 10 0',
+	},
+	items: [
+	    {
+		xtype: 'container',
+		layout: 'hbox',
+		items: [
+		    {
+			xtype: 'displayfield',
+			fieldLabel: gettext('Saved User Name') + ':',
+			labelWidth: 150,
+			stateId: 'login-username',
+			reference: 'savedUserName',
+			flex: 1,
+			value: '',
+		    },
+		    {
+			xtype: 'button',
+			cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+			text: gettext('Reset'),
+			name: 'clear-username',
+		    },
+		],
+	    },
+	    {
+		xtype: 'box',
+		autoEl: { tag: 'hr' },
+	    },
+	    {
+		xtype: 'container',
+		layout: 'hbox',
+		items: [
+		    {
+			xtype: 'displayfield',
+			fieldLabel: gettext('Layout') + ':',
+			flex: 1,
+		    },
+		    {
+			xtype: 'button',
+			cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+			text: gettext('Reset'),
+			tooltip: gettext('Reset all layout changes (for example, column widths)'),
+			name: 'reset',
+		    },
+		],
+	    },
+	    {
+		xtype: 'box',
+		autoEl: { tag: 'hr' },
+	    },
+	    {
+		xtype: 'proxmoxKVComboBox',
+		fieldLabel: gettext('Summary/Dashboard columns') + ':',
+		labelWidth: 150,
+		stateId: 'summarycolumns',
+		reference: 'summarycolumns',
+		comboItems: [
+		    ['auto', 'auto'],
+		    ['1', '1'],
+		    ['2', '2'],
+		    ['3', '3'],
+		],
+	    },
+	],
+    },
+    {
+	xtype: 'container',
+	layout: 'vbox',
+	flex: 1,
+	margin: '5',
+	defaults: {
+	    width: '100%',
+	    // right margin ensures that the right border of the fieldsets
+	    // is shown
+	    margin: '0 2 10 0',
+	},
+	items: [
+	    {
+		xtype: 'fieldset',
+		itemId: 'xtermjs',
+		title: gettext('xterm.js Settings'),
+		items: [{
+		    xtype: 'form',
+		    reference: 'xtermform',
+		    border: false,
+		    layout: {
+			type: 'vbox',
+			algin: 'left',
+		    },
+		    defaults: {
+			width: '100%',
+			margin: '0 0 10 0',
+		    },
+		    items: [
+			{
+			    xtype: 'textfield',
+			    name: 'fontFamily',
+			    reference: 'fontFamily',
+			    emptyText: Proxmox.Utils.defaultText,
+			    fieldLabel: gettext('Font-Family'),
+			},
+			{
+			    xtype: 'proxmoxintegerfield',
+			    emptyText: Proxmox.Utils.defaultText,
+			    name: 'fontSize',
+			    reference: 'fontSize',
+			    minValue: 1,
+			    fieldLabel: gettext('Font-Size'),
+			},
+			{
+			    xtype: 'numberfield',
+			    name: 'letterSpacing',
+			    reference: 'letterSpacing',
+			    emptyText: Proxmox.Utils.defaultText,
+			    fieldLabel: gettext('Letter Spacing'),
+			},
+			{
+			    xtype: 'numberfield',
+			    name: 'lineHeight',
+			    minValue: 0.1,
+			    reference: 'lineHeight',
+			    emptyText: Proxmox.Utils.defaultText,
+			    fieldLabel: gettext('Line Height'),
+			},
+			{
+			    xtype: 'container',
+			    layout: {
+				type: 'hbox',
+				pack: 'end',
+			    },
+			    defaults: {
+				margin: '0 0 0 5',
+			    },
+			    items: [
+				{
+				    xtype: 'button',
+				    reference: 'xtermreset',
+				    disabled: true,
+				    text: gettext('Reset'),
+				},
+				{
+				    xtype: 'button',
+				    reference: 'xtermsave',
+				    disabled: true,
+				    text: gettext('Save'),
+				},
+			    ],
+			},
+		    ],
+		}],
+	    },
+	],
+    }],
+});
-- 
2.30.2

[pmg-devel] applied-series: [PATCH pmg-gui 1/3] LoginView: add save username checkbox

[Thomas Lamprecht]

On 13.07.21 12:26, Dominik Csapak wrote:
> like we have in pbs/pve but only for non-quarantine view
> 
> we have to increase the width of the window, so it fits together
> with the 'send quarantine link' button
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  js/LoginView.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++++
>  1 file changed, 50 insertions(+)
> 
>

applied series, thanks!