1.2.0

README.md

@@ -9,7 +9,7 @@
 <div align="center">
 
 ![license](https://img.shields.io/badge/license-AGPL--3.0-blue?style=flat-square)
-![version](https://img.shields.io/badge/version-1.1.0-brightgreen?style=flat-square)
+![version](https://img.shields.io/badge/version-1.2.0--beta.7-orange?style=flat-square)
 ![docker](https://img.shields.io/badge/docker-supported-blue?style=flat-square)
 
 [![discord](https://img.shields.io/discord/667479986214666272?logo=discord&logoColor=white&style=flat-square)](https://diamonddigital.dev/discord)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "craftbox",
-    "version": "1.1.0",
+    "version": "1.2.0-beta.7",
     "description": "A modern self-hosted platform for managing Minecraft servers with built-in mod support.",
     "main": "src/server.js",
     "funding": {
@@ -31,27 +31,27 @@
     "dependencies": {
         "archiver": "^7.0.1",
         "bcrypt": "^6.0.0",
-        "better-sqlite3": "^13.0.1",
+        "better-sqlite3": "^13.0.2",
         "bootstrap": "^5.3.8",
         "chart.js": "^4.5.1",
         "content-disposition": "^1.0.1",
         "ejs": "^6.0.1",
         "express": "^5.2.1",
-        "express-rate-limit": "^8.6.0",
+        "express-rate-limit": "^8.6.1",
         "express-session": "^1.19.0",
         "material-icons": "^1.13.14",
         "multer": "^2.1.1",
         "node-stream-zip": "^1.16.0",
         "passport": "^0.7.0",
         "passport-local": "^1.0.0",
         "quick.db": "^9.1.7",
-        "sharp": "^0.34.5",
+        "sharp": "^0.35.3",
         "uuid": "^14.0.1",
         "ws": "^8.21.1"
     },
     "allowScripts": {
         "bcrypt@6.0.0": true,
-        "better-sqlite3@13.0.1": true,
-        "sharp@0.34.5": true
+        "better-sqlite3@13.0.2": true,
+        "sharp@0.35.3": true
     }
 }

public/js/account.js

@@ -1,6 +1,4 @@
 document.addEventListener('DOMContentLoaded', function () {
-    var csrfToken = document.querySelector('input[name="_csrf"]').value;
-
     // ═══════════════════════════════════════════
     // Change Username / Password
     // ═══════════════════════════════════════════
@@ -105,15 +103,11 @@ document.addEventListener('DOMContentLoaded', function () {
             showOverlay('Generating key...', 'Please wait while the key is created.');
 
             try {
-                var res = await fetch('/api/v1/account/apikeys', {
+                var res = await apiFetch('/api/v1/account/apikeys', {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRF-Token': csrfToken
-                    },
-                    body: JSON.stringify({ name: name })
+                    body: { name: name }
                 });
-                var data = await res.json().catch(function () { return {}; });
+                var data = res.data || {};
                 if (!res.ok) {
                     hideOverlay();
                     confirmCreateBtn.disabled = false;
@@ -186,13 +180,12 @@ document.addEventListener('DOMContentLoaded', function () {
             showOverlay('Deleting key...', 'Please wait while the key is removed.');
 
             try {
-                var res = await fetch('/api/v1/account/apikeys/' + encodeURIComponent(pendingDeleteId), {
-                    method: 'DELETE',
-                    headers: { 'X-CSRF-Token': csrfToken }
+                var res = await apiFetch('/api/v1/account/apikeys/' + encodeURIComponent(pendingDeleteId), {
+                    method: 'DELETE'
                 });
 
                 if (!res.ok && res.status !== 204) {
-                    var data = await res.json().catch(function () { return {}; });
+                    var data = res.data || {};
                     hideOverlay();
                     confirmDeleteBtn.disabled = false;
                     showToast(data.message || data.error || 'Failed to delete key.', 'danger');

public/js/app.js

@@ -39,9 +39,42 @@ async function apiFetch(path, options) {
     if (res.status !== 204) {
         try { data = await res.json(); } catch (_) { data = null; }
     }
+    if (res.status === 401) _handleSessionExpired();
     return { ok: res.ok, status: res.status, data: data };
 }
 
+// ── Session expiry ──
+// Sessions are a 1-hour rolling idle timeout, so a tab left open overnight is
+// signed out without anything on screen saying so. Every frontend call goes to
+// /api/v1, which is guarded by ensureApiAuth ahead of CSRF validation, so an
+// expired session is always a clean 401 — whose bare {error:'unauthorized'}
+// body would otherwise reach the user as an unexplained "unauthorized" toast.
+// Explain it instead and send them to sign in; ensureAuth's returnTo brings
+// them back to the page they were on.
+// The latch matters: pages fire several calls at once, and without it each one
+// queues its own toast and races its own redirect.
+var _sessionExpiredHandled = false;
+function _handleSessionExpired() {
+    if (_sessionExpiredHandled) return;
+    if (window.location.pathname === '/login') return;
+    _sessionExpiredHandled = true;
+    flashToast('Your session has expired. Please sign in again.', 'warning');
+    window.location.href = '/login';
+}
+
+// The server rejects a WebSocket upgrade from an expired session with a 401,
+// but browsers hide the handshake status from JS — all a client sees is a close
+// with code 1006, identical to a network blip. So once a socket has failed to
+// reconnect a few times, spend one cheap authenticated request to find out
+// which it is: a 401 routes into the handling above, anything else means the
+// panel is simply unreachable and the existing backoff should carry on.
+// Called from every reconnect loop; probes at the 3rd failure and every 3rd
+// after, which the 30s backoff cap keeps to at most one probe per 90s.
+function probeSessionAfterFailures(attempts) {
+    if (attempts < 3 || attempts % 3 !== 0) return;
+    apiFetch('/api/v1/servers');
+}
+
 // ── Client-side date formatting ──
 // Formats an ISO string to the user's local date/time.
 // style: 'datetime' (default) = full date+time, 'date' = date only
@@ -56,6 +89,18 @@ function formatDate(isoString, style) {
     });
 }
 
+// Formats a Date as a short relative age: "just now", "5m ago", "2h ago", "3d ago".
+function timeAgo(date) {
+    var seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+    if (seconds < 60) return 'just now';
+    var minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return minutes + 'm ago';
+    var hours = Math.floor(minutes / 60);
+    if (hours < 24) return hours + 'h ago';
+    var days = Math.floor(hours / 24);
+    return days + 'd ago';
+}
+
 // Auto-format all .format-date elements on page load
 document.querySelectorAll('.format-date[data-iso]').forEach(function (el) {
     el.textContent = formatDate(el.dataset.iso, el.dataset.style);
@@ -209,6 +254,110 @@ function guardFileInput(input, extensions, message) {
     });
 }
 
+// ── Live state gating ──
+// Controls that require a stopped server used to be gated once, server-side, at
+// render time. The page then receives live state over the WebSocket, so the gate
+// froze at whatever the state was when the page loaded: stop a server and the
+// upload button stayed dead until a manual reload.
+//
+// Mark a control `data-enable-when="stopped crashed"` and it tracks the live
+// state. `data-show-when` / `data-hide-when` toggle `.d-none` on the same basis
+// — use them for the explanatory alerts that accompany a gate.
+// Optional `data-disabled-title` / `data-enabled-title` swap the tooltip.
+//
+// The live state is read from #server-nav-header's data-state, which both
+// WebSocket owners (serverState.js and console.js) write on every update.
+function currentServerState() {
+    var el = document.getElementById('server-nav-header');
+    return (el && el.dataset.state) || '';
+}
+
+function isServerStopped(state) {
+    return ['stopped', 'crashed'].indexOf(state || currentServerState()) !== -1;
+}
+
+function applyStateGates(state) {
+    state = state || currentServerState();
+
+    document.querySelectorAll('[data-enable-when]').forEach(function (el) {
+        var ok = el.dataset.enableWhen.split(/\s+/).indexOf(state) !== -1;
+        if ('disabled' in el) {
+            el.disabled = !ok;
+        } else {
+            // Anchors have no disabled property. Bootstrap's .disabled kills
+            // pointer events on .btn; the attributes keep it out of the tab
+            // order and announce the state.
+            el.classList.toggle('disabled', !ok);
+            el.setAttribute('aria-disabled', String(!ok));
+            if (ok) el.removeAttribute('tabindex');
+            else el.setAttribute('tabindex', '-1');
+        }
+        var title = ok ? el.dataset.enabledTitle : el.dataset.disabledTitle;
+        if (title !== undefined) el.title = title;
+    });
+
+    document.querySelectorAll('[data-show-when]').forEach(function (el) {
+        el.classList.toggle('d-none', el.dataset.showWhen.split(/\s+/).indexOf(state) === -1);
+    });
+
+    document.querySelectorAll('[data-hide-when]').forEach(function (el) {
+        el.classList.toggle('d-none', el.dataset.hideWhen.split(/\s+/).indexOf(state) !== -1);
+    });
+
+    // Pages with bespoke gating (button labels, request payloads) listen for
+    // this rather than duplicating the attribute walk.
+    document.dispatchEvent(new CustomEvent('craftbox:stategates', { detail: { state: state } }));
+}
+
+document.addEventListener('craftbox:state', function (e) {
+    applyStateGates((e.detail && e.detail.state) || currentServerState());
+});
+
+// Server-rendered markup is already correct on load; this only matters for
+// elements whose gate attributes were added without a matching server-side
+// render, and it keeps the two paths from drifting.
+applyStateGates();
+
+// ── Lock every control inside a container during an async operation ──
+// Buttons that dismiss a modal are deliberately left enabled: the upload flows
+// wire `hide.bs.modal` to abort the transfer, so Cancel / X / Esc must stay
+// reachable while everything else is frozen.
+// Forms are marked [data-busy] so the required-field validator below cannot
+// re-enable the submit button out from under the lock.
+// Unlocking re-enables every control, so callers that derive a button's state
+// from validation should re-run that check afterwards.
+function setControlsLocked(root, locked) {
+    if (!root) return;
+    root.querySelectorAll('input, select, textarea, button:not([data-bs-dismiss="modal"])')
+        .forEach(function (el) { el.disabled = locked; });
+
+    var forms = Array.prototype.slice.call(root.querySelectorAll('form'));
+    if (root.tagName === 'FORM') forms.push(root);
+    forms.forEach(function (form) {
+        if (locked) form.setAttribute('data-busy', '');
+        else form.removeAttribute('data-busy');
+    });
+}
+
+// ── Centre form fields left alone on their row ──
+// A .row down to one visible column renders as a lopsided half-width field
+// pinned to the left edge: the create form's port field once modpack mode
+// hides the version picker, or Assign Group, which sits alone by design.
+// Centre those, and un-centre again if a sibling column comes back — callers
+// with columns that appear and disappear re-run this as the layout changes.
+// `root` scopes it to one form; every other row on the page is left alone.
+function centerLoneRowItems(root) {
+    if (!root) return;
+    root.querySelectorAll('.row').forEach(function (row) {
+        var cols = row.querySelectorAll(':scope > [class*="col-"]');
+        if (cols.length === 0) return;
+        var visible = Array.prototype.filter.call(cols, function (c) {
+            return !c.classList.contains('d-none');
+        });
+        row.classList.toggle('justify-content-center', visible.length === 1);
+    });
+}
+
 // ── Required field validation — disable submit until all required fields are filled ──
 // Applies to any <form> with a [data-validate-required] submit button inside it.
 // The button stays disabled/muted until every [required] input in the form has a value.
@@ -219,6 +368,9 @@ function guardFileInput(input, extensions, message) {
         if (!form) return;
 
         function check() {
+            // A busy form is locked by setControlsLocked — leave its submit
+            // button alone or an incidental input/change event unlocks it.
+            if (form.hasAttribute('data-busy')) return;
             var fields = form.querySelectorAll('[required]');
             var allFilled = true;
             fields.forEach(function (f) {

public/js/backups.js

@@ -58,11 +58,8 @@
     document.addEventListener('craftbox:operation', handleOperation);
 
     function resetBackupButton() {
-        var btn = document.getElementById('confirm-backup-btn');
-        if (btn) {
-            btn.disabled = false;
-            btn.textContent = needsStop ? 'Stop & Backup' : 'Create Backup';
-        }
+        if (confirmBackupBtn) confirmBackupBtn.disabled = false;
+        refreshBackupButton();
     }
     function resetRestoreButton() {
         var btn = document.getElementById('confirm-restore-btn');
@@ -77,10 +74,25 @@
     var createBackupBtn = document.getElementById('create-backup-btn');
     var backupForm = document.getElementById('backup-form');
     var backupNameInput = document.getElementById('backupName');
-    var backupStartAfterInput = document.getElementById('backupStartAfter');
     var startAfterBackupCheckbox = document.getElementById('startAfterBackup');
-    var stopFirstInput = document.getElementById('backupStopFirst');
-    var needsStop = stopFirstInput && stopFirstInput.value === 'true';
+    var confirmBackupBtn = document.getElementById('confirm-backup-btn');
+
+    // Whether a backup has to stop the server first depends on the state at the
+    // moment you press the button, not the state the page was rendered with.
+    function needsStopNow() {
+        return !isServerStopped();
+    }
+
+    // Keep the confirm button honest as the state changes underneath the page.
+    function refreshBackupButton() {
+        if (!confirmBackupBtn) return;
+        var stop = needsStopNow();
+        confirmBackupBtn.classList.toggle('btn-warning', stop);
+        confirmBackupBtn.classList.toggle('btn-success', !stop);
+        confirmBackupBtn.textContent = stop ? 'Stop & Backup' : 'Create Backup';
+    }
+    document.addEventListener('craftbox:stategates', refreshBackupButton);
+    refreshBackupButton();
 
     if (createBackupBtn) {
         createBackupBtn.addEventListener('click', function () {
@@ -97,11 +109,6 @@
         });
     }
 
-    if (startAfterBackupCheckbox && backupStartAfterInput) {
-        startAfterBackupCheckbox.addEventListener('change', function () {
-            backupStartAfterInput.value = startAfterBackupCheckbox.checked ? 'true' : 'false';
-        });
-    }
 
     if (backupForm) {
         backupForm.addEventListener('submit', async function (e) {
@@ -114,16 +121,19 @@
                 btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Creating...';
             }
             createBackupModal.hide();
-            var overlayTitle = needsStop ? 'Stopping server & creating backup...' : 'Creating backup...';
+            var stopFirst = needsStopNow();
+            var overlayTitle = stopFirst ? 'Stopping server & creating backup...' : 'Creating backup...';
             showOverlay(overlayTitle, 'Compressing server files. This may take a moment.');
 
             var name = backupNameInput ? backupNameInput.value.trim() : 'Manual Backup';
             var res = await apiFetch('/api/v1/servers/' + serverId + '/backups', {
                 method: 'POST',
                 body: {
                     name: name || 'Manual Backup',
-                    stopFirst: stopFirstInput ? stopFirstInput.value : 'false',
-                    startAfter: backupStartAfterInput ? backupStartAfterInput.value : 'false'
+                    stopFirst: stopFirst ? 'true' : 'false',
+                    // Only meaningful when we're stopping it ourselves.
+                    startAfter: (stopFirst && startAfterBackupCheckbox && startAfterBackupCheckbox.checked)
+                        ? 'true' : 'false'
                 }
             });
             if (!res.ok) {