V.1.2 - Improved Secrurity, Better Ticket Handling

public/ticketview/ticket-user.js

@@ -1,16 +1,14 @@
 import {
-  fetchTicket, fetchComments, fetchHistory,
-  createComment,
-  formatDateTime, formatMinutes, getHistoryIcon
+  fetchTicket, fetchComments, fetchHistory, createComment,
+  formatDateTime, formatMinutes, getHistoryIcon, escapeHtml, linkify
 } from './ticket-shared.js';
 
 document.addEventListener('DOMContentLoaded', () => {
   document.body.classList.add('user-view');
 
   const ticketId = new URLSearchParams(window.location.search).get('id');
-  if (!ticketId) return window.location.href = '/';
+  if (!ticketId) return (window.location.href = '/');
 
-  // DOM elements
   const ticketTitle = document.getElementById('ticket-title-text');
   const ticketIdElem = document.getElementById('ticket-id-val');
   const ticketStatus = document.getElementById('ticket-status-badge');
@@ -24,54 +22,6 @@ document.addEventListener('DOMContentLoaded', () => {
   const historyContainer = document.getElementById('history-container');
   const commentForm = document.getElementById('comment-form');
   const tabBtns = document.querySelectorAll('.tab-btn');
-  const totalTimeDisplay = document.getElementById('total-time');
-
-  let webhookConfig = null;
-
-  // Fetch Webhook Configuration
-  async function loadWebhookConfig() {
-    try {
-      const response = await fetch('/api/webhooks');
-      if (response.ok) {
-        webhookConfig = await response.json();
-        console.log('Webhook configuration loaded:', webhookConfig.configured);
-      } else {
-        console.warn('Failed to load webhook configuration');
-        webhookConfig = { admin: null, user: null, configured: { admin: false, user: false } };
-      }
-    } catch (error) {
-      console.error('Error loading webhook configuration:', error);
-      webhookConfig = { admin: null, user: null, configured: { admin: false, user: false } };
-    }
-  }
-
-  // Send Webhook Notification
-  async function sendAdminWebhook(message) {
-    if (!webhookConfig?.admin) {
-      console.log('Admin webhook not configured, skipping notification');
-      return;
-    }
-
-    try {
-      const res = await fetch(webhookConfig.admin, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content: message })
-      });
-
-      if (!res.ok) {
-        console.error('Admin webhook failed:', res.statusText);
-      }
-    } catch (err) {
-      console.error('Error sending admin webhook:', err);
-    }
-  }
-
-  // Links automatically convert to clickable
-  function linkify(text) {
-    const urlPattern = /(\bhttps?:\/\/[^\s<]+)/g;
-    return text.replace(urlPattern, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
-  }
 
   let originalStatus = '';
   let originalPriority = '';
@@ -89,16 +39,12 @@ document.addEventListener('DOMContentLoaded', () => {
     ticketUpdated.textContent = formatDateTime(ticket.updated_at);
     ticketPriority.textContent = ticket.priority;
 
-    if (ticketCategory) {
-      ticketCategory.textContent = ticket.category || '—';
-    }
+    if (ticketCategory) ticketCategory.textContent = ticket.category || '—';
 
     ticketStatus.className = `ticket-status status-${ticket.status.replace(/ /g, '-')}`;
 
     const totalTimeDisplay = document.getElementById('total-time');
-    if (totalTimeDisplay) {
-      totalTimeDisplay.textContent = formatMinutes(ticket.total_time || 0);
-    }
+    if (totalTimeDisplay) totalTimeDisplay.textContent = formatMinutes(ticket.total_time || 0);
 
     originalStatus = ticket.status;
     originalPriority = ticket.priority;
@@ -110,20 +56,16 @@ document.addEventListener('DOMContentLoaded', () => {
       const role = comment.role ? comment.role.toLowerCase() : 'user';
       let avatarUrl = '/assets/user.jpg';
       if (role === 'admin') avatarUrl = '/assets/admin.jpg';
-      else if (role === 'moderator') avatarUrl = '/assets/moderator.jpg';
-
-      // Comment content is linkified
-      const linkedContent = linkify(comment.content || '');
 
       return `
         <div class="comment">
           <img class="comment-avatar" src="${avatarUrl}" alt="${role.charAt(0).toUpperCase() + role.slice(1)} Avatar">
           <div class="comment-content">
             <div class="comment-header">
-              <span class="comment-author">${comment.author}</span>
+              <span class="comment-author">${escapeHtml(comment.author)}</span>
               <span class="comment-date">${formatDateTime(comment.date)}</span>
             </div>
-            <div class="comment-text">${linkedContent}</div>
+            <div class="comment-text">${linkify(comment.content)}</div>
           </div>
         </div>
       `;
@@ -136,10 +78,10 @@ document.addEventListener('DOMContentLoaded', () => {
       <div class="history-item">
         <div class="history-icon"><i class="fas fa-${getHistoryIcon(h.action)}"></i></div>
         <div class="history-content">
-          <div class="history-action">${h.action}</div>
-          <div class="history-details">${h.message || h.details || ''}</div>
+          <div class="history-action">${escapeHtml(h.action)}</div>
+          <div class="history-details">${escapeHtml(h.message || h.details || '')}</div>
           <div class="history-meta">
-            <span class="history-actor">By ${h.author || h.actor || 'unknown'}</span>
+            <span class="history-actor">By ${escapeHtml(h.author || h.actor || 'unknown')}</span>
             <span class="history-date">${formatDateTime(h.date)}</span>
           </div>
         </div>
@@ -154,14 +96,12 @@ document.addEventListener('DOMContentLoaded', () => {
       const content = document.getElementById('comment-content')?.value;
       if (!content?.trim()) return alert('Please enter a comment');
 
-      const timestamp = new Date().toISOString();
-
       try {
-        await createComment(ticketId, { author, content, timestamp });
+        await createComment(ticketId, { author, content, timestamp: new Date().toISOString() });
+        // Webhook notification is handled server-side
         document.getElementById('comment-content').value = '';
         await loadComments();
         await loadHistory();
-        await sendAdminWebhook(`New comment added by ${author}: "${content}" on ticket #${ticketId}`);
       } catch (err) {
         console.error('Failed to create comment:', err);
         alert('Failed to submit comment. Please try again.');
@@ -173,19 +113,15 @@ document.addEventListener('DOMContentLoaded', () => {
     const ticket = await fetchTicket(ticketId);
     if (!ticket) return;
 
-    // Update UI if status or priority changes server-side
     if (ticket.status !== originalStatus) {
       originalStatus = ticket.status;
       ticketStatus.textContent = ticket.status;
       ticketStatus.className = `ticket-status status-${ticket.status.replace(/ /g, '-')}`;
     }
-
     if (ticket.priority !== originalPriority) {
       originalPriority = ticket.priority;
       ticketPriority.textContent = ticket.priority;
     }
-
-    // Check and update category if necessary
     if (ticketCategory && ticket.category !== ticketCategory.textContent) {
       ticketCategory.textContent = ticket.category || '—';
     }
@@ -199,12 +135,10 @@ document.addEventListener('DOMContentLoaded', () => {
   }));
 
   // Initial load
-  loadWebhookConfig().then(() => {
-    loadTicketDetails();
-    loadComments();
-    loadHistory();
-  });
+  loadTicketDetails();
+  loadComments();
+  loadHistory();
 
-  // Periodic updates
+  // Poll for changes every 30s
   setInterval(checkForChanges, 30000);
 });