From 97e673b72cc96f5f866df7e990a51fa65bff5b5f Mon Sep 17 00:00:00 2001 From: Florian Eckert Date: Mon, 21 Jun 2021 13:48:40 +0200 Subject: [PATCH 1/3] luci-base: use button tag instead of input tag on named section add Signed-off-by: Florian Eckert --- modules/luci-base/htdocs/luci-static/resources/form.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js index 52506d30e8..9477b3f3c6 100644 --- a/modules/luci-base/htdocs/luci-static/resources/form.js +++ b/modules/luci-base/htdocs/luci-static/resources/form.js @@ -2203,10 +2203,8 @@ var CBITypedSection = CBIAbstractSection.extend(/** @lends LuCI.form.TypedSectio dom.append(createEl, [ E('div', {}, nameEl), - E('input', { + E('button', { 'class': 'cbi-button cbi-button-add', - 'type': 'submit', - 'value': btn_title || _('Add'), 'title': btn_title || _('Add'), 'click': ui.createHandlerFn(this, function(ev) { if (nameEl.classList.contains('cbi-input-invalid')) @@ -2215,7 +2213,7 @@ var CBITypedSection = CBIAbstractSection.extend(/** @lends LuCI.form.TypedSectio return this.handleAdd(ev, nameEl.value); }), 'disabled': this.map.readonly || null - }) + }, [ btn_title || _('Add') ]) ]); ui.addValidator(nameEl, 'uciname', true, 'blur', 'keyup'); From 80262bb9a7e63eeee0e1fa5f290b27a569a644bf Mon Sep 17 00:00:00 2001 From: Florian Eckert Date: Mon, 21 Jun 2021 15:02:04 +0200 Subject: [PATCH 2/3] luci-base: change css class btn to cbi-button The css class btn is only a valid input element on lua rendered pages. Use instead cbi-button for javascript rendered pages. Signed-off-by: Florian Eckert --- modules/luci-base/htdocs/luci-static/resources/form.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js index 9477b3f3c6..29e8fa7f05 100644 --- a/modules/luci-base/htdocs/luci-static/resources/form.js +++ b/modules/luci-base/htdocs/luci-static/resources/form.js @@ -603,7 +603,7 @@ var CBIMap = CBIAbstractElement.extend(/** @lends LuCI.form.Map.prototype */ { E('p', {}, [ _('An error occurred while saving the form:') ]), E('p', {}, [ E('em', { 'style': 'white-space:pre' }, [ e.message ]) ]), E('div', { 'class': 'right' }, [ - E('button', { 'class': 'btn', 'click': ui.hideModal }, [ _('Dismiss') ]) + E('button', { 'class': 'cbi-button', 'click': ui.hideModal }, [ _('Dismiss') ]) ]) ]); } @@ -2639,9 +2639,9 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p if (this.sortable) { dom.append(tdEl.lastElementChild, [ - E('div', { + E('button', { 'title': _('Drag to reorder'), - 'class': 'btn cbi-button drag-handle center', + 'class': 'cbi-button drag-handle center', 'style': 'cursor:move', 'disabled': this.map.readonly || null }, '☰') @@ -2879,7 +2879,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p nodes, E('div', { 'class': 'right' }, [ E('button', { - 'class': 'btn', + 'class': 'cbi-button', 'click': ui.createHandlerFn(this, 'handleModalCancel', m) }, [ _('Dismiss') ]), ' ', E('button', { From 87215e3d1bd2406c4a5ae5088e176fb4aefbe546 Mon Sep 17 00:00:00 2001 From: Helge Mader Date: Fri, 12 Mar 2021 15:47:38 +0100 Subject: [PATCH 3/3] luci-base: prevent empty field for adding new named section in JavaScript Suggested-by: Helge Mader Signed-off-by: Florian Eckert --- .../luci-base/htdocs/luci-static/resources/form.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js index 29e8fa7f05..e9c8d2eb00 100644 --- a/modules/luci-base/htdocs/luci-static/resources/form.js +++ b/modules/luci-base/htdocs/luci-static/resources/form.js @@ -2212,11 +2212,21 @@ var CBITypedSection = CBIAbstractSection.extend(/** @lends LuCI.form.TypedSectio return this.handleAdd(ev, nameEl.value); }), - 'disabled': this.map.readonly || null + 'disabled': true }, [ btn_title || _('Add') ]) ]); - ui.addValidator(nameEl, 'uciname', true, 'blur', 'keyup'); + ui.addValidator(nameEl, 'uciname', true, function(v) { + var button = document.querySelector('.cbi-section-create > .cbi-button-add'); + if (v !== '') { + button.disabled = false; + return true; + } + else { + button.disabled = true; + return _('Expecting: %s').format(_('non-empty value')); + } + }, 'blur', 'keyup'); } return createEl;