From c39243c66d5e20f08828770862576db1c0ceb9ab Mon Sep 17 00:00:00 2001 From: David E Jones Date: Thu, 2 Feb 2023 16:10:20 -0800 Subject: [PATCH 01/25] On Login screen fix auto-focus of username field on login tab by moving to trigger on tab set/change allowing auto focus on other tabs, also if there is a username and 2nd factor required then auto focus on that to save a click in that flow on login and change tabs --- .../webroot/screen/webroot/Login.ftl | 41 ++++++++++++------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/base-component/webroot/screen/webroot/Login.ftl b/base-component/webroot/screen/webroot/Login.ftl index 7dcb811f0..43444317a 100644 --- a/base-component/webroot/screen/webroot/Login.ftl +++ b/base-component/webroot/screen/webroot/Login.ftl @@ -39,15 +39,15 @@ <#-- people know what to do

${ec.l10n.localize("Enter your username and password to sign in")}

--> <#-- not needed for this request: --> - disabled="disabled" - required="required" class="form-control top" id="login_form_username" + required="required" class="form-control top" placeholder="${ec.l10n.localize("Username")}" aria-label="${ec.l10n.localize("Username")}"> <#-- secondFactorRequired will only be set if a user is pre-authenticated, and in that case password not required again --> <#if secondFactorRequired> - + <#else> @@ -56,16 +56,16 @@ <#if expiredCredentials>

WARNING: Your password has expired

<#if passwordChangeRequired>

WARNING: Password change required

-
@@ -74,18 +74,19 @@

${ec.l10n.localize("Enter details to change your password")}

- disabled="disabled" + required="required" class="form-control top" placeholder="${ec.l10n.localize("Username")}" aria-label="${ec.l10n.localize("Username")}"> <#-- secondFactorRequired will only be set if a user is pre-authenticated, and in that case password not required again --> <#if secondFactorRequired> - + <#else> + placeholder="${ec.l10n.localize("Old Password")}" aria-label="${ec.l10n.localize("Old Password")}"> <#-- FUTURE: fancy JS to validate PW as it is entered or on blur --> + if (tabName === "login") { $("#login_form_code").focus(); } + else if (tabName === "change") { $("#change_form_code").focus(); } + else if (tabName === "reset") { $("#reset_form_username").focus(); } + <#else> + if (tabName === "login") { $("#login_form_username").focus(); } + else if (tabName === "change") { $("#change_form_username").focus(); } + else if (tabName === "reset") { $("#reset_form_username").focus(); } + }); $('a[href="' + (location.hash || '${initialTab!"#login"}') + '"]').tab('show'); }) From 8363a40eb777b956712bd78276a6f10ff87a087c Mon Sep 17 00:00:00 2001 From: David E Jones Date: Fri, 3 Feb 2023 15:37:06 -0800 Subject: [PATCH 02/25] Add m-mermaid vue component for qvt render mode, use on new StatusFlows screen in the tools app; the results when status items are sorted in Mermaid JS are pretty good, might even be end-user useful but at least here useful for devs --- .../tools/screen/Tools/StatusFlows.xml | 96 +++++++++++++++++++ .../tools/screen/Tools/dashboard.xml | 5 + .../screen/webroot/js/WebrootVue.qvt.js | 14 +++ 3 files changed, 115 insertions(+) create mode 100644 base-component/tools/screen/Tools/StatusFlows.xml diff --git a/base-component/tools/screen/Tools/StatusFlows.xml b/base-component/tools/screen/Tools/StatusFlows.xml new file mode 100644 index 000000000..6e5ddd108 --- /dev/null +++ b/base-component/tools/screen/Tools/StatusFlows.xml @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/base-component/tools/screen/Tools/dashboard.xml b/base-component/tools/screen/Tools/dashboard.xml index d45b78de6..17b6a4f55 100644 --- a/base-component/tools/screen/Tools/dashboard.xml +++ b/base-component/tools/screen/Tools/dashboard.xml @@ -86,6 +86,11 @@ along with this software (see the LICENSE.md file). If not, see + + + + + diff --git a/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js b/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js index f820c0885..5ffaf7dc3 100644 --- a/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js +++ b/base-component/webroot/screen/webroot/js/WebrootVue.qvt.js @@ -1857,6 +1857,20 @@ Vue.component('m-chart', { }, function() { return !!window.Chart; }); } }); +/* Lazy loading Mermaid JS wrapper component; for config options see https://mermaid.js.org/config/usage.html */ +Vue.component('m-mermaid', { + name: 'mMermaid', + props: { config:{type:Object,'default': function() { return {startOnLoad:true,securityLevel:'loose'} }}, + height:{type:String,'default':'400px'}, width:{type:String,'default':'100%'} }, + template: '
', + mounted: function() { + var vm = this; + moqui.loadScript('https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.3.0/mermaid.min.js', function(err) { + if (err) return; + mermaid.init(vm.config, vm.$refs.mermaid); + }, function() { return !!window.mermaid; }); + } +}); /* Lazy loading CK Editor wrapper component, based on https://github.com/ckeditor/ckeditor4-vue */ /* see https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html */ Vue.component('m-ck-editor', { From 417d16043e527a4c51bb1fbaea7fa5a2448ec041 Mon Sep 17 00:00:00 2001 From: David E Jones Date: Fri, 3 Feb 2023 16:59:05 -0800 Subject: [PATCH 03/25] On StatusFlows screen add dialog with Mermaid JS text to make it easier to grab for customization and use elsewhere like in docs --- base-component/tools/screen/Tools/StatusFlows.xml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/base-component/tools/screen/Tools/StatusFlows.xml b/base-component/tools/screen/Tools/StatusFlows.xml index 6e5ddd108..311b60d81 100644 --- a/base-component/tools/screen/Tools/StatusFlows.xml +++ b/base-component/tools/screen/Tools/StatusFlows.xml @@ -66,8 +66,11 @@ along with this software (see the LICENSE.md file). If not, see -