kyle
aa06394aa9
- Add CSS styles for token URL input and hints - Implement safe data attribute parsing in settings.js - Refactor room fetching logic to use promise chains and auto-fetch on load - Display full webhook URLs in the settings UI instead of raw tokens - Generate URL-safe base64 tokens to prevent encoding issues - Add #[PublicPage] attribute to WebhookController for unauthenticated delivery - Filter out internal Nextcloud Talk system rooms from the room picker - Add OCS-ApiRequest header to bot API requests - Sanitize data attributes in templates to prevent XSS
282 lines
11 KiB
JavaScript
282 lines
11 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const APP_ID = 'ncdiscordhook';
|
|
|
|
// Read config passed via data attributes on the page
|
|
function parseData(el, key) {
|
|
if (!el || !el.dataset || !el.dataset[key]) return {};
|
|
try {
|
|
var val = JSON.parse(el.dataset[key]);
|
|
return (val && typeof val === 'object') && !Array.isArray(val) ? val : {};
|
|
} catch (e) { return {}; }
|
|
}
|
|
const dataEl = document.getElementById('nc-config-data');
|
|
const configuredRooms = parseData(dataEl, 'configuredRooms');
|
|
const authTokens = parseData(dataEl, 'authTokens');
|
|
|
|
// Elements
|
|
const botPasswordInput = document.getElementById('nc-bot-password');
|
|
const retentionInput = document.getElementById('nc-retention');
|
|
const fetchRoomsBtn = document.getElementById('nc-fetch-rooms');
|
|
const roomsList = document.getElementById('nc-rooms-list');
|
|
const saveBtn = document.getElementById('nc-save');
|
|
const savePasswordBtn = document.getElementById('nc-save-password');
|
|
const statusMsg = document.getElementById('nc-status');
|
|
|
|
let configuredRoomsState = configuredRooms;
|
|
let authTokensState = authTokens;
|
|
|
|
function showStatus(msg, type) {
|
|
statusMsg.textContent = msg;
|
|
statusMsg.className = 'nc-status-' + type;
|
|
setTimeout(() => { statusMsg.textContent = ''; }, 5000);
|
|
}
|
|
|
|
// Show/hide the save-password button when user types
|
|
botPasswordInput.addEventListener('input', function () {
|
|
savePasswordBtn.style.display = this.value.trim() ? 'inline-block' : 'none';
|
|
});
|
|
|
|
// Fetch available Talk rooms
|
|
function fetchRooms() {
|
|
fetchRoomsBtn.disabled = true;
|
|
fetchRoomsBtn.textContent = 'Fetching...';
|
|
|
|
fetch(OC.generateUrl('/apps/' + APP_ID + '/rooms')).then(function (resp) {
|
|
return resp.json();
|
|
}).then(function (data) {
|
|
roomsList.innerHTML = '';
|
|
|
|
if (data.length === 0) {
|
|
roomsList.innerHTML = '<p class="nc-empty">No Talk rooms found. Create rooms first via the Nextcloud Talk settings.</p>';
|
|
fetchRoomsBtn.textContent = 'Fetch Rooms';
|
|
fetchRoomsBtn.disabled = false;
|
|
return;
|
|
}
|
|
|
|
data.forEach(function (room) {
|
|
var label = document.createElement('label');
|
|
label.className = 'nc-room-item';
|
|
|
|
var cb = document.createElement('input');
|
|
cb.type = 'checkbox';
|
|
cb.value = room.token;
|
|
cb.id = 'room-' + room.token;
|
|
if (room.configured) {
|
|
cb.checked = true;
|
|
cb.disabled = true;
|
|
}
|
|
cb.addEventListener('change', function () { toggleRoomTokens(room.token, this.checked); });
|
|
|
|
var nameSpan = document.createElement('span');
|
|
nameSpan.textContent = room.name || room.token;
|
|
|
|
label.appendChild(cb);
|
|
label.appendChild(nameSpan);
|
|
roomsList.appendChild(label);
|
|
|
|
// Auth tokens container
|
|
var tokenDiv = document.createElement('div');
|
|
tokenDiv.className = 'nc-room-tokens';
|
|
tokenDiv.id = 'tokens-' + room.token;
|
|
tokenDiv.style.display = 'none';
|
|
if (room.configured || (authTokensState[room.token] && authTokensState[room.token].length > 0)) {
|
|
tokenDiv.style.display = 'block';
|
|
renderTokens(room.token, tokenDiv);
|
|
}
|
|
roomsList.appendChild(tokenDiv);
|
|
});
|
|
|
|
fetchRoomsBtn.textContent = 'Refresh Rooms';
|
|
fetchRoomsBtn.disabled = false;
|
|
}).catch(function (err) {
|
|
showStatus('Failed to fetch rooms', 'error');
|
|
fetchRoomsBtn.textContent = 'Fetch Rooms';
|
|
fetchRoomsBtn.disabled = false;
|
|
});
|
|
}
|
|
fetchRoomsBtn.addEventListener('click', fetchRooms);
|
|
|
|
// Auto-fetch rooms on load if there are already configured rooms
|
|
if (Object.keys(configuredRoomsState).length > 0) {
|
|
fetchRooms();
|
|
}
|
|
|
|
// Render auth tokens for a room
|
|
function renderTokens(roomToken, container) {
|
|
container.innerHTML = '';
|
|
|
|
const tokens = authTokensState[roomToken] || [];
|
|
// Build the full webhook URL with server origin
|
|
var webhookPath = OC.generateUrl('/apps/' + APP_ID + '/webhook/') + roomToken + '/{token}';
|
|
var webhookUrl = window.location.protocol + '//' + window.location.host + webhookPath;
|
|
|
|
if (tokens.length === 0) {
|
|
// Show a hint that they can generate a token
|
|
var hint = document.createElement('p');
|
|
hint.className = 'nc-token-hint';
|
|
hint.textContent = 'No tokens yet. Generate one below.';
|
|
hint.style.color = '#888';
|
|
hint.style.fontSize = '0.85em';
|
|
container.appendChild(hint);
|
|
}
|
|
|
|
tokens.forEach(function (token) {
|
|
// Display the full webhook URL (encode token for URL safety)
|
|
var fullUrl = webhookUrl.replace('{token}', encodeURIComponent(token));
|
|
|
|
var row = document.createElement('div');
|
|
row.className = 'nc-token-row';
|
|
|
|
var urlInput = document.createElement('input');
|
|
urlInput.type = 'text';
|
|
urlInput.value = fullUrl;
|
|
urlInput.readOnly = true;
|
|
urlInput.className = 'nc-token-url-input';
|
|
urlInput.title = fullUrl;
|
|
|
|
var copyBtn = document.createElement('button');
|
|
copyBtn.type = 'button';
|
|
copyBtn.className = 'nc-token-copy';
|
|
copyBtn.textContent = 'Copy';
|
|
copyBtn.addEventListener('click', function () {
|
|
navigator.clipboard.writeText(fullUrl).then(function () {
|
|
copyBtn.textContent = 'Copied!';
|
|
setTimeout(function () { copyBtn.textContent = 'Copy'; }, 2000);
|
|
});
|
|
});
|
|
|
|
var revokeBtn = document.createElement('button');
|
|
revokeBtn.type = 'button';
|
|
revokeBtn.className = 'nc-token-revoke';
|
|
revokeBtn.textContent = 'Revoke';
|
|
revokeBtn.addEventListener('click', function () {
|
|
if (!confirm('Revoke this auth token?')) return;
|
|
tokens.splice(tokens.indexOf(token), 1);
|
|
if (tokens.length === 0) {
|
|
delete authTokensState[roomToken];
|
|
container.style.display = 'none';
|
|
} else {
|
|
authTokensState[roomToken] = tokens;
|
|
renderTokens(roomToken, container);
|
|
}
|
|
});
|
|
|
|
row.appendChild(urlInput);
|
|
row.appendChild(copyBtn);
|
|
row.appendChild(revokeBtn);
|
|
container.appendChild(row);
|
|
});
|
|
|
|
// Generate new token button
|
|
var genBtn = document.createElement('button');
|
|
genBtn.type = 'button';
|
|
genBtn.className = 'nc-generate-token';
|
|
genBtn.textContent = '+ Generate Auth Token';
|
|
genBtn.addEventListener('click', function () {
|
|
if (!authTokensState[roomToken]) {
|
|
authTokensState[roomToken] = [];
|
|
}
|
|
// Use URL-safe base64 (no +, /, = characters)
|
|
var raw = Math.random().toString(36).substring(2) + Date.now().toString(36);
|
|
var token = btoa(raw).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
|
|
authTokensState[roomToken].push(token);
|
|
renderTokens(roomToken, container);
|
|
container.style.display = 'block';
|
|
});
|
|
container.appendChild(genBtn);
|
|
}
|
|
|
|
// Toggle room token display
|
|
function toggleRoomTokens(roomToken, checked) {
|
|
const tokenDiv = document.getElementById('tokens-' + roomToken);
|
|
if (tokenDiv) {
|
|
tokenDiv.style.display = checked ? 'block' : 'none';
|
|
if (checked) {
|
|
renderTokens(roomToken, tokenDiv);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Save bot password only
|
|
savePasswordBtn.addEventListener('click', async function () {
|
|
var pw = botPasswordInput.value.trim();
|
|
if (!pw) return;
|
|
savePasswordBtn.disabled = true;
|
|
savePasswordBtn.textContent = 'Saving...';
|
|
|
|
try {
|
|
var resp = await fetch(OC.generateUrl('/apps/' + APP_ID + '/save-bot-password'), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ bot_password: pw }),
|
|
});
|
|
var data = await resp.json();
|
|
|
|
if (data.status === 'ok') {
|
|
showStatus('Bot password saved', 'success');
|
|
botPasswordInput.value = '';
|
|
savePasswordBtn.style.display = 'none';
|
|
} else {
|
|
showStatus('Save failed: ' + (data.error || 'unknown error'), 'error');
|
|
}
|
|
} catch (err) {
|
|
showStatus('Save failed: ' + err.message, 'error');
|
|
}
|
|
|
|
savePasswordBtn.disabled = false;
|
|
savePasswordBtn.textContent = 'Save';
|
|
});
|
|
|
|
// Save configuration
|
|
saveBtn.addEventListener('click', async function () {
|
|
saveBtn.disabled = true;
|
|
saveBtn.textContent = 'Saving...';
|
|
|
|
// Collect configured rooms
|
|
const rooms = {};
|
|
document.querySelectorAll('#nc-rooms-list input[type="checkbox"]:checked').forEach(function (cb) {
|
|
const token = cb.value;
|
|
rooms[token] = ''; // name will be filled from existing config
|
|
});
|
|
|
|
// Restore names from existing config for newly checked rooms
|
|
Object.keys(configuredRoomsState).forEach(function (token) {
|
|
if (rooms[token] === undefined) {
|
|
rooms[token] = configuredRoomsState[token];
|
|
}
|
|
});
|
|
|
|
const payload = {
|
|
rooms: rooms,
|
|
auth_tokens: authTokensState,
|
|
retention_days: parseInt(retentionInput.value) || 90,
|
|
};
|
|
|
|
if (botPasswordInput.value) {
|
|
payload.bot_password = botPasswordInput.value;
|
|
}
|
|
|
|
try {
|
|
const resp = await fetch(OC.generateUrl('/apps/' + APP_ID + '/save-config'), {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
const data = await resp.json();
|
|
|
|
if (data.status === 'ok') {
|
|
configuredRoomsState = rooms;
|
|
showStatus('Configuration saved', 'success');
|
|
botPasswordInput.value = '';
|
|
} else {
|
|
showStatus('Save failed: ' + (data.error || 'unknown error'), 'error');
|
|
}
|
|
} catch (err) {
|
|
showStatus('Save failed: ' + err.message, 'error');
|
|
}
|
|
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = 'Save Configuration';
|
|
});
|
|
});
|