feat: real-time email/username availability check on account creation

Author: ddrayko

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;

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...';
 

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');
 }