@gov-cy/govcy-express-services 1.0.0-alpha.10 → 1.0.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-express-services",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
   "description": "An Express-based system that dynamically renders services using @gov-cy/govcy-frontend-renderer and posts data to a submission API.",
   "author": "DMRID - DSF Team",
   "license": "MIT",
@@ -44,11 +44,13 @@
     "test:integration": "mocha --recursive tests/integration/**/*.test.mjs",
     "test:package": "mocha --recursive tests/package/**/*.test.mjs",
     "test:functional": "mocha --timeout 30000 --recursive tests/functional/**/*.test.mjs",
-    "test:watch": "mocha --watch --timeout 60000 tests/**/*.test.mjs"
+    "test:watch": "mocha --watch --timeout 60000 tests/**/*.test.mjs",
+    "coverage": "c8 --reporter=html --reporter=text --reporter=lcov npm test",
+    "coverage:report": "c8 report"
   },
   "dependencies": {
     "@gov-cy/dsf-email-templates": "^2.1.0",
-    "@gov-cy/govcy-frontend-renderer": "^1.21.0",
+    "@gov-cy/govcy-frontend-renderer": "^1.22.0",
     "axios": "^1.9.0",
     "cookie-parser": "^1.4.7",
     "dotenv": "^16.3.1",
@@ -60,6 +62,7 @@
     "puppeteer": "^24.6.0"
   },
   "devDependencies": {
+    "c8": "^10.1.3",
     "chai": "^5.2.0",
     "chai-http": "^5.1.1",
     "mocha": "^11.1.0",

package/src/middleware/govcyFileDeleteHandler.mjs

@@ -139,7 +139,7 @@ export function govcyFileDeletePageHandler() {
             //--------- End Handle Validation Errors ---------
 
             // Add elements to the main section, the H1, summary list, the submit button and the JS
-            mainElements.push(formElement, govcyResources.staticResources.elements["govcyFormsJs"]);
+            mainElements.push(formElement);
             // Append generated summary list to the page template
             pageTemplate.sections.push({ name: "main", elements: mainElements });
 
@@ -221,6 +221,7 @@ export function govcyFileDeletePostHandler() {
             //if no validation errors
             if (req.body.deleteFile === "yes") {
                 dataLayer.storePageDataElement(req.session, siteId, pageUrl, elementName, "");
+                logger.info(`File deleted by user`, { siteId, pageUrl, elementName });
             }
             // construct the page url
             let myUrl = new URL(pageBaseReturnUrl);

package/src/middleware/govcyPageHandler.mjs

@@ -53,11 +53,7 @@ export function govcyPageHandler() {
             element.params.method = "POST";
             // ➕ Add CSRF token
             element.params.elements.push(govcyResources.csrfTokenInput(req.csrfToken()));
-            // // ➕ Add siteId and pageUrl to form data
-            // element.params.elements.push(govcyResources.siteAndPageInput(siteId, pageUrl, req.globalLang));
-            // ➕ Add govcyFormsJs script to the form
-            element.params.elements.push(govcyResources.staticResources.elements["govcyFormsJs"]);
-
+            
             // 🔍 Find the first button with `prototypeNavigate`
             const button = element.params.elements.find(subElement =>
               // subElement.element === "button" && subElement.params.prototypeNavigate

package/src/middleware/govcyPageRender.mjs

@@ -1,4 +1,5 @@
 import { govcyFrontendRenderer } from "@gov-cy/govcy-frontend-renderer";
+import * as govcyResources from "../resources/govcyResources.mjs";
 
 /**
  * Middleware function to render pages using the GovCy Frontend Renderer.
@@ -6,8 +7,17 @@ import { govcyFrontendRenderer } from "@gov-cy/govcy-frontend-renderer";
  */
 export function renderGovcyPage() {
     return (req, res) => {
+        const afterBody = {
+            name: "afterBody",
+            elements: [ 
+                govcyResources.staticResources.elements["govcyLoadingOverlay"],
+                govcyResources.staticResources.elements["govcyFormsJs"]
+            ]
+        };
+        // Initialize the renderer
         const renderer = new govcyFrontendRenderer();
         const { processedPage } = req;
+        processedPage.pageTemplate.sections.push(afterBody);
         const html = renderer.renderFromJSON(processedPage.pageTemplate, processedPage.pageData);
         res.send(html);
     };

package/src/middleware/govcyReviewPageHandler.mjs

@@ -79,7 +79,10 @@ export function govcyReviewPageHandler() {
             //--------- End Handle Validation Errors ---------
 
             // Add elements to the main section, the H1, summary list, the submit button and the JS
-            mainElements.push(pageH1, summaryList, submitButton, govcyResources.staticResources.elements["govcyFormsJs"]);
+            mainElements.push(pageH1, 
+                summaryList, 
+                submitButton
+            );
             // Append generated summary list to the page template
             pageTemplate.sections.push({ name: "main", elements: mainElements });
             

package/src/middleware/govcySuccessPageHandler.mjs

@@ -87,8 +87,7 @@ export function govcySuccessPageHandler(isPDF = false) {
                 weHaveSendYouAnEmail, 
                 pdfLink,
                 theDataFromYourRequest, 
-                summaryList, 
-                govcyResources.staticResources.elements["govcyFormsJs"]
+                summaryList
             );
             // Append generated summary list to the page template
             pageTemplate.sections.push({ name: "main", elements: mainElements });

package/src/public/js/govcyFiles.js

@@ -1,11 +1,105 @@
 // 🔍 Select all file inputs that have the .govcy-file-upload class
 var fileInputs = document.querySelectorAll('input[type="file"].govcy-file-upload');
 
+// select overlay and app root elements
+var _govcyOverlay = document.getElementById("govcy--loadingOverlay");
+var _govcyAppRoot = document.getElementById("govcy--body");
+
+// Accessibility: Keep track of previously focused element and disabled elements
+var _govcyPrevFocus = null;
+var _govcyDisabledEls = [];
+
 // 🔁 Loop over each file input and attach a change event listener
 fileInputs.forEach(function(input) {
   input.addEventListener('change', _uploadFileEventHandler);
 });
 
+/**
+ * Disables all focusable elements within a given root element
+ * @param {*} root  The root element whose focusable children will be disabled
+ */
+function disableFocusables(root) {
+    var sel = 'a[href],area[href],button,input,select,textarea,iframe,summary,[contenteditable="true"],[tabindex]:not([tabindex="-1"])';
+    var nodes = root.querySelectorAll(sel);
+    _govcyDisabledEls = [];
+    for (var i = 0; i < nodes.length; i++) {
+        var el = nodes[i];
+        if (_govcyOverlay.contains(el)) continue;                 // don’t disable overlay itself
+        var prev = el.getAttribute('tabindex');
+        el.setAttribute('data-prev-tabindex', prev === null ? '' : prev);
+        el.setAttribute('tabindex', '-1');
+        _govcyDisabledEls.push(el);
+    }
+    root.setAttribute('aria-hidden', 'true');              // hide from AT on fallback
+    root.setAttribute('aria-busy', 'true');
+}
+
+/**
+ * Restores all focusable elements within a given root element
+ * @param {*} root  The root element whose focusable children will be restored
+ */
+function restoreFocusables(root) {
+    for (var i = 0; i < _govcyDisabledEls.length; i++) {
+        var el = _govcyDisabledEls[i];
+        var prev = el.getAttribute('data-prev-tabindex');
+        if (prev === '') el.removeAttribute('tabindex'); else el.setAttribute('tabindex', prev);
+        el.removeAttribute('data-prev-tabindex');
+    }
+    _govcyDisabledEls = [];
+    root.removeAttribute('aria-hidden');
+    root.removeAttribute('aria-busy');
+}
+
+/**
+ * Traps tab key navigation within the overlay
+ * @param {*} e The event
+ * @returns 
+ */
+function trapTab(e) {
+    if (e.key !== 'Tab') return;
+    var focusables = _govcyOverlay.querySelectorAll('a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"])');
+    if (focusables.length === 0) { e.preventDefault(); _govcyOverlay.focus(); return; }
+    var first = focusables[0], last = focusables[focusables.length - 1];
+    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+}
+
+/**
+ * Shows the loading spinner overlay and traps focus within it
+ */
+function showLoadingSpinner() {
+    _govcyPrevFocus = document.activeElement;
+    _govcyOverlay.setAttribute('aria-hidden', 'false');
+    _govcyOverlay.setAttribute('tabindex', '-1');
+    _govcyOverlay.style.display = 'flex';
+    document.documentElement.style.overflow = 'hidden';
+
+    if ('inert' in HTMLElement.prototype) {               // progressive enhancement
+        _govcyAppRoot.inert = true;
+    } else {
+        disableFocusables(_govcyAppRoot);
+        document.addEventListener('keydown', trapTab, true);
+    }
+    _govcyOverlay.focus();
+}
+
+/**
+ * Hides the loading spinner overlay and restores focus to the previously focused element
+ */
+function hideLoadingSpinner() {
+    _govcyOverlay.style.display = 'none';
+    _govcyOverlay.setAttribute('aria-hidden', 'true');
+    document.documentElement.style.overflow = '';
+
+    if ('inert' in HTMLElement.prototype) {
+        _govcyAppRoot.inert = false;
+    } else {
+        restoreFocusables(_govcyAppRoot);
+        document.removeEventListener('keydown', trapTab, true);
+    }
+    if (_govcyPrevFocus && _govcyPrevFocus.focus) _govcyPrevFocus.focus();
+}
+
 
 /**
  * Handles the upload of a file event
@@ -63,6 +157,9 @@ function _uploadFileEventHandler(event) {
 
   if (!file) return; // Exit if no file was selected
 
+  // Show loading spinner
+  showLoadingSpinner();
+
   // 🧵 Prepare form-data payload for the API
   var formData = new FormData();
   formData.append('file', file);               // Attach the actual file
@@ -93,6 +190,9 @@ function _uploadFileEventHandler(event) {
       // 📝 Store returned metadata in hidden fields if needed
       // document.querySelector('[name="' + elementName + 'Attachment[fileId]"]').value = fileId;
       // document.querySelector('[name="' + elementName + 'Attachment[sha256]"]').value = sha256;
+      
+      // Hide loading spinner
+      hideLoadingSpinner();
 
       // Render the file view
       _renderFileElement("fileView", elementId, elementName, fileId, sha256, null);
@@ -117,6 +217,8 @@ function _uploadFileEventHandler(event) {
         errorMessage = messages["uploadFailed" + errorCode];
       }
 
+      // Hide loading spinner
+      hideLoadingSpinner();
       // Render the file input with error
       _renderFileElement("fileInput", elementId, elementName, "", "", errorMessage);
 

package/src/resources/govcyResources.mjs

@@ -158,9 +158,19 @@ export const staticResources = {
             element: "htmlElement",
             params: {
                 text: {
-                    en: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyFrontendRenderer.browser.js"></script><script type="module" src="/js/govcyForms.js"></script><script type="module" src="/js/govcyFiles.js"></script>`,
-                    el: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyFrontendRenderer.browser.js"></script><script type="module" src="/js/govcyForms.js"></script><script type="module" src="/js/govcyFiles.js"></script>`,
-                    tr: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyFrontendRenderer.browser.js"></script><script type="module" src="/js/govcyForms.js"></script><script type="module" src="/js/govcyFiles.js"></script>`
+                    en: `<script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1.22.0/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1.22.0/dist/govcyFrontendRenderer.browser.js"></script><script type="module" src="/js/govcyForms.js"></script><script type="module" src="/js/govcyFiles.js"></script>`,
+                    el: `<script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1.22.0/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1.22.0/dist/govcyFrontendRenderer.browser.js"></script><script type="module" src="/js/govcyForms.js"></script><script type="module" src="/js/govcyFiles.js"></script>`,
+                    tr: `<script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1.22.0/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1.22.0/dist/govcyFrontendRenderer.browser.js"></script><script type="module" src="/js/govcyForms.js"></script><script type="module" src="/js/govcyFiles.js"></script>`
+                }
+            }
+        },
+        govcyLoadingOverlay: {
+            element: "htmlElement",
+            params: {
+                text: {
+                    en: `<style>.govcy-loadingOverlay{position:fixed;top:0;right:0;bottom:0;left:0;display:none;justify-content:center;align-items:center;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1050}.govcy-loadingOverlay[aria-hidden="false"]{display:flex}</style><div id="govcy--loadingOverlay" class="govcy-loadingOverlay" aria-hidden="true" role="dialog" aria-modal="true" tabindex="-1"><div class="govcy-loadingOverlay__content" role="status" aria-live="polite"><div class="spinner-border govcy-text-primary" role="status"><span class="govcy-visually-hidden">Loading...</span></div></div></div>`,
+                    el: `<style>.govcy-loadingOverlay{position:fixed;top:0;right:0;bottom:0;left:0;display:none;justify-content:center;align-items:center;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1050}.govcy-loadingOverlay[aria-hidden="false"]{display:flex}</style><div id="govcy--loadingOverlay" class="govcy-loadingOverlay" aria-hidden="true" role="dialog" aria-modal="true" tabindex="-1"><div class="govcy-loadingOverlay__content" role="status" aria-live="polite"><div class="spinner-border govcy-text-primary" role="status"><span class="govcy-visually-hidden">Φόρτωση...</span></div></div></div>`,
+                    tr: `<style>.govcy-loadingOverlay{position:fixed;top:0;right:0;bottom:0;left:0;display:none;justify-content:center;align-items:center;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1050}.govcy-loadingOverlay[aria-hidden="false"]{display:flex}</style><div id="govcy--loadingOverlay" class="govcy-loadingOverlay" aria-hidden="true" role="dialog" aria-modal="true" tabindex="-1"><div class="govcy-loadingOverlay__content" role="status" aria-live="polite"><div class="spinner-border govcy-text-primary" role="status"><span class="govcy-visually-hidden">Loading...</span></div></div></div>`
                 }
             }
         },