Merge branch 'master' into bulk-edit-tags

assets/controllers/bulk_import_controller.js

@@ -0,0 +1,359 @@
+import { Controller } from "@hotwired/stimulus"
+import { generateCsrfHeaders } from "./csrf_protection_controller"
+
+export default class extends Controller {
+    static targets = ["progressBar", "progressText"]
+    static values = { 
+        jobId: Number,
+        partId: Number,
+        researchUrl: String,
+        researchAllUrl: String,
+        markCompletedUrl: String,
+        markSkippedUrl: String,
+        markPendingUrl: String
+    }
+
+    connect() {
+        // Auto-refresh progress if job is in progress
+        if (this.hasProgressBarTarget) {
+            this.startProgressUpdates()
+        }
+        
+        // Restore scroll position after page reload (if any)
+        this.restoreScrollPosition()
+    }
+
+    getHeaders() {
+        const headers = {
+            'Content-Type': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest'
+        }
+
+        // Add CSRF headers if available
+        const form = document.querySelector('form')
+        if (form) {
+            const csrfHeaders = generateCsrfHeaders(form)
+            Object.assign(headers, csrfHeaders)
+        }
+
+        return headers
+    }
+
+    async fetchWithErrorHandling(url, options = {}, timeout = 30000) {
+        const controller = new AbortController()
+        const timeoutId = setTimeout(() => controller.abort(), timeout)
+        
+        try {
+            const response = await fetch(url, {
+                ...options,
+                headers: { ...this.getHeaders(), ...options.headers },
+                signal: controller.signal
+            })
+
+            clearTimeout(timeoutId)
+
+            if (!response.ok) {
+                const errorText = await response.text()
+                throw new Error(`Server error (${response.status}): ${errorText}`)
+            }
+
+            return await response.json()
+        } catch (error) {
+            clearTimeout(timeoutId)
+            
+            if (error.name === 'AbortError') {
+                throw new Error('Request timed out. Please try again.')
+            } else if (error.message.includes('Failed to fetch')) {
+                throw new Error('Network error. Please check your connection and try again.')
+            } else {
+                throw error
+            }
+        }
+    }
+
+    disconnect() {
+        if (this.progressInterval) {
+            clearInterval(this.progressInterval)
+        }
+    }
+
+    startProgressUpdates() {
+        // Progress updates are handled via page reload for better reliability
+        // No need for periodic updates since state changes trigger page refresh
+    }
+
+    restoreScrollPosition() {
+        const savedPosition = sessionStorage.getItem('bulkImportScrollPosition')
+        if (savedPosition) {
+            // Restore scroll position after a small delay to ensure page is fully loaded
+            setTimeout(() => {
+                window.scrollTo(0, parseInt(savedPosition))
+                // Clear the saved position so it doesn't interfere with normal navigation
+                sessionStorage.removeItem('bulkImportScrollPosition')
+            }, 100)
+        }
+    }
+
+    async markCompleted(event) {
+        const partId = event.currentTarget.dataset.partId
+        
+        try {
+            const url = this.markCompletedUrlValue.replace('__PART_ID__', partId)
+            const data = await this.fetchWithErrorHandling(url, { method: 'POST' })
+            
+            if (data.success) {
+                this.updateProgressDisplay(data)
+                this.markRowAsCompleted(partId)
+                
+                if (data.job_completed) {
+                    this.showJobCompletedMessage()
+                }
+            } else {
+                this.showErrorMessage(data.error || 'Failed to mark part as completed')
+            }
+        } catch (error) {
+            console.error('Error marking part as completed:', error)
+            this.showErrorMessage(error.message || 'Failed to mark part as completed')
+        }
+    }
+
+    async markSkipped(event) {
+        const partId = event.currentTarget.dataset.partId
+        const reason = prompt('Reason for skipping (optional):') || ''
+        
+        try {
+            const url = this.markSkippedUrlValue.replace('__PART_ID__', partId)
+            const data = await this.fetchWithErrorHandling(url, {
+                method: 'POST',
+                body: JSON.stringify({ reason })
+            })
+            
+            if (data.success) {
+                this.updateProgressDisplay(data)
+                this.markRowAsSkipped(partId)
+            } else {
+                this.showErrorMessage(data.error || 'Failed to mark part as skipped')
+            }
+        } catch (error) {
+            console.error('Error marking part as skipped:', error)
+            this.showErrorMessage(error.message || 'Failed to mark part as skipped')
+        }
+    }
+
+    async markPending(event) {
+        const partId = event.currentTarget.dataset.partId
+        
+        try {
+            const url = this.markPendingUrlValue.replace('__PART_ID__', partId)
+            const data = await this.fetchWithErrorHandling(url, { method: 'POST' })
+            
+            if (data.success) {
+                this.updateProgressDisplay(data)
+                this.markRowAsPending(partId)
+            } else {
+                this.showErrorMessage(data.error || 'Failed to mark part as pending')
+            }
+        } catch (error) {
+            console.error('Error marking part as pending:', error)
+            this.showErrorMessage(error.message || 'Failed to mark part as pending')
+        }
+    }
+
+    updateProgressDisplay(data) {
+        if (this.hasProgressBarTarget) {
+            this.progressBarTarget.style.width = `${data.progress}%`
+            this.progressBarTarget.setAttribute('aria-valuenow', data.progress)
+        }
+        
+        if (this.hasProgressTextTarget) {
+            this.progressTextTarget.textContent = `${data.completed_count} / ${data.total_count} completed`
+        }
+    }
+
+    markRowAsCompleted(partId) {
+        // Save scroll position and refresh page to show updated state
+        sessionStorage.setItem('bulkImportScrollPosition', window.scrollY.toString())
+        window.location.reload()
+    }
+
+    markRowAsSkipped(partId) {
+        // Save scroll position and refresh page to show updated state
+        sessionStorage.setItem('bulkImportScrollPosition', window.scrollY.toString())
+        window.location.reload()
+    }
+
+    markRowAsPending(partId) {
+        // Save scroll position and refresh page to show updated state
+        sessionStorage.setItem('bulkImportScrollPosition', window.scrollY.toString())
+        window.location.reload()
+    }
+
+    showJobCompletedMessage() {
+        const alert = document.createElement('div')
+        alert.className = 'alert alert-success alert-dismissible fade show'
+        alert.innerHTML = `
+            <i class="fas fa-check-circle"></i>
+            Job completed! All parts have been processed.
+            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+        `
+        
+        const container = document.querySelector('.card-body')
+        container.insertBefore(alert, container.firstChild)
+    }
+
+    async researchPart(event) {
+        event.preventDefault()
+        event.stopPropagation()
+        
+        const partId = event.currentTarget.dataset.partId
+        const spinner = event.currentTarget.querySelector(`[data-research-spinner="${partId}"]`)
+        const button = event.currentTarget
+        
+        // Show loading state
+        if (spinner) {
+            spinner.style.display = 'inline-block'
+        }
+        button.disabled = true
+        
+        try {
+            const url = this.researchUrlValue.replace('__PART_ID__', partId)
+            const controller = new AbortController()
+            const timeoutId = setTimeout(() => controller.abort(), 30000) // 30 second timeout
+            
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: this.getHeaders(),
+                signal: controller.signal
+            })
+
+            clearTimeout(timeoutId)
+
+            if (!response.ok) {
+                const errorText = await response.text()
+                throw new Error(`Server error (${response.status}): ${errorText}`)
+            }
+
+            const data = await response.json()
+            
+            if (data.success) {
+                this.showSuccessMessage(`Research completed for part. Found ${data.results_count} results.`)
+                // Save scroll position and reload to show updated results
+                sessionStorage.setItem('bulkImportScrollPosition', window.scrollY.toString())
+                window.location.reload()
+            } else {
+                this.showErrorMessage(data.error || 'Research failed')
+            }
+        } catch (error) {
+            console.error('Error researching part:', error)
+            
+            if (error.name === 'AbortError') {
+                this.showErrorMessage('Research timed out. Please try again.')
+            } else if (error.message.includes('Failed to fetch')) {
+                this.showErrorMessage('Network error. Please check your connection and try again.')
+            } else {
+                this.showErrorMessage(error.message || 'Research failed due to an unexpected error')
+            }
+        } finally {
+            // Hide loading state
+            if (spinner) {
+                spinner.style.display = 'none'
+            }
+            button.disabled = false
+        }
+    }
+
+    async researchAllParts(event) {
+        event.preventDefault()
+        event.stopPropagation()
+        
+        const spinner = document.getElementById('research-all-spinner')
+        const button = event.currentTarget
+        
+        // Show loading state
+        if (spinner) {
+            spinner.style.display = 'inline-block'
+        }
+        button.disabled = true
+        
+        try {
+            const controller = new AbortController()
+            const timeoutId = setTimeout(() => controller.abort(), 120000) // 2 minute timeout for bulk operations
+            
+            const response = await fetch(this.researchAllUrlValue, {
+                method: 'POST',
+                headers: this.getHeaders(),
+                signal: controller.signal
+            })
+
+            clearTimeout(timeoutId)
+
+            if (!response.ok) {
+                const errorText = await response.text()
+                throw new Error(`Server error (${response.status}): ${errorText}`)
+            }
+
+            const data = await response.json()
+            
+            if (data.success) {
+                this.showSuccessMessage(`Research completed for ${data.researched_count} parts.`)
+                // Save scroll position and reload to show updated results
+                sessionStorage.setItem('bulkImportScrollPosition', window.scrollY.toString())
+                window.location.reload()
+            } else {
+                this.showErrorMessage(data.error || 'Bulk research failed')
+            }
+        } catch (error) {
+            console.error('Error researching all parts:', error)
+            
+            if (error.name === 'AbortError') {
+                this.showErrorMessage('Bulk research timed out. This may happen with large batches. Please try again or process smaller batches.')
+            } else if (error.message.includes('Failed to fetch')) {
+                this.showErrorMessage('Network error. Please check your connection and try again.')
+            } else {
+                this.showErrorMessage(error.message || 'Bulk research failed due to an unexpected error')
+            }
+        } finally {
+            // Hide loading state
+            if (spinner) {
+                spinner.style.display = 'none'
+            }
+            button.disabled = false
+        }
+    }
+
+    showSuccessMessage(message) {
+        this.showToast('success', message)
+    }
+
+    showErrorMessage(message) {
+        this.showToast('error', message)
+    }
+
+    showToast(type, message) {
+        // Create a simple alert that doesn't disrupt layout
+        const alertId = 'alert-' + Date.now()
+        const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle'
+        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger'
+        
+        const alertHTML = `
+            <div class="alert ${alertClass} alert-dismissible fade show position-fixed" 
+                 style="top: 20px; right: 20px; z-index: 9999; max-width: 400px;" 
+                 id="${alertId}">
+                <i class="fas ${iconClass} me-2"></i>
+                ${message}
+                <button type="button" class="btn-close" onclick="this.parentElement.remove()" aria-label="Close"></button>
+            </div>
+        `
+        
+        // Add alert to body
+        document.body.insertAdjacentHTML('beforeend', alertHTML)
+        
+        // Auto-remove after 5 seconds
+        setTimeout(() => {
+            const alertElement = document.getElementById(alertId)
+            if (alertElement) {
+                alertElement.remove()
+            }
+        }, 5000)
+    }
+}

assets/controllers/bulk_job_manage_controller.js

@@ -0,0 +1,92 @@
+import { Controller } from "@hotwired/stimulus"
+import { generateCsrfHeaders } from "./csrf_protection_controller"
+
+export default class extends Controller {
+    static values = {
+        deleteUrl: String,
+        stopUrl: String,
+        deleteConfirmMessage: String,
+        stopConfirmMessage: String
+    }
+
+    connect() {
+        // Controller initialized
+    }
+    getHeaders() {
+        const headers = {
+            'X-Requested-With': 'XMLHttpRequest'
+        }
+
+        // Add CSRF headers if available
+        const form = document.querySelector('form')
+        if (form) {
+            const csrfHeaders = generateCsrfHeaders(form)
+            Object.assign(headers, csrfHeaders)
+        }
+
+        return headers
+    }
+    async deleteJob(event) {
+        const jobId = event.currentTarget.dataset.jobId
+        const confirmMessage = this.deleteConfirmMessageValue || 'Are you sure you want to delete this job?'
+        
+        if (confirm(confirmMessage)) {
+            try {
+                const deleteUrl = this.deleteUrlValue.replace('__JOB_ID__', jobId)
+                
+                const response = await fetch(deleteUrl, {
+                    method: 'DELETE',
+                    headers: this.getHeaders()
+                })
+                
+                if (!response.ok) {
+                    const errorText = await response.text()
+                    throw new Error(`HTTP ${response.status}: ${errorText}`)
+                }
+                
+                const data = await response.json()
+                
+                if (data.success) {
+                    location.reload()
+                } else {
+                    alert('Error deleting job: ' + (data.error || 'Unknown error'))
+                }
+            } catch (error) {
+                console.error('Error deleting job:', error)
+                alert('Error deleting job: ' + error.message)
+            }
+        }
+    }
+
+    async stopJob(event) {
+        const jobId = event.currentTarget.dataset.jobId
+        const confirmMessage = this.stopConfirmMessageValue || 'Are you sure you want to stop this job?'
+        
+        if (confirm(confirmMessage)) {
+            try {
+                const stopUrl = this.stopUrlValue.replace('__JOB_ID__', jobId)
+                
+                const response = await fetch(stopUrl, {
+                    method: 'POST',
+                    headers: this.getHeaders()
+                })
+                
+                if (!response.ok) {
+                    const errorText = await response.text()
+                    throw new Error(`HTTP ${response.status}: ${errorText}`)
+                }
+                
+                const data = await response.json()
+                
+                if (data.success) {
+                    location.reload()
+                } else {
+                    alert('Error stopping job: ' + (data.error || 'Unknown error'))
+                }
+            } catch (error) {
+                console.error('Error stopping job:', error)
+                alert('Error stopping job: ' + error.message)
+            }
+        }
+    }
+}

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

@@ -45,8 +45,10 @@ export default class extends DatatablesController {
         //Hide/Unhide panel with the selection tools
         if (count > 0) {
             selectPanel.classList.remove('d-none');
+            selectPanel.classList.add('sticky-select-bar');
         } else {
             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/field_mapping_controller.js

@@ -0,0 +1,136 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ["tbody", "addButton", "submitButton"]
+    static values = { 
+        mappingIndex: Number,
+        maxMappings: Number,
+        prototype: String,
+        maxMappingsReachedMessage: String
+    }
+
+    connect() {
+        this.updateAddButtonState()
+        this.updateFieldOptions()
+        this.attachEventListeners()
+    }
+
+    attachEventListeners() {
+        // Add event listeners to existing field selects
+        const fieldSelects = this.tbodyTarget.querySelectorAll('select[name*="[field]"]')
+        fieldSelects.forEach(select => {
+            select.addEventListener('change', this.updateFieldOptions.bind(this))
+        })
+
+        // Note: Add button click is handled by Stimulus action in template (data-action="click->field-mapping#addMapping")
+        // No manual event listener needed
+
+        // Form submit handler
+        const form = this.element.querySelector('form')
+        if (form && this.hasSubmitButtonTarget) {
+            form.addEventListener('submit', this.handleFormSubmit.bind(this))
+        }
+    }
+
+    addMapping() {
+        const currentMappings = this.tbodyTarget.querySelectorAll('.mapping-row').length
+
+        if (currentMappings >= this.maxMappingsValue) {
+            alert(this.maxMappingsReachedMessageValue)
+            return
+        }
+
+        const newRowHtml = this.prototypeValue.replace(/__name__/g, this.mappingIndexValue)
+        const tempDiv = document.createElement('div')
+        tempDiv.innerHTML = newRowHtml
+
+        const fieldWidget = tempDiv.querySelector('select[name*="[field]"]') || tempDiv.children[0]
+        const providerWidget = tempDiv.querySelector('select[name*="[providers]"]') || tempDiv.children[1]
+        const priorityWidget = tempDiv.querySelector('input[name*="[priority]"]') || tempDiv.children[2]
+
+        const newRow = document.createElement('tr')
+        newRow.className = 'mapping-row'
+        newRow.innerHTML = `
+            <td>${fieldWidget ? fieldWidget.outerHTML : ''}</td>
+            <td>${providerWidget ? providerWidget.outerHTML : ''}</td>
+            <td>${priorityWidget ? priorityWidget.outerHTML : ''}</td>
+            <td>
+                <button type="button" class="btn btn-danger btn-sm" data-action="click->field-mapping#removeMapping">
+                    <i class="fas fa-trash"></i>
+                </button>
+            </td>
+        `
+
+        this.tbodyTarget.appendChild(newRow)
+        this.mappingIndexValue++
+
+        const newFieldSelect = newRow.querySelector('select[name*="[field]"]')
+        if (newFieldSelect) {
+            newFieldSelect.value = ''
+            newFieldSelect.addEventListener('change', this.updateFieldOptions.bind(this))
+        }
+
+        this.updateFieldOptions()
+        this.updateAddButtonState()
+    }
+
+    removeMapping(event) {
+        const row = event.target.closest('tr')
+        row.remove()
+        this.updateFieldOptions()
+        this.updateAddButtonState()
+    }
+
+    updateFieldOptions() {
+        const fieldSelects = this.tbodyTarget.querySelectorAll('select[name*="[field]"]')
+        
+        const selectedFields = Array.from(fieldSelects)
+            .map(select => select.value)
+            .filter(value => value && value !== '')
+        
+        fieldSelects.forEach(select => {
+            Array.from(select.options).forEach(option => {
+                const isCurrentValue = option.value === select.value
+                const isEmptyOption = !option.value || option.value === ''
+                const isAlreadySelected = selectedFields.includes(option.value)
+                
+                if (!isEmptyOption && isAlreadySelected && !isCurrentValue) {
+                    option.disabled = true
+                    option.style.display = 'none'
+                } else {
+                    option.disabled = false
+                    option.style.display = ''
+                }
+            })
+        })
+    }
+
+    updateAddButtonState() {
+        const currentMappings = this.tbodyTarget.querySelectorAll('.mapping-row').length
+        
+        if (this.hasAddButtonTarget) {
+            if (currentMappings >= this.maxMappingsValue) {
+                this.addButtonTarget.disabled = true
+                this.addButtonTarget.title = this.maxMappingsReachedMessageValue
+            } else {
+                this.addButtonTarget.disabled = false
+                this.addButtonTarget.title = ''
+            }
+        }
+    }
+
+    handleFormSubmit(event) {
+        if (this.hasSubmitButtonTarget) {
+            this.submitButtonTarget.disabled = true
+            
+            // Disable the entire form to prevent changes during processing
+            const form = event.target
+            const formElements = form.querySelectorAll('input, select, textarea, button')
+            formElements.forEach(element => {
+                if (element !== this.submitButtonTarget) {
+                    element.disabled = true
+                }
+            })
+        }
+    }
+}

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' });
+    }
+}