Merge branch 'master' into ux-selectpanel

assets/controllers/common/markdown_controller.js

@@ -56,12 +56,16 @@ export default class MarkdownController extends Controller {
         this.element.innerHTML = DOMPurify.sanitize(MarkdownController._marked.parse(this.unescapeHTML(raw)));
 
         for(let a of this.element.querySelectorAll('a')) {
-            //Mark all links as external
-            a.classList.add('link-external');
-            //Open links in new tag
-            a.setAttribute('target', '_blank');
-            //Dont track
-            a.setAttribute('rel', 'noopener');
+            // test if link is absolute
+            var r = new RegExp('^(?:[a-z+]+:)?//', 'i');
+            if (r.test(a.getAttribute('href'))) {
+                //Mark all links as external
+                a.classList.add('link-external');
+                //Open links in new tag
+                a.setAttribute('target', '_blank');
+                //Dont track
+                a.setAttribute('rel', 'noopener');
+            }
         }
 
         //Apply bootstrap styles to tables
@@ -108,4 +112,4 @@ export default class MarkdownController extends Controller {
             gfm: true,
         });
     }*/
-}
+}

assets/controllers/csrf_protection_controller.js

@@ -0,0 +1,79 @@
+const nameCheck = /^[-_a-zA-Z0-9]{4,22}$/;
+const tokenCheck = /^[-_/+a-zA-Z0-9]{24,}$/;
+
+// Generate and double-submit a CSRF token in a form field and a cookie, as defined by Symfony's SameOriginCsrfTokenManager
+document.addEventListener('submit', function (event) {
+    generateCsrfToken(event.target);
+}, true);
+
+// When @hotwired/turbo handles form submissions, send the CSRF token in a header in addition to a cookie
+// The `framework.csrf_protection.check_header` config option needs to be enabled for the header to be checked
+document.addEventListener('turbo:submit-start', function (event) {
+    const h = generateCsrfHeaders(event.detail.formSubmission.formElement);
+    Object.keys(h).map(function (k) {
+        event.detail.formSubmission.fetchRequest.headers[k] = h[k];
+    });
+});
+
+// When @hotwired/turbo handles form submissions, remove the CSRF cookie once a form has been submitted
+document.addEventListener('turbo:submit-end', function (event) {
+    removeCsrfToken(event.detail.formSubmission.formElement);
+});
+
+export function generateCsrfToken (formElement) {
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return;
+    }
+
+    let csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+    let csrfToken = csrfField.value;
+
+    if (!csrfCookie && nameCheck.test(csrfToken)) {
+        csrfField.setAttribute('data-csrf-protection-cookie-value', csrfCookie = csrfToken);
+        csrfField.defaultValue = csrfToken = btoa(String.fromCharCode.apply(null, (window.crypto || window.msCrypto).getRandomValues(new Uint8Array(18))));
+        csrfField.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    if (csrfCookie && tokenCheck.test(csrfToken)) {
+        const cookie = csrfCookie + '_' + csrfToken + '=' + csrfCookie + '; path=/; samesite=strict';
+        document.cookie = window.location.protocol === 'https:' ? '__Host-' + cookie + '; secure' : cookie;
+    }
+}
+
+export function generateCsrfHeaders (formElement) {
+    const headers = {};
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return headers;
+    }
+
+    const csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+
+    if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
+        headers[csrfCookie] = csrfField.value;
+    }
+
+    return headers;
+}
+
+export function removeCsrfToken (formElement) {
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return;
+    }
+
+    const csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+
+    if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
+        const cookie = csrfCookie + '_' + csrfField.value + '=0; path=/; samesite=strict; max-age=0';
+
+        document.cookie = window.location.protocol === 'https:' ? '__Host-' + cookie + '; secure' : cookie;
+    }
+}
+
+/* stimulusFetch: 'lazy' */
+export default 'csrf-protection-controller';

assets/controllers/elements/attachment_autocomplete_controller.js

@@ -42,6 +42,7 @@ export default class extends Controller {
             selectOnTab: true,
             //This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
             delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',
+            dropdownParent: 'body',
             render: {
                 item: (data, escape) => {
                     return '<span>' + escape(data.label) + '</span>';

assets/controllers/elements/ckeditor_controller.js

@@ -23,8 +23,9 @@ import { default as FullEditor } from "../../ckeditor/markdown_full";
 import { default as SingleLineEditor} from "../../ckeditor/markdown_single_line";
 import { default as HTMLLabelEditor } from "../../ckeditor/html_label";
 
-import EditorWatchdog from '@ckeditor/ckeditor5-watchdog/src/editorwatchdog';
+import {EditorWatchdog} from 'ckeditor5';
 
+import "ckeditor5/ckeditor5.css";;
 import "../../css/components/ckeditor.css";
 
 /* stimulusFetch: 'lazy' */
@@ -51,9 +52,15 @@ export default class extends Controller {
 
         const language = document.body.dataset.locale ?? "en";
 
+        const emojiURL = new URL('../../ckeditor/emojis.json', import.meta.url).href;
+
         const config = {
             language: language,
             licenseKey: "GPL",
+
+            emoji: {
+                definitionsUrl: emojiURL
+            }
         }
 
         const watchdog = new EditorWatchdog();
@@ -84,4 +91,4 @@ export default class extends Controller {
             console.error(error);
         });
     }
-}
+}

assets/controllers/elements/datatables/parts_controller.js

@@ -44,9 +44,11 @@ export default class extends DatatablesController {
 
         //Enable action button based on selection
         if (count > 0) {
-            selectPanel.querySelector('button[type="submit"]').disabled = false; 
+            selectPanel.classList.remove('d-none');
+            selectPanel.classList.add('sticky-select-bar');
         } else {
-            selectPanel.querySelector('button[type="submit"]').disabled = true; 
+            selectPanel.classList.add('d-none');
+            selectPanel.classList.remove('sticky-select-bar');
         }
 
         //Update selection count text

assets/controllers/elements/part_select_controller.js

@@ -16,6 +16,7 @@ export default class extends Controller {
             searchField: ["name", "description", "category", "footprint"],
             valueField: "id",
             labelField: "name",
+            dropdownParent: 'body',
             preload: "focus",
             render: {
                 item: (data, escape) => {
@@ -71,4 +72,4 @@ export default class extends Controller {
         //Destroy the TomSelect instance
         this._tomSelect.destroy();
     }
-}
+}

assets/controllers/elements/select_controller.js

@@ -40,9 +40,11 @@ export default class extends Controller {
 
 
         let settings = {
+            plugins: ["clear_button"],
             allowEmptyOption: true,
             selectOnTab: true,
             maxOptions: null,
+            dropdownParent: 'body',
 
             render: {
                 item: this.renderItem.bind(this),
@@ -50,7 +52,24 @@ export default class extends Controller {
             }
         };
 
+        //Load the drag_drop plugin if the select is ordered
+        if (this.element.dataset.orderedValue) {
+            settings.plugins.push('drag_drop');
+            settings.plugins.push("caret_position");
+        }
+
+        //If multiple items can be selected, enable the remove_button plugin
+        if (this.element.multiple) {
+            settings.plugins.push('remove_button');
+        }
+
         this._tomSelect = new TomSelect(this.element, settings);
+
+        //If the select is ordered, we need to update the value field (with the decoded value from the orderedValue field)
+        if (this.element.dataset.orderedValue) {
+            const data = JSON.parse(this.element.dataset.orderedValue);
+            this._tomSelect.setValue(data);
+        }
     }
 
     getTomSelect() {
@@ -90,4 +109,4 @@ export default class extends Controller {
         //Destroy the TomSelect instance
         this._tomSelect.destroy();
     }
-}
+}

assets/controllers/elements/select_multiple_controller.js

@@ -20,6 +20,8 @@
 import {Controller} from "@hotwired/stimulus";
 import TomSelect from "tom-select";
 
+// TODO: Merge with select_controller.js
+
 export default class extends Controller {
     _tomSelect;
 
@@ -27,6 +29,7 @@ export default class extends Controller {
         this._tomSelect = new TomSelect(this.element, {
             maxItems: 1000,
             allowEmptyOption: true,
+            dropdownParent: 'body',
             plugins: ['remove_button'],
         });
     }
@@ -37,4 +40,4 @@ export default class extends Controller {
         this._tomSelect.destroy();
     }
 
-}
+}

assets/controllers/elements/static_file_autocomplete_controller.js

@@ -50,6 +50,7 @@ export default class extends Controller {
             valueField: 'text',
             searchField: 'text',
             orderField: 'text',
+            dropdownParent: 'body',
 
             //This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
             delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',

assets/controllers/elements/structural_entity_select_controller.js

@@ -54,6 +54,7 @@ export default class extends Controller {
             maxItems: 1,
             delimiter: "$$VERY_LONG_DELIMITER_THAT_SHOULD_NEVER_APPEAR$$",
             splitOn: null,
+            dropdownParent: 'body',
 
             searchField: [
                 {field: "text", weight : 2},

assets/controllers/elements/tagsinput_controller.js

@@ -43,6 +43,7 @@ export default class extends Controller {
             selectOnTab: true,
             createOnBlur: true,
             create: true,
+            dropdownParent: 'body',
         };
 
         if(this.element.dataset.autocomplete) {
@@ -73,4 +74,4 @@ export default class extends Controller {
         //Destroy the TomSelect instance
         this._tomSelect.destroy();
     }
-}
+}

assets/controllers/toggle_password_controller.js

@@ -0,0 +1,86 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2025 Jan Böhmer (https://github.com/jbtronics)
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published
+ *  by the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { Controller } from '@hotwired/stimulus';
+import '../css/components/toggle_password.css';
+
+export default class extends Controller {
+    static values = {
+        visibleLabel: { type: String, default: 'Show' },
+        visibleIcon: { type: String, default: 'Default' },
+        hiddenLabel: { type: String, default: 'Hide' },
+        hiddenIcon: { type: String, default: 'Default' },
+        buttonClasses: Array,
+    };
+
+    isDisplayed = false;
+    visibleIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="toggle-password-icon" viewBox="0 0 20 20" fill="currentColor">
+<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
+<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
+</svg>`;
+    hiddenIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="toggle-password-icon" viewBox="0 0 20 20" fill="currentColor">
+<path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
+<path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
+</svg>`;
+
+    connect() {
+        if (this.visibleIconValue !== 'Default') {
+            this.visibleIcon = this.visibleIconValue;
+        }
+
+        if (this.hiddenIconValue !== 'Default') {
+            this.hiddenIcon = this.hiddenIconValue;
+        }
+
+        const button = this.createButton();
+
+        this.element.insertAdjacentElement('afterend', button);
+        this.dispatchEvent('connect', { element: this.element, button });
+    }
+
+    /**
+     * @returns {HTMLButtonElement}
+     */
+    createButton() {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.classList.add(...this.buttonClassesValue);
+        button.setAttribute('tabindex', '-1');
+        button.addEventListener('click', this.toggle.bind(this));
+        button.innerHTML = `${this.visibleIcon} ${this.visibleLabelValue}`;
+        return button;
+    }
+
+    /**
+     * Toggle input type between "text" or "password" and update label accordingly
+     */
+    toggle(event) {
+        this.isDisplayed = !this.isDisplayed;
+        const toggleButtonElement = event.currentTarget;
+        toggleButtonElement.innerHTML = this.isDisplayed
+            ? `${this.hiddenIcon} ${this.hiddenLabelValue}`
+            : `${this.visibleIcon} ${this.visibleLabelValue}`;
+        this.element.setAttribute('type', this.isDisplayed ? 'text' : 'password');
+        this.dispatchEvent(this.isDisplayed ? 'show' : 'hide', { element: this.element, button: toggleButtonElement });
+    }
+
+    dispatchEvent(name, payload) {
+        this.dispatch(name, { detail: payload, prefix: 'toggle-password' });
+    }
+}