decidim-core 0.30.1 → 0.31.0.rc1

data/app/packs/src/decidim/controllers/password_toggler/controller.js

@@ -0,0 +1,232 @@
+import { Controller } from "@hotwired/stimulus"
+import icon from "src/decidim/refactor/moved/icon"
+
+/**
+ * PasswordToggler Stimulus Controller
+ *
+ * A Stimulus controller that adds password visibility toggle functionality to password input fields.
+ * This controller creates a button that allows users to show/hide their password text for better
+ * user experience while maintaining security.
+ *
+ * Features:
+ * - Adds a toggle button with eye/eye-off icons
+ * - Provides screen reader support with ARIA labels and live regions
+ * - Automatically hides password on form submission for security
+ * - Handles form error positioning correctly
+ * - Supports customizable text labels via data attributes
+ *
+ * Required HTML structure:
+ * - Container element with this controller
+ * - Password input field inside the container
+ *
+ * Optional data attributes:
+ * - data-show-password: Custom text for "show password" button
+ * - data-hide-password: Custom text for "hide password" button
+ * - data-hidden-password: Custom text for screen readers when password is hidden
+ * - data-shown-password: Custom text for screen readers when password is shown
+ *
+ * @extends Controller
+ */
+export default class extends Controller {
+
+  /**
+   * Initializes the password toggler when the controller connects to the DOM.
+   * Sets up the password input reference, form reference, text labels, icons,
+   * and initializes all toggle functionality.
+   * @returns {void}
+   */
+  connect() {
+    this.input = this.element.querySelector('input[type="password"]');
+
+    if (!this.input) {
+      console.warn("PasswordToggler requires a password input element");
+      return;
+    }
+
+    this.form = this.input.closest("form");
+    this.texts = {
+      showPassword: this.element.getAttribute("data-show-password") || "Show password",
+      hidePassword: this.element.getAttribute("data-hide-password") || "Hide password",
+      hiddenPassword: this.element.getAttribute("data-hidden-password") || "Your password is hidden",
+      shownPassword: this.element.getAttribute("data-shown-password") || "Your password is shown"
+    }
+    this.icons = {
+      show: icon("eye-line"),
+      hide: icon("eye-off-line")
+    }
+
+    this.init();
+  }
+
+  /**
+   * Cleanup method called when the controller disconnects from the DOM.
+   * Removes event listeners to prevent memory leaks.
+   * @returns {void}
+   */
+  disconnect() {
+    if (this.button && this.boundToggleVisibility) {
+      this.button.removeEventListener("click", this.boundToggleVisibility);
+    }
+    if (this.form && this.boundHidePassword) {
+      this.form.removeEventListener("submit", this.boundHidePassword);
+    }
+  }
+
+
+  /**
+   * Initializes the password toggle functionality.
+   * Creates the UI controls, binds event listeners, and sets up form submission handling.
+   * This method is called after the controller connects to ensure proper setup.
+   * @returns {void}
+   */
+  init() {
+    this.createControls();
+
+    // Bind methods to maintain correct context
+    this.boundToggleVisibility = this.toggleVisibility.bind(this);
+    this.boundHidePassword = this.hidePassword.bind(this);
+
+    this.button.addEventListener("click", this.boundToggleVisibility);
+
+    if (this.form) {
+      this.form.addEventListener("submit", this.boundHidePassword);
+    }
+  }
+
+  /**
+   * Creates all UI controls needed for the password toggle functionality.
+   * This includes the toggle button, status text for screen readers, and
+   * the input group wrapper structure.
+   * @returns {void}
+   */
+  createControls() {
+    this.createButton();
+    this.createStatusText();
+    this.addInputGroupWrapperAsParent();
+  }
+
+  /**
+   * Creates the toggle button element with appropriate ARIA attributes.
+   * The button shows an eye icon initially and is configured for accessibility
+   * with proper labels and controls relationships.
+   * @returns {void}
+   */
+  createButton() {
+    const button = document.createElement("button");
+    button.setAttribute("type", "button");
+    button.setAttribute("aria-controls", this.input.getAttribute("id"));
+    button.setAttribute("aria-label", this.texts.showPassword);
+    button.innerHTML = this.icons.show;
+    this.button = button;
+  }
+
+  /**
+   * Creates a screen reader status text element.
+   * This invisible element announces password visibility changes to users
+   * using assistive technologies via the aria-live attribute.
+   * @returns {void}
+   */
+  createStatusText() {
+    const statusText = document.createElement("span");
+    statusText.classList.add("sr-only");
+    statusText.setAttribute("aria-live", "polite");
+    statusText.textContent = this.texts.hiddenPassword;
+    this.statusText = statusText;
+  }
+
+  /**
+   * Wraps the password input in a styled container and positions all elements.
+   * Creates an input group structure that includes the original input, toggle button,
+   * status text, and preserves any form error messages in the correct position.
+   *
+   * The resulting DOM structure:
+   * - input-group__password wrapper
+   *   - toggle button
+   *   - password input
+   *   - status text (screen reader only)
+   *   - form error (if present)
+   * @returns {void}
+   */
+  addInputGroupWrapperAsParent() {
+    if (!this.input.parentNode) {
+      console.warn("Password input has no parent node");
+      return;
+    }
+
+    const inputGroupWrapper = document.createElement("div");
+    inputGroupWrapper.classList.add("input-group__password");
+
+    const parent = this.input.parentNode;
+    const nextSibling = this.input.nextSibling;
+
+    this.input.remove();
+
+    inputGroupWrapper.appendChild(this.button);
+    inputGroupWrapper.appendChild(this.input);
+    inputGroupWrapper.appendChild(this.statusText);
+
+    if (nextSibling) {
+      parent.insertBefore(inputGroupWrapper, nextSibling);
+    } else {
+      parent.appendChild(inputGroupWrapper);
+    }
+
+    const formError = this.element.querySelector(".form-error");
+    if (formError && formError.parentNode !== inputGroupWrapper) {
+      inputGroupWrapper.appendChild(formError);
+    }
+  }
+
+  /**
+   * Toggles password visibility when the toggle button is clicked.
+   * Prevents the default button behavior and switches between showing
+   * and hiding the password based on the current state.
+   *
+   * @param {Event} evt - The click event from the toggle button
+   * @returns {void}
+   */
+  toggleVisibility(evt) {
+    evt.preventDefault();
+    if (this.isText()) {
+      this.hidePassword();
+    } else {
+      this.showPassword();
+    }
+  }
+
+  /**
+   * Shows the password as plain text.
+   * Updates the input type to "text", changes the button icon to "hide",
+   * updates ARIA labels, and announces the change to screen readers.
+   * @returns {void}
+   */
+  showPassword() {
+    this.statusText.textContent = this.texts.shownPassword;
+    this.button.setAttribute("aria-label", this.texts.hidePassword);
+    this.button.innerHTML = this.icons.hide;
+    this.input.setAttribute("type", "text");
+  }
+
+  /**
+   * Hides the password (shows dots/asterisks).
+   * Updates the input type to "password", changes the button icon to "show",
+   * updates ARIA labels, and announces the change to screen readers.
+   * This method is also called automatically on form submission for security.
+   * @returns {void}
+   */
+  hidePassword() {
+    this.statusText.textContent = this.texts.hiddenPassword;
+    this.button.setAttribute("aria-label", this.texts.showPassword);
+    this.button.innerHTML = this.icons.show;
+    this.input.setAttribute("type", "password");
+  }
+
+  /**
+   * Checks if the password is currently visible as plain text.
+   *
+   * @returns {boolean} True if password is visible (type="text"), false if hidden (type="password")
+   */
+  isText() {
+    return this.input.getAttribute("type") === "text"
+  }
+}

data/app/packs/src/decidim/controllers/password_toggler/password_toggler.test.js

@@ -0,0 +1,229 @@
+/* global jest */
+import { Application } from "@hotwired/stimulus"
+import PasswordTogglerController from "src/decidim/controllers/password_toggler/controller";
+
+// Mock the icon function
+jest.mock("src/decidim/refactor/moved/icon", () => ({
+  __esModule: true,
+  default: jest.fn((iconName) => `<svg class="${iconName}"><use href="#${iconName}"></use></svg>`)
+}));
+
+describe("PasswordToggler", () => {
+  let container = null;
+  let passwordElement = null;
+  let application = null;
+  let controller = null;
+
+  beforeEach(() => {
+    // Set up Stimulus application
+    application = Application.start();
+    application.register("password-toggler", PasswordTogglerController);
+    // Set up the DOM structure based on your markup
+    container = document.createElement("div");
+    container.innerHTML = `
+      <div data-controller="password-toggler" class="flex flex-row items-center gap-x-2" data-show-password="Show secret" data-hide-password="Hide Secret" data-hidden-password="Secret is hidden" data-shown-password="Secret is shown">
+        <div class="input-group__password">
+          <div class="input-group__password">
+            <button type="button" aria-controls="token_162" aria-label="Show password">
+              <svg width="0.75em" height="0.75em" role="img" aria-hidden="true">
+                <title>eye-line</title>
+                <use href="/decidim-packs/media/images/remixicon.symbol-e643e553623ffcd49f94.svg#ri-eye-line"></use>
+              </svg>
+            </button>
+            <input type="password" id="token_162" value="AXXXXXXXX" class="w-full" autocomplete="off">
+          </div>
+        </div>
+        <div class="basis-1/4">
+          <button type="button" class="button button__sm button__text-primary" data-clipboard-copy="#token_162">
+            <span>Copy secret</span>
+          </button>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(container);
+    passwordElement = container.querySelector('[data-controller="password-toggler"]');
+    // Wait for the controller to be connected
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        controller = application.getControllerForElementAndIdentifier(passwordElement, "password-toggler");
+        resolve();
+      }, 0);
+    });
+
+  });
+
+  afterEach(() => {
+    application.stop();
+    document.body.removeChild(container);
+    jest.clearAllMocks();
+  });
+
+  describe("constructor", () => {
+    it("initializes with correct properties", () => {
+      expect(controller.element).toBe(passwordElement);
+      expect(controller.input).toBe(passwordElement.querySelector('input[type="password"]'));
+      expect(controller.texts.showPassword).toBe("Show secret");
+      expect(controller.texts.hidePassword).toBe("Hide Secret");
+      expect(controller.texts.hiddenPassword).toBe("Secret is hidden");
+      expect(controller.texts.shownPassword).toBe("Secret is shown");
+    });
+
+    it("falls back to default texts when data attributes are not provided", async () => {
+      const simpleContainer = document.createElement("div");
+      simpleContainer.innerHTML = `
+        <div data-controller="password-toggler">
+          <input type="password" id="simple_password">
+        </div>
+      `;
+      document.body.appendChild(simpleContainer);
+
+      const simplePasswordElement = simpleContainer.querySelector('[data-controller="password-toggler"]');
+
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      const simpleController = application.getControllerForElementAndIdentifier(simplePasswordElement, "password-toggler");
+
+      expect(simpleController.texts.showPassword).toBe("Show password");
+      expect(simpleController.texts.hidePassword).toBe("Hide password");
+      expect(simpleController.texts.hiddenPassword).toBe("Your password is hidden");
+      expect(simpleController.texts.shownPassword).toBe("Your password is shown");
+
+      document.body.removeChild(simpleContainer);
+    });
+  });
+
+  describe("init", () => {
+    it("creates controls and adds event listeners", () => {
+      const addEventListenerSpy = jest.spyOn(HTMLElement.prototype, "addEventListener");
+
+      controller.init();
+
+      expect(controller.button).toBeDefined();
+      expect(controller.statusText).toBeDefined();
+      expect(addEventListenerSpy).toHaveBeenCalledWith("click", expect.any(Function));
+
+      addEventListenerSpy.mockRestore();
+    });
+  });
+
+  describe("createButton", () => {
+    it("creates button with correct attributes", () => {
+      expect(controller.button.tagName).toBe("BUTTON");
+      expect(controller.button.getAttribute("type")).toBe("button");
+      expect(controller.button.getAttribute("aria-controls")).toBe("token_162");
+      expect(controller.button.getAttribute("aria-label")).toBe("Show secret");
+    });
+  });
+
+  describe("createStatusText", () => {
+    it("creates status text with correct attributes", () => {
+
+      expect(controller.statusText.tagName).toBe("SPAN");
+      expect(controller.statusText.classList.contains("sr-only")).toBe(true);
+      expect(controller.statusText.getAttribute("aria-live")).toBe("polite");
+      expect(controller.statusText.textContent).toBe("Secret is hidden");
+    });
+  });
+
+  describe("toggleVisibility", () => {
+
+    it("shows password when currently hidden", () => {
+      const mockEvent = { preventDefault: jest.fn() };
+      controller.input.setAttribute("type", "password");
+
+      controller.toggleVisibility(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+      expect(controller.input.getAttribute("type")).toBe("text");
+      expect(controller.button.getAttribute("aria-label")).toBe("Hide Secret");
+      expect(controller.statusText.textContent).toBe("Secret is shown");
+    });
+
+    it("hides password when currently shown", () => {
+      const mockEvent = { preventDefault: jest.fn() };
+      controller.input.setAttribute("type", "text");
+
+      controller.toggleVisibility(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+      expect(controller.input.getAttribute("type")).toBe("password");
+      expect(controller.button.getAttribute("aria-label")).toBe("Show secret");
+      expect(controller.statusText.textContent).toBe("Secret is hidden");
+    });
+  });
+
+  describe("showPassword", () => {
+    it("changes input type to text and updates button", () => {
+      controller.showPassword();
+
+      expect(controller.input.getAttribute("type")).toBe("text");
+      expect(controller.button.getAttribute("aria-label")).toBe("Hide Secret");
+      expect(controller.statusText.textContent).toBe("Secret is shown");
+      expect(controller.button.innerHTML).toContain("eye-off-line");
+    });
+  });
+
+  describe("hidePassword", () => {
+
+
+    it("changes input type to password and updates button", () => {
+      controller.hidePassword();
+
+      expect(controller.input.getAttribute("type")).toBe("password");
+      expect(controller.button.getAttribute("aria-label")).toBe("Show secret");
+      expect(controller.statusText.textContent).toBe("Secret is hidden");
+      expect(controller.button.innerHTML).toContain("eye-line");
+    });
+  });
+
+  describe("isText", () => {
+    it("returns true when input type is text", () => {
+      controller.input.setAttribute("type", "text");
+      expect(controller.isText()).toBe(true);
+    });
+
+    it("returns false when input type is password", () => {
+      controller.input.setAttribute("type", "password");
+      expect(controller.isText()).toBe(false);
+    });
+  });
+
+  describe("form submission", () => {
+    it("resets password type on form submit", () => {
+      const form = document.createElement("form");
+      form.appendChild(passwordElement);
+      controller.form = form;
+
+      controller.init();
+      controller.input.setAttribute("type", "text");
+
+      const submitEvent = new Event("submit");
+      form.dispatchEvent(submitEvent);
+
+      expect(controller.input.getAttribute("type")).toBe("password");
+    });
+  });
+
+  describe("integration with existing markup", () => {
+    it("works with existing button structure", () => {
+      const existingButton = passwordElement.querySelector('button[aria-controls="token_162"]');
+      expect(existingButton).toBeTruthy();
+
+      controller.init();
+
+      // Should work alongside existing button
+      expect(controller.button).toBeDefined();
+      expect(controller.input.getAttribute("type")).toBe("password");
+    });
+
+    it("handles password input with existing value", () => {
+      expect(controller.input.value).toBe("AXXXXXXXX");
+
+      controller.init();
+      controller.showPassword();
+
+      expect(controller.input.getAttribute("type")).toBe("text");
+      expect(controller.input.value).toBe("AXXXXXXXX");
+    });
+  });
+});

data/app/packs/src/decidim/controllers/report_form/controller.js

@@ -0,0 +1,184 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  initialize() {
+    this.options = {
+      hideSelector: '[data-hide="true"]',
+      blockSelector: '[data-block="true"]',
+      blockAndHideSelector: "#block_and_hide",
+      submitSelector: 'button[type="submit"]'
+    };
+
+    this.isInitialized = false;
+    this.eventListeners = new Map();
+  }
+
+  /**
+   * Creates a new ReportFormManager instance
+   *
+   * @param {HTMLElement} container - The form container element that handles the report
+   * @param {Object} options - Configuration options for the manager
+   * @param {string} options.hideSelector - CSS selector for hide checkboxes (default: '[data-hide="true"]')
+   * @param {string} options.blockSelector - CSS selector for block checkboxes (default: '[data-block="true"]')
+   * @param {string} options.blockAndHideSelector - CSS selector for block and hide element (default: '#block_and_hide')
+   * @param {string} options.submitSelector - CSS selector for submit button (default: 'button[type="submit"]')
+   * @returns {void}
+   */
+  connect() {
+    if (!this.element || this.isInitialized) {
+      return;
+    }
+
+    try {
+      this.setupHideCheckboxes();
+      this.setupBlockCheckboxes();
+      this.isInitialized = true;
+    } catch (error) {
+      console.error("Failed to initialize ReportFormManager:", error);
+    }
+  }
+
+  disconnect() {
+    try {
+      // Remove all event listeners
+      this.eventListeners.forEach((listenerInfo, element) => {
+        element.removeEventListener(listenerInfo.event, listenerInfo.handler);
+      });
+
+      // Clear the listeners map
+      this.eventListeners.clear();
+
+      // Reset initialization state
+      this.isInitialized = false;
+
+      // Clear references
+      this.container = null;
+    } catch (error) {
+      console.error("Error during ReportFormManager cleanup:", error);
+    }
+  }
+
+  /**
+   * Sets up event listeners for hide checkboxes
+   * These checkboxes change the submit button label between report and hide actions
+   *
+   * @returns {void}
+   */
+  setupHideCheckboxes() {
+    const hideCheckboxes = this.element.querySelectorAll(this.options.hideSelector);
+
+    hideCheckboxes.forEach((checkbox) => {
+      const changeHandler = (event) => {
+        this.handleCheckboxChange(event.target);
+      };
+
+      checkbox.addEventListener("change", changeHandler);
+      this.eventListeners.set(checkbox, { event: "change", handler: changeHandler });
+    });
+  }
+
+  /**
+   * Sets up event listeners for block checkboxes
+   * These checkboxes handle user blocking functionality and toggle visibility of additional options
+   *
+   * @returns {void}
+   */
+  setupBlockCheckboxes() {
+    const blockCheckboxes = this.element.querySelectorAll(this.options.blockSelector);
+
+    blockCheckboxes.forEach((checkbox) => {
+      const changeHandler = (event) => {
+        this.handleCheckboxChange(event.target);
+        this.toggleBlockAndHideVisibility(event.target);
+      };
+
+      checkbox.addEventListener("change", changeHandler);
+      this.eventListeners.set(checkbox, { event: "change", handler: changeHandler });
+    });
+  }
+
+  /**
+   * Handles checkbox change events by updating the submit button label
+   *
+   * @param {HTMLInputElement} checkbox - The checkbox element that triggered the change
+   * @returns {void}
+   */
+  handleCheckboxChange(checkbox) {
+    try {
+      const form = checkbox.closest("form");
+      if (!form) {
+        console.warn("Checkbox is not within a form element");
+        return;
+      }
+
+      const submitButton = this.findSubmitButton(form);
+      if (!submitButton) {
+        console.warn("No submit button found in form");
+        return;
+      }
+
+      this.updateSubmitButtonLabel(submitButton, checkbox);
+    } catch (error) {
+      console.error("Error handling checkbox change:", error);
+    }
+  }
+
+  /**
+   * Finds the submit button within a form, checking for nested span elements
+   *
+   * @param {HTMLFormElement} form - The form element to search within
+   * @returns {HTMLElement|null} The submit button element or its nested span, or null if not found
+   */
+  findSubmitButton(form) {
+    const submitButton = form.querySelector(this.options.submitSelector);
+    if (!submitButton) {
+      return null;
+    }
+
+    // Check if the button has a nested span element for the text
+    const nestedSpan = submitButton.querySelector("span");
+    return nestedSpan || submitButton;
+  }
+
+  /**
+   * Updates the submit button label based on checkbox state and data attributes
+   *
+   * @param {HTMLElement} submitElement - The submit button or its text container element
+   * @param {HTMLInputElement} checkbox - The checkbox that triggered the update
+   * @returns {void}
+   */
+  updateSubmitButtonLabel(submitElement, checkbox) {
+    if (!checkbox.dataset.labelAction || !checkbox.dataset.labelReport) {
+      console.warn("Checkbox is missing required data attributes (data-label-action, data-label-report)");
+      return;
+    }
+
+    const newLabel = checkbox.checked
+      ? checkbox.dataset.labelAction
+      : checkbox.dataset.labelReport;
+
+    submitElement.innerHTML = newLabel;
+  }
+
+  /**
+   * Toggles the visibility of the block and hide element when block checkboxes are changed
+   *
+   * @param {HTMLInputElement} blockCheckbox - The block checkbox that was changed
+   * @returns {void}
+   */
+  toggleBlockAndHideVisibility(blockCheckbox) {
+    try {
+      const form = blockCheckbox.closest("form");
+      if (!form) {
+        return;
+      }
+
+      const blockAndHideElement = form.querySelector(this.options.blockAndHideSelector);
+      if (blockAndHideElement) {
+        blockAndHideElement.classList.toggle("invisible");
+      }
+    } catch (error) {
+      console.error("Error toggling block and hide visibility:", error);
+    }
+  }
+}