@madgex/design-system 13.0.4 → 13.2.0

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

@@ -0,0 +1,189 @@
+const ONE_MINUTE_IN_MS = 60000;
+
+/**
+ * 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 {
+  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);
+  }
+  connectedCallback() {
+    this.start();
+  }
+  disconnectedCallback() {
+    this.destroy();
+  }
+
+  get rootNode() {
+    return this;
+  }
+
+  get _document() {
+    return this.getRootNode({ composed: true });
+  }
+
+  /**
+   * template when there's still time remaining.
+   *
+   * 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()}`;
+    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>
+        <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>
+    `;
+    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>
+        <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 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',
+    };
+  }
+  /** URL to hit to refresh auth cookie, when user clicks to stay signed in */
+  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';
+  }
+  /** 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;
+  }
+  /** matching Platform variable name, 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');
+    }
+    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);
+
+    if (this.elDialog) this.elDialog.close();
+    this.rootNode.replaceChildren('');
+  }
+  /** 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();
+    }, this.timeoutInMilliseconds - this.warningInMilliseconds);
+
+    this.showTimedOutDialogTimeout = setTimeout(() => {
+      this.setSignedOut();
+    }, 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
+   */
+  async onClickSignInButton() {
+    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.reset();
+      if (this.elMessageError) this.elMessageError.classList.add('mds-display-none');
+    } catch (error) {
+      console.error(error);
+      // response is error, assume failed to fetch fresh cookie
+      if (this.elMessageError) 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)}`;
+  }
+}

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

@@ -0,0 +1,103 @@
+
+<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('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('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,13 @@
+/* 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);
+}

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,10 +10,18 @@ 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);
+}
 
 const initAll = () => {
   tabs.init();

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';

package/src/scss/core/_defaults.scss

@@ -16,6 +16,14 @@ pre {
   margin-bottom: $constant-size-baseline * 3;
 }
 
+.mds-link--hover {
+  --link-color: #{$link-hover-color};
+
+  --text-decoration: var(--mds-text-decoration-link-hover, underline);
+  --text-decoration-thickness: #{$link-hover-decoration-thickness};
+}
+
+.mds-link,
 a {
   --link-color: #{$link-color};
   --link-font-weight: var(--mds-font-weight-link-base);
@@ -30,16 +38,14 @@ a {
 
   &:hover,
   &:focus {
-    --link-color: #{$link-hover-color};
-
-    --text-decoration: var(--mds-text-decoration-link-hover, underline);
-    --text-decoration-thickness: #{$link-hover-decoration-thickness};
+    @extend .mds-link--hover;
   }
 }
 
 .mds-link--no-decoration a,
 a.mds-link--no-decoration {
   --text-decoration: none;
+
   &:hover,
   &:focus {
     // mirror regular version
@@ -57,4 +63,4 @@ h3 {
 
 img {
   max-width: 100%;
-}
+}