@madgex/design-system 13.2.0 → 13.3.0

package/src/components/timeout-dialog/timeout-dialog.js

@@ -1,5 +1,10 @@
 const ONE_MINUTE_IN_MS = 60000;
 
+const STATE = {
+  NONE: 'NONE',
+  WARNING: 'WARNING',
+  TIMED_OUT: 'TIMED_OUT',
+};
 /**
  * Displays a Dialog box when timeout is about to expire. (representing User's Auth session (auth cookie)).
  *
@@ -13,60 +18,101 @@ const ONE_MINUTE_IN_MS = 60000;
  *
  */
 export class MdsTimeoutDialog extends HTMLElement {
+  #state = STATE.NONE;
+  #warningDialogTimeout;
+  #timedOutDialogTimeout;
+  /**
+   * if attributes change, we will need to re-render the template.
+   */
+  static get observedAttributes() {
+    return [
+      't-title',
+      't-title-timed-out',
+      't-message',
+      't-message-error-failed-refresh',
+      't-btn-stay-refresh',
+      't-btn-sign-out',
+      't-btn-close',
+      'keep-alive-url',
+      'login-url',
+      'logout-url',
+      'warning-in-milliseconds',
+      'timeout-in-milliseconds',
+    ];
+  }
   constructor() {
     super();
-
     /** good practice to "bind" event listener functions, so `this` always works inside them */
     this.onClickSignInButton = this.onClickSignInButton.bind(this);
     this.onSignedOutDialogClose = this.onSignedOutDialogClose.bind(this);
+
+    this.dialogIdWarning = `mds-timeout-dialog-warning-${window.crypto.randomUUID()}`;
+    this.dialogIdSignedOut = `mds-timeout-dialog-signed-out-${window.crypto.randomUUID()}`;
   }
   connectedCallback() {
-    this.start();
+    this.render();
+    this.update(STATE.NONE);
+    this.#setTimeouts();
   }
   disconnectedCallback() {
-    this.destroy();
+    this.#clearTimeouts();
+    this.removeEventListeners();
+    this.update(STATE.NONE);
+  }
+  /**
+   * if attributes change, re-render template, refresh state
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   */
+  attributeChangedCallback(name, oldValue = null, newValue = null) {
+    if (!this.isConnected) return; // attributes are null before connect, causing callback to fire
+    if (oldValue === newValue) return; // no need to re-render or update if attribute value stays the same
+
+    const dontNeedToReRenderOnThese = ['warning-in-milliseconds', 'timeout-in-milliseconds'];
+    if (!dontNeedToReRenderOnThese.includes(name)) {
+      this.render();
+      this.update();
+    } else {
+      console.warn(`${name} was changed which may affect timeout accuracy`);
+    }
   }
 
   get rootNode() {
     return this;
   }
 
-  get _document() {
+  get #document() {
     return this.getRootNode({ composed: true });
   }
 
   /**
-   * template when there's still time remaining.
+   * Main template, which is re-rendered on attribute changes.
    *
    * closedby="none" means it does not close with `esc` key, we want the user to make a decision via the dialog buttons
    */
   get template() {
-    const template = this._document.createElement('template');
-    const titleId = `mds-timeout-dialog-title-${window.crypto.randomUUID()}`;
+    const template = this.#document.createElement('template');
     template.innerHTML = /* HTML */ `
-      <dialog class="mds-timeout-dialog" role="alertdialog" closedby="none" aria-labelledby="${titleId}">
-        <h2 class="mds-margin-bottom-b4" id="${titleId}">${this.translations['title']}</h2>
+      <dialog class="mds-timeout-dialog" role="alertdialog" closedby="none" aria-labelledby="${this.dialogIdWarning}">
+        <h2 class="mds-margin-bottom-b4" id="${this.dialogIdWarning}">${this.translations['title']}</h2>
         <p>${this.translations['message']}</p>
         <p class="mds-message mds-message--error mds-display-none">${this.translations['message-error-sign-in']}</p>
         <div class="mds-grid-row mds-grid-center">
           <button class="mds-button mds-margin-right-b4" stay-signed-in-trigger type="button">
             ${this.translations['btn-stay-signed-in']}
+            <svg class="mds-timeout-dialog__button-icon" viewBox="0 0 100 100">
+              <path
+                fill="currentColor"
+                d="M100 50c0-27.6-22.4-50-50-50S0 22.4 0 50m8.5 0C8.5 27.2 27 8.5 50 8.5S91.5 27.2 91.5 50"
+              ></path>
+            </svg>
           </button>
-          <a class="mds-button mds-button--neutral" href=${this.logoutUrl}>${this.translations['btn-sign-out']}</a>
+          <a class="mds-button mds-button--neutral" href="${this.logoutUrl}">${this.translations['btn-sign-out']}</a>
         </div>
       </dialog>
-    `;
-    return template;
-  }
-  /**
-   * template used when time has run out
-   */
-  get templateSignedOut() {
-    const template = this._document.createElement('template');
-    const titleId = `mds-timeout-dialog-title-${window.crypto.randomUUID()}`;
-    template.innerHTML = /* HTML */ `
-      <dialog role="alertdialog" class="mds-timeout-dialog" aria-labelledby="${titleId}">
-        <h2 class="mds-margin-bottom-b4" id="${titleId}">${this.translations['title-signed-out']}</h2>
+      <dialog role="alertdialog" class="mds-timeout-dialog" aria-labelledby="${this.dialogIdSignedOut}">
+        <h2 class="mds-margin-bottom-b4" id="${this.dialogIdSignedOut}">${this.translations['title-signed-out']}</h2>
         <div class="mds-grid-row mds-grid-center">
           <!-- will "submit" the dialog, e.g. close it without JS -->
           <form method="dialog">
@@ -77,8 +123,11 @@ export class MdsTimeoutDialog extends HTMLElement {
     `;
     return template;
   }
-  get elDialog() {
-    return this.rootNode.querySelector('dialog');
+  get elDialogWarning() {
+    return this.rootNode.querySelector(`dialog[aria-labelledby=${this.dialogIdWarning}]`);
+  }
+  get elDialogSignedOut() {
+    return this.rootNode.querySelector(`dialog[aria-labelledby=${this.dialogIdSignedOut}]`);
   }
   get elSignInButton() {
     return this.rootNode.querySelector('[stay-signed-in-trigger]');
@@ -99,69 +148,104 @@ export class MdsTimeoutDialog extends HTMLElement {
   }
   /** URL to hit to refresh auth cookie, when user clicks to stay signed in */
   get keepAliveUrl() {
-    return this.getAttribute('keep-alive-url') || '?continue=true';
+    return this.getAttribute('keep-alive-url');
   }
   get loginUrl() {
-    return this.getAttribute('login-url') || '/login';
+    const attr = this.getAttribute('login-url');
+    if (!attr) throw new Error('no attribute login-url supplied');
+    return attr;
   }
   get logoutUrl() {
-    return this.getAttribute('logout-url') || '/logoff';
+    const attr = this.getAttribute('logout-url');
+    if (!attr) throw new Error('no attribute logout-url supplied');
+    return attr;
   }
   /** How many minutes until signed out, dialog opens this many minutes before signed out */
   get warningInMilliseconds() {
-    return parseInt(this.getAttribute('warning-in-milliseconds'), 10) || 2 * ONE_MINUTE_IN_MS;
+    const attr = this.getAttribute('warning-in-milliseconds');
+    return attr ? parseInt(attr, 10) : ONE_MINUTE_IN_MS * 2;
   }
-  /** matching Platform variable name, number of milliseconds until user is signed out (cookie expires) */
+  /** number of milliseconds until user is signed out (cookie expires) */
   get timeoutInMilliseconds() {
-    const timeoutInMilliseconds = parseInt(this.getAttribute('timeout-in-milliseconds'), 10);
-    if (!timeoutInMilliseconds) {
-      console.error('no attribute timeout-in-milliseconds supplied');
+    const attr = this.getAttribute('timeout-in-milliseconds');
+    if (!attr) throw new Error('no attribute timeout-in-milliseconds supplied');
+    return parseInt(attr, 10);
+  }
+
+  /**
+   * Ensure the correct dialog is open/closed based on the current state.
+   *
+   * Optionally passing a new state.
+   * @param {string?} newState STATE
+   */
+  update(newState) {
+    if (newState) {
+      this.#state = newState;
+    }
+    switch (this.#state) {
+      case STATE.NONE:
+        this.elMessageError?.classList.add('mds-display-none');
+        this.elDialogWarning?.close();
+        this.elDialogSignedOut?.close();
+        break;
+      case STATE.WARNING:
+        this.elDialogSignedOut?.close();
+        this.elDialogWarning?.showModal();
+        break;
+      case STATE.TIMED_OUT:
+        this.elDialogWarning?.close();
+        this.elDialogSignedOut?.showModal();
+        break;
+      default:
+        break;
     }
-    return timeoutInMilliseconds;
   }
-  /** clear timeouts, event listeners and remove dialog */
-  destroy() {
-    clearTimeout(this.showWarningDialogTimeout);
-    clearTimeout(this.showTimedOutDialogTimeout);
 
-    if (this.elSignInButton) this.elSignInButton.removeEventListener('click', this.onClickSignInButton);
-    if (this.elDialog) this.elDialog.removeEventListener('close', this.onSignedOutDialogClose);
+  /**
+   * destroy DOM and events, and re-render them.
+   */
+  render() {
+    this.removeEventListeners();
+    this.rootNode.replaceChildren(this.template.content.cloneNode(true));
 
-    if (this.elDialog) this.elDialog.close();
-    this.rootNode.replaceChildren('');
+    this.elSignInButton?.addEventListener('click', this.onClickSignInButton);
+    this.elDialogSignedOut?.addEventListener('close', this.onSignedOutDialogClose);
   }
-  /** add warning dialog to this DOM, initialise timeouts for showing dialogs, and handlers for timeouts */
-  start() {
-    /** use light DOM so we can access the page CSS, and use template contents */
-    this.rootNode.replaceChildren(this.template.content.cloneNode(true));
-    this.elSignInButton.addEventListener('click', this.onClickSignInButton);
 
-    this.showWarningDialogTimeout = setTimeout(() => {
-      this.elDialog.showModal();
+  /**
+   * remove event listeners, not we are not destroying the rendered DOM
+   */
+  removeEventListeners() {
+    this.elSignInButton?.removeEventListener('click', this.onClickSignInButton);
+    this.elDialogSignedOut?.removeEventListener('close', this.onSignedOutDialogClose);
+  }
+
+  #clearTimeouts() {
+    clearTimeout(this.#warningDialogTimeout);
+    clearTimeout(this.#timedOutDialogTimeout);
+  }
+
+  #setTimeouts() {
+    this.#clearTimeouts();
+    this.#warningDialogTimeout = setTimeout(() => {
+      this.update(STATE.WARNING);
     }, this.timeoutInMilliseconds - this.warningInMilliseconds);
 
-    this.showTimedOutDialogTimeout = setTimeout(() => {
-      this.setSignedOut();
+    this.#timedOutDialogTimeout = setTimeout(() => {
+      this.update(STATE.TIMED_OUT);
     }, this.timeoutInMilliseconds);
   }
-  /** destroy existing dialog/timeouts, and re-create as if starting from the beginning */
-  reset() {
-    this.destroy();
-    this.start();
-  }
-  /** end if the line, we are signed out, shut down timeouts and show signed out dialog, on dialog close redirect to log in page */
-  setSignedOut() {
-    this.destroy();
-    /** use light DOM so we can access the page CSS, and use template contents */
-    this.rootNode.replaceChildren(this.templateSignedOut.content.cloneNode(true));
-    this.elDialog.showModal();
-    this.elDialog.addEventListener('close', this.onSignedOutDialogClose);
-  }
   /**
-   * hit URL which should hopefully return a new logged in cookie.
-   * We assume a 200 response means a cookie was set, as the cookie is usually not readable via javascript
+   * If `keepAliveUrl` is populated, GET it, which should hopefully return a new logged in cookie.
+   * We assume a 200 response means a cookie was set, as the cookie is usually not readable via javascript.
+   *
+   * If `keepAliveUrl` is not populated, we assume external fetch will happen on `refresh` event,
+   * and `onRefreshSuccess` / `onRefreshFailed` will be called externally.
    */
   async onClickSignInButton() {
+    this.dispatchEvent(new CustomEvent('refresh'));
+    this.elDialogWarning?.classList.add('mds-timeout-dialog--refreshing');
+    if (!this.keepAliveUrl) return;
     try {
       const res = await fetch(this.keepAliveUrl);
       if (!res.ok) {
@@ -169,21 +253,57 @@ export class MdsTimeoutDialog extends HTMLElement {
         throw new Error(`Could not stay signed in - ${res.statusText} - ${text}`);
       }
       // assume successful response means successful cookie refresh
-      this.reset();
-      if (this.elMessageError) this.elMessageError.classList.add('mds-display-none');
+      this.onRefreshSuccess();
     } catch (error) {
-      console.error(error);
-      // response is error, assume failed to fetch fresh cookie
-      if (this.elMessageError) this.elMessageError.classList.remove('mds-display-none');
+      this.onRefreshFailed(error);
     }
   }
 
+  /**
+   * Useful for external call when auth has been refreshed. Currently the same as `onRefreshSuccess`
+   */
+  restart() {
+    this.elDialogWarning?.classList.remove('mds-timeout-dialog--refreshing');
+    this.elMessageError?.classList.add('mds-display-none');
+    this.update(STATE.NONE);
+    this.#setTimeouts();
+  }
+  /**
+   * Useful for external call when auth has expired outside of this component.
+   */
+  timedOut() {
+    this.#clearTimeouts();
+    this.update(STATE.TIMED_OUT);
+  }
+
+  /**
+   * Called on successful sign in refresh. May be called externally.
+   */
+  onRefreshSuccess() {
+    this.restart();
+  }
+
+  /**
+   * Called on failed sign in refresh. May be called externally.
+   *
+   * @param {Error} error optional
+   */
+  onRefreshFailed(error) {
+    console.error(error);
+    // response is error, assume failed to fetch fresh cookie
+    this.elDialogWarning?.classList.remove('mds-timeout-dialog--refreshing');
+    this.elMessageError?.classList.remove('mds-display-none');
+  }
+
   /**
    * when the 'signed out dialog' gets closed, we want to send the user straight to the log in page.
    * This is because we dont want the user to close the dialog and be left with a visually signed in page.
    * PipelinedPage return URL back to this current page URL after log in
    */
   onSignedOutDialogClose() {
-    window.location.href = `${this.loginUrl}?PipelinedPage=${encodeURIComponent(window.location.href)}`;
+    // ensure if the signed out dialog is closed, it was only in state `TIMED_OUT`
+    if (this.#state === STATE.TIMED_OUT) {
+      window.location.href = `${this.loginUrl}?PipelinedPage=${encodeURIComponent(window.location.href)}`;
+    }
   }
 }

package/src/components/timeout-dialog/timeout-dialog.njk

@@ -79,6 +79,9 @@
 <script>
   function testRegularTimeOutDialog() {
     const regularElement = document.createElement('mds-timeout-dialog');
+    regularElement.setAttribute('login-url', '/login');
+    regularElement.setAttribute('logout-url', '/logout');
+    regularElement.setAttribute('keep-alive-url', '/?keepalive');
     regularElement.setAttribute('timeout-in-milliseconds', '6000');
     regularElement.setAttribute('warning-in-milliseconds', '5500');
     regularElement.setAttribute('t-title', 'Regular Version - Light DOM');
@@ -91,6 +94,9 @@
 
   function testStandaloneTimeOutDialog() {
     const standaloneElement = document.createElement('mds-timeout-dialog-standalone');
+    standaloneElement.setAttribute('login-url', '/login');
+    standaloneElement.setAttribute('logout-url', '/logout');
+    standaloneElement.setAttribute('keep-alive-url', '/?keepalive');
     standaloneElement.setAttribute('timeout-in-milliseconds', '6000');
     standaloneElement.setAttribute('warning-in-milliseconds', '5500');
     standaloneElement.setAttribute('t-title', 'Standalone Version - Shadow DOM');

package/src/components/timeout-dialog/timeout-dialog.scss

@@ -11,3 +11,24 @@
 .mds-timeout-dialog::backdrop {
   background-color: rgba(0, 0, 0, 0.8);
 }
+
+.mds-timeout-dialog__button-icon {
+  display: none;
+  width: 1em;
+  height: 1em;
+  animation: spin-timeout-dialog 1s infinite linear;
+  color: inherit;
+  margin-left: 4px;
+}
+.mds-timeout-dialog--refreshing .mds-timeout-dialog__button-icon {
+  display: inline-block;
+}
+
+@keyframes spin-timeout-dialog {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/js/index.js

@@ -12,6 +12,7 @@ import prose from '../helpers/prose/prose';
 import { MdsDropdownNav } from '../components/dropdown-nav/dropdown-nav';
 import { MdsTimeoutDialog } from '../components/timeout-dialog/timeout-dialog';
 import { MdsCardLink } from '../components/card/card-link';
+import { MdsConditionalSection } from '../components/conditional-section/conditional-section';
 
 if (!window.customElements.get('mds-dropdown-nav')) {
   window.customElements.define('mds-dropdown-nav', MdsDropdownNav);
@@ -22,6 +23,9 @@ if (!window.customElements.get('mds-timeout-dialog')) {
 if (!window.customElements.get('mds-card-link')) {
   window.customElements.define('mds-card-link', MdsCardLink);
 }
+if (!window.customElements.get('mds-conditional-section')) {
+  window.customElements.define('mds-conditional-section', MdsConditionalSection);
+}
 
 const initAll = () => {
   tabs.init();

package/dist/js/timeout-dialog-DuVVAWa3.js

@@ -1,23 +0,0 @@
-class s extends HTMLElement{constructor(){super(),this.onClickSignInButton=this.onClickSignInButton.bind(this),this.onSignedOutDialogClose=this.onSignedOutDialogClose.bind(this)}connectedCallback(){this.start()}disconnectedCallback(){this.destroy()}get rootNode(){return this}get _document(){return this.getRootNode({composed:!0})}get template(){const t=this._document.createElement("template"),e=`mds-timeout-dialog-title-${window.crypto.randomUUID()}`;return t.innerHTML=`
-      <dialog class="mds-timeout-dialog" role="alertdialog" closedby="none" aria-labelledby="${e}">
-        <h2 class="mds-margin-bottom-b4" id="${e}">${this.translations.title}</h2>
-        <p>${this.translations.message}</p>
-        <p class="mds-message mds-message--error mds-display-none">${this.translations["message-error-sign-in"]}</p>
-        <div class="mds-grid-row mds-grid-center">
-          <button class="mds-button mds-margin-right-b4" stay-signed-in-trigger type="button">
-            ${this.translations["btn-stay-signed-in"]}
-          </button>
-          <a class="mds-button mds-button--neutral" href=${this.logoutUrl}>${this.translations["btn-sign-out"]}</a>
-        </div>
-      </dialog>
-    `,t}get templateSignedOut(){const t=this._document.createElement("template"),e=`mds-timeout-dialog-title-${window.crypto.randomUUID()}`;return t.innerHTML=`
-      <dialog role="alertdialog" class="mds-timeout-dialog" aria-labelledby="${e}">
-        <h2 class="mds-margin-bottom-b4" id="${e}">${this.translations["title-signed-out"]}</h2>
-        <div class="mds-grid-row mds-grid-center">
-          <!-- will "submit" the dialog, e.g. close it without JS -->
-          <form method="dialog">
-            <button class="mds-button">${this.translations["btn-close"]}</button>
-          </form>
-        </div>
-      </dialog>
-    `,t}get elDialog(){return this.rootNode.querySelector("dialog")}get elSignInButton(){return this.rootNode.querySelector("[stay-signed-in-trigger]")}get elMessageError(){return this.rootNode.querySelector(".mds-message--error")}get translations(){return{title:this.getAttribute("t-title")||"You are about to be signed out","title-signed-out":this.getAttribute("t-title-timed-out")||"You have been signed out",message:this.getAttribute("t-message")||"For your security, we will log you out in 2 minutes.","message-error-sign-in":this.getAttribute("t-message-error-failed-refresh")||"Failed to sign in - try again","btn-stay-signed-in":this.getAttribute("t-btn-stay-refresh")||"Stay signed in","btn-sign-out":this.getAttribute("t-btn-sign-out")||"Sign out","btn-close":this.getAttribute("t-btn-close")||"close"}}get keepAliveUrl(){return this.getAttribute("keep-alive-url")||"?continue=true"}get loginUrl(){return this.getAttribute("login-url")||"/login"}get logoutUrl(){return this.getAttribute("logout-url")||"/logoff"}get warningInMilliseconds(){return parseInt(this.getAttribute("warning-in-milliseconds"),10)||2*6e4}get timeoutInMilliseconds(){const t=parseInt(this.getAttribute("timeout-in-milliseconds"),10);return t||console.error("no attribute timeout-in-milliseconds supplied"),t}destroy(){clearTimeout(this.showWarningDialogTimeout),clearTimeout(this.showTimedOutDialogTimeout),this.elSignInButton&&this.elSignInButton.removeEventListener("click",this.onClickSignInButton),this.elDialog&&this.elDialog.removeEventListener("close",this.onSignedOutDialogClose),this.elDialog&&this.elDialog.close(),this.rootNode.replaceChildren("")}start(){this.rootNode.replaceChildren(this.template.content.cloneNode(!0)),this.elSignInButton.addEventListener("click",this.onClickSignInButton),this.showWarningDialogTimeout=setTimeout(()=>{this.elDialog.showModal()},this.timeoutInMilliseconds-this.warningInMilliseconds),this.showTimedOutDialogTimeout=setTimeout(()=>{this.setSignedOut()},this.timeoutInMilliseconds)}reset(){this.destroy(),this.start()}setSignedOut(){this.destroy(),this.rootNode.replaceChildren(this.templateSignedOut.content.cloneNode(!0)),this.elDialog.showModal(),this.elDialog.addEventListener("close",this.onSignedOutDialogClose)}async onClickSignInButton(){try{const t=await fetch(this.keepAliveUrl);if(!t.ok){const e=await t.text();throw new Error(`Could not stay signed in - ${t.statusText} - ${e}`)}this.reset(),this.elMessageError&&this.elMessageError.classList.add("mds-display-none")}catch(t){console.error(t),this.elMessageError&&this.elMessageError.classList.remove("mds-display-none")}}onSignedOutDialogClose(){window.location.href=`${this.loginUrl}?PipelinedPage=${encodeURIComponent(window.location.href)}`}}export{s as M};