Bug fix: some pages were giving errors when there was not notification.

views/otherPages/landing.ejs

@@ -28,9 +28,7 @@
             </div>
         </div>
 
-        <% if(banner !== undefined){ %>
-            <% include ../shared/banner.ejs %>
-        <% } %>
+        <% include ../shared/banner.ejs %>
 
         <div class="main-background">
             <div class="logo-text">
@@ -64,16 +62,51 @@
         <% include ../shared/loader %>
 
         <script>
-            let banner = document.getElementById("banner");
-            
-            let timer = setTimeout(()=>{
-                if(banner !== null) banner.style.display = "none";
-            }, 10000);
+            let locals = <%- JSON.stringify(locals) %>
 
-            document.getElementById("bannerButton").onclick = ()=>{
-                banner.style.display = "none";
-                clearTimeout(timer);
-            };
+            if(locals.banner !== undefined){
+                let bannerElem = document.getElementById("banner");
+                bannerElem.children[0].style.background = locals.banner.color;
+                bannerElem.children[1].innerText = locals.banner.message;
+                bannerElem.style.display = "flex";
+
+                switch(banner.type){
+                    case "error":
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                        break;
+                    case "success":
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                        break;
+                    default: 
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                }
+
+                let timer = setTimeout(()=>{
+                    bannerElem.style.display = "none"
+                }, 7000);
+
+                bannerElem.children[2].onclick = ()=>{
+                    bannerElem.style.display = "none";
+                    clearTimeout(timer);
+                }
+            }
         </script>
     </body>
 </html>

views/otherPages/login.ejs

@@ -16,9 +16,7 @@
             </a>
         </div>
 
-        <% if(banner !== undefined){ %>
-            <% include ../shared/banner.ejs %>
-        <% } %>
+        <% include ../shared/banner.ejs %>
 
         <form action="/login" method="post">
             <h1> Welcome Back </h1>
@@ -31,26 +29,61 @@
                 <input type="password" name="password" required>
             </label>
     
-            <input id="signIn" type="submit" value="Sign In">        
+            <input id="signIn" type="submit" value="Sign In">
             
             <a href="/reset/email" class="link">Forgot your password?</a>
-    
+
             <a class="link" href="/register">Need to register?</a>
         </form>
 
         <% include ../shared/footer %>
 
         <script>
-            let banner = document.getElementById("banner");
-            
-            let timer = setTimeout(()=>{
-                if(banner !== null) banner.style.display = "none";
-            }, 10000);
-
-            document.getElementById("bannerButton").onclick = ()=>{
-                banner.style.display = "none";
-                clearTimeout(timer);
-            };
+            let locals = <%- JSON.stringify(locals) %>
+
+            if(locals.banner !== undefined){
+                let bannerElem = document.getElementById("banner");
+                bannerElem.children[0].style.background = locals.banner.color;
+                bannerElem.children[1].innerText = locals.banner.message;
+                bannerElem.style.display = "flex";
+
+                switch(banner.type){
+                    case "error":
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                        break;
+                    case "success":
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                        break;
+                    default: 
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                }
+
+                let timer = setTimeout(()=>{
+                    bannerElem.style.display = "none"
+                }, 7000);
+
+                bannerElem.children[2].onclick = ()=>{
+                    bannerElem.style.display = "none";
+                    clearTimeout(timer);
+                }
+            }
         </script>
     </body>
 </html>

views/otherPages/register.ejs

@@ -16,9 +16,7 @@
             </a>
         </div>
 
-        <% if(banner !== undefined){ %>
-            <% include ../shared/banner.ejs %>
-        <% } %>
+        <% include ../shared/banner.ejs %>
 
         <form method="post">
             <h1> Join The Subline </h1>
@@ -75,16 +73,51 @@
         <% include ../shared/footer %>
 
         <script>
-            let banner = document.getElementById("banner");
-            
-            let timer = setTimeout(()=>{
-                if(banner !== null) banner.style.display = "none";
-            }, 10000);
+            let locals = <%- JSON.stringify(locals) %>
 
-            document.getElementById("bannerButton").onclick = ()=>{
-                banner.style.display = "none";
-                clearTimeout(timer);
-            };
+            if(locals.banner !== undefined){
+                let bannerElem = document.getElementById("banner");
+                bannerElem.children[0].style.background = locals.banner.color;
+                bannerElem.children[1].innerText = locals.banner.message;
+                bannerElem.style.display = "flex";
+
+                switch(banner.type){
+                    case "error":
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                        break;
+                    case "success":
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                        break;
+                    default: 
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                }
+
+                let timer = setTimeout(()=>{
+                    bannerElem.style.display = "none"
+                }, 7000);
+
+                bannerElem.children[2].onclick = ()=>{
+                    bannerElem.style.display = "none";
+                    clearTimeout(timer);
+                }
+            }
         </script>
     </body>
 </html>

views/passwordResetPages/password.ejs

@@ -25,9 +25,7 @@
             </div>
         </div>
 
-        <% if(banner !== undefined){ %>
-            <% include ../shared/banner.ejs %>
-        <% } %>
+        <% include ../shared/banner.ejs %>
 
         <h1 class="title">Reset Password</h1>
 
@@ -44,16 +42,51 @@
         </form>
 
         <script>
-            let banner = document.getElementById("banner");
-            
-            let timer = setTimeout(()=>{
-                if(banner !== null) banner.style.display = "none";
-            }, 10000);
-
-            document.getElementById("bannerButton").onclick = ()=>{
-                banner.style.display = "none";
-                clearTimeout(timer);
-            };
+            let locals = <%- JSON.stringify(locals) %>
+
+            if(locals.banner !== undefined){
+                let bannerElem = document.getElementById("banner");
+                bannerElem.children[0].style.background = locals.banner.color;
+                bannerElem.children[1].innerText = locals.banner.message;
+                bannerElem.style.display = "flex";
+
+                switch(banner.type){
+                    case "error":
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                        break;
+                    case "success":
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                        break;
+                    default: 
+                        bannerElem.children[0].innerHTML = `
+                            <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>
+                        `;
+                }
+
+                let timer = setTimeout(()=>{
+                    bannerElem.style.display = "none"
+                }, 7000);
+
+                bannerElem.children[2].onclick = ()=>{
+                    bannerElem.style.display = "none";
+                    clearTimeout(timer);
+                }
+            }
         </script>
     </body>
 </html>

views/shared/banner.ejs

@@ -1,26 +1,7 @@
-<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 id="bannerButton">
+<div id="banner" class="banner" style="display:none;">
+    <div></div>
+    <p></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>

views/verifyPage/verify.ejs

@@ -25,9 +25,7 @@
             </div>
         </div>
 
-        <% if(banner !== undefined){ %>
-            <% include ../shared/banner.ejs %>
-        <% } %>
+        <% include ../shared/banner.ejs %>
 
         <h1 class="title">An email has been sent to <%=email%>.  Use the link in the email to verify your account.</h1>
 
@@ -43,9 +41,50 @@
     </body>
     
     <script>
-        setTimeout(()=>{
-            let banner = document.getElementById("banner");
-            if(banner !== null) banner.style.display = "none";
-        }, 10000);
+        let locals = <%- JSON.stringify(locals) %>
+
+        if(locals.banner !== undefined){
+            let bannerElem = document.getElementById("banner");
+            bannerElem.children[0].style.background = locals.banner.color;
+            bannerElem.children[1].innerText = locals.banner.message;
+            bannerElem.style.display = "flex";
+
+            switch(banner.type){
+                case "error":
+                    bannerElem.children[0].innerHTML = `
+                        <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>
+                    `;
+                    break;
+                case "success":
+                    bannerElem.children[0].innerHTML = `
+                        <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>
+                    `;
+                    break;
+                default: 
+                    bannerElem.children[0].innerHTML = `
+                        <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>
+                    `;
+            }
+
+            let timer = setTimeout(()=>{
+                bannerElem.style.display = "none"
+            }, 7000);
+
+            bannerElem.children[2].onclick = ()=>{
+                bannerElem.style.display = "none";
+                clearTimeout(timer);
+            }
+        }
     </script>
 </html>