Integrating new overlay mechanics with login view.

Removed login.ejs-specific overlay. Removed blur transition and reduced overlay fade from 500ms to 250ms. Minor modification to the overlay css.

app/app.ejs

@@ -13,8 +13,6 @@
         #main {
             height: calc(100% - 22px);
             background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
-            will-change: filter;
-            transition: filter 0.5s ease;
         }
         #main[overlay] {
             filter: blur(3px) contrast(0.9) brightness(1.0);

app/assets/css/launcher.css

@@ -706,78 +706,6 @@ p {
     transform: rotate(45deg);
 }
 
-/* * *
-* Login View | Error Overlay
-* * */
-
-#loginErrorContainer {
-    position: absolute;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.50);
-}
-
-/*#loginContainer[error] > #loginErrorContainer {
-    display: flex;
-}*/
-
-#loginContainer[error] > div:not(#loginErrorContainer) {
-    filter: blur(3px) contrast(0.9) brightness(1.0);
-}
-
-#loginErrorContent {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    width: 300px;
-    height: 35%;
-    box-sizing: border-box;
-    padding: 15px 0px;
-    /* background-color: #424242; */
-    text-align: center;
-}
-
-#loginErrorTitle {
-    font-family: 'Avenir Medium';
-    font-size: 20px;
-    color: #fff;
-    font-weight: bold;
-    letter-spacing: 1px;
-}
-
-#loginErrorDesc {
-    font-family: 'Avenir Book';
-    font-size: 12px;
-    color: #fff;
-    font-weight: bold;
-}
-
-#loginErrorAcknowledge {
-    background: none;
-    border: 1px solid #ffffff;
-    color: white;
-    font-family: 'Avenir Medium';
-    font-weight: bold;
-    border-radius: 2px;
-    width: 75px;
-    cursor: pointer;
-    transition: 0.25s ease;
-}
-#loginErrorAcknowledge:hover,
-#loginErrorAcknowledge:focus {
-    box-shadow: 0px 0px 10px 0px #fff;
-    outline: none;
-}
-#loginErrorAcknowledge:active {
-    border-color: rgba(255, 255, 255, 0.75);
-    color: rgba(255, 255, 255, 0.75);
-}
-
 /* * *
 * Login View | Loader
 * * */
@@ -1313,7 +1241,7 @@ p {
     font-family: 'Avenir Medium';
     font-weight: bold;
     border-radius: 2px;
-    width: 75px;
+    padding: 0px 8.1px;
     cursor: pointer;
     transition: 0.25s ease;
 }

app/assets/js/actionbinder.js

@@ -102,10 +102,39 @@ function toggleOverlay(toggleState){
     }
     if(toggleState){
         document.getElementById('main').setAttribute('overlay', true)
-        $('#overlayContainer').fadeToggle(500)
+        $('#overlayContainer').fadeToggle(250)
     } else {
         document.getElementById('main').removeAttribute('overlay')
-        $('#overlayContainer').fadeToggle(500)
+        $('#overlayContainer').fadeToggle(250)
+    }
+}
+
+/**
+ * Set the content of the overlay.
+ * 
+ * @param {string} title Overlay title text.
+ * @param {string} description Overlay description text.
+ * @param {string} acknowledge Acknowledge button text.
+ */
+function setOverlayContent(title, description, acknowledge){
+    document.getElementById('overlayTitle').innerHTML = title
+    document.getElementById('overlayDesc').innerHTML = description
+    document.getElementById('overlayAcknowledge').innerHTML = acknowledge
+}
+
+/**
+ * Set the onclick handler of the overlay acknowledge button.
+ * If the handler is null, a default handler will be added.
+ * 
+ * @param {function} handler 
+ */
+function setOverlayHandler(handler){
+    if(handler == null){
+        document.getElementById('overlayAcknowledge').onclick = () => {
+            toggleOverlay(false)
+        }
+    } else {
+        document.getElementById('overlayAcknowledge').onclick = handler
     }
 }
 

app/login.ejs

@@ -55,13 +55,6 @@
             </div>
         </div>
     </div>
-    <div id="loginErrorContainer">
-        <div id="loginErrorContent">
-            <span id="loginErrorTitle">LOGIN FAILED:<br>INVALID CREDENTIALS</span>
-            <span id="loginErrorDesc">Either the email or password you supplied is invalid. Please ensure everything is correct and try again.</span>
-            <button id="loginErrorAcknowledge">Try Again</button>
-        </div>
-    </div>
     <script type="application/javascript">
         //const validEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
         
@@ -231,11 +224,13 @@
                 console.log(value)
             }).catch((err) => {
                 loginLoading(false)
-                $('#loginErrorContainer').css('display', 'flex').hide().fadeIn(250)
-                loginContainer.setAttribute('error', true)
                 const errF = resolveError(err)
-                loginErrorTitle.innerHTML = errF.title
-                loginErrorDesc.innerHTML = errF.desc
+                setOverlayContent(errF.title, errF.desc, 'Try Again')
+                setOverlayHandler(() => {
+                    formDisabled(false)
+                    toggleOverlay(false)
+                })
+                toggleOverlay(true)
                 console.log(err)
             })
 
@@ -247,12 +242,6 @@
             }, 2500)
 
         })
-
-        loginErrorAcknowledge.addEventListener('click', () => {
-            formDisabled(false)
-            loginContainer.removeAttribute('error', false)
-            $('#loginErrorContainer').fadeOut(250)
-        })
     </script>
     <!-- Will reuse this down the line, then it will be removed from this file. -->
     <!--<div id="loginLoading">

app/overlay.ejs

@@ -1,7 +1,7 @@
 <div id="overlayContainer" style="display: none;">
     <div id="overlayContent">
-        <span id="overlayTitle">LOGIN FAILED:<br>INVALID CREDENTIALS</span>
-        <span id="overlayDesc">Either the email or password you supplied is invalid. Please ensure everything is correct and try again.</span>
-        <button id="overlayAcknowledge">Try Again</button>
+        <span id="overlayTitle">Lorem Ipsum:<br>Finis Illud</span>
+        <span id="overlayDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud..</span>
+        <button id="overlayAcknowledge">Conare Iterum</button>
     </div>
 </div>