Fretux/Discord_bot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dashboard UI and secure guild permissions

Browse Source
This commit is contained in:
Fretux
2026-01-27 15:40:06 +01:00
parent 06fdd57aa0
commit 4fe1831386
8 changed files with 1039 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+60 -188
View File
@@ -1,39 +1,9 @@
const state = {
guilds: [],
selectedGuildId: null,
};
const elements = {
loginButton: document.getElementById('loginButton'),
logoutButton: document.getElementById('logoutButton'),
sessionStatus: document.getElementById('sessionStatus'),
guildCard: document.getElementById('guildCard'),
warningsCard: document.getElementById('warningsCard'),
guildSelect: document.getElementById('guildSelect'),
permissionsEditor: document.getElementById('permissionsEditor'),
updatePermissionsButton: document.getElementById('updatePermissionsButton'),
rolesList: document.getElementById('rolesList'),
warningUserId: document.getElementById('warningUserId'),
loadWarningsButton: document.getElementById('loadWarningsButton'),
warningsList: document.getElementById('warningsList'),
newWarningUserId: document.getElementById('newWarningUserId'),
warningReason: document.getElementById('warningReason'),
addWarningButton: document.getElementById('addWarningButton'),
warningResult: document.getElementById('warningResult'),
};
const setStatus = (message, isAuthed) => {
elements.sessionStatus.textContent = message;
elements.logoutButton.hidden = !isAuthed;
elements.guildCard.hidden = !isAuthed;
elements.warningsCard.hidden = !isAuthed;
};
const fetchJson = async (url, options) => {
const fetchJson = async (url, options = {}) => {
const response = await fetch(url, {
credentials: 'include',
headers: {
'Content-Type': 'application/json',
...(options.headers || {}),
},
...options,
});
@@ -41,183 +11,85 @@ const fetchJson = async (url, options) => {
if (!response.ok) {
const body = await response.json().catch(() => ({}));
const message = body.error || `Request failed with status ${response.status}`;
throw new Error(message);
const error = new Error(message);
error.details = body.details;
throw error;
}
return response.json().catch(() => ({}));
};
const loadGuilds = async () => {
const data = await fetchJson('/api/guilds');
state.guilds = data.guilds || [];
elements.guildSelect.innerHTML = '';
state.guilds.forEach((guild) => {
const option = document.createElement('option');
option.value = guild.id;
option.textContent = guild.name;
elements.guildSelect.appendChild(option);
});
if (state.guilds.length > 0) {
state.selectedGuildId = state.guilds[0].id;
elements.guildSelect.value = state.selectedGuildId;
await loadGuildDetails();
}
};
const renderRoles = (roles) => {
elements.rolesList.innerHTML = '';
roles.forEach((role) => {
const item = document.createElement('li');
item.textContent = `${role.name} (${role.id})`;
elements.rolesList.appendChild(item);
});
if (roles.length === 0) {
const item = document.createElement('li');
item.textContent = 'No roles returned.';
elements.rolesList.appendChild(item);
}
};
const loadGuildDetails = async () => {
if (!state.selectedGuildId) {
const setBanner = (bannerEl, message, type = 'error') => {
if (!bannerEl) {
return;
}
const [permissionsData, rolesData] = await Promise.all([
fetchJson(`/api/guilds/${state.selectedGuildId}/permissions`),
fetchJson(`/api/guilds/${state.selectedGuildId}/roles`),
]);
elements.permissionsEditor.value = JSON.stringify(permissionsData.permissions || {}, null, 2);
renderRoles(rolesData.roles || []);
bannerEl.textContent = message;
bannerEl.classList.remove('banner--error', 'banner--success');
bannerEl.classList.add(type === 'success' ? 'banner--success' : 'banner--error');
bannerEl.style.display = 'block';
};
const updatePermissions = async () => {
if (!state.selectedGuildId) {
const clearBanner = (bannerEl) => {
if (!bannerEl) {
return;
}
const rawValue = elements.permissionsEditor.value.trim();
if (!rawValue) {
return;
}
let payload;
try {
payload = JSON.parse(rawValue);
} catch (error) {
elements.permissionsEditor.focus();
throw new Error('Permissions JSON is invalid.');
}
const data = await fetchJson(`/api/guilds/${state.selectedGuildId}/permissions`, {
method: 'PATCH',
body: JSON.stringify(payload),
});
elements.permissionsEditor.value = JSON.stringify(data.permissions || {}, null, 2);
bannerEl.textContent = '';
bannerEl.style.display = 'none';
};
const loadWarnings = async (userId) => {
if (!state.selectedGuildId || !userId) {
return;
const formatUserDisplay = (user) => {
if (!user) {
return 'Not signed in';
}
const data = await fetchJson(`/api/guilds/${state.selectedGuildId}/warnings/${userId}`);
elements.warningsList.innerHTML = '';
const warnings = data.warnings || [];
if (warnings.length === 0) {
const item = document.createElement('li');
item.textContent = 'No warnings found.';
elements.warningsList.appendChild(item);
return;
}
warnings.forEach((warning) => {
const item = document.createElement('li');
const issuedAt = warning.createdAt ? new Date(warning.createdAt).toLocaleString() : 'Unknown date';
item.textContent = `${warning.reason} — ${issuedAt}`;
elements.warningsList.appendChild(item);
});
return `${user.username}#${user.discriminator ?? '0000'}`;
};
const addWarning = async () => {
if (!state.selectedGuildId) {
const initIndexPage = async () => {
const sessionStatus = document.getElementById('sessionStatus');
const loginButton = document.getElementById('loginButton');
const dashboardButton = document.getElementById('dashboardButton');
const logoutButton = document.getElementById('logoutButton');
const banner = document.getElementById('banner');
if (!sessionStatus || !loginButton) {
return;
}
const userId = elements.newWarningUserId.value.trim();
const reason = elements.warningReason.value.trim();
if (!userId || !reason) {
elements.warningResult.textContent = 'User ID and reason are required.';
return;
}
const data = await fetchJson(`/api/guilds/${state.selectedGuildId}/warnings/${userId}`, {
method: 'POST',
body: JSON.stringify({ reason }),
});
elements.warningResult.textContent = `Warning added: ${data.warning?.reason || reason}`;
elements.warningReason.value = '';
};
const showError = (message) => {
elements.warningResult.textContent = message;
};
const init = async () => {
elements.loginButton.addEventListener('click', () => {
window.location.href = '/auth/discord';
});
elements.logoutButton.addEventListener('click', async () => {
await fetch('/auth/logout', { method: 'POST', credentials: 'include' });
setStatus('Logged out. Sign in to manage guilds.', false);
});
elements.guildSelect.addEventListener('change', async (event) => {
state.selectedGuildId = event.target.value;
await loadGuildDetails();
});
elements.updatePermissionsButton.addEventListener('click', async () => {
elements.warningResult.textContent = '';
try {
await updatePermissions();
elements.warningResult.textContent = 'Permissions updated successfully.';
} catch (error) {
showError(error.message);
}
});
elements.loadWarningsButton.addEventListener('click', async () => {
try {
await loadWarnings(elements.warningUserId.value.trim());
} catch (error) {
showError(error.message);
}
});
elements.addWarningButton.addEventListener('click', async () => {
try {
await addWarning();
} catch (error) {
showError(error.message);
}
});
try {
await loadGuilds();
setStatus('Authenticated. Choose a guild to get started.', true);
const data = await fetchJson('/api/me');
sessionStatus.textContent = `Signed in as ${formatUserDisplay(data.user)}.`;
loginButton.hidden = true;
dashboardButton.hidden = false;
logoutButton.hidden = false;
clearBanner(banner);
} catch (error) {
setStatus('Sign in with Discord to manage your guilds.', false);
sessionStatus.textContent = 'You are not signed in yet.';
loginButton.hidden = false;
dashboardButton.hidden = true;
logoutButton.hidden = true;
setBanner(banner, 'Log in with Discord to access the dashboard.', 'error');
}
logoutButton?.addEventListener('click', async () => {
try {
await fetch('/auth/logout', {method: 'POST', credentials: 'include'});
sessionStatus.textContent = 'Logged out successfully.';
loginButton.hidden = false;
dashboardButton.hidden = true;
logoutButton.hidden = true;
} catch (error) {
setBanner(banner, error.message || 'Failed to log out.', 'error');
}
});
};
init();
document.addEventListener('DOMContentLoaded', () => {
initIndexPage();
});
window.dashboardApi = {
fetchJson,
setBanner,
clearBanner,
formatUserDisplay,
};