V.1.2 - Improved Secrurity, Better Ticket Handling
This commit is contained in:
Honey committed
1 parent
cb5d091be2
commit
3136c81533
16 files changed
+879
-738
No files matched your search
@@ -1,11 +1,11 @@
|
||||
import {
|
||||
fetchTicket, fetchComments, fetchHistory, createComment, logTime,
|
||||
formatDateTime, formatMinutes, getHistoryIcon
|
||||
formatDateTime, formatMinutes, getHistoryIcon, escapeHtml, linkify
|
||||
} from './ticket-shared.js';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const ticketId = new URLSearchParams(window.location.search).get('id');
|
||||
if (!ticketId) return window.location.href = '../admin.html';
|
||||
if (!ticketId) return (window.location.href = '../admin.html');
|
||||
|
||||
const statusSelect = document.getElementById('status-select');
|
||||
const priorityInput = document.getElementById('priority-text');
|
||||
@@ -19,55 +19,26 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
const totalTimeDisplay = document.getElementById('total-time');
|
||||
const timeForm = document.getElementById('time-booking-form');
|
||||
|
||||
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 sendWebhook(message) {
|
||||
if (!webhookConfig?.user) {
|
||||
console.log('User webhook not configured, skipping notification');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(webhookConfig.user, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ content: message })
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
console.error('User webhook failed:', res.statusText);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error sending user webhook:', err);
|
||||
}
|
||||
}
|
||||
|
||||
let originalStatus = '', originalPriority = '', originalTitle = '', originalDesc = '', originalCategory = '';
|
||||
|
||||
// Load categories dynamically
|
||||
async function loadCategories() {
|
||||
try {
|
||||
const res = await fetch('/api/categories');
|
||||
const categories = await res.json();
|
||||
if (categorySelect) {
|
||||
categorySelect.innerHTML = categories.map(c =>
|
||||
`<option value="${escapeHtml(c)}">${escapeHtml(c)}</option>`
|
||||
).join('');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load categories:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPage() {
|
||||
loadWebhookConfig().then(() => {
|
||||
loadTicketDetails();
|
||||
loadComments();
|
||||
loadHistory();
|
||||
});
|
||||
await loadCategories();
|
||||
await Promise.all([loadTicketDetails(), loadComments(), loadHistory()]);
|
||||
}
|
||||
|
||||
async function loadTicketDetails() {
|
||||
@@ -84,9 +55,7 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
document.getElementById('ticket-requester').textContent = ticket.requester;
|
||||
document.getElementById('ticket-created').textContent = formatDateTime(ticket.created_at);
|
||||
document.getElementById('ticket-updated').textContent = formatDateTime(ticket.updated_at);
|
||||
const totalMins = typeof ticket.total_time === 'number' ? ticket.total_time : 0;
|
||||
totalTimeDisplay.textContent = formatMinutes(totalMins);
|
||||
|
||||
totalTimeDisplay.textContent = formatMinutes(typeof ticket.total_time === 'number' ? ticket.total_time : 0);
|
||||
|
||||
statusSelect.className = 'form-control status-' + (ticket.status || '').toLowerCase().replace(/\s+/g, '-');
|
||||
|
||||
@@ -98,54 +67,28 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
}
|
||||
|
||||
async function updateTicket({ status, priority, title, description, category, actor = 'Admin' }) {
|
||||
try {
|
||||
const ticket = await fetchTicket(ticketId); // Fetch ticket to get the requester
|
||||
const requester = ticket.requester || ''; // Ensure requester is included in the update request
|
||||
try {
|
||||
const ticket = await fetchTicket(ticketId);
|
||||
const requester = ticket.requester || '';
|
||||
|
||||
const res = await fetch(`/api/tickets/${ticketId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status, priority, title, description, category, actor, requester }) // Add requester
|
||||
});
|
||||
const res = await fetch(`/api/tickets/${ticketId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status, priority, title, description, category, author: actor, requester }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to update');
|
||||
|
||||
if (!res.ok) throw new Error('Failed to update');
|
||||
alert('Ticket updated successfully');
|
||||
// Webhooks are handled server-side now — no need to send from here
|
||||
alert('Ticket updated successfully');
|
||||
|
||||
if (status !== originalStatus) {
|
||||
await sendWebhook(`Ticket #${ticketId} status changed from "${originalStatus}" to "${status}"`);
|
||||
originalStatus = status;
|
||||
titleText.textContent = title;
|
||||
descText.textContent = description;
|
||||
await loadPage();
|
||||
} catch (err) {
|
||||
console.error('Update failed:', err);
|
||||
alert('Error updating ticket');
|
||||
}
|
||||
|
||||
if (priority !== originalPriority) {
|
||||
await sendWebhook(`Ticket #${ticketId} priority changed from "${originalPriority}" to "${priority}"`);
|
||||
originalPriority = priority;
|
||||
}
|
||||
|
||||
if (title !== originalTitle) {
|
||||
await sendWebhook(`Ticket #${ticketId} title changed by ${actor}`);
|
||||
originalTitle = title;
|
||||
}
|
||||
|
||||
if (description !== originalDesc) {
|
||||
await sendWebhook(`Ticket #${ticketId} description changed by ${actor}`);
|
||||
originalDesc = description;
|
||||
}
|
||||
|
||||
if (category !== originalCategory) {
|
||||
await sendWebhook(`Ticket #${ticketId} category changed from "${originalCategory}" to "${category}"`);
|
||||
originalCategory = category;
|
||||
}
|
||||
|
||||
titleText.textContent = title;
|
||||
descText.textContent = description;
|
||||
|
||||
await loadPage();
|
||||
} catch (err) {
|
||||
console.error('Update failed:', err);
|
||||
alert('Error updating ticket');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.getElementById('update-ticket-btn').addEventListener('click', async () => {
|
||||
const isEditingTitle = titleInput.style.display === 'block';
|
||||
@@ -153,14 +96,16 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
|
||||
const newTitle = isEditingTitle ? titleInput.value.trim() : titleText.textContent;
|
||||
const newDesc = isEditingDesc ? descInput.value.trim() : descText.textContent;
|
||||
const newStatus = statusSelect.value;
|
||||
const newPriority = priorityInput.value;
|
||||
const newCategory = categorySelect.value;
|
||||
|
||||
const confirmed = confirm('Möchten Sie die Änderungen wirklich speichern?');
|
||||
if (!confirmed) return;
|
||||
if (!confirm('Save changes?')) return;
|
||||
|
||||
await updateTicket({ status: newStatus, priority: newPriority, title: newTitle, description: newDesc, category: newCategory });
|
||||
await updateTicket({
|
||||
status: statusSelect.value,
|
||||
priority: priorityInput.value,
|
||||
title: newTitle,
|
||||
description: newDesc,
|
||||
category: categorySelect.value,
|
||||
});
|
||||
|
||||
titleInput.style.display = 'none';
|
||||
titleText.style.display = 'block';
|
||||
@@ -169,16 +114,14 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
});
|
||||
|
||||
document.getElementById('close-ticket-btn').addEventListener('click', async () => {
|
||||
const confirmed = confirm('Möchtest du das Ticket wirklich schließen?');
|
||||
if (!confirmed) return;
|
||||
|
||||
const newStatus = 'Closed';
|
||||
const newPriority = priorityInput.value;
|
||||
const newTitle = titleText.textContent;
|
||||
const newDesc = descText.textContent;
|
||||
const newCategory = categorySelect.value;
|
||||
|
||||
await updateTicket({ status: newStatus, priority: newPriority, title: newTitle, description: newDesc, category: newCategory });
|
||||
if (!confirm('Close this ticket?')) return;
|
||||
await updateTicket({
|
||||
status: 'Closed',
|
||||
priority: priorityInput.value,
|
||||
title: titleText.textContent,
|
||||
description: descText.textContent,
|
||||
category: categorySelect.value,
|
||||
});
|
||||
});
|
||||
|
||||
titleText.addEventListener('dblclick', () => {
|
||||
@@ -195,6 +138,7 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
descInput.focus();
|
||||
});
|
||||
|
||||
// Restore saved author name
|
||||
const savedAuthor = localStorage.getItem('commentAuthor');
|
||||
if (savedAuthor) commentAuthorInput.value = savedAuthor;
|
||||
|
||||
@@ -205,17 +149,16 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
const role = comment.role || 'user';
|
||||
const isAdmin = role === 'admin';
|
||||
const avatarUrl = isAdmin ? '/assets/admin.jpg' : '/assets/user.jpg';
|
||||
|
||||
return `
|
||||
<div class="comment ${isAdmin ? 'comment-admin' : ''}">
|
||||
<img class="comment-avatar" src="${avatarUrl}" alt="${isAdmin ? 'Admin' : 'User'} Avatar">
|
||||
<div class="comment-content">
|
||||
<div class="comment-header">
|
||||
<span class="comment-author">${comment.author}</span>
|
||||
<span class="comment-author">${escapeHtml(comment.author)}</span>
|
||||
${isAdmin ? '<span class="comment-role-badge">Admin</span>' : ''}
|
||||
<span class="comment-date">${formatDateTime(comment.date)}</span>
|
||||
</div>
|
||||
<div class="comment-text">${comment.content}</div>
|
||||
<div class="comment-text">${linkify(comment.content)}</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
@@ -228,10 +171,10 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
<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 || ''}</div>
|
||||
<div class="history-action">${escapeHtml(h.action)}</div>
|
||||
<div class="history-details">${escapeHtml(h.message || '')}</div>
|
||||
<div class="history-meta">
|
||||
<span>By ${h.author || h.actor || 'unknown'}</span>
|
||||
<span>By ${escapeHtml(h.author || h.actor || 'unknown')}</span>
|
||||
<span>${formatDateTime(h.date || h.timestamp)}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -240,20 +183,14 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
|
||||
commentForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const author = commentAuthorInput.value.trim();
|
||||
if (!author) return alert('Bitte gib deinen Namen ein');
|
||||
if (!author) return alert('Please enter your name');
|
||||
const content = document.getElementById('comment-content').value.trim();
|
||||
if (!content) return alert('Comment required');
|
||||
|
||||
const role = 'admin';
|
||||
const timestamp = new Date().toISOString();
|
||||
|
||||
try {
|
||||
await createComment(ticketId, { author, role, content, timestamp });
|
||||
await sendWebhook(`New comment added by ${author} (${role}): "${content}" on ticket #${ticketId}`);
|
||||
await createComment(ticketId, { author, role: 'admin', content, timestamp: new Date().toISOString() });
|
||||
localStorage.setItem('commentAuthor', author);
|
||||
|
||||
document.getElementById('comment-content').value = '';
|
||||
await loadComments();
|
||||
await loadHistory();
|
||||
@@ -269,41 +206,30 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
const comment = document.getElementById('time-comment').value.trim();
|
||||
const actor = commentAuthorInput.value || 'Admin';
|
||||
|
||||
if (isNaN(minutes) || minutes <= 0) return alert('Gültige Zeit in Minuten eingeben');
|
||||
if (isNaN(minutes) || minutes <= 0) return alert('Enter valid minutes');
|
||||
|
||||
try {
|
||||
// Save the time log
|
||||
await logTime(ticketId, { minutes, comment, author: actor });
|
||||
|
||||
// Also add it as a comment
|
||||
const timeComment = `⏱ Zeit gebucht: ${formatMinutes(minutes)}${comment ? ` – ${comment}` : ''}`;
|
||||
await createComment(ticketId, {
|
||||
author: actor,
|
||||
role: 'admin',
|
||||
content: timeComment,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
const timeComment = `⏱ Time booked: ${formatMinutes(minutes)}${comment ? ` – ${comment}` : ''}`;
|
||||
await createComment(ticketId, { author: actor, role: 'admin', content: timeComment, timestamp: new Date().toISOString() });
|
||||
|
||||
// Webhook notification
|
||||
await sendWebhook(`Time booked: ${formatMinutes(minutes)} by ${actor} on ticket #${ticketId}${comment ? ` – "${comment}"` : ''}`);
|
||||
|
||||
// Clear inputs and reload
|
||||
document.getElementById('time-minutes').value = '';
|
||||
document.getElementById('time-comment').value = '';
|
||||
await loadPage();
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Speichern der Zeit:', err);
|
||||
alert('Fehler beim Speichern');
|
||||
console.error('Error saving time:', err);
|
||||
alert('Error saving time');
|
||||
}
|
||||
});
|
||||
|
||||
// Tabs
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const tab = btn.dataset.tab;
|
||||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
|
||||
document.getElementById(`${tab}-tab`).classList.add('active');
|
||||
document.getElementById(`${btn.dataset.tab}-tab`).classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in new issue
Block a user