CSS class migrations: stat-card cursor, view toggle, bulk actions visibility

- Replace stat-card cursor:pointer inline style with CSS rule - Convert view toggle (table/card) to use .is-hidden CSS class - Convert bulk-actions and export-dropdown to use .is-visible class - Add .is-hidden/.is-visible utility rules to dashboard.css - Remove duplicate lt.keys.initDefaults() call from dashboard.js - Remove redundant setTimeout from view mode restore - Add lt.keys.initDefaults() to dashboard.js (was missing entirely) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Fix XSS: escape table data and sanitize sort/pagination URL params
2026-03-20 21:08:28 -04:00 · 2026-03-20 20:40:51 -04:00 · 2026-03-20 20:34:55 -04:00
8 changed files with 44 additions and 43 deletions
--- a/assets/css/dashboard.css
+++ b/assets/css/dashboard.css
@@ -1413,6 +1413,11 @@ h1 {
 .loading-overlay--hiding { opacity: 0; }
 .has-overlay { position: relative; }

+/* Visibility utilities — !important required to override HTML inline style="display:none" */
+.is-hidden { display: none !important; }
+.bulk-actions-inline.is-visible { display: flex !important; }
+.export-dropdown.is-visible { display: inline-block !important; }
+
 .loading-overlay .loading-text {
    margin-top: 1rem;
    animation: blink-cursor 1s step-end infinite;
@@ -4580,6 +4585,7 @@ tr:hover .quick-actions {
    transition: border-color 0.2s ease, transform 0.15s ease;
    position: relative;
    overflow: hidden;
+    cursor: pointer;
 }

 /* Corner accent */
--- a/assets/css/ticket.css
+++ b/assets/css/ticket.css
@@ -584,6 +584,8 @@ textarea.editable {
    background: var(--bg-secondary);
    cursor: default;
    border-color: transparent;
+    overflow: hidden;
+    resize: none;
 }

 /* Button Styles */
--- a/assets/js/dashboard.js
+++ b/assets/js/dashboard.js
@@ -683,22 +683,14 @@ function updateSelectionCount() {
    const exportCount = document.getElementById('exportCount');

    if (toolbar && countDisplay) {
-        if (count > 0) {
-            toolbar.style.display = 'flex';
-            countDisplay.textContent = count;
-        } else {
-            toolbar.style.display = 'none';
-        }
+        toolbar.classList.toggle('is-visible', count > 0);
+        if (count > 0) countDisplay.textContent = count;
    }

    // Show/hide export dropdown based on selection
    if (exportDropdown) {
-        if (count > 0) {
-            exportDropdown.style.display = '';
-            if (exportCount) exportCount.textContent = count;
-        } else {
-            exportDropdown.style.display = 'none';
-        }
+        exportDropdown.classList.toggle('is-visible', count > 0);
+        if (count > 0 && exportCount) exportCount.textContent = count;
    }
 }

@@ -1359,14 +1351,14 @@ function setViewMode(mode) {
    if (!tableView || !cardView) return;

    if (mode === 'card') {
-        tableView.style.display = 'none';
-        cardView.style.display = 'block';
+        tableView.classList.add('is-hidden');
+        cardView.classList.remove('is-hidden');
        tableBtn.classList.remove('active');
        cardBtn.classList.add('active');
        populateKanbanCards();
    } else {
-        tableView.style.display = 'block';
-        cardView.style.display = 'none';
+        tableView.classList.remove('is-hidden');
+        cardView.classList.add('is-hidden');
        tableBtn.classList.add('active');
        cardBtn.classList.remove('active');
    }
@@ -1444,8 +1436,7 @@ function populateKanbanCards() {
 document.addEventListener('DOMContentLoaded', function() {
    const savedMode = localStorage.getItem('ticketViewMode');
    if (savedMode === 'card') {
-        // Delay to ensure DOM is ready
-        setTimeout(() => setViewMode('card'), 100);
+        setViewMode('card');
    }
 });

@@ -1755,6 +1746,7 @@ function initRelativeTimes() {
 document.addEventListener('DOMContentLoaded', initRelativeTimes);
 setInterval(initRelativeTimes, 60000);

+
 // Export for use in other scripts
 window.generateSkeletonRows = generateSkeletonRows;
 window.generateSkeletonComments = generateSkeletonComments;
--- a/assets/js/ticket.js
+++ b/assets/js/ticket.js
@@ -86,6 +86,8 @@ function toggleEditMode() {
        // Enable description (textarea)
        if (descriptionField) {
            descriptionField.disabled = false;
+            descriptionField.style.height = 'auto';
+            descriptionField.style.height = descriptionField.scrollHeight + 'px';
        }

        // Enable metadata fields (priority, category, type)
@@ -1036,7 +1038,6 @@ function showMentionSuggestions(query, textarea) {

    mentionAutocomplete.innerHTML = html;
    mentionAutocomplete.classList.add('active');
-    const textarea = document.getElementById('newComment');
    if (textarea) textarea.setAttribute('aria-expanded', 'true');
    selectedMentionIndex = 0;

--- a/views/DashboardView.php
+++ b/views/DashboardView.php
@@ -144,7 +144,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                        <label>
                            <input type="checkbox"
                                   name="category"
-                                   value="<?php echo $cat; ?>"
+                                   value="<?php echo htmlspecialchars($cat); ?>"
                                   <?php echo in_array($cat, $currentCategories) ? 'checked' : ''; ?>>
                            <?php echo htmlspecialchars($cat); ?>
                        </label>
@@ -161,7 +161,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                        <label>
                            <input type="checkbox"
                                   name="type"
-                                   value="<?php echo $type; ?>"
+                                   value="<?php echo htmlspecialchars($type); ?>"
                                   <?php echo in_array($type, $currentTypes) ? 'checked' : ''; ?>>
                            <?php echo htmlspecialchars($type); ?>
                        </label>
@@ -291,7 +291,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                // Previous page button
                if ($page > 1) {
                    $currentParams['page'] = $page - 1;
-                    $prevUrl = '?' . http_build_query($currentParams);
+                    $prevUrl = htmlspecialchars('?' . http_build_query($currentParams), ENT_QUOTES, 'UTF-8');
                    echo "<button data-action='navigate' data-url='$prevUrl' aria-label='Previous page'>[ « ]</button>";
                }

@@ -299,14 +299,14 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                for ($i = 1; $i <= $totalPages; $i++) {
                    $activeClass = ($i === $page) ? 'active' : '';
                    $currentParams['page'] = $i;
-                    $pageUrl = '?' . http_build_query($currentParams);
+                    $pageUrl = htmlspecialchars('?' . http_build_query($currentParams), ENT_QUOTES, 'UTF-8');
                    echo "<button class='$activeClass' data-action='navigate' data-url='$pageUrl'>$i</button>";
                }

                // Next page button
                if ($page < $totalPages) {
                    $currentParams['page'] = $page + 1;
-                    $nextUrl = '?' . http_build_query($currentParams);
+                    $nextUrl = htmlspecialchars('?' . http_build_query($currentParams), ENT_QUOTES, 'UTF-8');
                    echo "<button data-action='navigate' data-url='$nextUrl' aria-label='Next page'>[ » ]</button>";
                }
                ?>
@@ -393,7 +393,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                <?php endif; ?>
                <?php
                $currentSort = isset($_GET['sort']) ? $_GET['sort'] : 'ticket_id';
-                $currentDir = isset($_GET['dir']) ? $_GET['dir'] : 'desc';
+                $currentDir = (isset($_GET['dir']) && $_GET['dir'] === 'asc') ? 'asc' : 'desc';
                
                $columns = [
                    'ticket_id' => 'Ticket ID',
@@ -417,7 +417,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                        $sortClass = ($currentSort === $col) ? "sort-$currentDir" : '';
                        $ariaSort = ($currentSort === $col) ? "aria-sort='" . ($currentDir === 'asc' ? 'ascending' : 'descending') . "'" : '';
                        $sortParams = array_merge($_GET, ['sort' => $col, 'dir' => $newDir]);
-                        $sortUrl = '?' . http_build_query($sortParams);
+                        $sortUrl = htmlspecialchars('?' . http_build_query($sortParams), ENT_QUOTES, 'UTF-8');
                        echo "<th scope='col' class='$sortClass' data-action='navigate' data-url='$sortUrl' $ariaSort>$label</th>";
                    }
                }
@@ -440,9 +440,10 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                    echo "<td><a href='/ticket/{$row['ticket_id']}' class='ticket-link'>{$row['ticket_id']}</a></td>";
                    echo "<td><span>{$row['priority']}</span></td>";
                    echo "<td>" . htmlspecialchars($row['title']) . "</td>";
-                    echo "<td>{$row['category']}</td>";
-                    echo "<td>{$row['type']}</td>";
-                    echo "<td><span class='status-" . str_replace(' ', '-', $row['status']) . "'>{$row['status']}</span></td>";
+                    echo "<td>" . htmlspecialchars($row['category']) . "</td>";
+                    echo "<td>" . htmlspecialchars($row['type']) . "</td>";
+                    $statusSlug = htmlspecialchars(str_replace(' ', '-', $row['status']), ENT_QUOTES);
+                    echo "<td><span class='status-" . $statusSlug . "'>" . htmlspecialchars($row['status']) . "</span></td>";
                    echo "<td>" . htmlspecialchars($creator) . "</td>";
                    echo "<td>" . htmlspecialchars($assignedTo) . "</td>";
                    echo "<td class='ts-cell' data-ts='" . htmlspecialchars($row['created_at'], ENT_QUOTES, 'UTF-8') . "' title='" . date('Y-m-d H:i T', strtotime($row['created_at'])) . "'>" . date('Y-m-d H:i', strtotime($row['created_at'])) . "</td>";
@@ -451,7 +452,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                    echo "<td class='quick-actions-cell'>";
                    echo "<div class='quick-actions'>";
                    echo "<button data-action='view-ticket' data-ticket-id='" . $row['ticket_id'] . "' class='quick-action-btn' title='View' aria-label='View ticket " . $row['ticket_id'] . "'>&gt;</button>";
-                    echo "<button data-action='quick-status' data-ticket-id='" . $row['ticket_id'] . "' data-status='" . $row['status'] . "' class='quick-action-btn' title='Change Status' aria-label='Change status for ticket " . $row['ticket_id'] . "'>~</button>";
+                    echo "<button data-action='quick-status' data-ticket-id='" . (int)$row['ticket_id'] . "' data-status='" . htmlspecialchars($row['status'], ENT_QUOTES) . "' class='quick-action-btn' title='Change Status' aria-label='Change status for ticket " . (int)$row['ticket_id'] . "'>~</button>";
                    echo "<button data-action='quick-assign' data-ticket-id='" . $row['ticket_id'] . "' class='quick-action-btn' title='Assign' aria-label='Assign ticket " . $row['ticket_id'] . "'>@</button>";
                    echo "</div>";
                    echo "</td>";
@@ -496,12 +497,12 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                        <span class="ts-cell" data-ts="<?php echo htmlspecialchars($row['updated_at'], ENT_QUOTES, 'UTF-8'); ?>" title="<?php echo date('Y-m-d H:i', strtotime($row['updated_at'])); ?>"><?php echo date('M j', strtotime($row['updated_at'])); ?></span>
                                    </div>
                                </div>
-                                <div class="ticket-card-status <?php echo $statusClass; ?>">
-                                    <?php echo $row['status']; ?>
+                                <div class="ticket-card-status <?php echo htmlspecialchars($statusClass); ?>">
+                                    <?php echo htmlspecialchars($row['status']); ?>
                                </div>
                                <div class="ticket-card-actions">
-                                    <button data-action="view-ticket" data-ticket-id="<?php echo $row['ticket_id']; ?>" title="View" aria-label="View ticket <?php echo $row['ticket_id']; ?>">&gt;</button>
-                                    <button data-action="quick-status" data-ticket-id="<?php echo $row['ticket_id']; ?>" data-status="<?php echo $row['status']; ?>" title="Status" aria-label="Change status for ticket <?php echo $row['ticket_id']; ?>">~</button>
+                                    <button data-action="view-ticket" data-ticket-id="<?php echo (int)$row['ticket_id']; ?>" title="View" aria-label="View ticket <?php echo (int)$row['ticket_id']; ?>">&gt;</button>
+                                    <button data-action="quick-status" data-ticket-id="<?php echo (int)$row['ticket_id']; ?>" data-status="<?php echo htmlspecialchars($row['status'], ENT_QUOTES); ?>" title="Status" aria-label="Change status for ticket <?php echo (int)$row['ticket_id']; ?>">~</button>
                                </div>
                            </div>
                            <?php
@@ -523,7 +524,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
    <!-- END OUTER FRAME -->

    <!-- Kanban Card View -->
-    <section id="cardView" class="card-view-container" style="display: none;" aria-label="Kanban board view">
+    <section id="cardView" class="card-view-container is-hidden" aria-label="Kanban board view">
        <div class="kanban-board">
            <div class="kanban-column" data-status="Open">
                <div class="kanban-column-header status-Open">
@@ -991,7 +992,6 @@ $nonce = SecurityHeadersMiddleware::getNonce();

        // Stat card click handlers for filtering
        document.querySelectorAll('.stat-card').forEach(card => {
-            card.style.cursor = 'pointer';
            card.addEventListener('click', function() {
                const classList = this.classList;
                let url = '/?';
--- a/views/TicketView.php
+++ b/views/TicketView.php
@@ -246,14 +246,14 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                        <div class="header-controls">
                            <div class="status-priority-group">
                                <select id="statusSelect" class="editable status-select status-<?php echo str_replace(' ', '-', strtolower($ticket["status"])); ?>" data-field="status" data-action="update-ticket-status" aria-label="Change ticket status">
-                                    <option value="<?php echo $ticket['status']; ?>" selected>
-                                        <?php echo $ticket['status']; ?> (current)
+                                    <option value="<?php echo htmlspecialchars($ticket['status']); ?>" selected>
+                                        <?php echo htmlspecialchars($ticket['status']); ?> (current)
                                    </option>
                                    <?php foreach ($allowedTransitions as $transition): ?>
-                                        <option value="<?php echo $transition['to_status']; ?>"
+                                        <option value="<?php echo htmlspecialchars($transition['to_status']); ?>"
                                            data-requires-comment="<?php echo $transition['requires_comment'] ? '1' : '0'; ?>"
                                            data-requires-admin="<?php echo $transition['requires_admin'] ? '1' : '0'; ?>">
-                                            <?php echo $transition['to_status']; ?>
+                                            <?php echo htmlspecialchars($transition['to_status']); ?>
                                            <?php if ($transition['requires_comment']): ?> *<?php endif; ?>
                                            <?php if ($transition['requires_admin']): ?> (Admin)<?php endif; ?>
                                        </option>
@@ -295,7 +295,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                        <div class="ascii-subsection-header">Description</div>
                        <div class="detail-group full-width">
                            <label>Description</label>
-                            <textarea class="editable" data-field="description" disabled><?php echo $ticket["description"]; ?></textarea>
+                            <textarea class="editable" data-field="description" disabled><?php echo htmlspecialchars($ticket["description"] ?? ''); ?></textarea>
                        </div>
                    </div>

--- a/views/admin/AuditLogView.php
+++ b/views/admin/AuditLogView.php
@@ -149,7 +149,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                    for ($i = 1; $i <= min($totalPages, 10); $i++) {
                        $params['page'] = $i;
                        $activeClass = ($i == $page) ? 'active' : '';
-                        $url = '?' . http_build_query($params);
+                        $url = htmlspecialchars('?' . http_build_query($params), ENT_QUOTES, 'UTF-8');
                        echo "<a href='$url' class='btn btn-small $activeClass'>$i</a> ";
                    }
                    if ($totalPages > 10) {
--- a/views/admin/RecurringTicketsView.php
+++ b/views/admin/RecurringTicketsView.php
@@ -81,7 +81,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                            $schedule .= ' (Day ' . $rt['schedule_day'] . ')';
                                        }
                                        $schedule .= ' @ ' . substr($rt['schedule_time'], 0, 5);
-                                        echo $schedule;
+                                        echo htmlspecialchars($schedule);
                                        ?>
                                    </td>
                                    <td><?php echo htmlspecialchars($rt['category']); ?></td>