MVP version

public/scripts/app.js

@@ -0,0 +1,583 @@
+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}>
+        <div class="server-card__icon" aria-hidden="true"></div>
+        <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, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+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();