From bc2b6544acb9fddf375be91b945e431b4aa97415 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 09:44:01 +0200
Subject: [PATCH 01/13] style: align account creation flow with new login split
 layout

---
 public/index.html |   4 +-
 public/js/app.js  | 204 +++++++++++++++++++++++++---------------------
 2 files changed, 115 insertions(+), 93 deletions(-)

diff --git a/public/index.html b/public/index.html
index f02948a..b7072df 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,7 +17,7 @@
 
 <div id="app"></div>
 
-  <script src="/js/app.js?v=5"></script>
-  <script src="/js/admin.js?v=5"></script>
+  <script src="/js/app.js?v=6"></script>
+  <script src="/js/admin.js?v=6"></script>
 </body>
 </html>
diff --git a/public/js/app.js b/public/js/app.js
index 108e307..a391eb8 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -690,44 +690,48 @@ function renderLoginPage() {
 function renderRegisterPage() {
   const app = $('#app');
   app.innerHTML = html`
-    <div class="auth-page">
-      <div class="auth-card">
-        <div class="auth-logo">
+    <div class="login-page">
+      <div class="login-left">
+        <div class="login-left-top">
           <img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
-          <span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
+          <span>| Dashboard</span>
         </div>
-        <h1 class="auth-title">Create account</h1>
-        <p class="auth-subtitle">Start hosting for free</p>
-        <form id="register-form">
-          <div class="auth-error"></div>
-          <div class="form-group">
-            <label for="reg-email">Email</label>
-            <input type="email" id="reg-email" placeholder="your@email.com" required autocomplete="email" />
-          </div>
-          <div class="form-group">
-            <label for="reg-username">Username</label>
-            <input type="text" id="reg-username" placeholder="myusername" required autocomplete="username" />
-          </div>
-          <div class="form-group">
-            <label for="reg-password">Password</label>
-            <input type="password" id="reg-password" placeholder="At least 8 characters" required autocomplete="new-password" />
-          </div>
-          <div class="consent-group">
-            <label class="custom-checkbox">
-              <input type="checkbox" id="reg-rgpd-consent" required />
-              <span class="checkmark"></span>
-            </label>
-            <label for="reg-rgpd-consent">
-              I agree to the privacy policy and consent to the processing of my personal data (email, username, IP address) for account management purposes. <span style="color:var(--accent-red)">*</span>
-            </label>
-          </div>
-          <button type="submit" class="btn btn-primary btn-full" id="register-btn">
-            Create Account
-          </button>
+      </div>
+      <div class="login-right">
+        <div class="login-card">
+          <h1 class="auth-title">Create account</h1>
+          <p class="auth-subtitle">Start hosting for free</p>
+          <form id="register-form">
+            <div class="auth-error"></div>
+            <div class="form-group">
+              <label for="reg-email">Email</label>
+              <input type="email" id="reg-email" placeholder="your@email.com" required autocomplete="email" />
+            </div>
+            <div class="form-group">
+              <label for="reg-username">Username</label>
+              <input type="text" id="reg-username" placeholder="myusername" required autocomplete="username" />
+            </div>
+            <div class="form-group">
+              <label for="reg-password">Password</label>
+              <input type="password" id="reg-password" placeholder="At least 8 characters" required autocomplete="new-password" />
+            </div>
+            <div class="consent-group">
+              <label class="custom-checkbox">
+                <input type="checkbox" id="reg-rgpd-consent" required />
+                <span class="checkmark"></span>
+              </label>
+              <label for="reg-rgpd-consent">
+                I agree to the privacy policy and consent to the processing of my personal data (email, username, IP address) for account management purposes. <span style="color:var(--accent-red)">*</span>
+              </label>
+            </div>
+            <button type="submit" class="btn btn-primary btn-full" id="register-btn">
+              Create Account
+            </button>
 
-        </form>
-        <div class="auth-footer">
-          Already have an account? <a href="/login" id="go-login">Sign in</a>
+          </form>
+          <div class="auth-footer">
+            Already have an account? <a href="/login" id="go-login">Sign in</a>
+          </div>
         </div>
       </div>
     </div>
@@ -918,16 +922,20 @@ async function handleRegister(e) {
 async function renderVerifyEmail(token) {
   const app = $('#app');
   app.innerHTML = html`
-    <div class="auth-page">
-      <div class="auth-card" style="text-align:center;">
-        <div class="auth-logo">
+    <div class="login-page">
+      <div class="login-left">
+        <div class="login-left-top">
           <img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
-          <span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
+          <span>| Dashboard</span>
         </div>
-        <div style="margin:24px 0 16px;">
-          <span class="spinner" style="width:48px;height:48px;"></span>
+      </div>
+      <div class="login-right">
+        <div class="login-card" style="text-align:center;">
+          <div style="margin:0 auto 24px;width:fit-content;">
+            <span class="spinner" style="width:48px;height:48px;"></span>
+          </div>
+          <h1 class="auth-title">Verifying your email...</h1>
         </div>
-        <h1 class="auth-title">Verifying your email...</h1>
       </div>
     </div>
   `;
@@ -935,19 +943,23 @@ async function renderVerifyEmail(token) {
 
   if (!token) {
     app.innerHTML = html`
-      <div class="auth-page">
-        <div class="auth-card" style="text-align:center;">
-          <div class="auth-logo">
+      <div class="login-page">
+        <div class="login-left">
+          <div class="login-left-top">
             <img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
-            <span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
-          </div>
-          <div style="margin:24px 0 16px;">
-            <i data-lucide="x-circle" style="width:48px;height:48px;color:var(--accent-red);"></i>
+            <span>| Dashboard</span>
           </div>
-          <h1 class="auth-title">Invalid Link</h1>
-          <p class="auth-subtitle">This verification link is invalid. Please try registering again.</p>
-          <div style="margin-top:24px;">
-            <a href="/signup" class="btn btn-primary">Create Account</a>
+        </div>
+        <div class="login-right">
+          <div class="login-card" style="text-align:center;">
+            <div style="margin:0 auto 24px;width:fit-content;">
+              <i data-lucide="x-circle" style="width:48px;height:48px;color:var(--accent-red);"></i>
+            </div>
+            <h1 class="auth-title">Invalid Link</h1>
+            <p class="auth-subtitle">This verification link is invalid. Please try registering again.</p>
+            <div style="margin-top:24px;">
+              <a href="/signup" class="btn btn-primary">Create Account</a>
+            </div>
           </div>
         </div>
       </div>
@@ -961,19 +973,23 @@ async function renderVerifyEmail(token) {
 
     if (data.alreadyVerified) {
       app.innerHTML = html`
-        <div class="auth-page">
-          <div class="auth-card" style="text-align:center;">
-            <div class="auth-logo">
+        <div class="login-page">
+          <div class="login-left">
+            <div class="login-left-top">
               <img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
-              <span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
+              <span>| Dashboard</span>
             </div>
-            <div style="margin:24px 0 16px;">
-              <i data-lucide="check-circle" style="width:48px;height:48px;color:var(--accent-green);"></i>
-            </div>
-            <h1 class="auth-title">Already Verified</h1>
-            <p class="auth-subtitle">Your email was already verified. You can sign in below.</p>
-            <div style="margin-top:24px;">
-              <a href="/login" class="btn btn-primary">Sign In</a>
+          </div>
+          <div class="login-right">
+            <div class="login-card" style="text-align:center;">
+              <div style="margin:0 auto 24px;width:fit-content;">
+                <i data-lucide="check-circle" style="width:48px;height:48px;color:var(--accent-green);"></i>
+              </div>
+              <h1 class="auth-title">Already Verified</h1>
+              <p class="auth-subtitle">Your email was already verified. You can sign in below.</p>
+              <div style="margin-top:24px;">
+                <a href="/login" class="btn btn-primary">Sign In</a>
+              </div>
             </div>
           </div>
         </div>
@@ -991,19 +1007,23 @@ async function renderVerifyEmail(token) {
     showToast('Email verified successfully!', 'success');
   } catch (err) {
     app.innerHTML = html`
-      <div class="auth-page">
-        <div class="auth-card" style="text-align:center;">
-          <div class="auth-logo">
+      <div class="login-page">
+        <div class="login-left">
+          <div class="login-left-top">
             <img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
-            <span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
-          </div>
-          <div style="margin:24px 0 16px;">
-            <i data-lucide="x-circle" style="width:48px;height:48px;color:var(--accent-red);"></i>
+            <span>| Dashboard</span>
           </div>
-          <h1 class="auth-title">Verification Failed</h1>
-          <p class="auth-subtitle">${escapeHtml(err.message)}</p>
-          <div style="margin-top:24px;">
-            <a href="/signup" class="btn btn-primary">Create Account</a>
+        </div>
+        <div class="login-right">
+          <div class="login-card" style="text-align:center;">
+            <div style="margin:0 auto 24px;width:fit-content;">
+              <i data-lucide="x-circle" style="width:48px;height:48px;color:var(--accent-red);"></i>
+            </div>
+            <h1 class="auth-title">Verification Failed</h1>
+            <p class="auth-subtitle">${escapeHtml(err.message)}</p>
+            <div style="margin-top:24px;">
+              <a href="/signup" class="btn btn-primary">Create Account</a>
+            </div>
           </div>
         </div>
       </div>
@@ -1185,25 +1205,27 @@ async function renderChangeEmailVerify(token) {
 function renderVerificationSent(email) {
   const app = $('#app');
   app.innerHTML = html`
-    <div class="auth-page">
-      <div class="auth-card" style="text-align:center;">
-        <div class="auth-logo">
+    <div class="login-page">
+      <div class="login-left">
+        <div class="login-left-top">
           <img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
-          <span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
-        </div>
-        <div style="margin:24px 0 16px;">
-          <i data-lucide="mail-check" style="width:48px;height:48px;color:var(--accent-orange);"></i>
+          <span>| Dashboard</span>
         </div>
-        <h1 class="auth-title">Check your inbox</h1>
-        <p class="auth-subtitle" style="max-width:360px;margin:0 auto;">
-          We sent a verification email to <strong>${escapeHtml(email)}</strong>.
-          Click the link in the email to activate your account.
-        </p>
-        <div style="margin-top:8px;">
+      </div>
+      <div class="login-right">
+        <div class="login-card" style="text-align:center;">
+          <div style="margin:0 auto 24px;width:fit-content;">
+            <i data-lucide="mail-check" style="width:48px;height:48px;color:var(--accent-orange);"></i>
+          </div>
+          <h1 class="auth-title">Check your inbox</h1>
+          <p class="auth-subtitle" style="max-width:360px;margin:0 auto 8px;">
+            We sent a verification email to <strong>${escapeHtml(email)}</strong>.
+            Click the link in the email to activate your account.
+          </p>
           <p style="font-size:0.8rem;color:var(--text-muted);">Can't find it? Check your spam folder.</p>
-        </div>
-        <div style="margin-top:24px;">
-          <a href="/login" class="btn btn-primary" id="go-to-login-after-register">Go to Sign In</a>
+          <div style="margin-top:24px;">
+            <a href="/login" class="btn btn-primary" id="go-to-login-after-register">Go to Sign In</a>
+          </div>
         </div>
       </div>
     </div>

From df392a4d102895b518917a7446c72cf21e7d6a23 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 09:54:32 +0200
Subject: [PATCH 02/13] feat: real-time email/username availability check on
 account creation

---
 public/css/style.css |  39 +++++++++++++++
 public/js/app.js     | 116 ++++++++++++++++++++++++++++++++++++++++++-
 routes/auth.js       |  40 +++++++++++++++
 3 files changed, 193 insertions(+), 2 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index ca48f61..decde08 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -340,6 +340,45 @@ a:hover { color: var(--accent-1); }
   color: var(--text-muted);
 }
 
+/* ===== REGISTER FIELD AVAILABILITY ===== */
+.input-wrap {
+  position: relative;
+}
+
+.input-wrap input {
+  padding-right: 44px;
+}
+
+.input-status {
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.input-status.checking { color: var(--text-muted); }
+.input-status.ok { color: var(--accent-green); }
+.input-status.taken { color: var(--accent-red); }
+
+.field-hint {
+  font-size: 0.78rem;
+  margin-top: 6px;
+  min-height: 0;
+  line-height: 1.3;
+  color: var(--text-secondary);
+}
+
+.field-hint:empty {
+  margin-top: 0;
+}
+
+.field-hint.ok { color: var(--accent-green); }
+.field-hint.taken { color: var(--accent-red); }
+
 .form-group select {
   cursor: pointer;
   appearance: none;
diff --git a/public/js/app.js b/public/js/app.js
index a391eb8..d3d2e13 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -705,11 +705,19 @@ function renderRegisterPage() {
             <div class="auth-error"></div>
             <div class="form-group">
               <label for="reg-email">Email</label>
-              <input type="email" id="reg-email" placeholder="your@email.com" required autocomplete="email" />
+              <div class="input-wrap">
+                <input type="email" id="reg-email" placeholder="your@email.com" required autocomplete="email" />
+                <span class="input-status" id="reg-email-status"></span>
+              </div>
+              <div class="field-hint" id="reg-email-hint"></div>
             </div>
             <div class="form-group">
               <label for="reg-username">Username</label>
-              <input type="text" id="reg-username" placeholder="myusername" required autocomplete="username" />
+              <div class="input-wrap">
+                <input type="text" id="reg-username" placeholder="myusername" required autocomplete="username" />
+                <span class="input-status" id="reg-username-status"></span>
+              </div>
+              <div class="field-hint" id="reg-username-hint"></div>
             </div>
             <div class="form-group">
               <label for="reg-password">Password</label>
@@ -742,6 +750,101 @@ function renderRegisterPage() {
     e.preventDefault();
     navigateTo('login');
   });
+
+  setupRegisterAvailabilityChecks();
+}
+
+const registerAvailability = { email: null, username: null };
+let registerAvailabilityTimer = null;
+
+function setFieldStatus(field, state, message) {
+  const statusEl = $(`#reg-${field}-status`);
+  const hintEl = $(`#reg-${field}-hint`);
+  if (!statusEl) return;
+  statusEl.className = `input-status ${state || ''}`;
+  if (state === 'checking') {
+    statusEl.innerHTML = '<span class="spinner" style="width:16px;height:16px;"></span>';
+  } else if (state === 'ok') {
+    statusEl.innerHTML = '<i data-lucide="check" style="width:18px;height:18px"></i>';
+  } else if (state === 'taken') {
+    statusEl.innerHTML = '<i data-lucide="x" style="width:18px;height:18px"></i>';
+  } else {
+    statusEl.innerHTML = '';
+  }
+  if (hintEl) {
+    hintEl.textContent = message || '';
+    hintEl.className = `field-hint ${state === 'ok' || state === 'taken' ? state : ''}`;
+  }
+  if (state === 'taken' || state === 'ok') initIcons();
+}
+
+function setupRegisterAvailabilityChecks() {
+  const emailInput = $('#reg-email');
+  const usernameInput = $('#reg-username');
+  if (!emailInput || !usernameInput) return;
+
+  const runCheck = async () => {
+    const email = emailInput.value.trim();
+    const username = usernameInput.value.trim();
+
+    if (!email && !username) {
+      registerAvailability.email = null;
+      registerAvailability.username = null;
+      setFieldStatus('email', '');
+      setFieldStatus('username', '');
+      return;
+    }
+
+    if (email && !validateRegEmail(email)) {
+      setFieldStatus('email', '');
+      registerAvailability.email = null;
+    }
+    if (username && !validateRegUsername(username)) {
+      setFieldStatus('username', '');
+      registerAvailability.username = null;
+    }
+
+    setFieldStatus('email', email && validateRegEmail(email) ? 'checking' : '');
+    setFieldStatus('username', username && validateRegUsername(username) ? 'checking' : '');
+
+    try {
+      const params = new URLSearchParams();
+      if (email && validateRegEmail(email)) params.set('email', email);
+      if (username && validateRegUsername(username)) params.set('username', username);
+      const data = await api(`/auth/check-availability?${params.toString()}`);
+      if (email && validateRegEmail(email)) {
+        const available = data.email?.available;
+        registerAvailability.email = available;
+        setFieldStatus('email', available ? 'ok' : 'taken', available ? 'Available' : 'This email is already taken');
+      }
+      if (username && validateRegUsername(username)) {
+        const available = data.username?.available;
+        registerAvailability.username = available;
+        setFieldStatus('username', available ? 'ok' : 'taken', available ? 'Available' : 'This username is already taken');
+      }
+    } catch {
+      setFieldStatus('email', '');
+      setFieldStatus('username', '');
+    }
+  };
+
+  const onInput = () => {
+    clearTimeout(registerAvailabilityTimer);
+    registerAvailabilityTimer = setTimeout(runCheck, 400);
+  };
+
+  emailInput.addEventListener('input', onInput);
+  usernameInput.addEventListener('input', onInput);
+  emailInput.addEventListener('blur', runCheck);
+  usernameInput.addEventListener('blur', runCheck);
+}
+
+function validateRegEmail(email) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+function validateRegUsername(username) {
+  return /^[a-zA-Z0-9_-]{3,32}$/.test(username);
 }
 
 async function handleLogin(e) {
@@ -886,6 +989,15 @@ async function handleRegister(e) {
     return;
   }
 
+  if (registerAvailability.email === false) {
+    showError(e.target, 'This email is already taken. Please choose another one.');
+    return;
+  }
+  if (registerAvailability.username === false) {
+    showError(e.target, 'This username is already taken. Please choose another one.');
+    return;
+  }
+
   btn.disabled = true;
   btn.innerHTML = '<span class="spinner"></span> Creating...';
 
diff --git a/routes/auth.js b/routes/auth.js
index ea24a87..72846e2 100644
--- a/routes/auth.js
+++ b/routes/auth.js
@@ -24,6 +24,46 @@ router.get('/check-vpn', async (req, res) => {
   }
 });
 
+const availabilityLimiter = rateLimit({
+  windowMs: 60 * 1000,
+  max: 120,
+  message: { error: 'Too many requests' },
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+
+router.get('/check-availability', availabilityLimiter, async (req, res) => {
+  try {
+    const email = typeof req.query.email === 'string' && req.query.email ? req.query.email : null;
+    const username = typeof req.query.username === 'string' && req.query.username ? req.query.username : null;
+
+    if (!email && !username) {
+      return res.json({});
+    }
+
+    const clauses = [];
+    const params = [];
+    if (email) { clauses.push('email = ?'); params.push(email); }
+    if (username) { clauses.push('username = ?'); params.push(username); }
+
+    const rows = await query(
+      `SELECT email, username FROM users WHERE ${clauses.join(' OR ')}`,
+      params
+    );
+
+    const takenEmails = new Set(rows.map(r => r.email));
+    const takenUsernames = new Set(rows.map(r => r.username));
+
+    const result = {};
+    if (email) result.email = { available: !takenEmails.has(email) };
+    if (username) result.username = { available: !takenUsernames.has(username) };
+
+    res.json(result);
+  } catch {
+    res.status(500).json({ error: 'Availability check failed' });
+  }
+});
+
 function gravatarHash(email) {
   return createHash('md5').update(email.trim().toLowerCase()).digest('hex');
 }

From 1d9766bf7b201d91793d290dbcd6cabaef024a69 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 10:00:27 +0200
Subject: [PATCH 03/13] ui: show availability hint text only when field is
 focused

---
 public/js/app.js | 43 +++++++++++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index d3d2e13..2ca7367 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -755,6 +755,7 @@ function renderRegisterPage() {
 }
 
 const registerAvailability = { email: null, username: null };
+const registerFocus = { email: false, username: false };
 let registerAvailabilityTimer = null;
 
 function setFieldStatus(field, state, message) {
@@ -771,13 +772,25 @@ function setFieldStatus(field, state, message) {
   } else {
     statusEl.innerHTML = '';
   }
+  const showText = registerFocus[field] && (state === 'ok' || state === 'taken');
   if (hintEl) {
-    hintEl.textContent = message || '';
-    hintEl.className = `field-hint ${state === 'ok' || state === 'taken' ? state : ''}`;
+    hintEl.textContent = showText ? message : '';
+    hintEl.className = `field-hint ${showText ? state : ''}`;
   }
   if (state === 'taken' || state === 'ok') initIcons();
 }
 
+function renderStoredStatus(field) {
+  const availability = registerAvailability[field];
+  if (availability === true) {
+    setFieldStatus(field, 'ok', 'Available');
+  } else if (availability === false) {
+    setFieldStatus(field, 'taken', field === 'email' ? 'This email is already taken' : 'This username is already taken');
+  } else {
+    setFieldStatus(field, '');
+  }
+}
+
 function setupRegisterAvailabilityChecks() {
   const emailInput = $('#reg-email');
   const usernameInput = $('#reg-username');
@@ -813,14 +826,12 @@ function setupRegisterAvailabilityChecks() {
       if (username && validateRegUsername(username)) params.set('username', username);
       const data = await api(`/auth/check-availability?${params.toString()}`);
       if (email && validateRegEmail(email)) {
-        const available = data.email?.available;
-        registerAvailability.email = available;
-        setFieldStatus('email', available ? 'ok' : 'taken', available ? 'Available' : 'This email is already taken');
+        registerAvailability.email = !!data.email?.available;
+        renderStoredStatus('email');
       }
       if (username && validateRegUsername(username)) {
-        const available = data.username?.available;
-        registerAvailability.username = available;
-        setFieldStatus('username', available ? 'ok' : 'taken', available ? 'Available' : 'This username is already taken');
+        registerAvailability.username = !!data.username?.available;
+        renderStoredStatus('username');
       }
     } catch {
       setFieldStatus('email', '');
@@ -833,10 +844,22 @@ function setupRegisterAvailabilityChecks() {
     registerAvailabilityTimer = setTimeout(runCheck, 400);
   };
 
+  const onFocus = (field) => {
+    registerFocus[field] = true;
+    renderStoredStatus(field);
+  };
+
+  const onBlur = (field) => {
+    registerFocus[field] = false;
+    renderStoredStatus(field);
+  };
+
   emailInput.addEventListener('input', onInput);
   usernameInput.addEventListener('input', onInput);
-  emailInput.addEventListener('blur', runCheck);
-  usernameInput.addEventListener('blur', runCheck);
+  emailInput.addEventListener('focus', () => onFocus('email'));
+  emailInput.addEventListener('blur', () => onBlur('email'));
+  usernameInput.addEventListener('focus', () => onFocus('username'));
+  usernameInput.addEventListener('blur', () => onBlur('username'));
 }
 
 function validateRegEmail(email) {

From 5f04556cb1b0451849164ee2175fdfe4f518017a Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 10:17:23 +0200
Subject: [PATCH 04/13] feat: onboarding tour after account creation with
 real-time availability check

---
 config/migrate.js    |   1 +
 public/css/style.css |  81 +++++++++++++++++++++
 public/js/app.js     | 166 +++++++++++++++++++++++++++++++++++++++++++
 routes/auth.js       |  19 +++++
 4 files changed, 267 insertions(+)

diff --git a/config/migrate.js b/config/migrate.js
index 5dbf548..58ad11e 100644
--- a/config/migrate.js
+++ b/config/migrate.js
@@ -26,6 +26,7 @@ const tables = {
       { name: 'email_change_code', def: 'VARCHAR(10) DEFAULT NULL' },
       { name: 'email_change_expires', def: 'DATETIME DEFAULT NULL' },
       { name: 'user_agent', def: 'VARCHAR(512) DEFAULT NULL' },
+      { name: 'onboarding_done', def: 'TINYINT(1) NOT NULL DEFAULT 0' },
       { name: 'created_at', def: 'TIMESTAMP DEFAULT CURRENT_TIMESTAMP' },
     ],
   },
diff --git a/public/css/style.css b/public/css/style.css
index decde08..78f8ee2 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -4433,3 +4433,84 @@ tbody tr:hover {
   background: rgba(239, 68, 68, 0.1);
 }
 
+/* ===== ONBOARDING TOUR ===== */
+.onboarding-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.onboarding-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  transition: opacity 0.25s ease;
+}
+
+.onboarding-card {
+  position: relative;
+  z-index: 10001;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: 40px 36px;
+  max-width: 480px;
+  width: 90%;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
+  text-align: center;
+}
+
+.onboarding-card h2 {
+  font-size: 1.4rem;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+.onboarding-card p {
+  font-size: 0.92rem;
+  color: var(--text-secondary);
+  line-height: 1.65;
+  margin-bottom: 28px;
+}
+
+.onboarding-card .onboarding-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.onboarding-card .onboarding-actions .btn {
+  min-width: 110px;
+}
+
+.onboarding-highlight {
+  position: relative !important;
+  z-index: 10000 !important;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7) !important;
+  border-radius: var(--radius-sm);
+}
+
+.onboarding-dots {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.onboarding-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--border);
+  transition: all var(--transition);
+}
+
+.onboarding-dot.active {
+  background: var(--accent-1);
+  width: 24px;
+  border-radius: 4px;
+}
+
diff --git a/public/js/app.js b/public/js/app.js
index 2ca7367..498373e 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1139,6 +1139,7 @@ async function renderVerifyEmail(token) {
     localStorage.setItem('zh_user', JSON.stringify(data.user));
     history.replaceState({ page: 'overview' }, '', '/');
     renderDashboard();
+    checkAndStartOnboarding();
     showToast('Email verified successfully!', 'success');
   } catch (err) {
     app.innerHTML = html`
@@ -1481,6 +1482,10 @@ async function renderDashboard() {
                 <i data-lucide="settings" style="width:16px;height:16px"></i>
                 Settings
               </a>
+              <a class="sidebar-user-dropdown-item" id="user-dropdown-tour">
+                <i data-lucide="map" style="width:16px;height:16px"></i>
+                Take a Tour
+              </a>
               <a class="sidebar-user-dropdown-item" id="user-dropdown-logout">
                 <i data-lucide="log-out" style="width:16px;height:16px"></i>
                 Logout
@@ -1552,6 +1557,12 @@ async function renderDashboard() {
     navigateTo('account/info');
   });
 
+  $('#user-dropdown-tour').addEventListener('click', (e) => {
+    e.preventDefault();
+    closeUserDropdown();
+    startOnboarding();
+  });
+
   $('#user-dropdown-logout').addEventListener('click', async (e) => {
     e.preventDefault();
     closeUserDropdown();
@@ -3997,6 +4008,159 @@ async function handleExportData() {
   }
 }
 
+// ===== ONBOARDING TOUR =====
+const ONBOARDING_STEPS = [
+  {
+    title: 'Welcome to ZeroHost!',
+    description: 'Would you like a quick tour of your dashboard? It only takes a minute.',
+    highlight: null,
+    buttons: ['Skip', 'Start'],
+  },
+  {
+    title: 'Dashboard Overview',
+    description: `This is your Dashboard — the central hub. Here you get an overview of all your servers, their status, and resource usage at a glance.`,
+    highlight: '#sidebar-nav a.nav-item[data-page="overview"]',
+    buttons: ['Skip', 'Next'],
+  },
+  {
+    title: 'Create a Server',
+    description: 'Use this button to deploy a new server. You can choose from different game types and configurations.',
+    highlight: '#sidebar-nav a.nav-item[data-page="create"]',
+    buttons: ['Skip', 'Next'],
+  },
+  {
+    title: 'My Servers',
+    description: 'All your servers live here. Manage them, check their status, rename them, and more.',
+    highlight: '#nav-servers-toggle',
+    buttons: ['Skip', 'Next'],
+  },
+  {
+    title: 'Two things to remember',
+    description: `<strong>Dashboard</strong> — Where you create servers, change names, view status, and manage your account.<br><br><strong>Hydrodactyl Panel</strong> — Where you start/stop your server, manage files, use the console, and control everything.`,
+    highlight: null,
+    buttons: ['Skip', 'Got it!'],
+  },
+];
+
+let onboardingActive = false;
+let onboardingStep = 0;
+let onboardingHighlightEl = null;
+
+function clearOnboardingHighlight() {
+  if (onboardingHighlightEl) {
+    onboardingHighlightEl.classList.remove('onboarding-highlight');
+    onboardingHighlightEl = null;
+  }
+}
+
+function applyOnboardingHighlight(selector) {
+  clearOnboardingHighlight();
+  if (!selector) return;
+  const el = document.querySelector(selector);
+  if (el) {
+    el.classList.add('onboarding-highlight');
+    onboardingHighlightEl = el;
+  }
+}
+
+function renderOnboardingStep(stepIndex) {
+  const card = $('#onboarding-card');
+  if (!card) return;
+
+  const step = ONBOARDING_STEPS[stepIndex];
+  const isLast = stepIndex === ONBOARDING_STEPS.length - 1;
+  const isFirst = stepIndex === 0;
+
+  let dotsHtml = '<div class="onboarding-dots">';
+  ONBOARDING_STEPS.forEach((_, i) => {
+    dotsHtml += `<span class="onboarding-dot ${i === stepIndex ? 'active' : ''}"></span>`;
+  });
+  dotsHtml += '</div>';
+
+  const leftBtn = step.buttons[0]; // Skip
+  const rightBtn = step.buttons[1]; // Start / Next / Got it!
+
+  card.innerHTML = html`
+    ${dotsHtml}
+    <h2>${escapeHtml(step.title)}</h2>
+    <p>${step.description}</p>
+    <div class="onboarding-actions">
+      <button class="btn btn-ghost" id="onboarding-skip">${leftBtn}</button>
+      <button class="btn btn-primary" id="onboarding-next">${rightBtn}</button>
+    </div>
+  `;
+
+  applyOnboardingHighlight(step.highlight);
+  initIcons();
+}
+
+async function startOnboarding() {
+  if (onboardingActive) return;
+  onboardingActive = true;
+  onboardingStep = 0;
+
+  const existing = $('#onboarding-overlay');
+  if (existing) existing.remove();
+
+  const overlay = document.createElement('div');
+  overlay.id = 'onboarding-overlay';
+  overlay.className = 'onboarding-overlay';
+  overlay.innerHTML = html`
+    <div class="onboarding-backdrop" id="onboarding-backdrop"></div>
+    <div class="onboarding-card" id="onboarding-card"></div>
+  `;
+  document.body.appendChild(overlay);
+
+  renderOnboardingStep(0);
+
+  $('#onboarding-skip').addEventListener('click', stopOnboarding);
+  $('#onboarding-next').addEventListener('click', () => {
+    if (onboardingStep === 0) {
+      onboardingStep = 1;
+      renderOnboardingStep(onboardingStep);
+      $('#onboarding-skip').addEventListener('click', stopOnboarding);
+      $('#onboarding-next').addEventListener('click', handleOnboardingNext);
+    } else {
+      handleOnboardingNext();
+    }
+  });
+}
+
+function handleOnboardingNext() {
+  if (onboardingStep < ONBOARDING_STEPS.length - 1) {
+    onboardingStep++;
+    renderOnboardingStep(onboardingStep);
+    $('#onboarding-skip').addEventListener('click', stopOnboarding);
+    $('#onboarding-next').addEventListener('click', handleOnboardingNext);
+  } else if (onboardingStep === ONBOARDING_STEPS.length - 1) {
+    stopOnboarding(true);
+  }
+}
+
+async function stopOnboarding(done) {
+  if (!onboardingActive) return;
+  onboardingActive = false;
+  clearOnboardingHighlight();
+  const overlay = $('#onboarding-overlay');
+  if (overlay) overlay.remove();
+
+  if (done && state.token) {
+    try {
+      await api('/auth/complete-onboarding', { method: 'POST' });
+    } catch {}
+  }
+}
+
+async function checkAndStartOnboarding() {
+  if (!state.token) return;
+  try {
+    const data = await api('/auth/onboarding-status');
+    if (!data.done) {
+      startOnboarding();
+    }
+  } catch {}
+}
+
 // ===== INIT =====
 function init() {
   const path = window.location.pathname;
@@ -4033,6 +4197,7 @@ function init() {
     if (state.token) {
       history.replaceState({ page: 'overview' }, '', '/');
       renderDashboard();
+      if (basePage !== 'signup') checkAndStartOnboarding();
     } else if (basePage === 'login') {
       renderLoginPage();
     } else {
@@ -4041,6 +4206,7 @@ function init() {
   } else if (state.token) {
     api('/servers/overview').then(() => {
       renderDashboard();
+      checkAndStartOnboarding();
       fetchUnreadCount();
       setInterval(fetchUnreadCount, 30000);
     }).catch(() => {
diff --git a/routes/auth.js b/routes/auth.js
index 72846e2..85bf715 100644
--- a/routes/auth.js
+++ b/routes/auth.js
@@ -786,6 +786,25 @@ router.post('/delete-account', authenticateToken, sensitiveLimiter, async (req,
   }
 });
 
+router.get('/onboarding-status', authenticateToken, async (req, res) => {
+  try {
+    const users = await query('SELECT onboarding_done FROM users WHERE id = ?', [req.user.userId]);
+    if (users.length === 0) return res.status(404).json({ error: 'User not found' });
+    res.json({ done: !!users[0].onboarding_done });
+  } catch {
+    res.status(500).json({ error: 'Failed to check onboarding status' });
+  }
+});
+
+router.post('/complete-onboarding', authenticateToken, async (req, res) => {
+  try {
+    await query('UPDATE users SET onboarding_done = 1 WHERE id = ?', [req.user.userId]);
+    res.json({ done: true });
+  } catch {
+    res.status(500).json({ error: 'Failed to update onboarding status' });
+  }
+});
+
 router.post('/logout', authenticateToken, async (req, res) => {
   try {
     // Bump token_version to invalidate all existing sessions

From c3fb2ecd276a9008864926a4b7db90cb421cac26 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 10:20:57 +0200
Subject: [PATCH 05/13] fix: onboarding highlight properly reveals elements,
 card positioned near target

---
 public/css/style.css |  67 ++++++++++++++++++++------
 public/js/app.js     | 109 ++++++++++++++++++++++++++++++++++++-------
 2 files changed, 143 insertions(+), 33 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 78f8ee2..28f28f6 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -4438,42 +4438,79 @@ tbody tr:hover {
   position: fixed;
   inset: 0;
   z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  pointer-events: none;
 }
 
 .onboarding-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.7);
-  transition: opacity 0.25s ease;
+  pointer-events: none;
 }
 
 .onboarding-card {
-  position: relative;
-  z-index: 10001;
+  pointer-events: auto;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
-  padding: 40px 36px;
-  max-width: 480px;
+  padding: 32px 28px;
+  max-width: 440px;
   width: 90%;
   box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
   text-align: center;
+  position: fixed;
+  z-index: 10001;
+}
+
+.onboarding-card.centered {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.onboarding-card .card-arrow {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  background: var(--bg-card);
+  border-left: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+  z-index: 1;
+}
+
+.onboarding-card .card-arrow.up {
+  top: -8px;
+  left: 50%;
+  margin-left: -7px;
+  transform: rotate(45deg);
+  border-left-color: var(--border);
+  border-top-color: var(--border);
+  border-right: none;
+  border-bottom: none;
+}
+
+.onboarding-card .card-arrow.down {
+  bottom: -8px;
+  left: 50%;
+  margin-left: -7px;
+  transform: rotate(225deg);
+  border-left-color: var(--border);
+  border-top-color: var(--border);
+  border-right: none;
+  border-bottom: none;
 }
 
 .onboarding-card h2 {
-  font-size: 1.4rem;
+  font-size: 1.3rem;
   font-weight: 700;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
 }
 
 .onboarding-card p {
-  font-size: 0.92rem;
+  font-size: 0.9rem;
   color: var(--text-secondary);
-  line-height: 1.65;
-  margin-bottom: 28px;
+  line-height: 1.6;
+  margin-bottom: 24px;
 }
 
 .onboarding-card .onboarding-actions {
@@ -4483,7 +4520,7 @@ tbody tr:hover {
 }
 
 .onboarding-card .onboarding-actions .btn {
-  min-width: 110px;
+  min-width: 100px;
 }
 
 .onboarding-highlight {
@@ -4497,7 +4534,7 @@ tbody tr:hover {
   display: flex;
   gap: 6px;
   justify-content: center;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .onboarding-dot {
diff --git a/public/js/app.js b/public/js/app.js
index 498373e..32949f6 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -4063,13 +4063,75 @@ function applyOnboardingHighlight(selector) {
   }
 }
 
+function positionOnboardingCard(selector) {
+  const card = $('#onboarding-card');
+  if (!card) return;
+
+  if (!selector) {
+    card.classList.add('centered');
+    const arrow = card.querySelector('.card-arrow');
+    if (arrow) arrow.remove();
+    return;
+  }
+
+  card.classList.remove('centered');
+
+  const el = document.querySelector(selector);
+  if (!el) return;
+
+  const elRect = el.getBoundingClientRect();
+  const cardW = 440;
+  const cardMaxH = window.innerHeight - 80;
+  const gap = 14;
+
+  // Remove old arrow and create a new one
+  const oldArrow = card.querySelector('.card-arrow');
+  if (oldArrow) oldArrow.remove();
+  const arrow = document.createElement('div');
+  arrow.className = 'card-arrow';
+  card.appendChild(arrow);
+
+  let top, arrowDir;
+
+  // Try below first
+  const spaceBelow = window.innerHeight - elRect.bottom;
+  const spaceAbove = elRect.top;
+  const approxCardH = Math.min(360, cardMaxH);
+
+  if (spaceBelow >= approxCardH + gap + 20) {
+    top = elRect.bottom + gap;
+    arrowDir = 'up';
+  } else if (spaceAbove >= approxCardH + gap + 20) {
+    top = elRect.top - gap - approxCardH;
+    arrowDir = 'down';
+  } else {
+    // Center as fallback
+    top = Math.max(20, (window.innerHeight - approxCardH) / 2);
+    arrowDir = null;
+  }
+
+  // Center card horizontally under the element, but clamp to viewport
+  let left = elRect.left + elRect.width / 2 - cardW / 2;
+  left = Math.max(16, Math.min(left, window.innerWidth - cardW - 16));
+
+  top = Math.max(16, Math.min(top, window.innerHeight - approxCardH - 16));
+
+  card.style.top = top + 'px';
+  card.style.left = left + 'px';
+  card.style.transform = 'none';
+
+  if (arrowDir) {
+    arrow.className = `card-arrow ${arrowDir}`;
+  } else {
+    arrow.remove();
+  }
+}
+
 function renderOnboardingStep(stepIndex) {
   const card = $('#onboarding-card');
   if (!card) return;
 
   const step = ONBOARDING_STEPS[stepIndex];
-  const isLast = stepIndex === ONBOARDING_STEPS.length - 1;
-  const isFirst = stepIndex === 0;
 
   let dotsHtml = '<div class="onboarding-dots">';
   ONBOARDING_STEPS.forEach((_, i) => {
@@ -4077,8 +4139,8 @@ function renderOnboardingStep(stepIndex) {
   });
   dotsHtml += '</div>';
 
-  const leftBtn = step.buttons[0]; // Skip
-  const rightBtn = step.buttons[1]; // Start / Next / Got it!
+  const leftBtn = step.buttons[0];
+  const rightBtn = step.buttons[1];
 
   card.innerHTML = html`
     ${dotsHtml}
@@ -4090,7 +4152,16 @@ function renderOnboardingStep(stepIndex) {
     </div>
   `;
 
-  applyOnboardingHighlight(step.highlight);
+  const backdrop = $('#onboarding-backdrop');
+  if (step.highlight) {
+    if (backdrop) backdrop.style.display = 'none';
+    applyOnboardingHighlight(step.highlight);
+  } else {
+    if (backdrop) backdrop.style.display = 'block';
+    clearOnboardingHighlight();
+  }
+
+  positionOnboardingCard(step.highlight);
   initIcons();
 }
 
@@ -4106,24 +4177,26 @@ async function startOnboarding() {
   overlay.id = 'onboarding-overlay';
   overlay.className = 'onboarding-overlay';
   overlay.innerHTML = html`
-    <div class="onboarding-backdrop" id="onboarding-backdrop"></div>
-    <div class="onboarding-card" id="onboarding-card"></div>
+    <div class="onboarding-backdrop" id="onboarding-backdrop" style="display:none"></div>
+    <div class="onboarding-card centered" id="onboarding-card"></div>
   `;
   document.body.appendChild(overlay);
 
   renderOnboardingStep(0);
 
-  $('#onboarding-skip').addEventListener('click', stopOnboarding);
-  $('#onboarding-next').addEventListener('click', () => {
-    if (onboardingStep === 0) {
-      onboardingStep = 1;
-      renderOnboardingStep(onboardingStep);
-      $('#onboarding-skip').addEventListener('click', stopOnboarding);
-      $('#onboarding-next').addEventListener('click', handleOnboardingNext);
-    } else {
-      handleOnboardingNext();
-    }
-  });
+  const attachListeners = () => {
+    $('#onboarding-skip').addEventListener('click', stopOnboarding);
+    $('#onboarding-next').addEventListener('click', () => {
+      if (onboardingStep === 0) {
+        onboardingStep = 1;
+        renderOnboardingStep(onboardingStep);
+        attachListeners();
+      } else {
+        handleOnboardingNext();
+      }
+    });
+  };
+  attachListeners();
 }
 
 function handleOnboardingNext() {

From e7710a4494ea01002c9c717beef868fdd52b9584 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 10:22:37 +0200
Subject: [PATCH 06/13] fix: use fixed spotlight div instead of element
 box-shadow to avoid sidebar overflow clipping

---
 public/css/style.css | 12 ++++++++----
 public/js/app.js     | 32 +++++++++++++++++++++++++-------
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 28f28f6..6a4c684 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -4523,11 +4523,15 @@ tbody tr:hover {
   min-width: 100px;
 }
 
-.onboarding-highlight {
-  position: relative !important;
-  z-index: 10000 !important;
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7) !important;
+.onboarding-spotlight {
+  position: fixed;
+  z-index: 10000;
+  pointer-events: none;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
   border-radius: var(--radius-sm);
+  background: transparent;
+  outline: 2px solid rgba(238, 129, 50, 0.25);
+  outline-offset: -1px;
 }
 
 .onboarding-dots {
diff --git a/public/js/app.js b/public/js/app.js
index 32949f6..e24ebb1 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -4047,20 +4047,38 @@ let onboardingStep = 0;
 let onboardingHighlightEl = null;
 
 function clearOnboardingHighlight() {
-  if (onboardingHighlightEl) {
-    onboardingHighlightEl.classList.remove('onboarding-highlight');
-    onboardingHighlightEl = null;
-  }
+  const spotlight = $('#onboarding-spotlight');
+  if (spotlight) spotlight.style.display = 'none';
+  const el = $('#onboarding-highlight-el');
+  if (el) el.removeAttribute('id');
+  onboardingHighlightEl = null;
 }
 
 function applyOnboardingHighlight(selector) {
   clearOnboardingHighlight();
   if (!selector) return;
+
   const el = document.querySelector(selector);
-  if (el) {
-    el.classList.add('onboarding-highlight');
-    onboardingHighlightEl = el;
+  if (!el) return;
+
+  const rect = el.getBoundingClientRect();
+
+  let spotlight = $('#onboarding-spotlight');
+  if (!spotlight) {
+    spotlight = document.createElement('div');
+    spotlight.id = 'onboarding-spotlight';
+    spotlight.className = 'onboarding-spotlight';
+    const overlay = $('#onboarding-overlay');
+    if (overlay) overlay.appendChild(spotlight);
   }
+
+  spotlight.style.left = rect.left + 'px';
+  spotlight.style.top = rect.top + 'px';
+  spotlight.style.width = rect.width + 'px';
+  spotlight.style.height = rect.height + 'px';
+  spotlight.style.display = 'block';
+
+  onboardingHighlightEl = spotlight;
 }
 
 function positionOnboardingCard(selector) {

From 33ca6fff06e69d7c79141735d9d26eae96d1daa8 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 10:23:09 +0200
Subject: [PATCH 07/13] fix: clear inline card styles when centering onboarding
 step

---
 public/js/app.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/public/js/app.js b/public/js/app.js
index e24ebb1..aaa5ec4 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -4087,6 +4087,9 @@ function positionOnboardingCard(selector) {
 
   if (!selector) {
     card.classList.add('centered');
+    card.style.top = '';
+    card.style.left = '';
+    card.style.transform = '';
     const arrow = card.querySelector('.card-arrow');
     if (arrow) arrow.remove();
     return;

From 78142741dee39b2633f8f000957389a251a707f4 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 10:24:25 +0200
Subject: [PATCH 08/13] chore: bump to v1.0.8

---
 package.json     | 2 +-
 public/js/app.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index c942fac..2e7abd3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zerohost-dashboard",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/public/js/app.js b/public/js/app.js
index aaa5ec4..bbf3778 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1496,7 +1496,7 @@ async function renderDashboard() {
           <div style="padding:8px 12px 0;display:flex;gap:16px;justify-content:center;flex-wrap:wrap">
 
           </div>
-          <div style="padding:4px 0 8px;text-align:center;font-size:0.7rem;color:var(--text-muted);letter-spacing:0.05em">v1.0.7</div>
+          <div style="padding:4px 0 8px;text-align:center;font-size:0.7rem;color:var(--text-muted);letter-spacing:0.05em">v1.0.8</div>
         </div>
         <div class="sidebar-resizer" id="sidebar-resizer"></div>
       </aside>

From 49535c625c9f300e3eefdb8522f917196fc7a291 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 10:29:42 +0200
Subject: [PATCH 09/13] fix: onboarding card positioned to the right of sidebar
 items

---
 public/css/style.css | 11 +++++++++++
 public/js/app.js     | 42 ++++++++++++++++++++++++++----------------
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 6a4c684..1297c6d 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -4500,6 +4500,17 @@ tbody tr:hover {
   border-bottom: none;
 }
 
+.onboarding-card .card-arrow.left {
+  left: -8px;
+  top: 50%;
+  margin-top: -7px;
+  transform: rotate(-45deg);
+  border-left-color: var(--border);
+  border-top-color: var(--border);
+  border-right: none;
+  border-bottom: none;
+}
+
 .onboarding-card h2 {
   font-size: 1.3rem;
   font-weight: 700;
diff --git a/public/js/app.js b/public/js/app.js
index bbf3778..8696ab6 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -4112,28 +4112,38 @@ function positionOnboardingCard(selector) {
   arrow.className = 'card-arrow';
   card.appendChild(arrow);
 
-  let top, arrowDir;
-
-  // Try below first
-  const spaceBelow = window.innerHeight - elRect.bottom;
-  const spaceAbove = elRect.top;
+  let top, left, arrowDir;
   const approxCardH = Math.min(360, cardMaxH);
 
-  if (spaceBelow >= approxCardH + gap + 20) {
-    top = elRect.bottom + gap;
-    arrowDir = 'up';
-  } else if (spaceAbove >= approxCardH + gap + 20) {
-    top = elRect.top - gap - approxCardH;
-    arrowDir = 'down';
+  // Try right first (sidebar items are on the left)
+  const spaceRight = window.innerWidth - elRect.right;
+  if (spaceRight >= cardW + gap + 30) {
+    left = elRect.right + gap;
+    top = elRect.top + elRect.height / 2 - approxCardH / 2;
+    arrowDir = 'left';
   } else {
-    // Center as fallback
-    top = Math.max(20, (window.innerHeight - approxCardH) / 2);
-    arrowDir = null;
+    // Try below
+    const spaceBelow = window.innerHeight - elRect.bottom;
+    const spaceAbove = elRect.top;
+    if (spaceBelow >= approxCardH + gap + 20) {
+      top = elRect.bottom + gap;
+      left = elRect.left + elRect.width / 2 - cardW / 2;
+      arrowDir = 'up';
+    } else if (spaceAbove >= approxCardH + gap + 20) {
+      top = elRect.top - gap - approxCardH;
+      left = elRect.left + elRect.width / 2 - cardW / 2;
+      arrowDir = 'down';
+    } else {
+      // Center as fallback
+      top = Math.max(20, (window.innerHeight - approxCardH) / 2);
+      left = Math.max(16, (window.innerWidth - cardW) / 2);
+      arrowDir = null;
+    }
   }
 
-  // Center card horizontally under the element, but clamp to viewport
-  let left = elRect.left + elRect.width / 2 - cardW / 2;
+  // Clamp to viewport
   left = Math.max(16, Math.min(left, window.innerWidth - cardW - 16));
+  top = Math.max(16, Math.min(top, window.innerHeight - approxCardH - 16));
 
   top = Math.max(16, Math.min(top, window.innerHeight - approxCardH - 16));
 

From a1d72f1fd777a55294af4620b0f7e0a24f517682 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 10:34:15 +0200
Subject: [PATCH 10/13] fix: use CSS triangle pseudo-elements for onboarding
 arrows instead of rotated div

---
 public/css/style.css | 81 +++++++++++++++++++++++++++-----------------
 public/js/app.js     | 16 ++-------
 2 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 1297c6d..52de6a7 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -4468,47 +4468,66 @@ tbody tr:hover {
   transform: translate(-50%, -50%);
 }
 
-.onboarding-card .card-arrow {
+.onboarding-card[data-arrow]::before,
+.onboarding-card[data-arrow]::after {
+  content: '';
   position: absolute;
-  width: 14px;
-  height: 14px;
-  background: var(--bg-card);
-  border-left: 1px solid var(--border);
-  border-top: 1px solid var(--border);
-  z-index: 1;
+  width: 0;
+  height: 0;
 }
 
-.onboarding-card .card-arrow.up {
-  top: -8px;
+.onboarding-card[data-arrow="up"]::before {
+  top: -10px;
   left: 50%;
-  margin-left: -7px;
-  transform: rotate(45deg);
-  border-left-color: var(--border);
-  border-top-color: var(--border);
-  border-right: none;
-  border-bottom: none;
+  margin-left: -10px;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid var(--border);
 }
 
-.onboarding-card .card-arrow.down {
-  bottom: -8px;
+.onboarding-card[data-arrow="up"]::after {
+  top: -9px;
   left: 50%;
-  margin-left: -7px;
-  transform: rotate(225deg);
-  border-left-color: var(--border);
-  border-top-color: var(--border);
-  border-right: none;
-  border-bottom: none;
+  margin-left: -9px;
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-bottom: 9px solid var(--bg-card);
 }
 
-.onboarding-card .card-arrow.left {
-  left: -8px;
+.onboarding-card[data-arrow="down"]::before {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -10px;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid var(--border);
+}
+
+.onboarding-card[data-arrow="down"]::after {
+  bottom: -9px;
+  left: 50%;
+  margin-left: -9px;
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-top: 9px solid var(--bg-card);
+}
+
+.onboarding-card[data-arrow="left"]::before {
+  left: -10px;
   top: 50%;
-  margin-top: -7px;
-  transform: rotate(-45deg);
-  border-left-color: var(--border);
-  border-top-color: var(--border);
-  border-right: none;
-  border-bottom: none;
+  margin-top: -10px;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-right: 10px solid var(--border);
+}
+
+.onboarding-card[data-arrow="left"]::after {
+  left: -9px;
+  top: 50%;
+  margin-top: -9px;
+  border-top: 9px solid transparent;
+  border-bottom: 9px solid transparent;
+  border-right: 9px solid var(--bg-card);
 }
 
 .onboarding-card h2 {
diff --git a/public/js/app.js b/public/js/app.js
index 8696ab6..8432655 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -4090,8 +4090,7 @@ function positionOnboardingCard(selector) {
     card.style.top = '';
     card.style.left = '';
     card.style.transform = '';
-    const arrow = card.querySelector('.card-arrow');
-    if (arrow) arrow.remove();
+    delete card.dataset.arrow;
     return;
   }
 
@@ -4105,13 +4104,6 @@ function positionOnboardingCard(selector) {
   const cardMaxH = window.innerHeight - 80;
   const gap = 14;
 
-  // Remove old arrow and create a new one
-  const oldArrow = card.querySelector('.card-arrow');
-  if (oldArrow) oldArrow.remove();
-  const arrow = document.createElement('div');
-  arrow.className = 'card-arrow';
-  card.appendChild(arrow);
-
   let top, left, arrowDir;
   const approxCardH = Math.min(360, cardMaxH);
 
@@ -4145,16 +4137,14 @@ function positionOnboardingCard(selector) {
   left = Math.max(16, Math.min(left, window.innerWidth - cardW - 16));
   top = Math.max(16, Math.min(top, window.innerHeight - approxCardH - 16));
 
-  top = Math.max(16, Math.min(top, window.innerHeight - approxCardH - 16));
-
   card.style.top = top + 'px';
   card.style.left = left + 'px';
   card.style.transform = 'none';
 
   if (arrowDir) {
-    arrow.className = `card-arrow ${arrowDir}`;
+    card.dataset.arrow = arrowDir;
   } else {
-    arrow.remove();
+    delete card.dataset.arrow;
   }
 }
 

From 76f17eae6d802b78748eb87fd7fe7c9d44f5ce28 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 10:36:13 +0200
Subject: [PATCH 11/13] fix: rewrite onboarding arrow as child div with CSS
 border triangle instead of pseudo-elements

---
 public/css/style.css | 41 ++++++++++++++++++++++++-----------------
 public/js/app.js     | 12 ++++++++----
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 52de6a7..3ac1101 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -4468,15 +4468,23 @@ tbody tr:hover {
   transform: translate(-50%, -50%);
 }
 
-.onboarding-card[data-arrow]::before,
-.onboarding-card[data-arrow]::after {
+.card-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.card-arrow::after {
   content: '';
   position: absolute;
   width: 0;
   height: 0;
 }
 
-.onboarding-card[data-arrow="up"]::before {
+/* Up arrow (card below element) */
+.card-arrow[data-dir="up"] {
   top: -10px;
   left: 50%;
   margin-left: -10px;
@@ -4485,16 +4493,16 @@ tbody tr:hover {
   border-bottom: 10px solid var(--border);
 }
 
-.onboarding-card[data-arrow="up"]::after {
-  top: -9px;
-  left: 50%;
-  margin-left: -9px;
+.card-arrow[data-dir="up"]::after {
+  top: 2px;
+  left: -9px;
   border-left: 9px solid transparent;
   border-right: 9px solid transparent;
   border-bottom: 9px solid var(--bg-card);
 }
 
-.onboarding-card[data-arrow="down"]::before {
+/* Down arrow (card above element) */
+.card-arrow[data-dir="down"] {
   bottom: -10px;
   left: 50%;
   margin-left: -10px;
@@ -4503,16 +4511,16 @@ tbody tr:hover {
   border-top: 10px solid var(--border);
 }
 
-.onboarding-card[data-arrow="down"]::after {
-  bottom: -9px;
-  left: 50%;
-  margin-left: -9px;
+.card-arrow[data-dir="down"]::after {
+  bottom: 2px;
+  left: -9px;
   border-left: 9px solid transparent;
   border-right: 9px solid transparent;
   border-top: 9px solid var(--bg-card);
 }
 
-.onboarding-card[data-arrow="left"]::before {
+/* Left arrow (card to the right of element) */
+.card-arrow[data-dir="left"] {
   left: -10px;
   top: 50%;
   margin-top: -10px;
@@ -4521,10 +4529,9 @@ tbody tr:hover {
   border-right: 10px solid var(--border);
 }
 
-.onboarding-card[data-arrow="left"]::after {
-  left: -9px;
-  top: 50%;
-  margin-top: -9px;
+.card-arrow[data-dir="left"]::after {
+  left: 2px;
+  top: -9px;
   border-top: 9px solid transparent;
   border-bottom: 9px solid transparent;
   border-right: 9px solid var(--bg-card);
diff --git a/public/js/app.js b/public/js/app.js
index 8432655..c597a5e 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -4085,12 +4085,15 @@ function positionOnboardingCard(selector) {
   const card = $('#onboarding-card');
   if (!card) return;
 
+  // Remove old arrow
+  const oldArrow = card.querySelector('.card-arrow');
+  if (oldArrow) oldArrow.remove();
+
   if (!selector) {
     card.classList.add('centered');
     card.style.top = '';
     card.style.left = '';
     card.style.transform = '';
-    delete card.dataset.arrow;
     return;
   }
 
@@ -4142,9 +4145,10 @@ function positionOnboardingCard(selector) {
   card.style.transform = 'none';
 
   if (arrowDir) {
-    card.dataset.arrow = arrowDir;
-  } else {
-    delete card.dataset.arrow;
+    const arrow = document.createElement('div');
+    arrow.className = 'card-arrow';
+    arrow.dataset.dir = arrowDir;
+    card.appendChild(arrow);
   }
 }
 

From fc51c7ba3a626994fa698cde9dc7a65cb7a02e1d Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 10:40:53 +0200
Subject: [PATCH 12/13] fix: use position:fixed with viewport coordinates for
 onboarding card arrow instead of position:absolute

---
 public/css/style.css | 13 ++-----------
 public/js/app.js     | 11 +++++++++++
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 3ac1101..525a0f0 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -4469,11 +4469,11 @@ tbody tr:hover {
 }
 
 .card-arrow {
-  position: absolute;
+  position: fixed;
   width: 0;
   height: 0;
   pointer-events: none;
-  z-index: 2;
+  z-index: 10002;
 }
 
 .card-arrow::after {
@@ -4485,9 +4485,6 @@ tbody tr:hover {
 
 /* Up arrow (card below element) */
 .card-arrow[data-dir="up"] {
-  top: -10px;
-  left: 50%;
-  margin-left: -10px;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid var(--border);
@@ -4503,9 +4500,6 @@ tbody tr:hover {
 
 /* Down arrow (card above element) */
 .card-arrow[data-dir="down"] {
-  bottom: -10px;
-  left: 50%;
-  margin-left: -10px;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 10px solid var(--border);
@@ -4521,9 +4515,6 @@ tbody tr:hover {
 
 /* Left arrow (card to the right of element) */
 .card-arrow[data-dir="left"] {
-  left: -10px;
-  top: 50%;
-  margin-top: -10px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-right: 10px solid var(--border);
diff --git a/public/js/app.js b/public/js/app.js
index c597a5e..90fc2e9 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -4149,6 +4149,17 @@ function positionOnboardingCard(selector) {
     arrow.className = 'card-arrow';
     arrow.dataset.dir = arrowDir;
     card.appendChild(arrow);
+
+    if (arrowDir === 'left') {
+      arrow.style.left = (left - 10) + 'px';
+      arrow.style.top = (elRect.top + elRect.height / 2) + 'px';
+    } else if (arrowDir === 'up') {
+      arrow.style.left = (elRect.left + elRect.width / 2) + 'px';
+      arrow.style.top = (top - 10) + 'px';
+    } else if (arrowDir === 'down') {
+      arrow.style.left = (elRect.left + elRect.width / 2) + 'px';
+      arrow.style.top = (top + approxCardH) + 'px';
+    }
   }
 }
 

From cc9b6895a8c4b48fd29dbffbfe1a029a394fa838 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 15 Jul 2026 15:29:03 +0200
Subject: [PATCH 13/13] fix: remove duplicate export of isVpnOrProxy (SSRF fix
 added export to function declaration but kept old export statement)

---
 routes/auth.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/routes/auth.js b/routes/auth.js
index 0f6e4e0..0885e09 100644
--- a/routes/auth.js
+++ b/routes/auth.js
@@ -906,6 +906,6 @@ router.get('/export-data', authenticateToken, sensitiveLimiter, async (req, res)
   }
 });
 
-export { isVpnOrProxy, getClientIp };
+export { getClientIp };
 
 export default router;