feat: add resend verification email button on login error

Author: ddrayko

public/css/style.css

@@ -424,6 +424,34 @@ cap-widget {
   display: block;
 }
 
+.auth-error.show:has(.auth-resend-btn) {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.auth-resend-btn {
+  background: rgba(239, 68, 68, 0.15);
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  color: var(--accent-red);
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background var(--transition), opacity var(--transition);
+  align-self: flex-start;
+}
+
+.auth-resend-btn:hover:not(:disabled) {
+  background: rgba(239, 68, 68, 0.25);
+}
+
+.auth-resend-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 /* ===== DASHBOARD LAYOUT ===== */
 .dashboard-layout {
   display: flex;

public/js/app.js

@@ -278,7 +278,33 @@ function showToast(message, type = 'success') {
 function showError(form, message) {
   const errorEl = form.querySelector('.auth-error');
   if (errorEl) {
-    errorEl.textContent = message;
+    if (message && message.includes('verify your email')) {
+      const email = (form.querySelector('#login-email')?.value || '').trim();
+      errorEl.innerHTML = html`
+        <span>${escapeHtml(message)}</span>
+        <button type="button" class="auth-resend-btn" id="auth-resend-btn" ${!email ? 'disabled' : ''}>Resend verification link</button>
+      `;
+      const resendBtn = errorEl.querySelector('#auth-resend-btn');
+      if (resendBtn) {
+        resendBtn.addEventListener('click', async () => {
+          if (!email) return;
+          resendBtn.disabled = true;
+          resendBtn.textContent = 'Sending...';
+          try {
+            await api('/auth/resend-verification', {
+              method: 'POST',
+              body: JSON.stringify({ email }),
+            });
+            resendBtn.textContent = 'Email sent!';
+          } catch (err) {
+            resendBtn.textContent = 'Failed to send';
+            resendBtn.disabled = false;
+          }
+        });
+      }
+    } else {
+      errorEl.textContent = message;
+    }
     errorEl.classList.add('show');
   }
 }

routes/auth.js

@@ -300,6 +300,47 @@ router.get('/verify-email', async (req, res) => {
   }
 });
 
+router.post('/resend-verification', async (req, res) => {
+  try {
+    const { email } = req.body;
+    if (!email || typeof email !== 'string') {
+      return res.status(400).json({ error: 'Email is required' });
+    }
+
+    const users = await query('SELECT id, email, username, email_verified FROM users WHERE email = ?', [email]);
+    if (users.length === 0) {
+      return res.json({ message: 'If an account with that email exists, a verification link has been sent.' });
+    }
+
+    const user = users[0];
+    if (user.email_verified) {
+      return res.json({ message: 'Email already verified. You can now sign in.' });
+    }
+
+    const verificationToken = randomBytes(32).toString('hex');
+    const tokenExpires = new Date(Date.now() + 24 * 60 * 60 * 1000);
+
+    await query(
+      'UPDATE users SET verification_token = ?, verification_token_expires = ? WHERE id = ?',
+      [verificationToken, tokenExpires, user.id]
+    );
+
+    try {
+      await sendVerificationEmail(user.email, user.username, verificationToken);
+    } catch (err) {
+      console.error('Failed to send verification email:', err.message);
+      return res.status(500).json({ error: 'Failed to send verification email. Please try again later.' });
+    }
+
+    await logActivity(user.id, 'verification_resent', 'Resent verification email');
+
+    res.json({ message: 'Verification email sent. Check your inbox.' });
+  } catch (err) {
+    console.error('Resend verification error:', err.message);
+    res.status(500).json({ error: 'Failed to resend verification email' });
+  }
+});
+
 router.post('/login', async (req, res) => {
   try {
     const { email, password, capToken } = req.body;