Merge pull request #111 from jackoturner/Updated-Styles

refactor: replace dedicated login page with a modal integrated into t…

Author: lukepring

app/app.js

@@ -40,7 +40,10 @@ const apiRoutes = require("./models/api");
 // Middleware to require login
 function requireLogin(req, res, next) {
   if (!req.session.user_id) {
-    return res.redirect("/login");
+    if (req.xhr || (req.headers.accept && req.headers.accept.indexOf('json') > -1)) {
+        return res.status(401).json({ error: "You must be logged in" });
+    }
+    return res.redirect(`/?login=true&continue=${encodeURIComponent(req.originalUrl)}`);
   }
   next();
 }

app/models/index.js

@@ -4,18 +4,15 @@ const db = require("../services/db");
 const bcrypt = require("bcrypt");
 
 router.get("/", (req, res) => {
-  if (!req.session.user_id) {
-    return res.redirect("/login");
-  }
-
   res.render("index", {
     user_email: req.session.user_email,
     first_name: req.session.first_name
   });
 });
 
+
 router.get("/login", (req, res) => {
-  res.render("login");
+  res.redirect("/?login=true");
 });
 
 router.post("/login", (req, res) => {
@@ -74,7 +71,7 @@ router.get("/logout", (req, res) => {
     if (err) {
       console.error("Logout error:", err);
     }
-    res.redirect("/login");
+    res.redirect("/");
   });
 });
 

app/views/index.pug

@@ -4,7 +4,10 @@ block content
 
   main
     section.hero
-      h1 Ready for your next pint, #{first_name}?
+      if first_name
+        h1 Ready for your next pint, #{first_name}?
+      else
+        h1 Ready for your next pint?
       p Discover pubs, rate pints, and see what others recommend.
 
     section

app/views/layout.pug

@@ -29,11 +29,15 @@ html
               span PourScore
               span.beta-badge Beta
           li.profile-wrapper
-            button#profileBtn.profile-btn
-              i.fa-solid.fa-user
-            .profile-dropdown#profileDropdown
-              a(href=`/users/${user_id}`) Your Profile
-              a.logout-link(href="/logout") Logout
+            if user_id
+              button#profileBtn.profile-btn
+                i.fa-solid.fa-user
+              .profile-dropdown#profileDropdown
+                a(href=`/users/${user_id}`) Your Profile
+                a.logout-link(href="/logout") Logout
+            else
+              a.header-login-btn(href="#" onclick="showLoginModal(); return false;") Login
+
 
     block content
 
@@ -72,3 +76,71 @@ html
           textarea(name="comment" rows="4" required)
 
           button(type="submit") Submit Review
+
+    // Login Modal
+    #loginModal.modal
+      .modal-content.login-container(style="padding: 40px; text-align: center; max-width: 400px; position: relative; margin: 0;")
+        span.close-btn(style="color: #888; font-size: 28px; top: 16px; right: 20px;" onclick="document.getElementById('loginModal').classList.remove('show')") ×
+
+        h2.login-title(style="margin-top: 0;") Login
+
+        form#loginForm.login-form(style="text-align: left;")
+          .form-group
+            label.form-label(for="loginEmail") Email
+            input.form-input(type="email", name="email", id="loginEmail", required)
+          
+          .form-group
+            label.form-label(for="loginPassword") Password
+            input.form-input(type="password", name="password", id="loginPassword", required)
+          
+          button.login-button(type="submit") Login
+
+        #login-error-popup.error-popup(style="display: none; position: static; transform: none; margin-top: 15px; background-color: #d32f2f; color: white; padding: 10px; border-radius: 8px; font-weight: 600;")
+          span#login-error-message
+
+    script.
+      function showLoginModal() {
+        document.getElementById('loginModal').classList.add('show');
+      }
+
+      document.addEventListener('DOMContentLoaded', () => {
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.get('login') === 'true') {
+          showLoginModal();
+          const cleanUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
+          window.history.replaceState({path: cleanUrl}, '', cleanUrl);
+        }
+
+        const loginForm = document.getElementById('loginForm');
+        if (loginForm) {
+          loginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const email = document.getElementById('loginEmail').value;
+            const password = document.getElementById('loginPassword').value;
+            const popup = document.getElementById('login-error-popup');
+            const msgSpan = document.getElementById('login-error-message');
+
+            try {
+              const response = await fetch('/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email, password })
+              });
+
+              const data = await response.json();
+
+              if (data.success) {
+                const redirectUrl = urlParams.get('continue') || '/';
+                window.location.href = redirectUrl;
+              } else {
+                msgSpan.innerText = data.message;
+                popup.style.display = 'block';
+                setTimeout(() => { popup.style.display = 'none'; }, 4000);
+              }
+            } catch (err) {
+              msgSpan.innerText = "Connection lost. Try again.";
+              popup.style.display = 'block';
+            }
+          });
+        }
+      });

app/views/login.pug

@@ -147,6 +147,26 @@ nav a:hover {
   transition-duration: 300ms;
 }
 
+.header-login-btn {
+  color: white !important;
+  padding: 6px 16px;
+  border-radius: 6px;
+  font-family: 'Instrument Serif', serif;
+  font-size: 1.4rem;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  display: inline-block;
+}
+
+.header-login-btn:hover {
+  background-color: white;
+  color: #B87333 !important;
+  text-decoration: none !important;
+  transform: translateY(-1px);
+}
+
+
+
 /* Sections */
 section {
   background: white;
@@ -780,53 +800,50 @@ textarea {
   }
 }
 
-html.login-html,
+/* Login adjustments for layout integration */
 body.login-page {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  background: #0a0a0a;
+  background-color: #f5f5f5;
 }
 
+
 /* Beer bubbles background */
-.beer-hero {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
+.login-hero {
+  min-height: 85vh;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(to bottom, #ffc979, #ff9800);
+  background: linear-gradient(135deg, #fbc02d 0%, #f57f17 100%);
+  position: relative;
   overflow: hidden;
-  z-index: 1;
 }
 
+
 /* Login card */
 .login-container {
   position: relative;
   z-index: 2;
-  background: rgba(221, 221, 221, 0.85);
-  backdrop-filter: blur(12px);
-  padding: 45px 55px;
-  border-radius: 18px;
-  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7);
+  background: #ffffff;
+  padding: 40px;
+  border-radius: 20px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   width: 100%;
-  max-width: 420px;
-  border: 1px solid rgba(212, 175, 55, 0.25);
+  max-width: 400px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
+
+
 .login-title {
-  color: #16183a;
+  color: #2c2c2c;
   text-align: center;
-  margin-bottom: 35px;
-  font-size: 2.5rem;
-  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
+  margin-bottom: 30px;
+  font-size: 2.8rem;
+  font-weight: 900;
+  font-family: 'Instrument Serif', serif;
+  font-style: italic;
 }
 
+
 .login-form { 
   width: 100%; 
   margin: 0 auto;              
@@ -846,15 +863,17 @@ body.login-page {
 }
 
 .form-input {
-  width: 50vh;
-  padding: 15px 5px 15px 5px;
-  border: none;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.95);
-  font-size: 1.05rem;
-  color: #1a0f00;
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: white;
+  font-size: 1rem;
+  color: #333;
+  transition: all 0.2s ease;
 }
 
+
 .form-input:focus {
   outline: none;
   background: #fff;
@@ -863,23 +882,25 @@ body.login-page {
 
 .login-button {
   width: 100%;
-  padding: 16px;
-  background: #d4af37;
-  color: #16183a;
+  padding: 14px;
+  background: #B87333;
+  color: white;
   border: none;
-  border-radius: 10px;
-  font-size: 1.15rem;
-  font-weight: bold;
+  border-radius: 8px;
+  font-size: 1.1rem;
+  font-weight: 700;
   cursor: pointer;
   transition: all 0.3s ease;
-  margin-top: 8px;
+  margin-top: 10px;
 }
 
 .login-button:hover {
-  background: #f0d06b;
-  transform: translateY(-3px);
+  background: #ff9800;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(184, 115, 51, 0.3);
 }
 
+
 .beer-hero::before {
   content: '';
   position: absolute;