From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: 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 ; 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 ; 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 ; 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?= 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 List-Unsubscribe: , List-Archive: List-Post: List-Help: List-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 --- 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(` *`); + }, + + 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