Add server creation security checks (VPN, UA, email, country) with verification overlay

Author: ddrayko

public/css/style.css

@@ -4607,3 +4607,126 @@ tbody tr:hover {
   border-radius: 4px;
 }
 
+/* ===== VERIFICATION OVERLAY ===== */
+.verification-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.verification-overlay.open {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.verification-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 48px 40px;
+  max-width: 420px;
+  width: 90%;
+  text-align: center;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+}
+
+.verification-spinner {
+  width: 48px;
+  height: 48px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top-color: var(--accent-1);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin: 0 auto 24px;
+}
+
+.verification-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 6px;
+  color: var(--text-primary);
+}
+
+.verification-subtitle {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-bottom: 28px;
+}
+
+.verification-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  text-align: left;
+}
+
+.verification-step {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  transition: all var(--transition);
+}
+
+.verification-step.active {
+  color: var(--text-primary);
+  background: rgba(238, 129, 50, 0.08);
+  border: 1px solid rgba(238, 129, 50, 0.2);
+}
+
+.verification-step.done {
+  color: var(--accent-green);
+}
+
+.verification-step.failed {
+  color: var(--accent-red);
+}
+
+.verification-step-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vstep-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(238, 129, 50, 0.25);
+  border-top-color: var(--accent-1);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+
+.vstep-pending {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--text-muted);
+  border-radius: 50%;
+  opacity: 0.4;
+}
+
+.vstep-check, .vstep-cross {
+  flex-shrink: 0;
+}
+
+.verification-success-icon, .verification-error-icon {
+  margin-bottom: 16px;
+}
+

public/js/app.js

@@ -2917,6 +2917,122 @@ function isValidServerName(name) {
   return name && name.length >= 1 && name.length <= 255 && /^[a-zA-Z0-9 _.-]+$/.test(name);
 }
 
+function showVerificationPage(name) {
+  const overlay = document.createElement('div');
+  overlay.id = 'verification-overlay';
+  overlay.className = 'verification-overlay';
+  overlay.innerHTML = html`
+    <div class="verification-card">
+      <div class="verification-spinner"></div>
+      <h2 class="verification-title">Creating "${escapeHtml(name)}"</h2>
+      <p class="verification-subtitle">Performing security checks...</p>
+      <div class="verification-steps" id="verification-steps">
+        <div class="verification-step active" id="vstep-vpn">
+          <div class="verification-step-icon"><span class="vstep-spinner"></span></div>
+          <span>Checking connection security</span>
+        </div>
+        <div class="verification-step" id="vstep-ua">
+          <div class="verification-step-icon"><span class="vstep-pending"></span></div>
+          <span>Verifying browser</span>
+        </div>
+        <div class="verification-step" id="vstep-email">
+          <div class="verification-step-icon"><span class="vstep-pending"></span></div>
+          <span>Checking email verification</span>
+        </div>
+        <div class="verification-step" id="vstep-country">
+          <div class="verification-step-icon"><span class="vstep-pending"></span></div>
+          <span>Verifying region</span>
+        </div>
+        <div class="verification-step" id="vstep-create">
+          <div class="verification-step-icon"><span class="vstep-pending"></span></div>
+          <span>Creating server</span>
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+  requestAnimationFrame(() => overlay.classList.add('open'));
+
+  let stepIndex = 0;
+  const steps = ['vstep-vpn', 'vstep-ua', 'vstep-email', 'vstep-country', 'vstep-create'];
+  const interval = setInterval(() => {
+    if (stepIndex < steps.length) {
+      const el = document.getElementById(steps[stepIndex]);
+      if (el) {
+        el.classList.remove('active');
+        el.classList.add('done');
+        el.querySelector('.vstep-spinner, .vstep-pending').outerHTML = '<svg class="vstep-check" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent-green)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+      }
+      stepIndex++;
+      if (stepIndex < steps.length) {
+        const next = document.getElementById(steps[stepIndex]);
+        if (next) {
+          next.classList.add('active');
+          next.querySelector('.vstep-pending').outerHTML = '<span class="vstep-spinner"></span>';
+        }
+      }
+    } else {
+      clearInterval(interval);
+    }
+  }, 600);
+
+  overlay._interval = interval;
+}
+
+function showVerificationSuccess(name) {
+  const overlay = document.getElementById('verification-overlay');
+  if (!overlay) return;
+  clearInterval(overlay._interval);
+
+  const steps = overlay.querySelectorAll('.verification-step');
+  steps.forEach(s => {
+    s.classList.remove('active');
+    s.classList.add('done');
+    const icon = s.querySelector('.vstep-spinner, .vstep-pending');
+    if (icon) icon.outerHTML = '<svg class="vstep-check" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent-green)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+  });
+
+  overlay.querySelector('.verification-card').innerHTML = html`
+    <svg class="verification-success-icon" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--accent-green)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+    <h2 class="verification-title">Server Created!</h2>
+    <p class="verification-subtitle">"${escapeHtml(name)}" is now being set up.</p>
+  `;
+}
+
+function showVerificationError(message) {
+  const overlay = document.getElementById('verification-overlay');
+  if (!overlay) return;
+  clearInterval(overlay._interval);
+
+  const steps = overlay.querySelectorAll('.verification-step.active');
+  steps.forEach(s => {
+    s.classList.remove('active');
+    s.classList.add('failed');
+    const icon = s.querySelector('.vstep-spinner');
+    if (icon) icon.outerHTML = '<svg class="vstep-cross" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent-red)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+  });
+
+  const card = overlay.querySelector('.verification-card');
+  card.innerHTML = html`
+    <svg class="verification-error-icon" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--accent-red)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+    <h2 class="verification-title" style="color:var(--accent-red)">Verification Failed</h2>
+    <p class="verification-subtitle">${escapeHtml(message)}</p>
+    <button class="btn btn-primary" id="verification-retry-btn" style="margin-top:16px">Go Back</button>
+  `;
+
+  document.getElementById('verification-retry-btn').addEventListener('click', () => {
+    overlay.remove();
+  });
+}
+
+function removeVerificationOverlay() {
+  const overlay = document.getElementById('verification-overlay');
+  if (overlay) {
+    clearInterval(overlay._interval);
+    overlay.remove();
+  }
+}
+
 async function handleWizardCreate() {
   const btn = $('#wizard-create-btn');
   btn.disabled = true;
@@ -2935,16 +3051,21 @@ async function handleWizardCreate() {
   const environment = {};
   const dockerImage = createState.selectedDockerImage || '';
 
+  showVerificationPage(name);
+
   try {
     const capToken = document.querySelector('[name="cap-token"]')?.value || '';
     await api('/servers/create', {
       method: 'POST',
       body: JSON.stringify({ name, nestId: nest.pteroNestId, eggId: egg.eggId, environment, capToken, dockerImage }),
     });
-    showToast(`Server "${name}" created successfully!`, 'success');
-    navigateTo('servers');
+    showVerificationSuccess(name);
+    setTimeout(() => {
+      removeVerificationOverlay();
+      navigateTo('servers');
+    }, 2000);
   } catch (err) {
-    showToast(err.message, 'error');
+    showVerificationError(err.message);
     btn.disabled = false;
     btn.innerHTML = '<i data-lucide="plus" style="width:16px;height:16px"></i> Create Server';
     initIcons();

routes/auth.js

@@ -911,6 +911,6 @@ router.get('/export-data', authenticateToken, sensitiveLimiter, async (req, res)
   }
 });
 
-export { getClientIp };
+export { getClientIp, fetchWithTimeout, normalizeClientIp, isPrivateIp };
 
 export default router;

routes/servers.js

@@ -1,6 +1,7 @@
 import { Router } from 'express';
 import rateLimit from 'express-rate-limit';
 import { authenticateToken, requireNotRestricted, requireOwnership } from '../middleware/auth.js';
+import { getClientIp, isVpnOrProxy, fetchWithTimeout, normalizeClientIp, isPrivateIp } from './auth.js';
 import {
   getServersByUser,
   getServerById,
@@ -21,6 +22,20 @@ import { createNotification } from '../services/notification.js';
 
 const router = Router();
 
+const BLOCKED_COUNTRY_CODES = ['CN', 'RU'];
+
+async function checkBlockedCountry(ip) {
+  const cleanIp = normalizeClientIp(ip);
+  if (!cleanIp || isPrivateIp(cleanIp)) return false;
+  try {
+    const res = await fetchWithTimeout(`http://ip-api.com/json/${encodeURIComponent(cleanIp)}?fields=countryCode`, {}, 5000);
+    const data = await res.json();
+    return BLOCKED_COUNTRY_CODES.includes(data.countryCode);
+  } catch {
+    return false;
+  }
+}
+
 const createServerLimiter = rateLimit({
   windowMs: 60 * 60 * 1000,
   max: 3,
@@ -228,6 +243,26 @@ router.post('/create', authenticateToken, requireNotRestricted, createServerLimi
       return res.status(400).json({ error: 'Please complete the security check' });
     }
 
+    const ip = getClientIp(req);
+    const userAgent = (req.headers['user-agent'] || '').toString().slice(0, 512);
+
+    if (await isVpnOrProxy(ip)) {
+      return res.status(403).json({ error: 'VPN or proxy detected. Please disable your VPN.', check: 'vpn' });
+    }
+
+    if (!userAgent || /curl|wget|node-fetch|python-requests|python-httpx|urllib|aiohttp|go-http-client|java\/|libcurl|okhttp|httpie|postmanruntime|insomnia|axios|fetch\//i.test(userAgent)) {
+      return res.status(403).json({ error: 'Automated requests are not allowed. Please use a real browser.', check: 'useragent' });
+    }
+
+    const userRows = await query('SELECT email_verified FROM users WHERE id = ?', [req.user.userId]);
+    if (!userRows[0]?.email_verified) {
+      return res.status(403).json({ error: 'Please verify your email before creating a server.', check: 'email' });
+    }
+
+    if (await checkBlockedCountry(ip)) {
+      return res.status(403).json({ error: 'Service not available in your region.', check: 'country' });
+    }
+
     // Check if nest or egg is unavailable
     try {
       const [nestRow] = await query('SELECT unavailable FROM nests WHERE ptero_nest_id = ?', [nestId]);