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/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
     }
 }