@madgex/design-system 13.1.0 → 13.2.1

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

@@ -0,0 +1,309 @@
+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)).
+ *
+ * This expiry time is based on attribute passed `timeout-in-milliseconds`,
+ * ⚠️ We dont actually read any real cookie, but assume the page rendered "timeout time" is the same as the cookie! cookie is not readable by JS ⚠️
+ *
+ * A warning Dialog is show 2 minutes before expiry (configurable via attribute `warning-in-milliseconds`).
+ * The warning dialog has a button which triggers an XHR to try and refresh the auth cookie by making a background request. Assumes 200 was successful auth refresh.
+ *
+ * On expiry, final Dialog is show displaying your message, e.g. "you have been signed out", with a close button
+ *
+ */
+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.render();
+    this.update(STATE.NONE);
+    this.#setTimeouts();
+  }
+  disconnectedCallback() {
+    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() {
+    return this.getRootNode({ composed: true });
+  }
+
+  /**
+   * 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');
+    template.innerHTML = /* HTML */ `
+      <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>
+        </div>
+      </dialog>
+      <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">
+            <button class="mds-button">${this.translations['btn-close']}</button>
+          </form>
+        </div>
+      </dialog>
+    `;
+    return template;
+  }
+  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]');
+  }
+  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',
+    };
+  }
+  /** URL to hit to refresh auth cookie, when user clicks to stay signed in */
+  get keepAliveUrl() {
+    return this.getAttribute('keep-alive-url');
+  }
+  get loginUrl() {
+    const attr = this.getAttribute('login-url');
+    if (!attr) throw new Error('no attribute login-url supplied');
+    return attr;
+  }
+  get logoutUrl() {
+    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() {
+    const attr = this.getAttribute('warning-in-milliseconds');
+    return attr ? parseInt(attr, 10) : ONE_MINUTE_IN_MS * 2;
+  }
+  /** number of milliseconds until user is signed out (cookie expires) */
+  get timeoutInMilliseconds() {
+    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;
+    }
+  }
+
+  /**
+   * destroy DOM and events, and re-render them.
+   */
+  render() {
+    this.removeEventListeners();
+    this.rootNode.replaceChildren(this.template.content.cloneNode(true));
+
+    this.elSignInButton?.addEventListener('click', this.onClickSignInButton);
+    this.elDialogSignedOut?.addEventListener('close', this.onSignedOutDialogClose);
+  }
+
+  /**
+   * 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.#timedOutDialogTimeout = setTimeout(() => {
+      this.update(STATE.TIMED_OUT);
+    }, this.timeoutInMilliseconds);
+  }
+  /**
+   * 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) {
+        const text = await res.text();
+        throw new Error(`Could not stay signed in - ${res.statusText} - ${text}`);
+      }
+      // assume successful response means successful cookie refresh
+      this.onRefreshSuccess();
+    } catch (error) {
+      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() {
+    // 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

@@ -0,0 +1,109 @@
+
+<style>
+  /* Intentionally gross styles to test shadow DOM isolation */
+  .blurb {
+    margin-bottom: 50px;
+  }
+  .blurb, .blurb * {
+    font-family: 'comic sans ms' !important;
+  }
+  .blurb button {
+    transform: rotate(-2.5deg) !important;
+  }
+
+
+  dialog {
+    border: 10px solid red !important;
+    background: yellow !important;
+    padding: 20px !important;
+  }
+  
+  dialog h2 {
+    color: red !important;
+    font-size: 40px !important;
+    font-family: 'Comic Sans MS', cursive !important;
+    text-decoration: underline !important;
+  }
+  
+  dialog p {
+    color: green !important;
+  }
+  
+  .mds-button {
+    background: magenta !important;
+    transform: rotate(-2.5deg) !important;
+  }
+</style>
+
+<nav class="position-relative mds-margin-bottom-b12">  
+    <div id="inject-container" style="position:relative;">
+      {# <template shadowrootmode="open">
+        <mds-timeout-dialog-standalone
+          login-url="/login"
+          logout-url="/logoff"
+          keep-alive-url="/"
+          timeout-in-milliseconds="24000"
+          warning-in-milliseconds="23000"
+          t-title="You are about to be signed out"
+          t-title-timed-out="You have been signed out"
+          t-message="For your security, we will log you out in ?? minutes."
+          t-message-error-failed-refresh="Failed to sign in - try again"
+          t-btn-stay-refresh="Stay signed in"
+          t-btn-sign-out="Sign out"
+          t-btn-close="close"></mds-timeout-dialog-standalone>
+      </template> #}
+    </div>
+
+  <p class="mds-margin-bottom-b12">
+    This page has some gross styles for dialog elements. The LightDOM version will inherit these styles but the
+    shadow DOM version should be isolated from these styles & wupply its own.
+  </p>
+
+  <div class="blurb">
+    <h2>LightDOM Version</h2>
+    <pre><code>&lt;mds-timeout-dialog&gt;&lt;/mds-timeout-dialog&gt;</code></pre>
+    <p>
+      <button onclick="testRegularTimeOutDialog()">Inject TimeOut Dialog</button>
+    </p>
+  
+    <br>
+
+    <h2>Standalone/ShadowDOM Version</h2>
+    <pre><code>&lt;mds-timeout-dialog-standalone&gt;&lt;/mds-timeout-dialog-standalone&gt;</code></pre>
+    <p>
+      <button onclick="testStandaloneTimeOutDialog()">Inject TimeOut Dialog</button>
+    </p>
+  </div>
+</nav>
+
+<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');
+    regularElement.setAttribute('t-message', 'This dialog uses LIGHT DOM and will be styled by page CSS');
+    
+    document.getElementById('inject-container').innerHTML = '';
+    document.getElementById('inject-container').appendChild(regularElement);
+    console.log(regularElement);
+  }
+
+  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');
+    standaloneElement.setAttribute('t-message', 'This dialog uses SHADOW DOM and should be isolated from page CSS');
+
+    document.getElementById('inject-container').innerHTML = '';
+    document.getElementById('inject-container').appendChild(standaloneElement);
+    console.log(standaloneElement);
+  }
+</script>

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

@@ -0,0 +1,34 @@
+/* making standard browser <dialog> look a bit more like mds-modal - maybe mds-modal should be replaced with <dialog> and this small amount of CSS? */
+.mds-timeout-dialog {
+  background-color: #fff;
+  margin: ($constant-size-baseline * 10) auto;
+  padding: ($constant-size-baseline * 8) ($constant-size-baseline * 12);
+  border-radius: $border-radius;
+  border: 0;
+  max-width: 800px;
+  position: relative;
+}
+.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-fractal.js

@@ -1,7 +1,8 @@
 import switchStateScript from './fractal-scripts/switch-state';
 import notificationScript from './fractal-scripts/notification';
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
   switchStateScript.init();
   notificationScript.init();
+  await import('../components/timeout-dialog/mds-timeout-dialog-standalone.js');
 });

package/src/js/index.js

@@ -10,12 +10,15 @@ import characterCount from '../components/inputs/textarea/character-count';
 import button from '../components/button/button';
 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';
 
 if (!window.customElements.get('mds-dropdown-nav')) {
   window.customElements.define('mds-dropdown-nav', MdsDropdownNav);
 }
-
+if (!window.customElements.get('mds-timeout-dialog')) {
+  window.customElements.define('mds-timeout-dialog', MdsTimeoutDialog);
+}
 if (!window.customElements.get('mds-card-link')) {
   window.customElements.define('mds-card-link', MdsCardLink);
 }

package/src/scss/components/__index.scss

@@ -17,3 +17,4 @@
 @import '../../components/modal/modal';
 @import '../../components/skip-link/skip-link';
 @import '../../components/media-block/media-block';
+@import '../../components/timeout-dialog/timeout-dialog';