[pbs-devel] [PATCH proxmox-backup 4/4] ui: remote edit: Change asterisk color

[Dominic Jäger]

The asterisk symbolises required input. Therefore,
 1. Color it red
 2. Display an error quicktip on it
if and only if the error is about missing input.

Signed-off-by: Dominic Jäger <d.jaeger at proxmox.com>
---
If somebody has a shorter idea, I'm all ears.

 www/Utils.js             | 15 +++++++++++++++
 www/window/RemoteEdit.js | 22 +++++++++++++++++++---
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/www/Utils.js b/www/Utils.js
index 14b58a25..1af8cddc 100644
--- a/www/Utils.js
+++ b/www/Utils.js
@@ -11,6 +11,21 @@ Ext.define('PBS.Utils', {
 
     dataStorePrefix: 'DataStore-',
 
+    getAsteriskTemplate: function() {
+	return new Ext.XTemplate(`<span id={id}-asterisk> *</span>`);
+    },
+
+    changeAsteriskColor: function(asterisk, error) {
+	let color = error.match(/required/) ? "red" : undefined;
+	let qtip = error.match(/required/) ? error : undefined;
+	asterisk.set({
+	    'data-errorqtip': qtip,
+	    style: {
+		color: color,
+	    },
+	});
+    },
+
     cryptmap: [
 	'none',
 	'mixed',
diff --git a/www/window/RemoteEdit.js b/www/window/RemoteEdit.js
index 7fb3a952..ce9a49b4 100644
--- a/www/window/RemoteEdit.js
+++ b/www/window/RemoteEdit.js
@@ -35,7 +35,7 @@ Ext.define('PBS.window.RemoteEdit', {
 		fieldLabel: gettext('Remote'),
 		renderer: Ext.htmlEncode,
 		allowBlank: false,
-		afterLabelTextTpl: " *",
+		afterLabelTextTpl: PBS.Utils.getAsteriskTemplate(),
 		minLength: 4,
 		cbind: {
 		    editable: '{isCreate}',
@@ -45,11 +45,17 @@ Ext.define('PBS.window.RemoteEdit', {
 		    tag: 'div',
 		    'data-qtip': gettext('A unique name to identify this remote.'),
 		},
+		listeners: {
+		    errorchange: function(labelable, error) {
+			let asterisk = Ext.get(`${labelable.ownerCt.id}-asterisk`);
+			PBS.Utils.changeAsteriskColor(asterisk, error);
+		    },
+		},
 	    },
 	    {
 		xtype: 'proxmoxtextfield',
 		allowBlank: false,
-		afterLabelTextTpl: " *",
+		afterLabelTextTpl: PBS.Utils.getAsteriskTemplate(),
 		name: 'hostport',
 		submitValue: false,
 		vtype: 'HostPort',
@@ -82,6 +88,10 @@ Ext.define('PBS.window.RemoteEdit', {
 			field.up('inputpanel').down('field[name=host]').setValue(host);
 			field.up('inputpanel').down('field[name=port]').setValue(port);
 		    },
+		    errorchange: function(labelable, error) {
+			let asterisk = Ext.get(`${labelable.id}-asterisk`);
+			PBS.Utils.changeAsteriskColor(asterisk, error);
+		    },
 		},
 	    },
 	    {
@@ -103,7 +113,7 @@ Ext.define('PBS.window.RemoteEdit', {
 	    {
 		xtype: 'proxmoxtextfield',
 		allowBlank: false,
-		afterLabelTextTpl: " *",
+		afterLabelTextTpl: PBS.Utils.getAsteriskTemplate(),
 		name: 'auth-id',
 		fieldLabel: gettext('Auth ID'),
 		msgTarget: 'side',
@@ -111,6 +121,12 @@ Ext.define('PBS.window.RemoteEdit', {
 		    tag: 'div',
 		    'data-qtip': gettext('For example: admin at pbs.'),
 		},
+		listeners: {
+		    errorchange: function(labelable, error) {
+			let asterisk = Ext.get(`${labelable.id}-asterisk`);
+			PBS.Utils.changeAsteriskColor(asterisk, error);
+		    },
+		},
 	    },
 	    {
 		xtype: 'textfield',
-- 
2.20.1