From e8bed86d89de6d12204de33fd117159505e2f056 Mon Sep 17 00:00:00 2001 From: Chuck Date: Tue, 27 Jan 2026 10:37:39 -0500 Subject: [PATCH 01/28] feat(widgets): add modular widget system for schedule and common inputs Add 15 new reusable widgets following the widget registry pattern: - schedule-picker: composite widget for enable/mode/time configuration - day-selector: checkbox group for days of the week - time-range: paired start/end time inputs with validation - text-input, number-input, textarea: enhanced text inputs - toggle-switch, radio-group, select-dropdown: selection widgets - slider, color-picker, date-picker: specialized inputs - email-input, url-input, password-input: validated string inputs Refactor schedule.html to use the new schedule-picker widget instead of inline JavaScript. Add x-widget support in plugin_config.html for all new widgets so plugins can use them via schema configuration. Fix form submission for checkboxes by using hidden input pattern to ensure unchecked state is properly sent via JSON-encoded forms. Co-Authored-By: Claude Opus 4.5 --- .../static/v3/js/widgets/color-picker.js | 239 ++++++++ .../static/v3/js/widgets/date-picker.js | 193 +++++++ .../static/v3/js/widgets/day-selector.js | 249 ++++++++ .../static/v3/js/widgets/email-input.js | 172 ++++++ .../static/v3/js/widgets/number-input.js | 224 ++++++++ .../static/v3/js/widgets/password-input.js | 284 +++++++++ .../static/v3/js/widgets/radio-group.js | 139 +++++ .../static/v3/js/widgets/schedule-picker.js | 544 ++++++++++++++++++ .../static/v3/js/widgets/select-dropdown.js | 134 +++++ web_interface/static/v3/js/widgets/slider.js | 173 ++++++ .../static/v3/js/widgets/text-input.js | 211 +++++++ .../static/v3/js/widgets/textarea.js | 180 ++++++ .../static/v3/js/widgets/time-range.js | 374 ++++++++++++ .../static/v3/js/widgets/toggle-switch.js | 214 +++++++ .../static/v3/js/widgets/url-input.js | 218 +++++++ web_interface/templates/v3/base.html | 16 + .../templates/v3/partials/plugin_config.html | 133 ++++- .../templates/v3/partials/schedule.html | 282 ++++----- 18 files changed, 3798 insertions(+), 181 deletions(-) create mode 100644 web_interface/static/v3/js/widgets/color-picker.js create mode 100644 web_interface/static/v3/js/widgets/date-picker.js create mode 100644 web_interface/static/v3/js/widgets/day-selector.js create mode 100644 web_interface/static/v3/js/widgets/email-input.js create mode 100644 web_interface/static/v3/js/widgets/number-input.js create mode 100644 web_interface/static/v3/js/widgets/password-input.js create mode 100644 web_interface/static/v3/js/widgets/radio-group.js create mode 100644 web_interface/static/v3/js/widgets/schedule-picker.js create mode 100644 web_interface/static/v3/js/widgets/select-dropdown.js create mode 100644 web_interface/static/v3/js/widgets/slider.js create mode 100644 web_interface/static/v3/js/widgets/text-input.js create mode 100644 web_interface/static/v3/js/widgets/textarea.js create mode 100644 web_interface/static/v3/js/widgets/time-range.js create mode 100644 web_interface/static/v3/js/widgets/toggle-switch.js create mode 100644 web_interface/static/v3/js/widgets/url-input.js diff --git a/web_interface/static/v3/js/widgets/color-picker.js b/web_interface/static/v3/js/widgets/color-picker.js new file mode 100644 index 000000000..ac9a22ffc --- /dev/null +++ b/web_interface/static/v3/js/widgets/color-picker.js @@ -0,0 +1,239 @@ +/** + * LEDMatrix Color Picker Widget + * + * Color selection with preview and hex/RGB input. + * + * Schema example: + * { + * "backgroundColor": { + * "type": "string", + * "x-widget": "color-picker", + * "x-options": { + * "showHexInput": true, + * "showPreview": true, + * "presets": ["#ff0000", "#00ff00", "#0000ff", "#ffffff", "#000000"], + * "format": "hex" // "hex", "rgb", "rgba" + * } + * } + * } + * + * @module ColorPickerWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('ColorPicker', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + function isValidHex(hex) { + return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(hex); + } + + function normalizeHex(hex) { + if (!hex) return '#000000'; + hex = hex.trim(); + if (!hex.startsWith('#')) hex = '#' + hex; + // Expand 3-digit hex + if (hex.length === 4) { + hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]; + } + return hex.toLowerCase(); + } + + const DEFAULT_PRESETS = [ + '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', + '#ffff00', '#00ffff', '#ff00ff', '#808080', '#ffa500' + ]; + + window.LEDMatrixWidgets.register('color-picker', { + name: 'Color Picker Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'color_picker'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const showHexInput = xOptions.showHexInput !== false; + const showPreview = xOptions.showPreview !== false; + const presets = xOptions.presets || DEFAULT_PRESETS; + const disabled = xOptions.disabled === true; + + const currentValue = normalizeHex(value || '#000000'); + + let html = `
`; + + // Main color picker row + html += '
'; + + // Native color input + html += ` + + `; + + // Hex input + if (showHexInput) { + html += ` +
+ # + +
+ `; + } + + // Preview box + if (showPreview) { + html += ` +
+
+ `; + } + + html += '
'; + + // Hidden input for form submission + html += ``; + + // Preset colors + if (presets && presets.length > 0) { + html += ` +
+ Quick colors: + `; + for (const preset of presets) { + const normalized = normalizeHex(preset); + html += ` + + `; + } + html += '
'; + } + + // Error message area + html += ``; + + html += '
'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + return input ? input.value : ''; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const normalized = normalizeHex(value); + + const colorInput = document.getElementById(`${safeId}_color`); + const hexInput = document.getElementById(`${safeId}_hex`); + const preview = document.getElementById(`${safeId}_preview`); + const hidden = document.getElementById(`${safeId}_input`); + + if (colorInput) colorInput.value = normalized; + if (hexInput) hexInput.value = normalized.substring(1); + if (preview) preview.style.backgroundColor = normalized; + if (hidden) hidden.value = normalized; + }, + + handlers: { + onColorChange: function(fieldId) { + const safeId = sanitizeId(fieldId); + const colorInput = document.getElementById(`${safeId}_color`); + const value = colorInput?.value || '#000000'; + + const widget = window.LEDMatrixWidgets.get('color-picker'); + widget.setValue(fieldId, value); + triggerChange(fieldId, value); + }, + + onHexChange: function(fieldId) { + const safeId = sanitizeId(fieldId); + const hexInput = document.getElementById(`${safeId}_hex`); + const errorEl = document.getElementById(`${safeId}_error`); + + let value = '#' + (hexInput?.value || '000000'); + value = normalizeHex(value); + + if (!isValidHex(value)) { + if (errorEl) { + errorEl.textContent = 'Invalid hex color'; + errorEl.classList.remove('hidden'); + } + return; + } + + if (errorEl) { + errorEl.classList.add('hidden'); + } + + const widget = window.LEDMatrixWidgets.get('color-picker'); + widget.setValue(fieldId, value); + triggerChange(fieldId, value); + }, + + onHexInput: function(fieldId) { + const safeId = sanitizeId(fieldId); + const hexInput = document.getElementById(`${safeId}_hex`); + + if (hexInput) { + // Filter to only valid hex characters + hexInput.value = hexInput.value.replace(/[^0-9A-Fa-f]/g, '').toUpperCase(); + } + }, + + onPresetClick: function(fieldId, color) { + const widget = window.LEDMatrixWidgets.get('color-picker'); + widget.setValue(fieldId, color); + triggerChange(fieldId, color); + } + } + }); + + console.log('[ColorPickerWidget] Color picker widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/date-picker.js b/web_interface/static/v3/js/widgets/date-picker.js new file mode 100644 index 000000000..909d5ca59 --- /dev/null +++ b/web_interface/static/v3/js/widgets/date-picker.js @@ -0,0 +1,193 @@ +/** + * LEDMatrix Date Picker Widget + * + * Date selection with optional min/max constraints. + * + * Schema example: + * { + * "startDate": { + * "type": "string", + * "format": "date", + * "x-widget": "date-picker", + * "x-options": { + * "min": "2024-01-01", + * "max": "2025-12-31", + * "placeholder": "Select date", + * "clearable": true + * } + * } + * } + * + * @module DatePickerWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('DatePicker', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + window.LEDMatrixWidgets.register('date-picker', { + name: 'Date Picker Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'date_picker'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const min = xOptions.min || config.minimum || ''; + const max = xOptions.max || config.maximum || ''; + const placeholder = xOptions.placeholder || ''; + const clearable = xOptions.clearable === true; + const disabled = xOptions.disabled === true; + const required = xOptions.required === true; + + const currentValue = value || ''; + + let html = `
`; + + html += '
'; + + html += ` +
+ +
+ +
+
+ `; + + if (clearable && !disabled) { + html += ` + + `; + } + + html += '
'; + + // Date constraint info + if (min || max) { + let constraintText = ''; + if (min && max) { + constraintText = `${min} to ${max}`; + } else if (min) { + constraintText = `From ${min}`; + } else { + constraintText = `Until ${max}`; + } + html += `
${escapeHtml(constraintText)}
`; + } + + // Error message area + html += ``; + + html += '
'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + return input ? input.value : ''; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const clearBtn = document.getElementById(`${safeId}_clear`); + + if (input) { + input.value = value || ''; + } + if (clearBtn) { + clearBtn.classList.toggle('hidden', !value); + } + }, + + validate: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const errorEl = document.getElementById(`${safeId}_error`); + + if (!input) return { valid: true, errors: [] }; + + const isValid = input.checkValidity(); + + if (errorEl) { + if (!isValid) { + errorEl.textContent = input.validationMessage; + errorEl.classList.remove('hidden'); + input.classList.add('border-red-500'); + } else { + errorEl.classList.add('hidden'); + input.classList.remove('border-red-500'); + } + } + + return { valid: isValid, errors: isValid ? [] : [input.validationMessage] }; + }, + + handlers: { + onChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('date-picker'); + const safeId = sanitizeId(fieldId); + const clearBtn = document.getElementById(`${safeId}_clear`); + const value = widget.getValue(fieldId); + + if (clearBtn) { + clearBtn.classList.toggle('hidden', !value); + } + + widget.validate(fieldId); + triggerChange(fieldId, value); + }, + + onClear: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('date-picker'); + widget.setValue(fieldId, ''); + triggerChange(fieldId, ''); + } + } + }); + + console.log('[DatePickerWidget] Date picker widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/day-selector.js b/web_interface/static/v3/js/widgets/day-selector.js new file mode 100644 index 000000000..4310491bf --- /dev/null +++ b/web_interface/static/v3/js/widgets/day-selector.js @@ -0,0 +1,249 @@ +/** + * LEDMatrix Day Selector Widget + * + * Reusable checkbox group for selecting days of the week. + * Can be used by any plugin via x-widget: "day-selector" in their schema. + * + * Schema example: + * { + * "active_days": { + * "type": "array", + * "x-widget": "day-selector", + * "items": { "enum": ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"] }, + * "x-options": { + * "format": "short", // "short" (Mon) or "long" (Monday) + * "layout": "horizontal", // "horizontal" or "vertical" + * "selectAll": true // Show "Select All" toggle + * } + * } + * } + * + * @module DaySelectorWidget + */ + +(function() { + 'use strict'; + + const DAYS = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']; + + const DAY_LABELS = { + short: { + monday: 'Mon', + tuesday: 'Tue', + wednesday: 'Wed', + thursday: 'Thu', + friday: 'Fri', + saturday: 'Sat', + sunday: 'Sun' + }, + long: { + monday: 'Monday', + tuesday: 'Tuesday', + wednesday: 'Wednesday', + thursday: 'Thursday', + friday: 'Friday', + saturday: 'Saturday', + sunday: 'Sunday' + } + }; + + // Use BaseWidget utilities if available + const base = window.BaseWidget ? new window.BaseWidget('DaySelector', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + window.LEDMatrixWidgets.register('day-selector', { + name: 'Day Selector Widget', + version: '1.0.0', + + /** + * Render the day selector widget + * @param {HTMLElement} container - Container element + * @param {Object} config - Schema configuration + * @param {Array} value - Array of selected day names + * @param {Object} options - Additional options (fieldId, pluginId) + */ + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'day_selector'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const format = xOptions.format || 'long'; + const layout = xOptions.layout || 'horizontal'; + const showSelectAll = xOptions.selectAll !== false; + + // Normalize value to array + const selectedDays = Array.isArray(value) ? value : []; + + // Build HTML + let html = `
`; + + // Hidden input to store the value as JSON array + html += ``; + + // Select All toggle + if (showSelectAll) { + const allSelected = selectedDays.length === DAYS.length; + html += ` +
+ +
+ `; + } + + // Day checkboxes + const containerClass = layout === 'horizontal' + ? 'flex flex-wrap gap-3' + : 'space-y-2'; + + html += `
`; + + for (const day of DAYS) { + const isChecked = selectedDays.includes(day); + const label = DAY_LABELS[format][day] || day; + + html += ` + + `; + } + + html += '
'; + + container.innerHTML = html; + }, + + /** + * Get current selected days + * @param {string} fieldId - Field ID + * @returns {Array} Array of selected day names + */ + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const widget = document.getElementById(`${safeId}_widget`); + if (!widget) return []; + + const selectedDays = []; + const checkboxes = widget.querySelectorAll('.day-checkbox:checked'); + checkboxes.forEach(cb => { + selectedDays.push(cb.dataset.day); + }); + + return selectedDays; + }, + + /** + * Set selected days + * @param {string} fieldId - Field ID + * @param {Array} days - Array of day names to select + */ + setValue: function(fieldId, days) { + const safeId = sanitizeId(fieldId); + const widget = document.getElementById(`${safeId}_widget`); + if (!widget) return; + + const selectedDays = Array.isArray(days) ? days : []; + + // Update checkboxes + DAYS.forEach(day => { + const checkbox = document.getElementById(`${safeId}_${day}`); + if (checkbox) { + checkbox.checked = selectedDays.includes(day); + } + }); + + // Update hidden input + const hiddenInput = document.getElementById(`${safeId}_data`); + if (hiddenInput) { + hiddenInput.value = JSON.stringify(selectedDays); + } + + // Update select all checkbox + const selectAllCheckbox = document.getElementById(`${safeId}_select_all`); + if (selectAllCheckbox) { + selectAllCheckbox.checked = selectedDays.length === DAYS.length; + } + }, + + handlers: { + /** + * Handle individual day checkbox change + * @param {string} fieldId - Field ID + */ + onChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('day-selector'); + const selectedDays = widget.getValue(fieldId); + + // Update hidden input + const safeId = sanitizeId(fieldId); + const hiddenInput = document.getElementById(`${safeId}_data`); + if (hiddenInput) { + hiddenInput.value = JSON.stringify(selectedDays); + } + + // Update select all checkbox state + const selectAllCheckbox = document.getElementById(`${safeId}_select_all`); + if (selectAllCheckbox) { + selectAllCheckbox.checked = selectedDays.length === DAYS.length; + } + + // Trigger change event + triggerChange(fieldId, selectedDays); + }, + + /** + * Handle select all toggle + * @param {string} fieldId - Field ID + * @param {boolean} selectAll - Whether to select all + */ + onSelectAll: function(fieldId, selectAll) { + const widget = window.LEDMatrixWidgets.get('day-selector'); + widget.setValue(fieldId, selectAll ? DAYS.slice() : []); + + // Trigger change event + triggerChange(fieldId, selectAll ? DAYS.slice() : []); + } + } + }); + + // Expose DAYS constant for external use + window.LEDMatrixWidgets.get('day-selector').DAYS = DAYS; + window.LEDMatrixWidgets.get('day-selector').DAY_LABELS = DAY_LABELS; + + console.log('[DaySelectorWidget] Day selector widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/email-input.js b/web_interface/static/v3/js/widgets/email-input.js new file mode 100644 index 000000000..3d531ff84 --- /dev/null +++ b/web_interface/static/v3/js/widgets/email-input.js @@ -0,0 +1,172 @@ +/** + * LEDMatrix Email Input Widget + * + * Email input with validation and common domain suggestions. + * + * Schema example: + * { + * "email": { + * "type": "string", + * "format": "email", + * "x-widget": "email-input", + * "x-options": { + * "placeholder": "user@example.com", + * "showIcon": true + * } + * } + * } + * + * @module EmailInputWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('EmailInput', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + window.LEDMatrixWidgets.register('email-input', { + name: 'Email Input Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'email_input'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const placeholder = xOptions.placeholder || 'email@example.com'; + const showIcon = xOptions.showIcon !== false; + const disabled = xOptions.disabled === true; + const required = xOptions.required === true; + + const currentValue = value || ''; + + let html = `'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + return input ? input.value : ''; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + if (input) { + input.value = value || ''; + this.handlers.onInput(fieldId); + } + }, + + validate: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const errorEl = document.getElementById(`${safeId}_error`); + const validEl = document.getElementById(`${safeId}_valid`); + + if (!input) return { valid: true, errors: [] }; + + const value = input.value; + const isValid = input.checkValidity() && (!value || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)); + + if (errorEl && validEl) { + if (!isValid && value) { + errorEl.textContent = 'Please enter a valid email address'; + errorEl.classList.remove('hidden'); + validEl.classList.add('hidden'); + input.classList.add('border-red-500'); + input.classList.remove('border-green-500'); + } else if (isValid && value) { + errorEl.classList.add('hidden'); + validEl.classList.remove('hidden'); + input.classList.remove('border-red-500'); + input.classList.add('border-green-500'); + } else { + errorEl.classList.add('hidden'); + validEl.classList.add('hidden'); + input.classList.remove('border-red-500', 'border-green-500'); + } + } + + return { valid: isValid, errors: isValid ? [] : ['Invalid email format'] }; + }, + + handlers: { + onChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('email-input'); + widget.validate(fieldId); + triggerChange(fieldId, widget.getValue(fieldId)); + }, + + onInput: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('email-input'); + // Validate on input for real-time feedback + widget.validate(fieldId); + } + } + }); + + console.log('[EmailInputWidget] Email input widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/number-input.js b/web_interface/static/v3/js/widgets/number-input.js new file mode 100644 index 000000000..847efe076 --- /dev/null +++ b/web_interface/static/v3/js/widgets/number-input.js @@ -0,0 +1,224 @@ +/** + * LEDMatrix Number Input Widget + * + * Enhanced number input with min/max/step, formatting, and increment buttons. + * + * Schema example: + * { + * "brightness": { + * "type": "number", + * "x-widget": "number-input", + * "minimum": 0, + * "maximum": 100, + * "x-options": { + * "step": 5, + * "prefix": null, + * "suffix": "%", + * "showButtons": true, + * "format": "integer" // "integer", "decimal", "percent" + * } + * } + * } + * + * @module NumberInputWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('NumberInput', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + window.LEDMatrixWidgets.register('number-input', { + name: 'Number Input Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'number_input'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const min = config.minimum !== undefined ? config.minimum : (xOptions.min !== undefined ? xOptions.min : null); + const max = config.maximum !== undefined ? config.maximum : (xOptions.max !== undefined ? xOptions.max : null); + const step = xOptions.step || (config.type === 'integer' ? 1 : 'any'); + const prefix = xOptions.prefix || ''; + const suffix = xOptions.suffix || ''; + const showButtons = xOptions.showButtons !== false; + const disabled = xOptions.disabled === true; + const placeholder = xOptions.placeholder || ''; + + const currentValue = value !== null && value !== undefined ? value : ''; + + let html = `
`; + + html += '
'; + + if (prefix) { + html += `${escapeHtml(prefix)}`; + } + + if (showButtons && !disabled) { + html += ` + + `; + } + + const inputRoundedClass = showButtons || prefix || suffix ? '' : 'rounded-md'; + + html += ` + + `; + + if (showButtons && !disabled) { + html += ` + + `; + } + + if (suffix) { + html += `${escapeHtml(suffix)}`; + } + + html += '
'; + + // Range indicator if min/max specified + if (min !== null || max !== null) { + const rangeText = min !== null && max !== null + ? `${min} - ${max}` + : (min !== null ? `Min: ${min}` : `Max: ${max}`); + html += `
${escapeHtml(rangeText)}
`; + } + + // Error message area + html += ``; + + html += '
'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + if (!input || input.value === '') return null; + const num = parseFloat(input.value); + return isNaN(num) ? null : num; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + if (input) { + input.value = value !== null && value !== undefined ? value : ''; + } + }, + + validate: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const errorEl = document.getElementById(`${safeId}_error`); + + if (!input) return { valid: true, errors: [] }; + + const isValid = input.checkValidity(); + + if (errorEl) { + if (!isValid) { + errorEl.textContent = input.validationMessage; + errorEl.classList.remove('hidden'); + input.classList.add('border-red-500'); + } else { + errorEl.classList.add('hidden'); + input.classList.remove('border-red-500'); + } + } + + return { valid: isValid, errors: isValid ? [] : [input.validationMessage] }; + }, + + handlers: { + onChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('number-input'); + widget.validate(fieldId); + triggerChange(fieldId, widget.getValue(fieldId)); + }, + + onInput: function(fieldId) { + // Real-time input handling if needed + }, + + onIncrement: function(fieldId) { + const safeId = sanitizeId(fieldId); + const widget = document.getElementById(`${safeId}_widget`); + const input = document.getElementById(`${safeId}_input`); + if (!input || !widget) return; + + const step = parseFloat(widget.dataset.step) || 1; + const max = widget.dataset.max !== '' ? parseFloat(widget.dataset.max) : Infinity; + const current = parseFloat(input.value) || 0; + const newValue = Math.min(current + step, max); + + input.value = newValue; + this.onChange(fieldId); + }, + + onDecrement: function(fieldId) { + const safeId = sanitizeId(fieldId); + const widget = document.getElementById(`${safeId}_widget`); + const input = document.getElementById(`${safeId}_input`); + if (!input || !widget) return; + + const step = parseFloat(widget.dataset.step) || 1; + const min = widget.dataset.min !== '' ? parseFloat(widget.dataset.min) : -Infinity; + const current = parseFloat(input.value) || 0; + const newValue = Math.max(current - step, min); + + input.value = newValue; + this.onChange(fieldId); + } + } + }); + + console.log('[NumberInputWidget] Number input widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/password-input.js b/web_interface/static/v3/js/widgets/password-input.js new file mode 100644 index 000000000..3430f1d9e --- /dev/null +++ b/web_interface/static/v3/js/widgets/password-input.js @@ -0,0 +1,284 @@ +/** + * LEDMatrix Password Input Widget + * + * Password input with show/hide toggle and strength indicator. + * + * Schema example: + * { + * "password": { + * "type": "string", + * "x-widget": "password-input", + * "x-options": { + * "placeholder": "Enter password", + * "showToggle": true, + * "showStrength": false, + * "minLength": 8, + * "requireUppercase": false, + * "requireNumber": false, + * "requireSpecial": false + * } + * } + * } + * + * @module PasswordInputWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('PasswordInput', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + function calculateStrength(password, options) { + if (!password) return { score: 0, label: '', color: 'gray' }; + + let score = 0; + const minLength = options.minLength || 8; + + // Length check + if (password.length >= minLength) score += 1; + if (password.length >= minLength + 4) score += 1; + if (password.length >= minLength + 8) score += 1; + + // Character variety + if (/[a-z]/.test(password)) score += 1; + if (/[A-Z]/.test(password)) score += 1; + if (/[0-9]/.test(password)) score += 1; + if (/[^a-zA-Z0-9]/.test(password)) score += 1; + + // Normalize to 0-4 scale + const normalizedScore = Math.min(4, Math.floor(score / 2)); + + const levels = [ + { label: 'Very Weak', color: 'red' }, + { label: 'Weak', color: 'orange' }, + { label: 'Fair', color: 'yellow' }, + { label: 'Good', color: 'lime' }, + { label: 'Strong', color: 'green' } + ]; + + return { + score: normalizedScore, + ...levels[normalizedScore] + }; + } + + window.LEDMatrixWidgets.register('password-input', { + name: 'Password Input Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'password_input'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const placeholder = xOptions.placeholder || 'Enter password'; + const showToggle = xOptions.showToggle !== false; + const showStrength = xOptions.showStrength === true; + const minLength = xOptions.minLength || 0; + const disabled = xOptions.disabled === true; + const required = xOptions.required === true; + + const currentValue = value || ''; + + let html = `
`; + + html += '
'; + + html += ` + + `; + + if (showToggle && !disabled) { + html += ` + + `; + } + + html += '
'; + + // Strength indicator + if (showStrength) { + const strength = calculateStrength(currentValue, xOptions); + html += ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${strength.label} +
+ `; + } + + // Error message area + html += ``; + + html += '
'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + return input ? input.value : ''; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + if (input) { + input.value = value || ''; + this.handlers.onInput(fieldId); + } + }, + + validate: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const errorEl = document.getElementById(`${safeId}_error`); + + if (!input) return { valid: true, errors: [] }; + + const isValid = input.checkValidity(); + + if (errorEl) { + if (!isValid) { + errorEl.textContent = input.validationMessage; + errorEl.classList.remove('hidden'); + input.classList.add('border-red-500'); + } else { + errorEl.classList.add('hidden'); + input.classList.remove('border-red-500'); + } + } + + return { valid: isValid, errors: isValid ? [] : [input.validationMessage] }; + }, + + handlers: { + onChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('password-input'); + widget.validate(fieldId); + triggerChange(fieldId, widget.getValue(fieldId)); + }, + + onInput: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const strengthEl = document.getElementById(`${safeId}_strength`); + const strengthLabel = document.getElementById(`${safeId}_strength_label`); + const widget = document.getElementById(`${safeId}_widget`); + + if (strengthEl && input) { + const value = input.value; + const minLength = parseInt(widget?.dataset.minLength || '8', 10); + + if (value) { + strengthEl.classList.remove('hidden'); + const strength = calculateStrength(value, { minLength }); + + // Update bars + const colors = { + red: 'bg-red-500', + orange: 'bg-orange-500', + yellow: 'bg-yellow-500', + lime: 'bg-lime-500', + green: 'bg-green-500' + }; + const colorClass = colors[strength.color] || 'bg-gray-300'; + + for (let i = 0; i < 4; i++) { + const bar = document.getElementById(`${safeId}_bar${i}`); + if (bar) { + // Remove all color classes + bar.className = 'h-full rounded'; + if (i < strength.score) { + bar.classList.add(colorClass); + bar.style.width = '100%'; + } else { + bar.style.width = '0'; + } + } + } + + if (strengthLabel) { + strengthLabel.textContent = strength.label; + } + } else { + strengthEl.classList.add('hidden'); + } + } + }, + + onToggle: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const icon = document.getElementById(`${safeId}_icon`); + + if (input && icon) { + if (input.type === 'password') { + input.type = 'text'; + icon.classList.remove('fa-eye'); + icon.classList.add('fa-eye-slash'); + } else { + input.type = 'password'; + icon.classList.remove('fa-eye-slash'); + icon.classList.add('fa-eye'); + } + } + } + } + }); + + console.log('[PasswordInputWidget] Password input widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/radio-group.js b/web_interface/static/v3/js/widgets/radio-group.js new file mode 100644 index 000000000..d42e13e5b --- /dev/null +++ b/web_interface/static/v3/js/widgets/radio-group.js @@ -0,0 +1,139 @@ +/** + * LEDMatrix Radio Group Widget + * + * Exclusive option selection with radio buttons. + * + * Schema example: + * { + * "displayMode": { + * "type": "string", + * "x-widget": "radio-group", + * "enum": ["auto", "manual", "scheduled"], + * "x-options": { + * "layout": "vertical", // "vertical", "horizontal" + * "labels": { + * "auto": "Automatic", + * "manual": "Manual Control", + * "scheduled": "Scheduled" + * }, + * "descriptions": { + * "auto": "System decides when to display", + * "manual": "You control when content shows", + * "scheduled": "Display at specific times" + * } + * } + * } + * } + * + * @module RadioGroupWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('RadioGroup', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + window.LEDMatrixWidgets.register('radio-group', { + name: 'Radio Group Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'radio_group'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const enumValues = config.enum || xOptions.options || []; + const layout = xOptions.layout || 'vertical'; + const labels = xOptions.labels || {}; + const descriptions = xOptions.descriptions || {}; + const disabled = xOptions.disabled === true; + + const currentValue = value !== null && value !== undefined ? String(value) : ''; + + const containerClass = layout === 'horizontal' ? 'flex flex-wrap gap-4' : 'space-y-3'; + + let html = `
`; + + for (const optValue of enumValues) { + const optId = `${fieldId}_${sanitizeId(String(optValue))}`; + const label = labels[optValue] || String(optValue).replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()); + const description = descriptions[optValue] || ''; + const isChecked = String(optValue) === currentValue; + + html += ` + + `; + } + + html += '
'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const widget = document.getElementById(`${safeId}_widget`); + if (!widget) return ''; + + const checked = widget.querySelector('input[type="radio"]:checked'); + return checked ? checked.value : ''; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const widget = document.getElementById(`${safeId}_widget`); + if (!widget) return; + + const radios = widget.querySelectorAll('input[type="radio"]'); + radios.forEach(radio => { + radio.checked = radio.value === String(value); + }); + }, + + handlers: { + onChange: function(fieldId, value) { + triggerChange(fieldId, value); + } + } + }); + + console.log('[RadioGroupWidget] Radio group widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/schedule-picker.js b/web_interface/static/v3/js/widgets/schedule-picker.js new file mode 100644 index 000000000..6c4f1f3d5 --- /dev/null +++ b/web_interface/static/v3/js/widgets/schedule-picker.js @@ -0,0 +1,544 @@ +/** + * LEDMatrix Schedule Picker Widget + * + * Composite widget combining enable toggle, mode switch (global/per-day), + * and time range configurations. Composes day-selector and time-range widgets. + * + * Can be used standalone in schedule.html or by plugins via x-widget: "schedule-picker". + * + * Schema example: + * { + * "schedule": { + * "type": "object", + * "x-widget": "schedule-picker", + * "x-options": { + * "showModeToggle": true, // Allow switching global/per-day + * "showEnableToggle": true, // Show enabled checkbox + * "compactMode": false, // Compact layout for embedded use + * "defaultMode": "global" // Default mode: "global" or "per_day" + * } + * } + * } + * + * API-compatible output format: + * { + * enabled: boolean, + * mode: "global" | "per_day", + * start_time: "HH:MM", // if global mode + * end_time: "HH:MM", // if global mode + * days: { // if per_day mode + * monday: { enabled: boolean, start_time: "HH:MM", end_time: "HH:MM" }, + * ... + * } + * } + * + * @module SchedulePickerWidget + */ + +(function() { + 'use strict'; + + const DAYS = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']; + + const DAY_LABELS = { + monday: 'Monday', + tuesday: 'Tuesday', + wednesday: 'Wednesday', + thursday: 'Thursday', + friday: 'Friday', + saturday: 'Saturday', + sunday: 'Sunday' + }; + + // Use BaseWidget utilities if available + const base = window.BaseWidget ? new window.BaseWidget('SchedulePicker', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + /** + * Generate default schedule config + */ + function getDefaultSchedule() { + const days = {}; + DAYS.forEach(day => { + days[day] = { + enabled: true, + start_time: '07:00', + end_time: '23:00' + }; + }); + return { + enabled: false, + mode: 'global', + start_time: '07:00', + end_time: '23:00', + days: days + }; + } + + /** + * Merge user value with defaults + */ + function normalizeSchedule(value) { + const defaults = getDefaultSchedule(); + if (!value || typeof value !== 'object') { + return defaults; + } + + const schedule = { + enabled: value.enabled === true, + mode: value.mode === 'per_day' ? 'per_day' : 'global', + start_time: value.start_time || defaults.start_time, + end_time: value.end_time || defaults.end_time, + days: {} + }; + + // Merge days + DAYS.forEach(day => { + const dayConfig = (value.days && value.days[day]) || defaults.days[day]; + schedule.days[day] = { + enabled: dayConfig.enabled !== false, + start_time: dayConfig.start_time || defaults.days[day].start_time, + end_time: dayConfig.end_time || defaults.days[day].end_time + }; + }); + + return schedule; + } + + window.LEDMatrixWidgets.register('schedule-picker', { + name: 'Schedule Picker Widget', + version: '1.0.0', + + /** + * Render the schedule picker widget + * @param {HTMLElement} container - Container element + * @param {Object} config - Schema configuration + * @param {Object} value - Schedule configuration object + * @param {Object} options - Additional options (fieldId, pluginId) + */ + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'schedule'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const showModeToggle = xOptions.showModeToggle !== false; + const showEnableToggle = xOptions.showEnableToggle !== false; + const compactMode = xOptions.compactMode === true; + + const schedule = normalizeSchedule(value); + + let html = `
`; + + // Hidden inputs for API-compatible form submission + html += this._renderHiddenInputs(fieldId, schedule); + + // Enable toggle + if (showEnableToggle) { + html += ` +
+ +

When enabled, the display will only operate during specified hours.

+
+ `; + } + + // Mode selection + if (showModeToggle) { + html += ` +
+

Schedule Mode

+
+ +

Use the same start and end time for all days of the week

+ + +

Set different times for each day of the week

+
+
+ `; + } + + // Global schedule section + const globalDisplay = schedule.mode === 'global' ? 'block' : 'none'; + html += ` +
+

Global Times

+
+
+ + +

When to start displaying content (HH:MM)

+
+
+ + +

When to stop displaying content (HH:MM)

+
+
+
+ `; + + // Per-day schedule section + const perDayDisplay = schedule.mode === 'per_day' ? 'block' : 'none'; + html += ` +
+

Day-Specific Times

+
+
+ + + + + + + + + + + `; + + // Render each day row + DAYS.forEach(day => { + const dayConfig = schedule.days[day]; + const disabled = !dayConfig.enabled; + const disabledClass = disabled ? 'bg-gray-100' : ''; + + html += ` + + + + + + + `; + }); + + html += ` + +
DayEnabledStartEnd
+ ${escapeHtml(DAY_LABELS[day])} + + + + + + +
+
+
+
+ `; + + html += '
'; + + container.innerHTML = html; + }, + + /** + * Render hidden inputs for form submission + * These match the existing API format + */ + _renderHiddenInputs: function(fieldId, schedule) { + let html = ''; + + // Enabled state (hidden input ensures value is always sent, even when checkbox is unchecked) + html += ``; + + // Mode indicator (for the widget to track internally) + html += ``; + + // Global times (used when mode is global) + html += ``; + html += ``; + + // Per-day values (used when mode is per_day) + DAYS.forEach(day => { + const dayConfig = schedule.days[day]; + html += ``; + html += ``; + html += ``; + }); + + return html; + }, + + /** + * Get current schedule value + * @param {string} fieldId - Field ID + * @returns {Object} Schedule configuration object + */ + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const widget = document.getElementById(`${safeId}_widget`); + if (!widget) return getDefaultSchedule(); + + const enabledCheckbox = document.getElementById(`${safeId}_enabled`); + const modeGlobal = document.getElementById(`${safeId}_mode_global`); + const globalStart = document.getElementById(`${safeId}_global_start`); + const globalEnd = document.getElementById(`${safeId}_global_end`); + + const schedule = { + enabled: enabledCheckbox ? enabledCheckbox.checked : false, + mode: (modeGlobal && modeGlobal.checked) ? 'global' : 'per_day', + start_time: globalStart ? globalStart.value : '07:00', + end_time: globalEnd ? globalEnd.value : '23:00', + days: {} + }; + + DAYS.forEach(day => { + const dayEnabled = document.getElementById(`${safeId}_${day}_enabled`); + const dayStart = document.getElementById(`${safeId}_${day}_start`); + const dayEnd = document.getElementById(`${safeId}_${day}_end`); + + schedule.days[day] = { + enabled: dayEnabled ? dayEnabled.checked : true, + start_time: dayStart ? dayStart.value : '07:00', + end_time: dayEnd ? dayEnd.value : '23:00' + }; + }); + + return schedule; + }, + + /** + * Set schedule value + * @param {string} fieldId - Field ID + * @param {Object} value - Schedule configuration object + */ + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const schedule = normalizeSchedule(value); + + // Set enabled + const enabledCheckbox = document.getElementById(`${safeId}_enabled`); + if (enabledCheckbox) enabledCheckbox.checked = schedule.enabled; + + // Set mode + const modeGlobal = document.getElementById(`${safeId}_mode_global`); + const modePerDay = document.getElementById(`${safeId}_mode_per_day`); + if (modeGlobal) modeGlobal.checked = schedule.mode === 'global'; + if (modePerDay) modePerDay.checked = schedule.mode === 'per_day'; + + // Set global times + const globalStart = document.getElementById(`${safeId}_global_start`); + const globalEnd = document.getElementById(`${safeId}_global_end`); + if (globalStart) globalStart.value = schedule.start_time; + if (globalEnd) globalEnd.value = schedule.end_time; + + // Set per-day values + DAYS.forEach(day => { + const dayConfig = schedule.days[day]; + const dayEnabled = document.getElementById(`${safeId}_${day}_enabled`); + const dayStart = document.getElementById(`${safeId}_${day}_start`); + const dayEnd = document.getElementById(`${safeId}_${day}_end`); + + if (dayEnabled) dayEnabled.checked = dayConfig.enabled; + if (dayStart) { + dayStart.value = dayConfig.start_time; + dayStart.disabled = !dayConfig.enabled; + dayStart.classList.toggle('bg-gray-100', !dayConfig.enabled); + } + if (dayEnd) { + dayEnd.value = dayConfig.end_time; + dayEnd.disabled = !dayConfig.enabled; + dayEnd.classList.toggle('bg-gray-100', !dayConfig.enabled); + } + }); + + // Update visibility + this.handlers.onModeChange(fieldId, schedule.mode); + + // Update hidden inputs + this._updateHiddenInputs(fieldId); + }, + + /** + * Update all hidden inputs to match current state + */ + _updateHiddenInputs: function(fieldId) { + const safeId = sanitizeId(fieldId); + const schedule = this.getValue(fieldId); + + // Enabled + const enabledHidden = document.getElementById(`${safeId}_enabled_hidden`); + if (enabledHidden) enabledHidden.value = schedule.enabled; + + // Mode + const modeHidden = document.getElementById(`${safeId}_mode_value`); + if (modeHidden) modeHidden.value = schedule.mode; + + // Global times + const startHidden = document.getElementById(`${safeId}_start_time_hidden`); + const endHidden = document.getElementById(`${safeId}_end_time_hidden`); + if (startHidden) startHidden.value = schedule.start_time; + if (endHidden) endHidden.value = schedule.end_time; + + // Per-day values + DAYS.forEach(day => { + const dayConfig = schedule.days[day]; + const enabledHidden = document.getElementById(`${safeId}_${day}_enabled_hidden`); + const startHidden = document.getElementById(`${safeId}_${day}_start_hidden`); + const endHidden = document.getElementById(`${safeId}_${day}_end_hidden`); + + if (enabledHidden) enabledHidden.value = dayConfig.enabled; + if (startHidden) startHidden.value = dayConfig.start_time; + if (endHidden) endHidden.value = dayConfig.end_time; + }); + }, + + handlers: { + /** + * Handle enabled toggle change + */ + onEnabledChange: function(fieldId, enabled) { + const widget = window.LEDMatrixWidgets.get('schedule-picker'); + widget._updateHiddenInputs(fieldId); + triggerChange(fieldId, widget.getValue(fieldId)); + }, + + /** + * Handle mode switch + */ + onModeChange: function(fieldId, mode) { + const safeId = sanitizeId(fieldId); + const globalSection = document.getElementById(`${safeId}_global_section`); + const perDaySection = document.getElementById(`${safeId}_perday_section`); + + if (globalSection) globalSection.style.display = mode === 'global' ? 'block' : 'none'; + if (perDaySection) perDaySection.style.display = mode === 'per_day' ? 'block' : 'none'; + + const widget = window.LEDMatrixWidgets.get('schedule-picker'); + widget._updateHiddenInputs(fieldId); + triggerChange(fieldId, widget.getValue(fieldId)); + }, + + /** + * Handle global time change + */ + onGlobalTimeChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('schedule-picker'); + widget._updateHiddenInputs(fieldId); + triggerChange(fieldId, widget.getValue(fieldId)); + }, + + /** + * Handle day enabled change + */ + onDayEnabledChange: function(fieldId, day, enabled) { + const safeId = sanitizeId(fieldId); + const dayStart = document.getElementById(`${safeId}_${day}_start`); + const dayEnd = document.getElementById(`${safeId}_${day}_end`); + + if (dayStart) { + dayStart.disabled = !enabled; + dayStart.classList.toggle('bg-gray-100', !enabled); + if (!enabled) { + dayStart.value = ''; + } else if (!dayStart.value) { + dayStart.value = '07:00'; + } + } + + if (dayEnd) { + dayEnd.disabled = !enabled; + dayEnd.classList.toggle('bg-gray-100', !enabled); + if (!enabled) { + dayEnd.value = ''; + } else if (!dayEnd.value) { + dayEnd.value = '23:00'; + } + } + + const widget = window.LEDMatrixWidgets.get('schedule-picker'); + widget._updateHiddenInputs(fieldId); + triggerChange(fieldId, widget.getValue(fieldId)); + }, + + /** + * Handle day time change + */ + onDayTimeChange: function(fieldId, day) { + const widget = window.LEDMatrixWidgets.get('schedule-picker'); + widget._updateHiddenInputs(fieldId); + triggerChange(fieldId, widget.getValue(fieldId)); + } + } + }); + + // Expose constants for external use + window.LEDMatrixWidgets.get('schedule-picker').DAYS = DAYS; + window.LEDMatrixWidgets.get('schedule-picker').DAY_LABELS = DAY_LABELS; + window.LEDMatrixWidgets.get('schedule-picker').getDefaultSchedule = getDefaultSchedule; + window.LEDMatrixWidgets.get('schedule-picker').normalizeSchedule = normalizeSchedule; + + console.log('[SchedulePickerWidget] Schedule picker widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/select-dropdown.js b/web_interface/static/v3/js/widgets/select-dropdown.js new file mode 100644 index 000000000..5513ecc3f --- /dev/null +++ b/web_interface/static/v3/js/widgets/select-dropdown.js @@ -0,0 +1,134 @@ +/** + * LEDMatrix Select Dropdown Widget + * + * Enhanced dropdown select with search, groups, and custom rendering. + * + * Schema example: + * { + * "theme": { + * "type": "string", + * "x-widget": "select-dropdown", + * "enum": ["light", "dark", "auto"], + * "x-options": { + * "placeholder": "Select a theme...", + * "searchable": false, + * "labels": { + * "light": "Light Mode", + * "dark": "Dark Mode", + * "auto": "System Default" + * }, + * "icons": { + * "light": "fas fa-sun", + * "dark": "fas fa-moon", + * "auto": "fas fa-desktop" + * } + * } + * } + * } + * + * @module SelectDropdownWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('SelectDropdown', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + window.LEDMatrixWidgets.register('select-dropdown', { + name: 'Select Dropdown Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'select'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const enumValues = config.enum || xOptions.options || []; + const placeholder = xOptions.placeholder || 'Select...'; + const labels = xOptions.labels || {}; + const icons = xOptions.icons || {}; + const disabled = xOptions.disabled === true; + const required = xOptions.required === true; + + const currentValue = value !== null && value !== undefined ? String(value) : ''; + + let html = `
`; + + html += ` + '; + + // Error message area + html += ``; + + html += '
'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + return input ? input.value : ''; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + if (input) { + input.value = value !== null && value !== undefined ? String(value) : ''; + } + }, + + handlers: { + onChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('select-dropdown'); + triggerChange(fieldId, widget.getValue(fieldId)); + } + } + }); + + console.log('[SelectDropdownWidget] Select dropdown widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/slider.js b/web_interface/static/v3/js/widgets/slider.js new file mode 100644 index 000000000..bfd95e1d3 --- /dev/null +++ b/web_interface/static/v3/js/widgets/slider.js @@ -0,0 +1,173 @@ +/** + * LEDMatrix Slider Widget + * + * Range slider with value display and optional tick marks. + * + * Schema example: + * { + * "volume": { + * "type": "number", + * "x-widget": "slider", + * "minimum": 0, + * "maximum": 100, + * "x-options": { + * "step": 5, + * "showValue": true, + * "showMinMax": true, + * "suffix": "%", + * "color": "blue" // "blue", "green", "red", "purple" + * } + * } + * } + * + * @module SliderWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('Slider', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + const COLOR_CLASSES = { + blue: 'accent-blue-600', + green: 'accent-green-600', + red: 'accent-red-600', + purple: 'accent-purple-600', + amber: 'accent-amber-500' + }; + + window.LEDMatrixWidgets.register('slider', { + name: 'Slider Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'slider'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const min = config.minimum !== undefined ? config.minimum : (xOptions.min !== undefined ? xOptions.min : 0); + const max = config.maximum !== undefined ? config.maximum : (xOptions.max !== undefined ? xOptions.max : 100); + const step = xOptions.step || 1; + const showValue = xOptions.showValue !== false; + const showMinMax = xOptions.showMinMax !== false; + const suffix = xOptions.suffix || ''; + const prefix = xOptions.prefix || ''; + const color = xOptions.color || 'blue'; + const disabled = xOptions.disabled === true; + + const currentValue = value !== null && value !== undefined ? value : min; + const colorClass = COLOR_CLASSES[color] || COLOR_CLASSES.blue; + + let html = `
`; + + // Value display above slider + if (showValue) { + html += ` +
+ + ${escapeHtml(prefix)}${currentValue}${escapeHtml(suffix)} + +
+ `; + } + + // Slider + html += ` + + `; + + // Min/Max labels + if (showMinMax) { + html += ` +
+ ${escapeHtml(prefix)}${min}${escapeHtml(suffix)} + ${escapeHtml(prefix)}${max}${escapeHtml(suffix)} +
+ `; + } + + html += '
'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + if (!input) return null; + const num = parseFloat(input.value); + return isNaN(num) ? null : num; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const valueEl = document.getElementById(`${safeId}_value`); + const widget = document.getElementById(`${safeId}_widget`); + + if (input) { + input.value = value !== null && value !== undefined ? value : input.min; + } + if (valueEl && widget) { + const prefix = widget.dataset.prefix || ''; + const suffix = widget.dataset.suffix || ''; + valueEl.textContent = `${prefix}${input.value}${suffix}`; + } + }, + + handlers: { + onInput: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const valueEl = document.getElementById(`${safeId}_value`); + const widget = document.getElementById(`${safeId}_widget`); + + if (valueEl && input && widget) { + const prefix = widget.dataset.prefix || ''; + const suffix = widget.dataset.suffix || ''; + valueEl.textContent = `${prefix}${input.value}${suffix}`; + } + }, + + onChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('slider'); + triggerChange(fieldId, widget.getValue(fieldId)); + } + } + }); + + console.log('[SliderWidget] Slider widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/text-input.js b/web_interface/static/v3/js/widgets/text-input.js new file mode 100644 index 000000000..9f2a77b1b --- /dev/null +++ b/web_interface/static/v3/js/widgets/text-input.js @@ -0,0 +1,211 @@ +/** + * LEDMatrix Text Input Widget + * + * Enhanced text input with validation, placeholder, and pattern support. + * + * Schema example: + * { + * "username": { + * "type": "string", + * "x-widget": "text-input", + * "x-options": { + * "placeholder": "Enter username", + * "pattern": "^[a-zA-Z0-9_]+$", + * "patternMessage": "Only letters, numbers, and underscores allowed", + * "minLength": 3, + * "maxLength": 20, + * "prefix": "@", + * "suffix": null, + * "clearable": true + * } + * } + * } + * + * @module TextInputWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('TextInput', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + window.LEDMatrixWidgets.register('text-input', { + name: 'Text Input Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'text_input'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const placeholder = xOptions.placeholder || ''; + const pattern = xOptions.pattern || ''; + const patternMessage = xOptions.patternMessage || 'Invalid format'; + const minLength = xOptions.minLength || 0; + const maxLength = xOptions.maxLength || null; + const prefix = xOptions.prefix || ''; + const suffix = xOptions.suffix || ''; + const clearable = xOptions.clearable === true; + const disabled = xOptions.disabled === true; + + const currentValue = value !== null && value !== undefined ? String(value) : ''; + + let html = `
`; + + // Container for prefix/input/suffix layout + const hasAddons = prefix || suffix || clearable; + if (hasAddons) { + html += '
'; + if (prefix) { + html += `${escapeHtml(prefix)}`; + } + } + + const roundedClass = hasAddons + ? (prefix && suffix ? '' : (prefix ? 'rounded-r-md' : 'rounded-l-md')) + : 'rounded-md'; + + html += ` + + `; + + if (clearable && !disabled) { + html += ` + + `; + } + + if (suffix) { + html += `${escapeHtml(suffix)}`; + } + + if (hasAddons) { + html += '
'; + } + + // Validation message area + html += ``; + + // Character count if maxLength specified + if (maxLength) { + html += `
${currentValue.length}/${maxLength}
`; + } + + html += '
'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + return input ? input.value : ''; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + if (input) { + input.value = value !== null && value !== undefined ? String(value) : ''; + this.handlers.onInput(fieldId); + } + }, + + validate: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const errorEl = document.getElementById(`${safeId}_error`); + + if (!input) return { valid: true, errors: [] }; + + const isValid = input.checkValidity(); + + if (errorEl) { + if (!isValid) { + errorEl.textContent = input.validationMessage; + errorEl.classList.remove('hidden'); + input.classList.add('border-red-500'); + } else { + errorEl.classList.add('hidden'); + input.classList.remove('border-red-500'); + } + } + + return { valid: isValid, errors: isValid ? [] : [input.validationMessage] }; + }, + + handlers: { + onChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('text-input'); + widget.validate(fieldId); + triggerChange(fieldId, widget.getValue(fieldId)); + }, + + onInput: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const clearBtn = document.getElementById(`${safeId}_clear`); + const countEl = document.getElementById(`${safeId}_count`); + + if (clearBtn) { + clearBtn.classList.toggle('hidden', !input.value); + } + + if (countEl && input) { + const maxLength = input.maxLength; + if (maxLength > 0) { + countEl.textContent = `${input.value.length}/${maxLength}`; + } + } + }, + + onClear: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('text-input'); + widget.setValue(fieldId, ''); + triggerChange(fieldId, ''); + } + } + }); + + console.log('[TextInputWidget] Text input widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/textarea.js b/web_interface/static/v3/js/widgets/textarea.js new file mode 100644 index 000000000..3985f9dba --- /dev/null +++ b/web_interface/static/v3/js/widgets/textarea.js @@ -0,0 +1,180 @@ +/** + * LEDMatrix Textarea Widget + * + * Multi-line text input with character count and resize options. + * + * Schema example: + * { + * "description": { + * "type": "string", + * "x-widget": "textarea", + * "x-options": { + * "rows": 4, + * "placeholder": "Enter description...", + * "maxLength": 500, + * "resize": "vertical", // "none", "vertical", "horizontal", "both" + * "showCount": true + * } + * } + * } + * + * @module TextareaWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('Textarea', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + const RESIZE_CLASSES = { + none: 'resize-none', + vertical: 'resize-y', + horizontal: 'resize-x', + both: 'resize' + }; + + window.LEDMatrixWidgets.register('textarea', { + name: 'Textarea Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'textarea'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const rows = xOptions.rows || 4; + const placeholder = xOptions.placeholder || ''; + const maxLength = xOptions.maxLength || config.maxLength || null; + const minLength = xOptions.minLength || config.minLength || 0; + const resize = xOptions.resize || 'vertical'; + const showCount = xOptions.showCount !== false && maxLength; + const disabled = xOptions.disabled === true; + + const currentValue = value !== null && value !== undefined ? String(value) : ''; + const resizeClass = RESIZE_CLASSES[resize] || RESIZE_CLASSES.vertical; + + let html = `
`; + + html += ` + + `; + + // Character count + if (showCount) { + html += ` +
+ ${currentValue.length}/${maxLength} +
+ `; + } + + // Error message area + html += ``; + + html += '
'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + return input ? input.value : ''; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + if (input) { + input.value = value !== null && value !== undefined ? String(value) : ''; + this.handlers.onInput(fieldId); + } + }, + + validate: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const errorEl = document.getElementById(`${safeId}_error`); + + if (!input) return { valid: true, errors: [] }; + + const isValid = input.checkValidity(); + + if (errorEl) { + if (!isValid) { + errorEl.textContent = input.validationMessage; + errorEl.classList.remove('hidden'); + input.classList.add('border-red-500'); + } else { + errorEl.classList.add('hidden'); + input.classList.remove('border-red-500'); + } + } + + return { valid: isValid, errors: isValid ? [] : [input.validationMessage] }; + }, + + handlers: { + onChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('textarea'); + widget.validate(fieldId); + triggerChange(fieldId, widget.getValue(fieldId)); + }, + + onInput: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const countEl = document.getElementById(`${safeId}_count`); + + if (countEl && input) { + const maxLength = input.maxLength; + if (maxLength > 0) { + countEl.textContent = `${input.value.length}/${maxLength}`; + // Change color when near limit + if (input.value.length >= maxLength * 0.9) { + countEl.classList.remove('text-gray-400'); + countEl.classList.add('text-amber-500'); + } else { + countEl.classList.remove('text-amber-500'); + countEl.classList.add('text-gray-400'); + } + } + } + } + } + }); + + console.log('[TextareaWidget] Textarea widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/time-range.js b/web_interface/static/v3/js/widgets/time-range.js new file mode 100644 index 000000000..cea26b1b1 --- /dev/null +++ b/web_interface/static/v3/js/widgets/time-range.js @@ -0,0 +1,374 @@ +/** + * LEDMatrix Time Range Widget + * + * Reusable paired start/end time inputs with validation. + * Can be used by any plugin via x-widget: "time-range" in their schema. + * + * Schema example: + * { + * "quiet_hours": { + * "type": "object", + * "x-widget": "time-range", + * "properties": { + * "start_time": { "type": "string", "format": "time" }, + * "end_time": { "type": "string", "format": "time" } + * }, + * "x-options": { + * "allowOvernight": true, // Allow end < start (overnight schedules) + * "showDuration": false, // Show calculated duration + * "disabled": false, // Start disabled + * "startLabel": "Start", // Custom label for start time + * "endLabel": "End" // Custom label for end time + * } + * } + * } + * + * @module TimeRangeWidget + */ + +(function() { + 'use strict'; + + // Use BaseWidget utilities if available + const base = window.BaseWidget ? new window.BaseWidget('TimeRange', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + function showError(container, message) { + if (base) { + base.showError(container, message); + } else { + clearError(container); + const errorEl = document.createElement('div'); + errorEl.className = 'widget-error text-sm text-red-600 mt-2'; + errorEl.textContent = message; + container.appendChild(errorEl); + } + } + + function clearError(container) { + if (base) { + base.clearError(container); + } else { + const errorEl = container.querySelector('.widget-error'); + if (errorEl) errorEl.remove(); + } + } + + /** + * Parse time string to minutes since midnight + * @param {string} timeStr - Time in HH:MM format + * @returns {number} Minutes since midnight, or -1 if invalid + */ + function parseTimeToMinutes(timeStr) { + if (!timeStr || typeof timeStr !== 'string') return -1; + const match = timeStr.match(/^(\d{1,2}):(\d{2})$/); + if (!match) return -1; + const hours = parseInt(match[1], 10); + const minutes = parseInt(match[2], 10); + if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return -1; + return hours * 60 + minutes; + } + + /** + * Calculate duration between two times + * @param {string} startTime - Start time HH:MM + * @param {string} endTime - End time HH:MM + * @param {boolean} allowOvernight - Whether overnight is allowed + * @returns {string} Duration string + */ + function calculateDuration(startTime, endTime, allowOvernight) { + const startMinutes = parseTimeToMinutes(startTime); + const endMinutes = parseTimeToMinutes(endTime); + + if (startMinutes < 0 || endMinutes < 0) return ''; + + let durationMinutes; + if (endMinutes >= startMinutes) { + durationMinutes = endMinutes - startMinutes; + } else if (allowOvernight) { + durationMinutes = (24 * 60 - startMinutes) + endMinutes; + } else { + return 'Invalid range'; + } + + const hours = Math.floor(durationMinutes / 60); + const minutes = durationMinutes % 60; + + if (hours === 0) return `${minutes}m`; + if (minutes === 0) return `${hours}h`; + return `${hours}h ${minutes}m`; + } + + window.LEDMatrixWidgets.register('time-range', { + name: 'Time Range Widget', + version: '1.0.0', + + /** + * Render the time range widget + * @param {HTMLElement} container - Container element + * @param {Object} config - Schema configuration + * @param {Object} value - Object with start_time and end_time + * @param {Object} options - Additional options (fieldId, pluginId) + */ + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'time_range'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const allowOvernight = xOptions.allowOvernight !== false; + const showDuration = xOptions.showDuration === true; + const disabled = xOptions.disabled === true; + const startLabel = xOptions.startLabel || 'Start Time'; + const endLabel = xOptions.endLabel || 'End Time'; + + // Normalize value + const startTime = (value && value.start_time) || '07:00'; + const endTime = (value && value.end_time) || '23:00'; + + const disabledAttr = disabled ? 'disabled' : ''; + const disabledClass = disabled ? 'bg-gray-100 cursor-not-allowed' : ''; + + let html = `
`; + + // Hidden inputs for form submission + html += ``; + html += ``; + + html += `
`; + + // Start time input + html += ` +
+ + +
+ `; + + // End time input + html += ` +
+ + +
+ `; + + html += '
'; + + // Duration display + if (showDuration) { + const duration = calculateDuration(startTime, endTime, allowOvernight); + html += ` +
+ Duration: ${escapeHtml(duration)} +
+ `; + } + + html += '
'; + + container.innerHTML = html; + }, + + /** + * Get current time range value + * @param {string} fieldId - Field ID + * @returns {Object} Object with start_time and end_time + */ + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const startInput = document.getElementById(`${safeId}_start_input`); + const endInput = document.getElementById(`${safeId}_end_input`); + + return { + start_time: startInput ? startInput.value : '', + end_time: endInput ? endInput.value : '' + }; + }, + + /** + * Set time range value + * @param {string} fieldId - Field ID + * @param {Object} value - Object with start_time and end_time + */ + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const startInput = document.getElementById(`${safeId}_start_input`); + const endInput = document.getElementById(`${safeId}_end_input`); + const startHidden = document.getElementById(`${safeId}_start_time`); + const endHidden = document.getElementById(`${safeId}_end_time`); + + const startTime = (value && value.start_time) || ''; + const endTime = (value && value.end_time) || ''; + + if (startInput) startInput.value = startTime; + if (endInput) endInput.value = endTime; + if (startHidden) startHidden.value = startTime; + if (endHidden) endHidden.value = endTime; + + // Update duration if shown + this.handlers.updateDuration(fieldId); + }, + + /** + * Validate the time range + * @param {string} fieldId - Field ID + * @returns {Object} { valid: boolean, errors: Array } + */ + validate: function(fieldId) { + const safeId = sanitizeId(fieldId); + const widget = document.getElementById(`${safeId}_widget`); + const value = this.getValue(fieldId); + const errors = []; + + // Check for empty values + if (!value.start_time) { + errors.push('Start time is required'); + } + if (!value.end_time) { + errors.push('End time is required'); + } + + // Validate time format + if (value.start_time && parseTimeToMinutes(value.start_time) < 0) { + errors.push('Invalid start time format'); + } + if (value.end_time && parseTimeToMinutes(value.end_time) < 0) { + errors.push('Invalid end time format'); + } + + // Check for valid range if overnight not allowed + if (widget && errors.length === 0) { + const allowOvernight = widget.dataset.allowOvernight === 'true'; + if (!allowOvernight) { + const startMinutes = parseTimeToMinutes(value.start_time); + const endMinutes = parseTimeToMinutes(value.end_time); + if (endMinutes <= startMinutes) { + errors.push('End time must be after start time'); + } + } + } + + // Show/clear errors + if (widget) { + if (errors.length > 0) { + showError(widget, errors[0]); + } else { + clearError(widget); + } + } + + return { + valid: errors.length === 0, + errors + }; + }, + + /** + * Set disabled state + * @param {string} fieldId - Field ID + * @param {boolean} disabled - Whether to disable + */ + setDisabled: function(fieldId, disabled) { + const safeId = sanitizeId(fieldId); + const startInput = document.getElementById(`${safeId}_start_input`); + const endInput = document.getElementById(`${safeId}_end_input`); + + if (startInput) { + startInput.disabled = disabled; + startInput.classList.toggle('bg-gray-100', disabled); + startInput.classList.toggle('cursor-not-allowed', disabled); + } + if (endInput) { + endInput.disabled = disabled; + endInput.classList.toggle('bg-gray-100', disabled); + endInput.classList.toggle('cursor-not-allowed', disabled); + } + }, + + handlers: { + /** + * Handle time input change + * @param {string} fieldId - Field ID + */ + onChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('time-range'); + const value = widget.getValue(fieldId); + const safeId = sanitizeId(fieldId); + + // Update hidden inputs + const startHidden = document.getElementById(`${safeId}_start_time`); + const endHidden = document.getElementById(`${safeId}_end_time`); + if (startHidden) startHidden.value = value.start_time; + if (endHidden) endHidden.value = value.end_time; + + // Update duration + this.updateDuration(fieldId); + + // Validate + widget.validate(fieldId); + + // Trigger change event + triggerChange(fieldId, value); + }, + + /** + * Update duration display + * @param {string} fieldId - Field ID + */ + updateDuration: function(fieldId) { + const safeId = sanitizeId(fieldId); + const durationEl = document.getElementById(`${safeId}_duration`); + if (!durationEl) return; + + const widget = window.LEDMatrixWidgets.get('time-range'); + const value = widget.getValue(fieldId); + const widgetEl = document.getElementById(`${safeId}_widget`); + const allowOvernight = widgetEl && widgetEl.dataset.allowOvernight === 'true'; + + const duration = calculateDuration(value.start_time, value.end_time, allowOvernight); + const spanEl = durationEl.querySelector('span'); + if (spanEl) { + spanEl.textContent = duration; + } + } + } + }); + + // Expose utility functions for external use + window.LEDMatrixWidgets.get('time-range').parseTimeToMinutes = parseTimeToMinutes; + window.LEDMatrixWidgets.get('time-range').calculateDuration = calculateDuration; + + console.log('[TimeRangeWidget] Time range widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/toggle-switch.js b/web_interface/static/v3/js/widgets/toggle-switch.js new file mode 100644 index 000000000..5b87cc05f --- /dev/null +++ b/web_interface/static/v3/js/widgets/toggle-switch.js @@ -0,0 +1,214 @@ +/** + * LEDMatrix Toggle Switch Widget + * + * Styled boolean toggle switch (more visual than checkbox). + * + * Schema example: + * { + * "enabled": { + * "type": "boolean", + * "x-widget": "toggle-switch", + * "x-options": { + * "labelOn": "Enabled", + * "labelOff": "Disabled", + * "size": "medium", // "small", "medium", "large" + * "colorOn": "blue", // "blue", "green", "red", "purple" + * "showLabels": true + * } + * } + * } + * + * @module ToggleSwitchWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('ToggleSwitch', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + const SIZE_CLASSES = { + small: { + track: 'w-8 h-4', + thumb: 'w-3 h-3', + translate: 'translate-x-4' + }, + medium: { + track: 'w-11 h-6', + thumb: 'w-5 h-5', + translate: 'translate-x-5' + }, + large: { + track: 'w-14 h-7', + thumb: 'w-6 h-6', + translate: 'translate-x-7' + } + }; + + const COLOR_CLASSES = { + blue: 'bg-blue-600', + green: 'bg-green-600', + red: 'bg-red-600', + purple: 'bg-purple-600', + amber: 'bg-amber-500' + }; + + window.LEDMatrixWidgets.register('toggle-switch', { + name: 'Toggle Switch Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'toggle'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const labelOn = xOptions.labelOn || 'On'; + const labelOff = xOptions.labelOff || 'Off'; + const size = xOptions.size || 'medium'; + const colorOn = xOptions.colorOn || 'blue'; + const showLabels = xOptions.showLabels !== false; + const disabled = xOptions.disabled === true; + + const isChecked = value === true || value === 'true'; + const sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.medium; + const colorClass = COLOR_CLASSES[colorOn] || COLOR_CLASSES.blue; + + let html = `
`; + + // Hidden checkbox for form submission + html += ``; + + html += ` + + `; + + // Label + if (showLabels) { + html += ` + + ${escapeHtml(isChecked ? labelOn : labelOff)} + + `; + } + + html += '
'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const hidden = document.getElementById(`${safeId}_hidden`); + return hidden ? hidden.value === 'true' : false; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const isChecked = value === true || value === 'true'; + + const hidden = document.getElementById(`${safeId}_hidden`); + const button = document.getElementById(`${safeId}_button`); + const thumb = document.getElementById(`${safeId}_thumb`); + const label = document.getElementById(`${safeId}_label`); + const widget = document.getElementById(`${safeId}_widget`); + + if (hidden) hidden.value = isChecked; + + if (button) { + button.setAttribute('aria-checked', isChecked); + // Get color class from current classes or default + const colorClasses = Object.values(COLOR_CLASSES); + let currentColor = 'bg-blue-600'; + for (const cls of colorClasses) { + if (button.classList.contains(cls)) { + currentColor = cls; + break; + } + } + if (isChecked) { + button.classList.remove('bg-gray-200'); + button.classList.add(currentColor); + } else { + button.classList.remove(...colorClasses); + button.classList.add('bg-gray-200'); + } + } + + if (thumb) { + // Determine size from current translate class + const sizeKeys = Object.keys(SIZE_CLASSES); + for (const sizeKey of sizeKeys) { + const sizeClass = SIZE_CLASSES[sizeKey]; + if (thumb.classList.contains(sizeClass.thumb)) { + if (isChecked) { + thumb.classList.remove('translate-x-0'); + thumb.classList.add(sizeClass.translate); + } else { + thumb.classList.remove(sizeClass.translate); + thumb.classList.add('translate-x-0'); + } + break; + } + } + } + + if (label) { + // Get labels from widget data attributes or default + const labelOn = widget?.dataset.labelOn || 'On'; + const labelOff = widget?.dataset.labelOff || 'Off'; + label.textContent = isChecked ? labelOn : labelOff; + if (isChecked) { + label.classList.remove('text-gray-500'); + label.classList.add('text-gray-900'); + } else { + label.classList.remove('text-gray-900'); + label.classList.add('text-gray-500'); + } + } + }, + + handlers: { + onToggle: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('toggle-switch'); + const currentValue = widget.getValue(fieldId); + const newValue = !currentValue; + widget.setValue(fieldId, newValue); + triggerChange(fieldId, newValue); + } + } + }); + + console.log('[ToggleSwitchWidget] Toggle switch widget registered'); +})(); diff --git a/web_interface/static/v3/js/widgets/url-input.js b/web_interface/static/v3/js/widgets/url-input.js new file mode 100644 index 000000000..aac38de74 --- /dev/null +++ b/web_interface/static/v3/js/widgets/url-input.js @@ -0,0 +1,218 @@ +/** + * LEDMatrix URL Input Widget + * + * URL input with validation and protocol handling. + * + * Schema example: + * { + * "website": { + * "type": "string", + * "format": "uri", + * "x-widget": "url-input", + * "x-options": { + * "placeholder": "https://example.com", + * "showIcon": true, + * "allowedProtocols": ["http", "https"], + * "showPreview": true + * } + * } + * } + * + * @module UrlInputWidget + */ + +(function() { + 'use strict'; + + const base = window.BaseWidget ? new window.BaseWidget('UrlInput', '1.0.0') : null; + + function escapeHtml(text) { + if (base) return base.escapeHtml(text); + const div = document.createElement('div'); + div.textContent = String(text); + return div.innerHTML; + } + + function sanitizeId(id) { + if (base) return base.sanitizeId(id); + return String(id).replace(/[^a-zA-Z0-9_-]/g, '_'); + } + + function triggerChange(fieldId, value) { + if (base) { + base.triggerChange(fieldId, value); + } else { + const event = new CustomEvent('widget-change', { + detail: { fieldId, value }, + bubbles: true, + cancelable: true + }); + document.dispatchEvent(event); + } + } + + function isValidUrl(string, allowedProtocols) { + try { + const url = new URL(string); + if (allowedProtocols && allowedProtocols.length > 0) { + const protocol = url.protocol.replace(':', ''); + return allowedProtocols.includes(protocol); + } + return true; + } catch (_) { + return false; + } + } + + window.LEDMatrixWidgets.register('url-input', { + name: 'URL Input Widget', + version: '1.0.0', + + render: function(container, config, value, options) { + const fieldId = sanitizeId(options.fieldId || container.id || 'url_input'); + const xOptions = config['x-options'] || config['x_options'] || {}; + const placeholder = xOptions.placeholder || 'https://example.com'; + const showIcon = xOptions.showIcon !== false; + const showPreview = xOptions.showPreview === true; + const allowedProtocols = xOptions.allowedProtocols || ['http', 'https']; + const disabled = xOptions.disabled === true; + const required = xOptions.required === true; + + const currentValue = value || ''; + + let html = `
`; + + html += '
'; + + if (showIcon) { + html += ` +
+ +
+ `; + } + + html += ` + + `; + + html += '
'; + + // Preview link (if enabled and value exists) + if (showPreview) { + html += ` + + `; + } + + // Error message area + html += ``; + + html += '
'; + + container.innerHTML = html; + }, + + getValue: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + return input ? input.value : ''; + }, + + setValue: function(fieldId, value) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + if (input) { + input.value = value || ''; + this.handlers.onInput(fieldId); + } + }, + + validate: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const errorEl = document.getElementById(`${safeId}_error`); + const widget = document.getElementById(`${safeId}_widget`); + + if (!input) return { valid: true, errors: [] }; + + const value = input.value; + const protocols = widget?.dataset.protocols?.split(',') || ['http', 'https']; + + let isValid = true; + let errorMsg = ''; + + if (value) { + if (!isValidUrl(value, protocols)) { + isValid = false; + errorMsg = `Please enter a valid URL (${protocols.join(', ')} only)`; + } + } + + if (errorEl) { + if (!isValid) { + errorEl.textContent = errorMsg; + errorEl.classList.remove('hidden'); + input.classList.add('border-red-500'); + } else { + errorEl.classList.add('hidden'); + input.classList.remove('border-red-500'); + } + } + + return { valid: isValid, errors: isValid ? [] : [errorMsg] }; + }, + + handlers: { + onChange: function(fieldId) { + const widget = window.LEDMatrixWidgets.get('url-input'); + widget.validate(fieldId); + triggerChange(fieldId, widget.getValue(fieldId)); + }, + + onInput: function(fieldId) { + const safeId = sanitizeId(fieldId); + const input = document.getElementById(`${safeId}_input`); + const previewEl = document.getElementById(`${safeId}_preview`); + const previewLink = document.getElementById(`${safeId}_preview_link`); + const widgetEl = document.getElementById(`${safeId}_widget`); + + const value = input?.value || ''; + const protocols = widgetEl?.dataset.protocols?.split(',') || ['http', 'https']; + + if (previewEl && previewLink) { + if (value && isValidUrl(value, protocols)) { + previewLink.href = value; + previewEl.classList.remove('hidden'); + } else { + previewEl.classList.add('hidden'); + } + } + + // Validate on input + const widget = window.LEDMatrixWidgets.get('url-input'); + widget.validate(fieldId); + } + } + }); + + console.log('[UrlInputWidget] URL input widget registered'); +})(); diff --git a/web_interface/templates/v3/base.html b/web_interface/templates/v3/base.html index 94a089181..8f70ab852 100644 --- a/web_interface/templates/v3/base.html +++ b/web_interface/templates/v3/base.html @@ -4918,6 +4918,22 @@

+ + + + + + + + + + + + + + + + diff --git a/web_interface/templates/v3/partials/plugin_config.html b/web_interface/templates/v3/partials/plugin_config.html index e9c2b4241..52e2f153d 100644 --- a/web_interface/templates/v3/partials/plugin_config.html +++ b/web_interface/templates/v3/partials/plugin_config.html @@ -11,9 +11,68 @@ {% set description = prop.description if prop.description else '' %} {% set field_type = prop.type if prop.type is string else (prop.type[0] if prop.type is iterable else 'string') %} - {# Handle nested objects recursively #} - {% if field_type == 'object' and prop.properties %} - {{ render_nested_section(key, prop, value, prefix, plugin_id) }} + {# Handle nested objects - check for widget first #} + {% if field_type == 'object' %} + {% set obj_widget = prop.get('x-widget') or prop.get('x_widget') %} + {% if obj_widget == 'schedule-picker' %} + {# Schedule picker widget - renders enable/mode/times UI #} + {% set obj_value = value if value is not none else {} %} +
+ + {% if description %}

{{ description }}

{% endif %} +
+ +
+ + {% elif obj_widget == 'time-range' %} + {# Time range widget - renders start/end time inputs #} + {% set obj_value = value if value is not none else {} %} +
+ + {% if description %}

{{ description }}

{% endif %} +
+ +
+ + {% elif prop.properties %} + {{ render_nested_section(key, prop, value, prefix, plugin_id) }} + {% endif %} {% else %}
{% endif %} diff --git a/web_interface/templates/v3/partials/schedule.html b/web_interface/templates/v3/partials/schedule.html index f5079147b..6d3309f96 100644 --- a/web_interface/templates/v3/partials/schedule.html +++ b/web_interface/templates/v3/partials/schedule.html @@ -4,135 +4,16 @@

Schedule Settings

Configure when the LED matrix display should be active. You can set global hours or customize times for each day of the week.

-
- -
- -

When enabled, the display will only operate during specified hours.

-
- - -
-

Schedule Mode

-
- -

Use the same start and end time for all days of the week

- - -

Set different times for each day of the week

-
-
- - -
-

Global Times

-
-
- - -

When to start displaying content (HH:MM)

-
- -
- - -

When to stop displaying content (HH:MM)

-
-
-
- - -
-

Day-Specific Times

- -
-
- - - - - - - - - - - {% set days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] %} - {% for day in days %} - - - - - - - {% endfor %} - -
DayEnabledStartEnd
- {{ day }} - - - - - - -
-
-
-
+ +
@@ -146,55 +27,112 @@

Day-Specific Times

- From 4a73331e95a4abc815b7e261b8110f36eed86e34 Mon Sep 17 00:00:00 2001 From: Chuck Date: Tue, 27 Jan 2026 12:54:23 -0500 Subject: [PATCH 02/28] fix(widgets): improve security, validation, and form binding across widgets - Fix XSS vulnerability: escapeHtml now escapes quotes in all widget fallbacks - color-picker: validate presets with isValidHex(), use data attributes - date-picker: add placeholder attribute support - day-selector: use options.name for hidden input form binding - password-input: implement requireUppercase/Number/Special validation - radio-group: fix value injection using this.value instead of interpolation - schedule-picker: preserve day values when disabling (don't clear times) - select-dropdown: remove undocumented searchable/icons options - text-input: apply patternMessage via setCustomValidity - time-range: use options.name for hidden inputs - toggle-switch: preserve configured color from data attribute - url-input: combine browser and custom protocol validation - plugin_config: add widget support for boolean/number types, pass name to day-selector - schedule: handle null config gracefully, preserve explicit mode setting Co-Authored-By: Claude Opus 4.5 --- .../static/v3/js/widgets/color-picker.js | 35 +++++---- .../static/v3/js/widgets/date-picker.js | 3 +- .../static/v3/js/widgets/day-selector.js | 5 +- .../static/v3/js/widgets/email-input.js | 2 +- .../static/v3/js/widgets/number-input.js | 2 +- .../static/v3/js/widgets/password-input.js | 39 ++++++++-- .../static/v3/js/widgets/radio-group.js | 4 +- .../static/v3/js/widgets/schedule-picker.js | 12 ++- .../static/v3/js/widgets/select-dropdown.js | 10 +-- web_interface/static/v3/js/widgets/slider.js | 2 +- .../static/v3/js/widgets/text-input.js | 21 +++++- .../static/v3/js/widgets/textarea.js | 2 +- .../static/v3/js/widgets/time-range.js | 7 +- .../static/v3/js/widgets/toggle-switch.js | 23 ++++-- .../static/v3/js/widgets/url-input.js | 9 ++- .../templates/v3/partials/plugin_config.html | 74 +++++++++++++++++-- .../templates/v3/partials/schedule.html | 14 +++- 17 files changed, 194 insertions(+), 70 deletions(-) diff --git a/web_interface/static/v3/js/widgets/color-picker.js b/web_interface/static/v3/js/widgets/color-picker.js index ac9a22ffc..a59c6b02f 100644 --- a/web_interface/static/v3/js/widgets/color-picker.js +++ b/web_interface/static/v3/js/widgets/color-picker.js @@ -29,7 +29,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { @@ -131,25 +131,28 @@ // Hidden input for form submission html += ``; - // Preset colors + // Preset colors - only render valid hex colors if (presets && presets.length > 0) { - html += ` -
- Quick colors: - `; - for (const preset of presets) { - const normalized = normalizeHex(preset); + const validPresets = presets.map(p => normalizeHex(p)).filter(p => isValidHex(p)); + if (validPresets.length > 0) { html += ` - +
+ Quick colors: `; + for (const normalized of validPresets) { + html += ` + + `; + } + html += '
'; } - html += '
'; } // Error message area diff --git a/web_interface/static/v3/js/widgets/date-picker.js b/web_interface/static/v3/js/widgets/date-picker.js index 909d5ca59..48237748a 100644 --- a/web_interface/static/v3/js/widgets/date-picker.js +++ b/web_interface/static/v3/js/widgets/date-picker.js @@ -30,7 +30,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { @@ -79,6 +79,7 @@ value="${escapeHtml(currentValue)}" ${min ? `min="${escapeHtml(min)}"` : ''} ${max ? `max="${escapeHtml(max)}"` : ''} + ${placeholder ? `placeholder="${escapeHtml(placeholder)}"` : ''} ${disabled ? 'disabled' : ''} ${required ? 'required' : ''} onchange="window.LEDMatrixWidgets.getHandlers('date-picker').onChange('${fieldId}')" diff --git a/web_interface/static/v3/js/widgets/day-selector.js b/web_interface/static/v3/js/widgets/day-selector.js index 4310491bf..f47d3acae 100644 --- a/web_interface/static/v3/js/widgets/day-selector.js +++ b/web_interface/static/v3/js/widgets/day-selector.js @@ -54,7 +54,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { @@ -95,12 +95,13 @@ // Normalize value to array const selectedDays = Array.isArray(value) ? value : []; + const inputName = options.name || fieldId; // Build HTML let html = `
`; // Hidden input to store the value as JSON array - html += ``; + html += ``; // Select All toggle if (showSelectAll) { diff --git a/web_interface/static/v3/js/widgets/email-input.js b/web_interface/static/v3/js/widgets/email-input.js index 3d531ff84..b32443ba1 100644 --- a/web_interface/static/v3/js/widgets/email-input.js +++ b/web_interface/static/v3/js/widgets/email-input.js @@ -28,7 +28,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { diff --git a/web_interface/static/v3/js/widgets/number-input.js b/web_interface/static/v3/js/widgets/number-input.js index 847efe076..ee09c5fa7 100644 --- a/web_interface/static/v3/js/widgets/number-input.js +++ b/web_interface/static/v3/js/widgets/number-input.js @@ -32,7 +32,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { diff --git a/web_interface/static/v3/js/widgets/password-input.js b/web_interface/static/v3/js/widgets/password-input.js index 3430f1d9e..f3bcd9ccb 100644 --- a/web_interface/static/v3/js/widgets/password-input.js +++ b/web_interface/static/v3/js/widgets/password-input.js @@ -32,7 +32,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { @@ -98,12 +98,15 @@ const showToggle = xOptions.showToggle !== false; const showStrength = xOptions.showStrength === true; const minLength = xOptions.minLength || 0; + const requireUppercase = xOptions.requireUppercase === true; + const requireNumber = xOptions.requireNumber === true; + const requireSpecial = xOptions.requireSpecial === true; const disabled = xOptions.disabled === true; const required = xOptions.required === true; const currentValue = value || ''; - let html = `
`; + let html = `
`; html += '
'; @@ -186,14 +189,38 @@ const safeId = sanitizeId(fieldId); const input = document.getElementById(`${safeId}_input`); const errorEl = document.getElementById(`${safeId}_error`); + const widget = document.getElementById(`${safeId}_widget`); if (!input) return { valid: true, errors: [] }; - const isValid = input.checkValidity(); + const errors = []; + let isValid = input.checkValidity(); + + if (!isValid) { + errors.push(input.validationMessage); + } else if (input.value && widget) { + // Check custom validation requirements + const requireUppercase = widget.dataset.requireUppercase === 'true'; + const requireNumber = widget.dataset.requireNumber === 'true'; + const requireSpecial = widget.dataset.requireSpecial === 'true'; + + if (requireUppercase && !/[A-Z]/.test(input.value)) { + isValid = false; + errors.push('Password must contain at least one uppercase letter'); + } + if (requireNumber && !/[0-9]/.test(input.value)) { + isValid = false; + errors.push('Password must contain at least one number'); + } + if (requireSpecial && !/[^a-zA-Z0-9]/.test(input.value)) { + isValid = false; + errors.push('Password must contain at least one special character'); + } + } if (errorEl) { - if (!isValid) { - errorEl.textContent = input.validationMessage; + if (!isValid && errors.length > 0) { + errorEl.textContent = errors[0]; errorEl.classList.remove('hidden'); input.classList.add('border-red-500'); } else { @@ -202,7 +229,7 @@ } } - return { valid: isValid, errors: isValid ? [] : [input.validationMessage] }; + return { valid: isValid, errors }; }, handlers: { diff --git a/web_interface/static/v3/js/widgets/radio-group.js b/web_interface/static/v3/js/widgets/radio-group.js index d42e13e5b..05cee5aa9 100644 --- a/web_interface/static/v3/js/widgets/radio-group.js +++ b/web_interface/static/v3/js/widgets/radio-group.js @@ -37,7 +37,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { @@ -92,7 +92,7 @@ value="${escapeHtml(String(optValue))}" ${isChecked ? 'checked' : ''} ${disabled ? 'disabled' : ''} - onchange="window.LEDMatrixWidgets.getHandlers('radio-group').onChange('${fieldId}', '${escapeHtml(String(optValue))}')" + onchange="window.LEDMatrixWidgets.getHandlers('radio-group').onChange('${fieldId}', this.value)" class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}">
diff --git a/web_interface/static/v3/js/widgets/schedule-picker.js b/web_interface/static/v3/js/widgets/schedule-picker.js index 6c4f1f3d5..b19e20887 100644 --- a/web_interface/static/v3/js/widgets/schedule-picker.js +++ b/web_interface/static/v3/js/widgets/schedule-picker.js @@ -57,7 +57,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { @@ -501,9 +501,8 @@ if (dayStart) { dayStart.disabled = !enabled; dayStart.classList.toggle('bg-gray-100', !enabled); - if (!enabled) { - dayStart.value = ''; - } else if (!dayStart.value) { + // Set default value only when enabling and input is empty + if (enabled && !dayStart.value) { dayStart.value = '07:00'; } } @@ -511,9 +510,8 @@ if (dayEnd) { dayEnd.disabled = !enabled; dayEnd.classList.toggle('bg-gray-100', !enabled); - if (!enabled) { - dayEnd.value = ''; - } else if (!dayEnd.value) { + // Set default value only when enabling and input is empty + if (enabled && !dayEnd.value) { dayEnd.value = '23:00'; } } diff --git a/web_interface/static/v3/js/widgets/select-dropdown.js b/web_interface/static/v3/js/widgets/select-dropdown.js index 5513ecc3f..a346b9ae7 100644 --- a/web_interface/static/v3/js/widgets/select-dropdown.js +++ b/web_interface/static/v3/js/widgets/select-dropdown.js @@ -1,7 +1,7 @@ /** * LEDMatrix Select Dropdown Widget * - * Enhanced dropdown select with search, groups, and custom rendering. + * Enhanced dropdown select with custom labels. * * Schema example: * { @@ -11,16 +11,10 @@ * "enum": ["light", "dark", "auto"], * "x-options": { * "placeholder": "Select a theme...", - * "searchable": false, * "labels": { * "light": "Light Mode", * "dark": "Dark Mode", * "auto": "System Default" - * }, - * "icons": { - * "light": "fas fa-sun", - * "dark": "fas fa-moon", - * "auto": "fas fa-desktop" * } * } * } @@ -38,7 +32,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { diff --git a/web_interface/static/v3/js/widgets/slider.js b/web_interface/static/v3/js/widgets/slider.js index bfd95e1d3..c062f5bcf 100644 --- a/web_interface/static/v3/js/widgets/slider.js +++ b/web_interface/static/v3/js/widgets/slider.js @@ -32,7 +32,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { diff --git a/web_interface/static/v3/js/widgets/text-input.js b/web_interface/static/v3/js/widgets/text-input.js index 9f2a77b1b..10e9e8e64 100644 --- a/web_interface/static/v3/js/widgets/text-input.js +++ b/web_interface/static/v3/js/widgets/text-input.js @@ -33,7 +33,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { @@ -73,7 +73,7 @@ const currentValue = value !== null && value !== undefined ? String(value) : ''; - let html = `
`; + let html = `
`; // Container for prefix/input/suffix layout const hasAddons = prefix || suffix || clearable; @@ -155,14 +155,27 @@ const safeId = sanitizeId(fieldId); const input = document.getElementById(`${safeId}_input`); const errorEl = document.getElementById(`${safeId}_error`); + const widget = document.getElementById(`${safeId}_widget`); if (!input) return { valid: true, errors: [] }; const isValid = input.checkValidity(); + let errorMessage = input.validationMessage; + + // Use custom pattern message if pattern mismatch + if (!isValid && input.validity.patternMismatch && widget) { + const patternMessage = widget.dataset.patternMessage; + if (patternMessage) { + errorMessage = patternMessage; + input.setCustomValidity(patternMessage); + } + } else { + input.setCustomValidity(''); + } if (errorEl) { if (!isValid) { - errorEl.textContent = input.validationMessage; + errorEl.textContent = errorMessage; errorEl.classList.remove('hidden'); input.classList.add('border-red-500'); } else { @@ -171,7 +184,7 @@ } } - return { valid: isValid, errors: isValid ? [] : [input.validationMessage] }; + return { valid: isValid, errors: isValid ? [] : [errorMessage] }; }, handlers: { diff --git a/web_interface/static/v3/js/widgets/textarea.js b/web_interface/static/v3/js/widgets/textarea.js index 3985f9dba..bde5aef48 100644 --- a/web_interface/static/v3/js/widgets/textarea.js +++ b/web_interface/static/v3/js/widgets/textarea.js @@ -30,7 +30,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { diff --git a/web_interface/static/v3/js/widgets/time-range.js b/web_interface/static/v3/js/widgets/time-range.js index cea26b1b1..fddc3fa30 100644 --- a/web_interface/static/v3/js/widgets/time-range.js +++ b/web_interface/static/v3/js/widgets/time-range.js @@ -36,7 +36,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { @@ -149,12 +149,13 @@ const disabledAttr = disabled ? 'disabled' : ''; const disabledClass = disabled ? 'bg-gray-100 cursor-not-allowed' : ''; + const inputName = options.name || fieldId; let html = `
`; // Hidden inputs for form submission - html += ``; - html += ``; + html += ``; + html += ``; html += `
`; diff --git a/web_interface/static/v3/js/widgets/toggle-switch.js b/web_interface/static/v3/js/widgets/toggle-switch.js index 5b87cc05f..323574057 100644 --- a/web_interface/static/v3/js/widgets/toggle-switch.js +++ b/web_interface/static/v3/js/widgets/toggle-switch.js @@ -30,7 +30,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { @@ -148,15 +148,26 @@ if (button) { button.setAttribute('aria-checked', isChecked); - // Get color class from current classes or default + // Get color from widget data attribute (preferred) or scan button classes const colorClasses = Object.values(COLOR_CLASSES); let currentColor = 'bg-blue-600'; - for (const cls of colorClasses) { - if (button.classList.contains(cls)) { - currentColor = cls; - break; + + // First try to get from widget data attribute + if (widget && widget.dataset.color) { + const configuredColor = COLOR_CLASSES[widget.dataset.color]; + if (configuredColor) { + currentColor = configuredColor; + } + } else { + // Fall back to scanning button classes + for (const cls of colorClasses) { + if (button.classList.contains(cls)) { + currentColor = cls; + break; + } } } + if (isChecked) { button.classList.remove('bg-gray-200'); button.classList.add(currentColor); diff --git a/web_interface/static/v3/js/widgets/url-input.js b/web_interface/static/v3/js/widgets/url-input.js index aac38de74..a5bff9bad 100644 --- a/web_interface/static/v3/js/widgets/url-input.js +++ b/web_interface/static/v3/js/widgets/url-input.js @@ -30,7 +30,7 @@ if (base) return base.escapeHtml(text); const div = document.createElement('div'); div.textContent = String(text); - return div.innerHTML; + return div.innerHTML.replace(/"/g, '"').replace(/'/g, '''); } function sanitizeId(id) { @@ -160,7 +160,12 @@ let isValid = true; let errorMsg = ''; - if (value) { + // First check browser validation (required, type, etc.) + if (!input.checkValidity()) { + isValid = false; + errorMsg = input.validationMessage; + } else if (value) { + // Then check custom protocol validation if (!isValidUrl(value, protocols)) { isValid = false; errorMsg = `Please enter a valid URL (${protocols.join(', ')} only)`; diff --git a/web_interface/templates/v3/partials/plugin_config.html b/web_interface/templates/v3/partials/plugin_config.html index 52e2f153d..1c5222848 100644 --- a/web_interface/templates/v3/partials/plugin_config.html +++ b/web_interface/templates/v3/partials/plugin_config.html @@ -83,16 +83,45 @@

{{ description }}

{% endif %} - {# Boolean checkbox #} + {# Boolean - check for widget first #} {% if field_type == 'boolean' %} + {% set bool_widget = prop.get('x-widget') or prop.get('x_widget') %} + {% if bool_widget == 'toggle-switch' %} + {# Render toggle-switch widget #} +
+ + {% else %} + {# Default checkbox #} + {% endif %} {# Enum dropdown #} {% elif prop.enum %} @@ -106,16 +135,47 @@ {% endfor %} - {# Number input #} + {# Number input - check for widget first #} {% elif field_type in ['number', 'integer'] %} -
+ + {% else %} + {# Default number input #} + + {% endif %} {# Array - check for file upload widget first (to avoid breaking static-image plugin), then checkbox-group, then array of objects #} {% elif field_type == 'array' %} @@ -257,7 +317,7 @@ if (!container) return; var value = {{ array_value|tojson|safe }}; var config = { 'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }} }; - widget.render(container, config, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}' }); + widget.render(container, config, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}', name: '{{ full_key }}' }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initWidget); diff --git a/web_interface/templates/v3/partials/schedule.html b/web_interface/templates/v3/partials/schedule.html index 6d3309f96..5fd579910 100644 --- a/web_interface/templates/v3/partials/schedule.html +++ b/web_interface/templates/v3/partials/schedule.html @@ -51,12 +51,22 @@

Schedule Settings

} // Get schedule config from template data (injected by Jinja2) - const scheduleConfig = {{ schedule_config | tojson | safe }}; + // Default to empty object if null/undefined + const scheduleConfig = {{ schedule_config | tojson | safe }} || {}; + + // Determine mode: prefer explicit mode, then infer from days, then default to global + let mode = 'global'; + if (scheduleConfig.mode) { + // Normalize mode value (handle both 'per_day' and 'per-day') + mode = scheduleConfig.mode.replace('-', '_'); + } else if (scheduleConfig.days) { + mode = 'per_day'; + } // Convert flat config to nested format expected by widget const widgetValue = { enabled: scheduleConfig.enabled || false, - mode: scheduleConfig.days ? 'per_day' : 'global', + mode: mode, start_time: scheduleConfig.start_time || '07:00', end_time: scheduleConfig.end_time || '23:00', days: scheduleConfig.days || {} From 464efac32962b2382cfe637c5d69b41e178d52b5 Mon Sep 17 00:00:00 2001 From: Chuck Date: Tue, 27 Jan 2026 13:27:19 -0500 Subject: [PATCH 03/28] fix(widgets): validate day-selector input, consistent minLength default, escape JSON quotes - day-selector: filter incoming selectedDays to only valid entries in DAYS array (prevents invalid persisted values from corrupting UI/state) - password-input: use default minLength of 8 when not explicitly set (fixes inconsistency between render() and onInput() strength meter baseline) - plugin_config.html: escape single quotes in JSON hidden input values (prevents broken attributes when JSON contains single quotes) Co-Authored-By: Claude Opus 4.5 --- web_interface/static/v3/js/widgets/day-selector.js | 9 ++++++--- web_interface/static/v3/js/widgets/password-input.js | 2 +- web_interface/templates/v3/partials/plugin_config.html | 6 +++--- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/web_interface/static/v3/js/widgets/day-selector.js b/web_interface/static/v3/js/widgets/day-selector.js index f47d3acae..1e338bf51 100644 --- a/web_interface/static/v3/js/widgets/day-selector.js +++ b/web_interface/static/v3/js/widgets/day-selector.js @@ -93,8 +93,9 @@ const layout = xOptions.layout || 'horizontal'; const showSelectAll = xOptions.selectAll !== false; - // Normalize value to array - const selectedDays = Array.isArray(value) ? value : []; + // Normalize value to array and filter to only valid days + const rawDays = Array.isArray(value) ? value : []; + const selectedDays = rawDays.filter(day => DAYS.includes(day)); const inputName = options.name || fieldId; // Build HTML @@ -178,7 +179,9 @@ const widget = document.getElementById(`${safeId}_widget`); if (!widget) return; - const selectedDays = Array.isArray(days) ? days : []; + // Filter to only valid days + const rawDays = Array.isArray(days) ? days : []; + const selectedDays = rawDays.filter(day => DAYS.includes(day)); // Update checkboxes DAYS.forEach(day => { diff --git a/web_interface/static/v3/js/widgets/password-input.js b/web_interface/static/v3/js/widgets/password-input.js index f3bcd9ccb..81834cdd3 100644 --- a/web_interface/static/v3/js/widgets/password-input.js +++ b/web_interface/static/v3/js/widgets/password-input.js @@ -97,7 +97,7 @@ const placeholder = xOptions.placeholder || 'Enter password'; const showToggle = xOptions.showToggle !== false; const showStrength = xOptions.showStrength === true; - const minLength = xOptions.minLength || 0; + const minLength = xOptions.minLength !== undefined ? xOptions.minLength : 8; const requireUppercase = xOptions.requireUppercase === true; const requireNumber = xOptions.requireNumber === true; const requireSpecial = xOptions.requireSpecial === true; diff --git a/web_interface/templates/v3/partials/plugin_config.html b/web_interface/templates/v3/partials/plugin_config.html index 1c5222848..c34498f0f 100644 --- a/web_interface/templates/v3/partials/plugin_config.html +++ b/web_interface/templates/v3/partials/plugin_config.html @@ -21,7 +21,7 @@ {% if description %}

{{ description }}

{% endif %}
- +
+ diff --git a/web_interface/templates/v3/partials/fonts.html b/web_interface/templates/v3/partials/fonts.html index 4f8f18e1d..2796487cd 100644 --- a/web_interface/templates/v3/partials/fonts.html +++ b/web_interface/templates/v3/partials/fonts.html @@ -231,38 +231,11 @@

Font Preview

return; } - // Ensure showNotification function is available + // showNotification is provided by the notification widget (notification.js) + // Fallback only if widget hasn't loaded yet if (typeof window.showNotification !== 'function') { window.showNotification = function(message, type = 'info') { - // Try to use the base template's notification system first - if (typeof window.app !== 'undefined' && window.app.showNotification) { - window.app.showNotification(message, type); - return; - } - - // Create notification element like in base template - const notifications = document.getElementById('notifications'); - if (notifications) { - const notification = document.createElement('div'); - - const colors = { - success: 'bg-green-500', - error: 'bg-red-500', - warning: 'bg-yellow-500', - info: 'bg-blue-500' - }; - - notification.className = `px-4 py-3 rounded-md text-white text-sm ${colors[type] || colors.info}`; - notification.textContent = message; - - notifications.appendChild(notification); - - setTimeout(() => { - notification.remove(); - }, 5000); - } else { - console.log(`${type}: ${message}`); - } + console.log(`[${type.toUpperCase()}]`, message); }; } diff --git a/web_interface/templates/v3/partials/raw_json.html b/web_interface/templates/v3/partials/raw_json.html index b726fd465..c2ec4b10b 100644 --- a/web_interface/templates/v3/partials/raw_json.html +++ b/web_interface/templates/v3/partials/raw_json.html @@ -312,28 +312,7 @@

Security Notice

} } -// Global notification function -function showNotification(message, type = 'info') { - const notifications = document.getElementById('notifications'); - if (!notifications) return; - - const notification = document.createElement('div'); - - const colors = { - success: 'bg-green-500', - error: 'bg-red-500', - warning: 'bg-yellow-500', - info: 'bg-blue-500' - }; - - notification.className = `px-4 py-3 rounded-md text-white text-sm shadow-lg ${colors[type] || colors.info}`; - notification.innerHTML = `${message}`; - - notifications.appendChild(notification); - - setTimeout(() => { - notification.remove(); - }, 5000); -} +// showNotification is provided by the notification widget (notification.js) +// No local definition needed - uses window.showNotification from the widget From f76492f42146f9a0b7adf7db532e4a03fdc8e7d2 Mon Sep 17 00:00:00 2001 From: Chuck Date: Tue, 27 Jan 2026 14:25:56 -0500 Subject: [PATCH 05/28] fix(widgets): escape options.name in all widgets, validate day-selector format Security fixes: - Escape options.name attribute in all 13 widgets to prevent injection - Affected: color-picker, date-picker, email-input, number-input, password-input, radio-group, select-dropdown, slider, text-input, textarea, toggle-switch, url-input Defensive coding: - day-selector: validate format option exists in DAY_LABELS before use - Falls back to 'long' format for unsupported/invalid format values Co-Authored-By: Claude Opus 4.5 --- web_interface/static/v3/js/widgets/color-picker.js | 2 +- web_interface/static/v3/js/widgets/date-picker.js | 2 +- web_interface/static/v3/js/widgets/day-selector.js | 4 +++- web_interface/static/v3/js/widgets/email-input.js | 2 +- web_interface/static/v3/js/widgets/number-input.js | 2 +- web_interface/static/v3/js/widgets/password-input.js | 2 +- web_interface/static/v3/js/widgets/radio-group.js | 2 +- web_interface/static/v3/js/widgets/select-dropdown.js | 2 +- web_interface/static/v3/js/widgets/slider.js | 2 +- web_interface/static/v3/js/widgets/text-input.js | 2 +- web_interface/static/v3/js/widgets/textarea.js | 2 +- web_interface/static/v3/js/widgets/toggle-switch.js | 2 +- web_interface/static/v3/js/widgets/url-input.js | 2 +- 13 files changed, 15 insertions(+), 13 deletions(-) diff --git a/web_interface/static/v3/js/widgets/color-picker.js b/web_interface/static/v3/js/widgets/color-picker.js index a59c6b02f..6bd30f310 100644 --- a/web_interface/static/v3/js/widgets/color-picker.js +++ b/web_interface/static/v3/js/widgets/color-picker.js @@ -129,7 +129,7 @@ html += '
'; // Hidden input for form submission - html += ``; + html += ``; // Preset colors - only render valid hex colors if (presets && presets.length > 0) { diff --git a/web_interface/static/v3/js/widgets/date-picker.js b/web_interface/static/v3/js/widgets/date-picker.js index 48237748a..cc10e56aa 100644 --- a/web_interface/static/v3/js/widgets/date-picker.js +++ b/web_interface/static/v3/js/widgets/date-picker.js @@ -75,7 +75,7 @@
`; // Hidden checkbox for form submission - html += ``; + html += ``; html += ` - -
From eabbd56f55359da80af67e6bb4c0662ad9d1bbbd Mon Sep 17 00:00:00 2001 From: Chuck Date: Tue, 27 Jan 2026 14:40:59 -0500 Subject: [PATCH 07/28] fix(widgets): improve security and validation across widget inputs - color-picker.js: Add sanitizeHex() to validate hex values before HTML interpolation, ensuring only safe #rrggbb strings are used - day-selector.js: Escape inputName in hidden input name attribute - number-input.js: Sanitize and escape currentValue in input element - password-input.js: Validate minLength as non-negative integer, clamp invalid values to default of 8 - slider.js: Add null check for input element before accessing value - text-input.js: Clear custom validity before checkValidity() to avoid stale errors, re-check after setting pattern message - url-input.js: Normalize allowedProtocols to array, filter to valid protocol strings, and escape before HTML interpolation Co-Authored-By: Claude Opus 4.5 --- .../static/v3/js/widgets/color-picker.js | 46 +++++++++++++------ .../static/v3/js/widgets/day-selector.js | 2 +- .../static/v3/js/widgets/number-input.js | 6 ++- .../static/v3/js/widgets/password-input.js | 8 ++-- web_interface/static/v3/js/widgets/slider.js | 2 +- .../static/v3/js/widgets/text-input.js | 9 ++-- .../static/v3/js/widgets/url-input.js | 18 +++++++- 7 files changed, 64 insertions(+), 27 deletions(-) diff --git a/web_interface/static/v3/js/widgets/color-picker.js b/web_interface/static/v3/js/widgets/color-picker.js index 6bd30f310..c5adabc69 100644 --- a/web_interface/static/v3/js/widgets/color-picker.js +++ b/web_interface/static/v3/js/widgets/color-picker.js @@ -56,7 +56,7 @@ function normalizeHex(hex) { if (!hex) return '#000000'; - hex = hex.trim(); + hex = String(hex).trim(); if (!hex.startsWith('#')) hex = '#' + hex; // Expand 3-digit hex if (hex.length === 4) { @@ -65,6 +65,19 @@ return hex.toLowerCase(); } + /** + * Sanitize and validate a hex color, returning a safe 7-char #rrggbb string. + * Falls back to #000000 for any invalid input. + */ + function sanitizeHex(value) { + const normalized = normalizeHex(value); + // Validate it's exactly #rrggbb format with valid hex chars + if (/^#[0-9a-f]{6}$/.test(normalized)) { + return normalized; + } + return '#000000'; + } + const DEFAULT_PRESETS = [ '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff', '#808080', '#ffa500' @@ -82,7 +95,7 @@ const presets = xOptions.presets || DEFAULT_PRESETS; const disabled = xOptions.disabled === true; - const currentValue = normalizeHex(value || '#000000'); + const currentValue = sanitizeHex(value); let html = `
`; @@ -171,24 +184,24 @@ setValue: function(fieldId, value) { const safeId = sanitizeId(fieldId); - const normalized = normalizeHex(value); + const sanitized = sanitizeHex(value); const colorInput = document.getElementById(`${safeId}_color`); const hexInput = document.getElementById(`${safeId}_hex`); const preview = document.getElementById(`${safeId}_preview`); const hidden = document.getElementById(`${safeId}_input`); - if (colorInput) colorInput.value = normalized; - if (hexInput) hexInput.value = normalized.substring(1); - if (preview) preview.style.backgroundColor = normalized; - if (hidden) hidden.value = normalized; + if (colorInput) colorInput.value = sanitized; + if (hexInput) hexInput.value = sanitized.substring(1); + if (preview) preview.style.backgroundColor = sanitized; + if (hidden) hidden.value = sanitized; }, handlers: { onColorChange: function(fieldId) { const safeId = sanitizeId(fieldId); const colorInput = document.getElementById(`${safeId}_color`); - const value = colorInput?.value || '#000000'; + const value = sanitizeHex(colorInput?.value); const widget = window.LEDMatrixWidgets.get('color-picker'); widget.setValue(fieldId, value); @@ -200,10 +213,10 @@ const hexInput = document.getElementById(`${safeId}_hex`); const errorEl = document.getElementById(`${safeId}_error`); - let value = '#' + (hexInput?.value || '000000'); - value = normalizeHex(value); + const rawValue = '#' + (hexInput?.value || '000000'); + const normalized = normalizeHex(rawValue); - if (!isValidHex(value)) { + if (!isValidHex(normalized)) { if (errorEl) { errorEl.textContent = 'Invalid hex color'; errorEl.classList.remove('hidden'); @@ -215,9 +228,11 @@ errorEl.classList.add('hidden'); } + // Use sanitized value for setting + const sanitized = sanitizeHex(normalized); const widget = window.LEDMatrixWidgets.get('color-picker'); - widget.setValue(fieldId, value); - triggerChange(fieldId, value); + widget.setValue(fieldId, sanitized); + triggerChange(fieldId, sanitized); }, onHexInput: function(fieldId) { @@ -231,9 +246,10 @@ }, onPresetClick: function(fieldId, color) { + const sanitized = sanitizeHex(color); const widget = window.LEDMatrixWidgets.get('color-picker'); - widget.setValue(fieldId, color); - triggerChange(fieldId, color); + widget.setValue(fieldId, sanitized); + triggerChange(fieldId, sanitized); } } }); diff --git a/web_interface/static/v3/js/widgets/day-selector.js b/web_interface/static/v3/js/widgets/day-selector.js index 41b024540..17f564b8f 100644 --- a/web_interface/static/v3/js/widgets/day-selector.js +++ b/web_interface/static/v3/js/widgets/day-selector.js @@ -104,7 +104,7 @@ let html = `
`; // Hidden input to store the value as JSON array - html += ``; + html += ``; // Select All toggle if (showSelectAll) { diff --git a/web_interface/static/v3/js/widgets/number-input.js b/web_interface/static/v3/js/widgets/number-input.js index d90165806..eecbb478c 100644 --- a/web_interface/static/v3/js/widgets/number-input.js +++ b/web_interface/static/v3/js/widgets/number-input.js @@ -69,7 +69,9 @@ const disabled = xOptions.disabled === true; const placeholder = xOptions.placeholder || ''; - const currentValue = value !== null && value !== undefined ? value : ''; + // Sanitize currentValue - ensure it's a safe numeric string or empty + const rawValue = value !== null && value !== undefined ? value : ''; + const currentValue = rawValue === '' ? '' : (isNaN(Number(rawValue)) ? '' : String(Number(rawValue))); let html = `
`; @@ -95,7 +97,7 @@ = 0) ? rawMinLength : 8; const requireUppercase = xOptions.requireUppercase === true; const requireNumber = xOptions.requireNumber === true; const requireSpecial = xOptions.requireSpecial === true; @@ -106,7 +108,7 @@ const currentValue = value || ''; - let html = `
`; + let html = `
`; html += '
'; @@ -116,7 +118,7 @@ name="${escapeHtml(options.name || fieldId)}" value="${escapeHtml(currentValue)}" placeholder="${escapeHtml(placeholder)}" - ${minLength ? `minlength="${minLength}"` : ''} + ${sanitizedMinLength > 0 ? `minlength="${sanitizedMinLength}"` : ''} ${disabled ? 'disabled' : ''} ${required ? 'required' : ''} onchange="window.LEDMatrixWidgets.getHandlers('password-input').onChange('${fieldId}')" diff --git a/web_interface/static/v3/js/widgets/slider.js b/web_interface/static/v3/js/widgets/slider.js index 06ff82781..4520f4019 100644 --- a/web_interface/static/v3/js/widgets/slider.js +++ b/web_interface/static/v3/js/widgets/slider.js @@ -141,7 +141,7 @@ if (input) { input.value = value !== null && value !== undefined ? value : input.min; } - if (valueEl && widget) { + if (valueEl && widget && input) { const prefix = widget.dataset.prefix || ''; const suffix = widget.dataset.suffix || ''; valueEl.textContent = `${prefix}${input.value}${suffix}`; diff --git a/web_interface/static/v3/js/widgets/text-input.js b/web_interface/static/v3/js/widgets/text-input.js index cf5911bd4..faae49811 100644 --- a/web_interface/static/v3/js/widgets/text-input.js +++ b/web_interface/static/v3/js/widgets/text-input.js @@ -159,7 +159,10 @@ if (!input) return { valid: true, errors: [] }; - const isValid = input.checkValidity(); + // Clear any prior custom validity to avoid stale errors + input.setCustomValidity(''); + + let isValid = input.checkValidity(); let errorMessage = input.validationMessage; // Use custom pattern message if pattern mismatch @@ -168,9 +171,9 @@ if (patternMessage) { errorMessage = patternMessage; input.setCustomValidity(patternMessage); + // Re-check validity with custom message set + isValid = input.checkValidity(); } - } else { - input.setCustomValidity(''); } if (errorEl) { diff --git a/web_interface/static/v3/js/widgets/url-input.js b/web_interface/static/v3/js/widgets/url-input.js index 6c64c4e62..753809a78 100644 --- a/web_interface/static/v3/js/widgets/url-input.js +++ b/web_interface/static/v3/js/widgets/url-input.js @@ -74,13 +74,27 @@ const placeholder = xOptions.placeholder || 'https://example.com'; const showIcon = xOptions.showIcon !== false; const showPreview = xOptions.showPreview === true; - const allowedProtocols = xOptions.allowedProtocols || ['http', 'https']; + // Normalize allowedProtocols to an array + let allowedProtocols = xOptions.allowedProtocols; + if (typeof allowedProtocols === 'string') { + allowedProtocols = allowedProtocols.split(',').map(p => p.trim()).filter(p => p); + } else if (!Array.isArray(allowedProtocols)) { + allowedProtocols = ['http', 'https']; + } + // Filter to only valid protocol strings (alphanumeric only) + allowedProtocols = allowedProtocols.map(p => String(p).replace(/[^a-zA-Z0-9]/g, '')).filter(p => p); + if (allowedProtocols.length === 0) { + allowedProtocols = ['http', 'https']; + } + const disabled = xOptions.disabled === true; const required = xOptions.required === true; const currentValue = value || ''; - let html = `
`; + // Escape the protocols for safe HTML attribute interpolation + const escapedProtocols = escapeHtml(allowedProtocols.join(',')); + let html = `
`; html += '
'; From 45db8f9cb83afe0f0bbcdeb3b9ada9ec6aa2936f Mon Sep 17 00:00:00 2001 From: Chuck Date: Tue, 27 Jan 2026 14:43:51 -0500 Subject: [PATCH 08/28] fix(widgets): add defensive fallback for DAY_LABELS lookup in day-selector Extract labelMap with fallback before loop to ensure safe access even if format validation somehow fails. Co-Authored-By: Claude Opus 4.5 --- web_interface/static/v3/js/widgets/day-selector.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/web_interface/static/v3/js/widgets/day-selector.js b/web_interface/static/v3/js/widgets/day-selector.js index 17f564b8f..c00941719 100644 --- a/web_interface/static/v3/js/widgets/day-selector.js +++ b/web_interface/static/v3/js/widgets/day-selector.js @@ -130,9 +130,12 @@ html += `
`; + // Get the validated label map (guaranteed to exist due to format validation above) + const labelMap = DAY_LABELS[format] || DAY_LABELS.long; + for (const day of DAYS) { const isChecked = selectedDays.includes(day); - const label = DAY_LABELS[format][day] || day; + const label = labelMap[day] || day; html += `