keycloakify 10.1.0-rc.1 → 10.1.0

package/res/public/.keycloakify/login/js/common.js

@@ -0,0 +1,48 @@
+export const formatNumber = (input, format) => {
+    if (!input) {
+        return "";
+    }
+
+    // array holding the patterns for the number of expected digits in each part
+    const digitPattern = format.match(/{\d+}/g);
+
+    if (!digitPattern) {
+        return "";
+    }
+
+    // calculate the maximum size of the given pattern based on the sum of the expected digits
+    const maxSize = digitPattern.reduce((total, p) => total + parseInt(p.replace("{", "").replace("}", "")), 0)
+
+    // keep only digits
+    let rawValue = input.replace(/\D+/g, '');
+
+    // make sure the value is a number
+    if (parseInt(rawValue) != rawValue) {
+        return "";
+    }
+
+    // make sure the number of digits does not exceed the maximum size
+    if (rawValue.length > maxSize) {
+        rawValue = rawValue.substring(0, maxSize);
+    }
+
+    // build the regex based based on the expected digits in each part
+    const formatter = digitPattern.reduce((result, p) => result + `(\\d${p})`, "^");
+
+    // if the current digits match the pattern we have each group of digits in an array
+    let digits = new RegExp(formatter).exec(rawValue);
+
+    // no match, return the raw value without any format
+    if (!digits) {
+        return input;
+    }
+
+    let result = format;
+
+    // finally format the current digits accordingly to the given format
+    for (let i = 0; i < digitPattern.length; i++) {
+        result = result.replace(digitPattern[i], digits[i + 1]);
+    }
+
+    return result;
+}

package/res/public/.keycloakify/login/js/kcMultivalued.js

@@ -0,0 +1,106 @@
+const DATA_KC_MULTIVALUED = 'data-kcMultivalued';
+const KC_ADD_ACTION_PREFIX = "kc-add-";
+const KC_REMOVE_ACTION_PREFIX = "kc-remove-";
+const KC_ACTION_CLASS = "pf-c-button pf-m-inline pf-m-link";
+
+function createAddAction(element) {
+    const action = createAction("Add value",
+        KC_ADD_ACTION_PREFIX,
+        element,
+        () => {
+            const name = element.getAttribute("name");
+            const elements = getInputElementsByName().get(name);
+            const length = elements.length;
+
+            if (length === 0) {
+                return;
+            }
+
+            const lastNode = elements[length - 1];
+            const newNode = lastNode.cloneNode(true);
+            newNode.setAttribute("id", name + "-" + elements.length);
+            newNode.value = "";
+            lastNode.after(newNode);
+
+            render();
+        });
+
+    element.after(action);
+}
+
+function createRemoveAction(element, isLastElement) {
+    let text = "Remove";
+
+    if (isLastElement) {
+        text = text + " | ";
+    }
+
+    const action = createAction(text, KC_REMOVE_ACTION_PREFIX, element, () => {
+        removeActions(element);
+        element.remove();
+        render();
+    });
+
+    element.insertAdjacentElement('afterend', action);
+}
+
+function getInputElementsByName() {
+    const selector = document.querySelectorAll(`[${DATA_KC_MULTIVALUED}]`);
+    const elementsByName = new Map();
+
+    for (let element of Array.from(selector.values())) {
+        let name = element.getAttribute("name");
+        let elements = elementsByName.get(name);
+
+        if (!elements) {
+            elements = [];
+            elementsByName.set(name, elements);
+        }
+
+        elements.push(element);
+    }
+
+    return elementsByName;
+}
+
+function removeActions(element) {
+    for (let actionPrefix of [KC_ADD_ACTION_PREFIX, KC_REMOVE_ACTION_PREFIX]) {
+        const action = document.getElementById(actionPrefix + element.getAttribute("id"));
+
+        if (action) {
+            action.remove();
+        }
+    }
+}
+
+function createAction(text, type, element, onClick) {
+    const action = document.createElement("button")
+    action.setAttribute("id", type + element.getAttribute("id"));
+    action.setAttribute("type", "button");
+    action.innerText = text;
+    action.setAttribute("class", KC_ACTION_CLASS);
+    action.addEventListener("click", onClick);
+    return action;
+}
+
+function render() {
+    getInputElementsByName().forEach((elements, name) => {
+        elements.forEach((element, index) => {
+            removeActions(element);
+
+            element.setAttribute("id", name + "-" + index);
+
+            const lastNode = element === elements[elements.length - 1];
+
+            if (lastNode) {
+                createAddAction(element);
+            }
+
+            if (elements.length > 1) {
+                createRemoveAction(element, lastNode);
+            }
+        });
+    });
+}
+
+render();

package/res/public/.keycloakify/login/js/kcNumberFormat.js

@@ -0,0 +1,21 @@
+// @ts-check
+import { formatNumber } from "./common.js";
+import { registerElementAnnotatedBy } from "./userProfile.js";
+
+const KC_NUMBER_FORMAT = "kcNumberFormat";
+
+registerElementAnnotatedBy({
+  name: KC_NUMBER_FORMAT,
+  onAdd(element) {
+    const formatValue = () => {
+      const format = element.getAttribute(`data-${KC_NUMBER_FORMAT}`);
+      element.value = formatNumber(element.value, format);
+    };
+
+    element.addEventListener("keyup", formatValue);
+
+    formatValue();
+
+    return () => element.removeEventListener("keyup", formatValue);
+  },
+});

package/res/public/.keycloakify/login/js/kcNumberUnFormat.js

@@ -0,0 +1,19 @@
+// @ts-check
+import { formatNumber } from "./common.js";
+import { registerElementAnnotatedBy } from "./userProfile.js";
+
+const KC_NUMBER_UNFORMAT = 'kcNumberUnFormat';
+
+registerElementAnnotatedBy({
+    name: KC_NUMBER_UNFORMAT,
+    onAdd(element) {
+        for (let form of document.forms) {
+            form.addEventListener('submit', (event) => {
+                const rawFormat = element.getAttribute(`data-${KC_NUMBER_UNFORMAT}`);
+                if (rawFormat) {
+                    element.value = formatNumber(element.value, rawFormat);
+                }
+            });
+        }
+    },
+});

package/res/public/.keycloakify/login/js/menu-button-links.js

@@ -0,0 +1,315 @@
+// @ts-check
+/*
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ *   File:   menu-button-links.js
+ *
+ *   Desc:   Creates a menu button that opens a menu of links
+ *
+ *   Modified by Peter Keuter to adhere to the coding standards of Keycloak
+ *   Original file: https://www.w3.org/WAI/content-assets/wai-aria-practices/patterns/menu-button/examples/js/menu-button-links.js
+ *   Source: https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html
+ */
+
+class MenuButtonLinks {
+  constructor(domNode) {
+    this.domNode = domNode;
+    this.buttonNode = domNode.querySelector("button");
+    this.menuNode = domNode.querySelector('[role="menu"]');
+    this.menuitemNodes = [];
+    this.firstMenuitem = false;
+    this.lastMenuitem = false;
+    this.firstChars = [];
+
+    this.buttonNode.addEventListener("keydown", (e) => this.onButtonKeydown(e));
+    this.buttonNode.addEventListener("click", (e) => this.onButtonClick(e));
+
+    const nodes = domNode.querySelectorAll('[role="menuitem"]');
+
+    for (const menuitem of nodes) {
+      this.menuitemNodes.push(menuitem);
+      menuitem.tabIndex = -1;
+      this.firstChars.push(menuitem.textContent.trim()[0].toLowerCase());
+
+      menuitem.addEventListener("keydown", (e) => this.onMenuitemKeydown(e));
+
+      menuitem.addEventListener("mouseover", (e) =>
+        this.onMenuitemMouseover(e)
+      );
+
+      if (!this.firstMenuitem) {
+        this.firstMenuitem = menuitem;
+      }
+      this.lastMenuitem = menuitem;
+    }
+
+    domNode.addEventListener("focusin", () => this.onFocusin());
+    domNode.addEventListener("focusout", () => this.onFocusout());
+
+    window.addEventListener(
+      "mousedown",
+      (e) => this.onBackgroundMousedown(e),
+      true
+    );
+  }
+
+  setFocusToMenuitem = (newMenuitem) =>
+    this.menuitemNodes.forEach((item) => {
+      if (item === newMenuitem) {
+        item.tabIndex = 0;
+        newMenuitem.focus();
+      } else {
+        item.tabIndex = -1;
+      }
+    });
+
+  setFocusToFirstMenuitem = () => this.setFocusToMenuitem(this.firstMenuitem);
+
+  setFocusToLastMenuitem = () => this.setFocusToMenuitem(this.lastMenuitem);
+
+  setFocusToPreviousMenuitem = (currentMenuitem) => {
+    let newMenuitem, index;
+
+    if (currentMenuitem === this.firstMenuitem) {
+      newMenuitem = this.lastMenuitem;
+    } else {
+      index = this.menuitemNodes.indexOf(currentMenuitem);
+      newMenuitem = this.menuitemNodes[index - 1];
+    }
+
+    this.setFocusToMenuitem(newMenuitem);
+
+    return newMenuitem;
+  };
+
+  setFocusToNextMenuitem = (currentMenuitem) => {
+    let newMenuitem, index;
+
+    if (currentMenuitem === this.lastMenuitem) {
+      newMenuitem = this.firstMenuitem;
+    } else {
+      index = this.menuitemNodes.indexOf(currentMenuitem);
+      newMenuitem = this.menuitemNodes[index + 1];
+    }
+    this.setFocusToMenuitem(newMenuitem);
+
+    return newMenuitem;
+  };
+
+  setFocusByFirstCharacter = (currentMenuitem, char) => {
+    let start, index;
+
+    if (char.length > 1) {
+      return;
+    }
+
+    char = char.toLowerCase();
+
+    // Get start index for search based on position of currentItem
+    start = this.menuitemNodes.indexOf(currentMenuitem) + 1;
+    if (start >= this.menuitemNodes.length) {
+      start = 0;
+    }
+
+    // Check remaining slots in the menu
+    index = this.firstChars.indexOf(char, start);
+
+    // If not found in remaining slots, check from beginning
+    if (index === -1) {
+      index = this.firstChars.indexOf(char, 0);
+    }
+
+    // If match was found...
+    if (index > -1) {
+      this.setFocusToMenuitem(this.menuitemNodes[index]);
+    }
+  };
+
+  // Utilities
+
+  getIndexFirstChars = (startIndex, char) => {
+    for (let i = startIndex; i < this.firstChars.length; i++) {
+      if (char === this.firstChars[i]) {
+        return i;
+      }
+    }
+    return -1;
+  };
+
+  // Popup menu methods
+
+  openPopup = () => {
+    this.menuNode.style.display = "block";
+    this.buttonNode.setAttribute("aria-expanded", "true");
+  };
+
+  closePopup = () => {
+    if (this.isOpen()) {
+      this.buttonNode.setAttribute("aria-expanded", "false");
+      this.menuNode.style.removeProperty("display");
+    }
+  };
+
+  isOpen = () => {
+    return this.buttonNode.getAttribute("aria-expanded") === "true";
+  };
+
+  // Menu event handlers
+
+  onFocusin = () => {
+    this.domNode.classList.add("focus");
+  };
+
+  onFocusout = () => {
+    this.domNode.classList.remove("focus");
+  };
+
+  onButtonKeydown = (event) => {
+    const key = event.key;
+    let flag = false;
+
+    switch (key) {
+      case " ":
+      case "Enter":
+      case "ArrowDown":
+      case "Down":
+        this.openPopup();
+        this.setFocusToFirstMenuitem();
+        flag = true;
+        break;
+
+      case "Esc":
+      case "Escape":
+        this.closePopup();
+        this.buttonNode.focus();
+        flag = true;
+        break;
+
+      case "Up":
+      case "ArrowUp":
+        this.openPopup();
+        this.setFocusToLastMenuitem();
+        flag = true;
+        break;
+
+      default:
+        break;
+    }
+
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
+  onButtonClick(event) {
+    if (this.isOpen()) {
+      this.closePopup();
+      this.buttonNode.focus();
+    } else {
+      this.openPopup();
+      this.setFocusToFirstMenuitem();
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  onMenuitemKeydown(event) {
+    const tgt = event.currentTarget;
+    const key = event.key;
+    let flag = false;
+
+    const isPrintableCharacter = (str) => str.length === 1 && str.match(/\S/);
+
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      return;
+    }
+
+    if (event.shiftKey) {
+      if (isPrintableCharacter(key)) {
+        this.setFocusByFirstCharacter(tgt, key);
+        flag = true;
+      }
+
+      if (event.key === "Tab") {
+        this.buttonNode.focus();
+        this.closePopup();
+        flag = true;
+      }
+    } else {
+      switch (key) {
+        case " ":
+          window.location.href = tgt.href;
+          break;
+
+        case "Esc":
+        case "Escape":
+          this.closePopup();
+          this.buttonNode.focus();
+          flag = true;
+          break;
+
+        case "Up":
+        case "ArrowUp":
+          this.setFocusToPreviousMenuitem(tgt);
+          flag = true;
+          break;
+
+        case "ArrowDown":
+        case "Down":
+          this.setFocusToNextMenuitem(tgt);
+          flag = true;
+          break;
+
+        case "Home":
+        case "PageUp":
+          this.setFocusToFirstMenuitem();
+          flag = true;
+          break;
+
+        case "End":
+        case "PageDown":
+          this.setFocusToLastMenuitem();
+          flag = true;
+          break;
+
+        case "Tab":
+          this.closePopup();
+          break;
+
+        default:
+          if (isPrintableCharacter(key)) {
+            this.setFocusByFirstCharacter(tgt, key);
+            flag = true;
+          }
+          break;
+      }
+    }
+
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+
+  onMenuitemMouseover(event) {
+    const tgt = event.currentTarget;
+    tgt.focus();
+  }
+
+  onBackgroundMousedown(event) {
+    if (!this.domNode.contains(event.target)) {
+      if (this.isOpen()) {
+        this.closePopup();
+        this.buttonNode.focus();
+      }
+    }
+  }
+}
+
+const menuButtons = document.querySelectorAll(".menu-button-links");
+for (const button of menuButtons) {
+  new MenuButtonLinks(button);
+}

package/{src/bin/shared/downloadKeycloakDefaultTheme/extra-assets → res/public/.keycloakify/login/js}/passkeysConditionalAuth.js

@@ -76,4 +76,4 @@ function getAllowCredentials() {
         }
     }
     return allowCredentials;
-}
+}

package/res/public/.keycloakify/login/js/passwordVisibility.js

@@ -0,0 +1,15 @@
+const toggle = (button) =>  {
+    const passwordElement = document.getElementById(button.getAttribute('aria-controls'));
+    if (passwordElement.type === "password") {
+        passwordElement.type = "text";
+        button.children.item(0).className = button.dataset.iconHide;
+        button.setAttribute("aria-label", button.dataset.labelHide);
+    } else if(passwordElement.type === "text") {
+        passwordElement.type = "password";
+        button.children.item(0).className = button.dataset.iconShow;
+        button.setAttribute("aria-label", button.dataset.labelShow);
+    }
+}
+
+document.querySelectorAll('[data-password-toggle]')
+    .forEach(button => button.onclick = () => toggle(button));

package/res/public/.keycloakify/login/js/userProfile.js

@@ -0,0 +1,71 @@
+// @ts-check
+/**
+ * @typedef {Object} AnnotationDescriptor
+ * @property {string} name - The name of the field to register (e.g. `numberFormat`).
+ * @property {(element: HTMLElement) => (() => void) | void} onAdd - The function to call when a new element is added to the DOM.
+ */
+
+const observer = new MutationObserver(onMutate);
+observer.observe(document.body, { childList: true, subtree: true });
+
+/** @type {AnnotationDescriptor[]} */
+const descriptors = [];
+
+/** @type {WeakMap<HTMLElement, () => void>} */
+const cleanupFunctions = new WeakMap();
+
+/**
+ * @param {AnnotationDescriptor} descriptor
+ */
+export function registerElementAnnotatedBy(descriptor) {
+  descriptors.push(descriptor);
+
+  document.querySelectorAll(`[data-${descriptor.name}]`).forEach((element) => {
+    if (element instanceof HTMLElement) {
+      handleNewElement(element, descriptor);
+    }
+  });
+}
+
+/**
+ * @type {MutationCallback}
+ */
+function onMutate(mutations) {
+  const removedNodes = mutations.flatMap((mutation) => Array.from(mutation.removedNodes));
+
+  for (const node of removedNodes) {
+    if (!(node instanceof HTMLElement)) {
+      continue;
+    }
+
+    const handleRemovedElement = cleanupFunctions.get(node);
+
+    if (handleRemovedElement) {
+      handleRemovedElement();
+    }
+
+    cleanupFunctions.delete(node);
+  }
+
+  const addedNodes = mutations.flatMap((mutation) => Array.from(mutation.addedNodes));
+
+  for (const descriptor of descriptors) {
+    for (const node of addedNodes) {
+      if (node instanceof HTMLElement && node.hasAttribute(`data-${descriptor.name}`)) {
+        handleNewElement(node, descriptor);
+      }
+    }
+  }
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {AnnotationDescriptor} descriptor
+ */
+function handleNewElement(element, descriptor) {
+  const cleanup = descriptor.onAdd(element);
+
+  if (cleanup) {
+    cleanupFunctions.set(element, cleanup);
+  }
+}