From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <root@dev.dominic.proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
 (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
 key-exchange X25519 server-signature RSA-PSS (2048 bits))
 (No client certificate requested)
 by lists.proxmox.com (Postfix) with ESMTPS id 371A76981D
 for <pbs-devel@lists.proxmox.com>; Tue, 19 Jan 2021 12:09:30 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
 by firstgate.proxmox.com (Proxmox) with ESMTP id 355A41D55A
 for <pbs-devel@lists.proxmox.com>; Tue, 19 Jan 2021 12:09:30 +0100 (CET)
Received: from dev.dominic.proxmox.com (212-186-127-178.static.upcbusiness.at
 [212.186.127.178])
 by firstgate.proxmox.com (Proxmox) with ESMTP id 407061D504
 for <pbs-devel@lists.proxmox.com>; Tue, 19 Jan 2021 12:09:25 +0100 (CET)
Received: by dev.dominic.proxmox.com (Postfix, from userid 0)
 id 25DEF223B8; Tue, 19 Jan 2021 12:09:25 +0100 (CET)
From: =?UTF-8?q?Dominic=20J=C3=A4ger?= <d.jaeger@proxmox.com>
To: pbs-devel@lists.proxmox.com
Date: Tue, 19 Jan 2021 12:09:15 +0100
Message-Id: <20210119110915.18864-5-d.jaeger@proxmox.com>
X-Mailer: git-send-email 2.20.1
In-Reply-To: <20210119110915.18864-1-d.jaeger@proxmox.com>
References: <20210119110915.18864-1-d.jaeger@proxmox.com>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results:  1
 AWL -0.351 Adjusted score from AWL reputation of From: address
 KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
 KAM_LAZY_DOMAIN_SECURITY 1 Sending domain does not have any anti-forgery
 methods
 KHOP_HELO_FCRDNS        0.398 Relay HELO differs from its IP's reverse DNS
 NO_DNS_FOR_FROM         0.379 Envelope sender has no MX or A DNS records
 SPF_HELO_NONE           0.001 SPF: HELO does not publish an SPF Record
 SPF_NONE                0.001 SPF: sender does not publish an SPF Record
 URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See
 http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more
 information. [ownerct.id, labelable.id]
Subject: [pbs-devel] [PATCH proxmox-backup 4/4] ui: remote edit: Change
 asterisk color
X-BeenThere: pbs-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox Backup Server development discussion
 <pbs-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pbs-devel>, 
 <mailto:pbs-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pbs-devel/>
List-Post: <mailto:pbs-devel@lists.proxmox.com>
List-Help: <mailto:pbs-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel>, 
 <mailto:pbs-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Tue, 19 Jan 2021 11:09:30 -0000

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@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@pbs.'),
 		},
+		listeners: {
+		    errorchange: function(labelable, error) {
+			let asterisk = Ext.get(`${labelable.id}-asterisk`);
+			PBS.Utils.changeAsteriskColor(asterisk, error);
+		    },
+		},
 	    },
 	    {
 		xtype: 'textfield',
-- 
2.20.1