Update backend and frontend to have working banner on login page.

controllers/otherData.js

@@ -21,12 +21,12 @@ module.exports = {
                             return res.redirect("/dashboard");
                         }else{
                             req.session.error = "INVALID EMAIL OR PASSWORD";
-                            return res.redirect("/");
+                            return res.redirect("/login");
                         }
                     });
                 }else{
                     req.session.error = "INVALID EMAIL OR PASSWORD";
-                    return res.redirect("/");
+                    return res.redirect("/login");
                 }
             })
             .catch((err)=>{

controllers/renderer.js

@@ -8,45 +8,21 @@ const helper = require("./helper.js");
 module.exports = {
     /*
     GET - Shows the public landing page
-    Return = a single error message (only if there is an error)
-    Renders landingPage
     */
     landingPage: function(req, res){
-        new Activity({
-            ipAddr: req.headers['x-forwarded-for'] || req.connection.remoteAddress,
-            merchant: req.session.user,
-            route: "landing",
-            date: new Date()
-        })
-            .save()
-            .catch(()=>{});
-
-        let error = {};
-        let isLoggedIn = req.session.isLoggedIn || false;
-        if(req.session.error){
-            error = req.session.error;
-            req.session.error = undefined;
-        }else{
-            error = null;
-        }
-        if(req.session.success){
-            success = req.session.success;
-            req.session.success = undefined;
-        }else{
-            success = null;
-        }
-
-        return res.render("otherPages/landing", {error: error, success: success, isLoggedIn: isLoggedIn});
+        
+        return res.render("otherPages/landing", {banner: res.locals.banner});
     },
 
     //GET: Renders the login page
-    loginPage: function(req, res){
-        return res.render("otherPages/login");
+    loginPage: function(req, res){  
+        console.log(res.locals.banner);      
+        return res.render("otherPages/login", {banner: res.locals.banner});
     },
 
     //GET: Renders the registration page
     registerPage: function(req, res){
-        return res.render("otherPages/register");
+        return res.render("otherPages/register", {banner: res.locals.banner});
     },
 
     /*

middleware.js

@@ -0,0 +1,58 @@
+const Merchant = require("./models/merchant.js")
+
+module.exports = {
+    verifySession: function(req, res, next){
+        if(req.session.user === undefined) {
+            req.session.error = "PLEASE LOG IN";
+            return res.redirect("/");
+        }
+    
+        Merchant.findOne({"session.sessionId": req.session.user})
+            .then((merchant)=>{
+                if(merchant === null){
+                    throw "no merchant";
+                }
+    
+                if(merchant.session.date < new Date()){
+                    let newExpiration = new Date();
+                    newExpiration.setDate(newExpiration.getDate() + 90);
+    
+                    merchant.session.sessionId = helper.generateId(25);
+                    merchant.session.date = newExpiration;
+                    merchant.save();
+                    return res.redirect("/");
+                }
+    
+                res.locals.merchant = merchant;
+                return next();
+            })
+            .catch((err)=>{
+                if(err === "no merchant"){
+                    req.session.error = "PLEASE LOG IN";
+                    return res.redirect("/");
+                }
+                return res.json("ERROR: UNABLE TO RETRIEVE DATA");
+            });
+    },
+
+    formatBanner: function(req, res, next){
+        if(req.session.error !== undefined){
+            res.locals.banner = {
+                type: "error",
+                message: req.session.error,
+                color: "red"
+            };
+            req.session.error = undefined;
+        }else if(req.session.success !== undefined){
+            res.locals.banner = {
+                type: "notification",
+                message: req.session.success,
+                color: "green"
+            };
+            req.session.success = undefined;
+        }
+
+        return next();
+    }
+}
+

routes.js

@@ -8,16 +8,18 @@ const orderData = require("./controllers/orderData.js");
 const informationPages = require("./controllers/informationPages.js");
 const emailVerification = require("./controllers/emailVerification.js");
 const passwordReset = require("./controllers/passwordReset.js");
-const session = require("./verifySession.js");
+
+const session = require("./middleware.js").verifySession;
+const banner = require("./middleware.js").formatBanner;
 
 const multer = require("multer");
 const upload = multer({dest: "uploads/"});
 
 module.exports = function(app){
     //Render page
-    app.get("/", renderer.landingPage);
-    app.get("/login", renderer.loginPage);
-    app.get("/register", renderer.registerPage);
+    app.get("/", banner, renderer.landingPage);
+    app.get("/login", banner, renderer.loginPage);
+    app.get("/register", banner, renderer.registerPage);
     app.get("/dashboard", session, renderer.displayDashboard);
     app.get("/resetpassword/*", renderer.displayPassReset);
     

verifySession.js

@@ -1,35 +0,0 @@
-const Merchant = require("./models/merchant.js")
-
-module.exports = function(req, res, next){
-    if(req.session.user === undefined) {
-        req.session.error = "PLEASE LOG IN";
-        return res.redirect("/");
-    }
-
-    Merchant.findOne({"session.sessionId": req.session.user})
-        .then((merchant)=>{
-            if(merchant === null){
-                throw "no merchant";
-            }
-
-            if(merchant.session.date < new Date()){
-                let newExpiration = new Date();
-                newExpiration.setDate(newExpiration.getDate() + 90);
-
-                merchant.session.sessionId = helper.generateId(25);
-                merchant.session.date = newExpiration;
-                merchant.save();
-                return res.redirect("/");
-            }
-
-            res.locals.merchant = merchant;
-            return next();
-        })
-        .catch((err)=>{
-            if(err === "no merchant"){
-                req.session.error = "PLEASE LOG IN";
-                return res.redirect("/");
-            }
-            return res.json("ERROR: UNABLE TO RETRIEVE DATA");
-        });
-}

views/dashboardPage/dashboard.css

@@ -184,7 +184,7 @@ Multi-strand use classes
             background: rgb(201, 201, 201);
             color: black;
         }
-
+        
 /* 
 Home Strand 
 */

views/otherPages/banner.ejs

@@ -0,0 +1,30 @@
+<div id="banner" class="banner">
+    <div style="background:<%=banner.color%>">
+        <% if(banner.type === "error"){ %>
+            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="15" y1="9" x2="9" y2="15"></line>
+                <line x1="9" y1="9" x2="15" y2="15"></line>
+            </svg>
+        <%}else if(banner.type === "success"){ %>
+            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="12" y1="8" x2="12" y2="12"></line>
+                <line x1="12" y1="16" x2="12.01" y2="16"></line>
+            </svg>
+        <%}else { %>
+            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+            </svg>
+        <% } %>
+    </div>
+    <p><%=banner.message%></p>
+    <button>
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="rgb(200, 0, 0)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="15" y1="9" x2="9" y2="15"></line>
+            <line x1="9" y1="9" x2="15" y2="15"></line>
+        </svg>
+    </button>
+</div>

views/otherPages/landing.ejs

@@ -60,5 +60,11 @@
         </div>
 
         <% include ../shared/loader %>
+
+        <script>
+            let banner = <%- JSON.stringify(banner) %>;
+
+            console.log(banner);
+        </script>
     </body>
 </html>

views/otherPages/login.ejs

@@ -16,6 +16,10 @@
             </a>
         </div>
 
+        <% if(banner !== undefined){ %>
+            <% include ./banner.ejs %>
+        <% } %>
+
         <form action="/login" method="post">
             <h1> Welcome Back </h1>
     
@@ -41,5 +45,12 @@
         </form>
 
         <% include ../shared/footer %>
+
+        <script>
+            setTimeout(()=>{
+                let banner = document.getElementById("banner");
+                if(banner !== null) banner.style.display = "none";
+            }, 10000)
+        </script>
     </body>
 </html>

views/shared/banner.ejs

@@ -1,36 +0,0 @@
-<div id="banner" class="banner"></div>
-
-<script>
-    let banner = {
-        errorList: [],
-        notificationList: [],
-
-        createNotification: function(value){
-            let banner = document.getElementById("banner");
-            banner.style.display = "flex";
-            banner.innerText = value;
-            banner.classList.add("notification");
-
-
-            setTimeout(()=>{
-                banner.style.display = "none";
-                banner.classList.remove("notification");
-            }, 10000);
-        },
-
-        createError: function(value){
-            let banner = document.getElementById("banner");
-            banner.style.display = "flex";
-            banner.innerText = value;
-            banner.classList.add("error");
-
-
-            setTimeout(()=>{
-                banner.style.display = "none";
-                banner.classList.remove("notification");
-            }, 10000);
-        }
-    }
-</script>
-
-let message = <%-JSON.stringify(message) %>;