582 lines
18 KiB
JavaScript
582 lines
18 KiB
JavaScript
const TOKEN_KEY = "gameservers-control-token";
|
|
|
|
const state = {
|
|
token: localStorage.getItem(TOKEN_KEY) || "",
|
|
session: null,
|
|
servers: [],
|
|
groups: [],
|
|
allServers: [],
|
|
};
|
|
|
|
const els = {
|
|
status: document.getElementById("status"),
|
|
sessionLabel: document.getElementById("sessionLabel"),
|
|
loginView: document.getElementById("loginView"),
|
|
appView: document.getElementById("appView"),
|
|
loginForm: document.getElementById("loginForm"),
|
|
passwordInput: document.getElementById("passwordInput"),
|
|
logoutBtn: document.getElementById("logoutBtn"),
|
|
refreshBtn: document.getElementById("refreshBtn"),
|
|
adminTab: document.getElementById("adminTab"),
|
|
logsTab: document.getElementById("logsTab"),
|
|
serversBody: document.getElementById("serversBody"),
|
|
logsBody: document.getElementById("logsBody"),
|
|
groupsList: document.getElementById("groupsList"),
|
|
createGroupForm: document.getElementById("createGroupForm"),
|
|
newGroupName: document.getElementById("newGroupName"),
|
|
newGroupPassword: document.getElementById("newGroupPassword"),
|
|
generatedPassword: document.getElementById("generatedPassword"),
|
|
cleanupServersBtn: document.getElementById("cleanupServersBtn"),
|
|
};
|
|
|
|
function setStatus(message, type = "info") {
|
|
els.status.textContent = message;
|
|
els.status.className = `status status--${type}`;
|
|
els.status.hidden = false;
|
|
}
|
|
|
|
function clearStatus() {
|
|
els.status.hidden = true;
|
|
els.status.textContent = "";
|
|
}
|
|
|
|
async function apiFetch(path, options = {}) {
|
|
const headers = new Headers(options.headers || {});
|
|
if (state.token) headers.set("Authorization", `Bearer ${state.token}`);
|
|
const isFormData = options.body instanceof FormData;
|
|
if (options.body && !isFormData && !headers.has("Content-Type")) {
|
|
headers.set("Content-Type", "application/json");
|
|
}
|
|
|
|
const response = await fetch(path, {
|
|
method: options.method || "GET",
|
|
headers,
|
|
body:
|
|
options.body && !isFormData && typeof options.body !== "string"
|
|
? JSON.stringify(options.body)
|
|
: options.body,
|
|
});
|
|
|
|
const contentType = response.headers.get("content-type") || "";
|
|
const payload = contentType.includes("application/json")
|
|
? await response.json()
|
|
: await response.text();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(payload?.error || response.statusText);
|
|
}
|
|
|
|
return payload;
|
|
}
|
|
|
|
function setAuthenticated({ token, session }) {
|
|
if (token) {
|
|
state.token = token;
|
|
localStorage.setItem(TOKEN_KEY, token);
|
|
}
|
|
state.session = session;
|
|
els.loginView.hidden = true;
|
|
els.appView.hidden = false;
|
|
els.logoutBtn.hidden = false;
|
|
els.refreshBtn.hidden = false;
|
|
els.adminTab.hidden = !session.admin;
|
|
els.logsTab.hidden = !session.admin;
|
|
els.sessionLabel.textContent = session.admin ? "Administrateur" : "Connecte";
|
|
}
|
|
|
|
function setLoggedOut() {
|
|
state.token = "";
|
|
state.session = null;
|
|
localStorage.removeItem(TOKEN_KEY);
|
|
els.loginView.hidden = false;
|
|
els.appView.hidden = true;
|
|
els.logoutBtn.hidden = true;
|
|
els.refreshBtn.hidden = true;
|
|
els.sessionLabel.textContent = "Non connecte";
|
|
switchTab("servers");
|
|
}
|
|
|
|
async function loadSession() {
|
|
if (!state.token) return setLoggedOut();
|
|
try {
|
|
const data = await apiFetch("/api/session");
|
|
setAuthenticated({ session: data.session });
|
|
await refreshAll();
|
|
} catch {
|
|
setLoggedOut();
|
|
}
|
|
}
|
|
|
|
async function refreshAll() {
|
|
await loadServers();
|
|
if (state.session?.admin) {
|
|
await Promise.all([loadAdmin(), loadLogs()]);
|
|
}
|
|
}
|
|
|
|
async function loadServers() {
|
|
const data = await apiFetch("/api/servers");
|
|
state.servers = data.servers || [];
|
|
renderServers();
|
|
}
|
|
|
|
function renderServers() {
|
|
els.serversBody.innerHTML = "";
|
|
if (!state.servers.length) {
|
|
els.serversBody.innerHTML = `<div class="empty-state">Aucun serveur visible.</div>`;
|
|
return;
|
|
}
|
|
|
|
for (const server of state.servers) {
|
|
const card = document.createElement("article");
|
|
card.className = "server-card";
|
|
const heroStyle = server.heroImage
|
|
? ` style="--server-hero-image: url('${escapeCssUrl(server.heroImage)}')"`
|
|
: "";
|
|
const secrets = server.secrets && Object.keys(server.secrets).length
|
|
? Object.entries(server.secrets)
|
|
.map(
|
|
([key, value]) => `
|
|
<div class="info-row">
|
|
<span>${escapeHtml(formatSecretLabel(key))}</span>
|
|
<code>${escapeHtml(value)}</code>
|
|
</div>
|
|
`
|
|
)
|
|
.join("")
|
|
: server.hasSecrets
|
|
? `<span class="muted">Masques</span>`
|
|
: `
|
|
<div class="info-row info-row--empty">
|
|
<span>Mot de passe</span>
|
|
<strong>aucun</strong>
|
|
</div>
|
|
`;
|
|
|
|
card.innerHTML = `
|
|
<div class="server-card__hero"${heroStyle}>
|
|
<span class="chip ${server.active ? "chip--online" : "chip--offline"}">
|
|
${server.active ? "En ligne" : "Hors ligne"}
|
|
</span>
|
|
</div>
|
|
<div class="server-card__body">
|
|
<div>
|
|
<p class="server-card__kicker">Serveur jeu</p>
|
|
<h3>${escapeHtml(server.game)}</h3>
|
|
</div>
|
|
<div class="server-card__details">
|
|
<div class="info-row">
|
|
<span>Adresse IP</span>
|
|
<code>${escapeHtml(server.address || "-")}</code>
|
|
</div>
|
|
<div class="info-row">
|
|
<span>Port</span>
|
|
<strong>${server.port ?? "-"}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="server-password">
|
|
${secrets}
|
|
</div>
|
|
</div>
|
|
<div class="server-card__actions">
|
|
<button class="btn btn--small" data-start="${escapeHtml(server.id)}" ${server.canStart ? "" : "disabled"}>
|
|
Lancer le serveur
|
|
</button>
|
|
${renderAdminEditButton(server)}
|
|
${renderAdminEditPanel(server)}
|
|
</div>
|
|
`;
|
|
els.serversBody.appendChild(card);
|
|
}
|
|
}
|
|
|
|
function renderAdminEditButton(server) {
|
|
if (!state.session?.admin) return "";
|
|
|
|
return `
|
|
<button
|
|
class="btn btn--small btn--ghost btn--icon"
|
|
data-edit-server="${escapeHtml(server.id)}"
|
|
type="button"
|
|
title="Editer le serveur"
|
|
aria-label="Editer le serveur"
|
|
>
|
|
✎
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
function renderAdminEditPanel(server) {
|
|
if (!state.session?.admin) return "";
|
|
|
|
return `
|
|
<div class="server-edit-panel" data-edit-panel="${escapeHtml(server.id)}" hidden>
|
|
${renderPasswordControls(server)}
|
|
${renderImageControls(server)}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderPasswordControls(server) {
|
|
if (!state.session?.admin) return "";
|
|
const password = getServerPasswordValue(server);
|
|
|
|
return `
|
|
<div class="password-controls">
|
|
<label class="file-control">
|
|
<span>Mot de passe</span>
|
|
<input
|
|
type="text"
|
|
value="${escapeHtml(password)}"
|
|
data-password-input="${escapeHtml(server.id)}"
|
|
autocomplete="off"
|
|
/>
|
|
</label>
|
|
<button class="btn btn--small btn--ghost" data-save-password="${escapeHtml(server.id)}" type="button">
|
|
Sauver
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderImageControls(server) {
|
|
if (!state.session?.admin) return "";
|
|
|
|
return `
|
|
<div class="image-controls">
|
|
<label class="file-control">
|
|
<span>Image</span>
|
|
<input type="file" accept="image/png,image/jpeg,image/webp" data-image-input="${escapeHtml(server.id)}" />
|
|
</label>
|
|
<div class="image-controls__actions">
|
|
<button class="btn btn--small btn--ghost" data-upload-image="${escapeHtml(server.id)}" type="button">
|
|
Envoyer
|
|
</button>
|
|
<button class="btn btn--small btn--danger" data-delete-image="${escapeHtml(server.id)}" type="button" ${server.heroImage ? "" : "disabled"}>
|
|
Retirer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function getServerPasswordValue(server) {
|
|
if (!server.secrets) return "";
|
|
return server.secrets.serverPassword || server.secrets.password || "";
|
|
}
|
|
|
|
async function startServer(serverId, button) {
|
|
button.disabled = true;
|
|
const previous = button.textContent;
|
|
button.textContent = "Lancement...";
|
|
try {
|
|
await apiFetch(`/api/servers/${encodeURIComponent(serverId)}/start`, { method: "POST" });
|
|
setStatus("Lancement demande", "success");
|
|
await refreshAll();
|
|
} catch (error) {
|
|
setStatus(error.message, "error");
|
|
button.disabled = false;
|
|
} finally {
|
|
button.textContent = previous;
|
|
}
|
|
}
|
|
|
|
async function uploadServerImage(serverId) {
|
|
const input = document.querySelector(`[data-image-input="${cssEscape(serverId)}"]`);
|
|
const file = input?.files?.[0];
|
|
if (!file) {
|
|
setStatus("Choisis une image avant l'envoi", "error");
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.set("image", file);
|
|
await apiFetch(`/api/admin/servers/${encodeURIComponent(serverId)}/image`, {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
setStatus("Image serveur mise a jour", "success");
|
|
await refreshAll();
|
|
}
|
|
|
|
async function deleteServerImage(serverId) {
|
|
await apiFetch(`/api/admin/servers/${encodeURIComponent(serverId)}/image`, {
|
|
method: "DELETE",
|
|
});
|
|
setStatus("Image serveur retiree", "success");
|
|
await refreshAll();
|
|
}
|
|
|
|
function toggleServerEditPanel(serverId) {
|
|
const panel = document.querySelector(`[data-edit-panel="${cssEscape(serverId)}"]`);
|
|
if (!panel) return;
|
|
panel.hidden = !panel.hidden;
|
|
}
|
|
|
|
async function saveServerPassword(serverId) {
|
|
const input = document.querySelector(`[data-password-input="${cssEscape(serverId)}"]`);
|
|
await apiFetch(`/api/admin/servers/${encodeURIComponent(serverId)}/password`, {
|
|
method: "PATCH",
|
|
body: { password: input?.value || "" },
|
|
});
|
|
setStatus("Mot de passe serveur mis a jour", "success");
|
|
await refreshAll();
|
|
}
|
|
|
|
async function loadAdmin() {
|
|
const data = await apiFetch("/api/admin/groups");
|
|
state.groups = data.groups || [];
|
|
state.allServers = data.servers || [];
|
|
renderGroups();
|
|
}
|
|
|
|
function renderGroups() {
|
|
els.groupsList.innerHTML = "";
|
|
for (const group of state.groups) {
|
|
const article = document.createElement("article");
|
|
article.className = "group-card";
|
|
const permissions = group.permissions || { servers: [] };
|
|
article.innerHTML = `
|
|
<div class="group-card__header">
|
|
<input class="group-name" value="${escapeHtml(group.name)}" data-name="${escapeHtml(group.id)}" />
|
|
<span class="chip">${group.admin ? "Admin" : "Groupe"}</span>
|
|
</div>
|
|
<div class="server-perms">
|
|
${state.allServers
|
|
.map(
|
|
(server) => `
|
|
<label class="check">
|
|
<input type="checkbox" data-server-perm="${escapeHtml(group.id)}" value="${escapeHtml(server.id)}" ${permissions.servers.includes(server.id) ? "checked" : ""} ${group.admin ? "disabled" : ""} />
|
|
${escapeHtml(server.game)}
|
|
</label>
|
|
`
|
|
)
|
|
.join("")}
|
|
</div>
|
|
<div class="manual-password">
|
|
<label class="file-control">
|
|
<span>Mot de passe</span>
|
|
<input
|
|
type="text"
|
|
placeholder="Nouveau mot de passe"
|
|
data-group-password="${escapeHtml(group.id)}"
|
|
autocomplete="off"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="btn btn--small" data-save-group="${escapeHtml(group.id)}">Sauver</button>
|
|
<button class="btn btn--small btn--ghost" data-set-group-password="${escapeHtml(group.id)}">Set mdp</button>
|
|
<button class="btn btn--small btn--ghost" data-regen="${escapeHtml(group.id)}">Regenerer mdp</button>
|
|
<button class="btn btn--small btn--danger" data-delete="${escapeHtml(group.id)}" ${group.id === "admin" ? "disabled" : ""}>Supprimer</button>
|
|
</div>
|
|
`;
|
|
els.groupsList.appendChild(article);
|
|
}
|
|
}
|
|
|
|
async function saveGroup(groupId) {
|
|
const name = document.querySelector(`[data-name="${cssEscape(groupId)}"]`)?.value.trim();
|
|
const servers = Array.from(document.querySelectorAll(`[data-server-perm="${cssEscape(groupId)}"]:checked`)).map(
|
|
(input) => input.value
|
|
);
|
|
|
|
await apiFetch(`/api/admin/groups/${encodeURIComponent(groupId)}`, {
|
|
method: "PATCH",
|
|
body: {
|
|
name,
|
|
permissions: { servers },
|
|
},
|
|
});
|
|
setStatus("Groupe sauvegarde", "success");
|
|
await loadAdmin();
|
|
}
|
|
|
|
async function regeneratePassword(groupId) {
|
|
const data = await apiFetch(`/api/admin/groups/${encodeURIComponent(groupId)}/regenerate-password`, {
|
|
method: "POST",
|
|
});
|
|
showGeneratedPassword(data.group.name, data.password);
|
|
await loadAdmin();
|
|
}
|
|
|
|
async function setGroupPassword(groupId) {
|
|
const input = document.querySelector(`[data-group-password="${cssEscape(groupId)}"]`);
|
|
const password = input?.value.trim() || "";
|
|
if (!password) {
|
|
setStatus("Mot de passe requis", "error");
|
|
return;
|
|
}
|
|
|
|
const data = await apiFetch(`/api/admin/groups/${encodeURIComponent(groupId)}/password`, {
|
|
method: "PATCH",
|
|
body: { password },
|
|
});
|
|
input.value = "";
|
|
showGeneratedPassword(data.group.name, data.password);
|
|
await loadAdmin();
|
|
}
|
|
|
|
async function deleteGroup(groupId) {
|
|
await apiFetch(`/api/admin/groups/${encodeURIComponent(groupId)}`, { method: "DELETE" });
|
|
setStatus("Groupe supprime", "success");
|
|
await loadAdmin();
|
|
}
|
|
|
|
async function createGroup(event) {
|
|
event.preventDefault();
|
|
const data = await apiFetch("/api/admin/groups", {
|
|
method: "POST",
|
|
body: {
|
|
name: els.newGroupName.value.trim(),
|
|
password: els.newGroupPassword.value.trim(),
|
|
permissions: { servers: [] },
|
|
},
|
|
});
|
|
els.createGroupForm.reset();
|
|
showGeneratedPassword(data.group.name, data.password);
|
|
await loadAdmin();
|
|
}
|
|
|
|
async function cleanupServers() {
|
|
const data = await apiFetch("/api/admin/servers/cleanup", { method: "POST" });
|
|
const removedCount = data.removedServers?.length || 0;
|
|
const imageCount = data.removedImages?.length || 0;
|
|
setStatus(
|
|
`Nettoyage termine: ${removedCount} configuration(s), ${imageCount} image(s) retiree(s)`,
|
|
"success"
|
|
);
|
|
await refreshAll();
|
|
}
|
|
|
|
function showGeneratedPassword(groupName, password) {
|
|
els.generatedPassword.hidden = false;
|
|
els.generatedPassword.innerHTML = `Mot de passe pour <strong>${escapeHtml(groupName)}</strong>: <code>${escapeHtml(password)}</code>`;
|
|
}
|
|
|
|
async function loadLogs() {
|
|
const data = await apiFetch("/api/logs");
|
|
renderLogs(data.logs || []);
|
|
}
|
|
|
|
function renderLogs(logs) {
|
|
els.logsBody.innerHTML = "";
|
|
if (!logs.length) {
|
|
els.logsBody.innerHTML = `<tr><td colspan="3" class="muted">Aucun lancement sur 7 jours.</td></tr>`;
|
|
return;
|
|
}
|
|
|
|
for (const log of logs) {
|
|
const tr = document.createElement("tr");
|
|
tr.innerHTML = `
|
|
<td>${escapeHtml(new Date(log.createdAt).toLocaleString())}</td>
|
|
<td>${escapeHtml(log.groupName || log.groupId || "-")}</td>
|
|
<td>${escapeHtml(log.serverName || log.serverId || "-")}</td>
|
|
`;
|
|
els.logsBody.appendChild(tr);
|
|
}
|
|
}
|
|
|
|
function switchTab(tabName) {
|
|
document.querySelectorAll(".tab").forEach((tab) => {
|
|
tab.classList.toggle("tab--active", tab.dataset.tab === tabName);
|
|
});
|
|
document.querySelectorAll("[data-panel]").forEach((panel) => {
|
|
panel.hidden = panel.dataset.panel !== tabName;
|
|
});
|
|
}
|
|
|
|
function escapeHtml(value = "") {
|
|
return String(value)
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
function escapeCssUrl(value = "") {
|
|
return String(value).replace(/['"\\\n\r]/g, "");
|
|
}
|
|
|
|
function formatSecretLabel(key = "") {
|
|
if (key === "password" || key === "serverPassword") {
|
|
return "Mot de passe";
|
|
}
|
|
|
|
return key;
|
|
}
|
|
|
|
function cssEscape(value) {
|
|
return CSS.escape(value);
|
|
}
|
|
|
|
els.loginForm.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
clearStatus();
|
|
try {
|
|
const data = await apiFetch("/api/login", {
|
|
method: "POST",
|
|
body: { password: els.passwordInput.value },
|
|
});
|
|
els.passwordInput.value = "";
|
|
setAuthenticated(data);
|
|
await refreshAll();
|
|
} catch (error) {
|
|
setStatus(error.message, "error");
|
|
}
|
|
});
|
|
|
|
els.logoutBtn.addEventListener("click", async () => {
|
|
try {
|
|
await apiFetch("/api/logout", { method: "POST" });
|
|
} catch {
|
|
// Local logout remains valid if the server session already expired.
|
|
}
|
|
setLoggedOut();
|
|
});
|
|
|
|
els.refreshBtn.addEventListener("click", () => refreshAll().catch((error) => setStatus(error.message, "error")));
|
|
els.createGroupForm.addEventListener("submit", (event) =>
|
|
createGroup(event).catch((error) => setStatus(error.message, "error"))
|
|
);
|
|
els.cleanupServersBtn?.addEventListener("click", () =>
|
|
cleanupServers().catch((error) => setStatus(error.message, "error"))
|
|
);
|
|
|
|
document.addEventListener("click", (event) => {
|
|
const target = event.target;
|
|
if (!(target instanceof HTMLElement)) return;
|
|
|
|
const tab = target.closest("[data-tab]");
|
|
if (tab) switchTab(tab.dataset.tab);
|
|
|
|
const startId = target.dataset.start;
|
|
if (startId) startServer(startId, target).catch((error) => setStatus(error.message, "error"));
|
|
|
|
const saveId = target.dataset.saveGroup;
|
|
if (saveId) saveGroup(saveId).catch((error) => setStatus(error.message, "error"));
|
|
|
|
const regenId = target.dataset.regen;
|
|
if (regenId) regeneratePassword(regenId).catch((error) => setStatus(error.message, "error"));
|
|
|
|
const setPasswordId = target.dataset.setGroupPassword;
|
|
if (setPasswordId) setGroupPassword(setPasswordId).catch((error) => setStatus(error.message, "error"));
|
|
|
|
const deleteId = target.dataset.delete;
|
|
if (deleteId) deleteGroup(deleteId).catch((error) => setStatus(error.message, "error"));
|
|
|
|
const uploadImageId = target.dataset.uploadImage;
|
|
if (uploadImageId) uploadServerImage(uploadImageId).catch((error) => setStatus(error.message, "error"));
|
|
|
|
const deleteImageId = target.dataset.deleteImage;
|
|
if (deleteImageId) deleteServerImage(deleteImageId).catch((error) => setStatus(error.message, "error"));
|
|
|
|
const editServerId = target.dataset.editServer;
|
|
if (editServerId) toggleServerEditPanel(editServerId);
|
|
|
|
const savePasswordId = target.dataset.savePassword;
|
|
if (savePasswordId) saveServerPassword(savePasswordId).catch((error) => setStatus(error.message, "error"));
|
|
});
|
|
|
|
loadSession();
|