mbkauthe 1.1.17 → 1.2.0

package/views/loginmbkauthe.handlebars

@@ -471,178 +471,7 @@
         </nav>
     </header>
 
-    <div>
-        <div class="showMessageblurWindow">
-            <div class="showmessageWindow">
-                <h1></h1>
-                <p></p>
-                <a href="" target="_blank" class="error-code"></a>
-                <button class="btn btn-save full" style="font-size: 20px; margin-top: 10px;"
-                    onclick="hideMessage()">Okay</button>
-            </div>
-        </div>
-        <script>
-            // showMessage("Failed to load the page. Please try again later.", "Error", "404");
-            function showMessage(message, heading, errorCode) {
-                document.querySelector(".showmessageWindow h1").innerText = heading;
-                document.querySelector(".showmessageWindow p").innerHTML = message;
-                if (errorCode) {
-                    document.querySelector(".showmessageWindow .error-code").style.display = "block";
-                    document.querySelector(".showmessageWindow .error-code").innerText = `Error Code: ${errorCode}`;
-                } else {
-                    document.querySelector(".showmessageWindow .error-code").style.display = "none";
-                }
-                document.querySelector(".showmessageWindow .error-code").href = `https://mbktechstudio.com/ErrorCode/#${errorCode}`;
-                document
-                    .querySelector(".showMessageblurWindow")
-                    .classList
-                    .add("active");
-                document
-                    .body
-                    .classList
-                    .add("blur-active");
-            }
-            function hideMessage() {
-                const blurWindow = document.querySelector(".showMessageblurWindow");
-                blurWindow.classList.add("fade-out");
-                setTimeout(() => {
-                    blurWindow.classList.remove("active", "fade-out");
-                    document
-                        .body
-                        .classList
-                        .remove("blur-active");
-                }, 500);
-            }
-        </script>
-        <style>
-            .showMessageblurWindow {
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: rgba(0, 0, 0, 0.5);
-                display: none;
-                justify-content: center;
-                align-items: center;
-                z-index: 1000;
-                backdrop-filter: blur(10px);
-            }
-
-            .showMessageblurWindow.active {
-                display: flex;
-            }
-
-            .showMessageblurWindow.fade-out {
-                animation: fadeOut 0.5s ease-in-out forwards;
-            }
-
-            body.blur-active {
-                overflow: hidden;
-            }
-
-            .showmessageWindow {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                font-family: 'Roboto', sans-serif;
-                background: rgba(0, 0, 0, 0.6);
-                padding: 20px 30px;
-                border-radius: 15px;
-                max-width: 90%;
-                width: 600px;
-                position: relative;
-                color: #fff;
-                border: 2px solid #007bff;
-                animation: fadeIn 0.5s ease-in-out;
-            }
-
-            .showmessageWindow h1 {
-                font-family: 'Roboto', sans-serif;
-                margin-top: 0;
-                font-size: 30px;
-                text-align: center;
-                color: #fff;
-                text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-                margin-bottom: 10px;
-            }
-
-            .showmessageWindow p {
-                font-family: 'Roboto', sans-serif;
-                font-size: 18px;
-                text-align: center;
-                color: #ddd;
-            }
-
-            .showmessageWindow .close-btn {
-                position: absolute;
-                top: 10px;
-                right: 10px;
-                background: none;
-                border: none;
-                font-size: 30px;
-                cursor: pointer;
-                color: #bbb;
-                transition: color 0.3s;
-            }
-
-            .showmessageWindow .close-btn:hover {
-                color: #fff;
-            }
-
-            @keyframes fadeIn {
-                from {
-                    opacity: 0;
-                    transform: scale(0.9);
-                }
-
-                to {
-                    opacity: 1;
-                    transform: scale(1);
-                }
-            }
-
-            .showmessageWindow .error-code {
-                font-family: 'Roboto', sans-serif;
-                font-size: 16px;
-                text-align: center;
-                color: #ff4d4d;
-                font-weight: 700;
-                margin: 10px auto;
-                padding: 5px 10px;
-                background: rgba(255, 77, 77, 0.1);
-                border: 1px solid #ff4d4d;
-                border-radius: 5px;
-                display: inline-block;
-                transition: all 0.3s ease-in;
-            }
-
-            .showmessageWindow .error-code:hover {
-                background: rgba(255, 77, 77, 0.2);
-                color: #007bff;
-                text-decoration: none;
-                transition: all 0.3s ease-out;
-            }
-
-
-            .showmessageWindow .btn-save {
-                width: 100%;
-            }
-
-            @keyframes fadeOut {
-                from {
-                    opacity: 1;
-                    transform: scale(1);
-                }
-
-                to {
-                    opacity: 0;
-                    transform: scale(0.9);
-                }
-            }
-        </style>
-    </div>
+    {{> showmessage}}
 
     <section class="login-container">
 
@@ -657,6 +486,7 @@
             <h1 class="login-title">Login</h1>
 
             <form id="loginForm" method="POST">
+                <input type="hidden" name="_csrf" value="{{csrfToken}}">
                 <div class="form-group">
                     <input id="loginUsername" class="form-input" type="text" name="username" placeholder=" " required
                         pattern="^[a-z0-9.]+$"
@@ -673,13 +503,6 @@
                     <i class="fas fa-eye input-icon" id="togglePassword"></i>
                 </div>
 
-                <div class="form-group token-container disable" id="tokenCon">
-                    <input id="token" class="form-input" type="text" name="token" placeholder=" " pattern="\d{6}"
-                        title="Token must be exactly 6 digits" maxlength="6" minlength="6" />
-                    <label class="form-label">2FA Token</label>
-                    <i class="fas fa-info-circle input-icon" onclick="tokeninfo()"></i>
-                </div>
-
                 <div class="form-group remember-me">
                     <input type="checkbox" id="rememberMe" name="rememberMe">
                     <label for="rememberMe">Remember me</label>
@@ -698,7 +521,7 @@
                 {{/if }}
 
                 <div class="login-links">
-                    <a onclick="fpass()" class="login-link">Forgot Password?</a>
+                    <a href="https://portal.mbktechstudio.com/forgot-password" class="login-link">Forgot Password?</a>
                     <a href="https://www.mbktechstudio.com/Support" target="_blank" class="login-link">Need Help?</a>
                 </div>
 
@@ -751,7 +574,6 @@
 
             const username = document.getElementById('loginUsername').value.trim();
             const password = document.getElementById('loginPassword').value.trim();
-            const token = document.getElementById('token') ? document.getElementById('token').value.trim() : '';
             const loginButton = document.getElementById('loginButton');
             const loginButtonText = document.getElementById('loginButtonText');
             const rememberMe = document.getElementById('rememberMe').checked;
@@ -772,52 +594,77 @@
                 },
                 body: JSON.stringify({
                     username,
-                    password,
-                    token
+                    password
                 })
             })
                 .then(response => response.json())
                 .then(data => {
                     if (data.success) {
-                        loginButtonText.textContent = 'Success! Redirecting...';
-                        sessionStorage.setItem('sessionId', data.sessionId);
-
-                        if (rememberMe) {
-                            localStorage.setItem('rememberedUsername', username);
+                        if (data.twoFactorRequired) {
+                            // Redirect to 2FA page
+                            window.location.href = '/mbkauthe/2fa';
                         } else {
-                            localStorage.removeItem('rememberedUsername');
+                            loginButtonText.textContent = 'Success! Redirecting...';
+                            sessionStorage.setItem('sessionId', data.sessionId);
+
+                            if (rememberMe) {
+                                setCookie('rememberedUsername', username, 30); // 30 days
+                            } else {
+                                deleteCookie('rememberedUsername');
+                            }
+
+                            // Redirect to the appropriate page
+                            const redirectUrl = new URLSearchParams(window.location.search).get('redirect');
+                            window.location.href = redirectUrl ? decodeURIComponent(redirectUrl) : '{{customURL}}';
                         }
-
-                        // Redirect to the appropriate page
-                        const redirectUrl = new URLSearchParams(window.location.search).get('redirect');
-                        window.location.href = redirectUrl ? decodeURIComponent(redirectUrl) : '{{customURL}}';
-
-                        loginButton.disabled = false;
-                        loginButtonText.textContent = 'Login';
                     } else {
                         // Handle errors
                         loginButton.disabled = false;
                         loginButtonText.textContent = 'Login';
-
-                        if (data.message === "Please Enter 2FA code") {
-                            console.log('2FA required');
-                            document.getElementById('tokenCon').classList.remove('disable');
-                            document.getElementById('tokenCon').classList.add('enable');
-                            document.getElementById('tokenCon').style.animation = 'fadeInUp 0.4s ease-out';
-                            showMessage('Please enter your 2FA token', '2FA Required');
-                        } else {
-                            showMessage(data.message || 'Login failed. Please try again.', 'Login Error');
-                        }
+                        showMessage(data.message || 'Login failed. Please try again.', 'Login Error', data.errorCode);
                     }
                 })
                 .catch(error => {
                     loginButton.disabled = false;
                     loginButtonText.textContent = 'Login';
-                    console.error('Error:', error);
+                    console.error('[mbkauthe] Error:', error);
                     showMessage('An error occurred. Please try again.', 'Login Error');
                 });
         });
 
+        // Cookie helper functions for cross-domain functionality
+        function setCookie(name, value, days) {
+            let expires = "";
+            if (days) {
+                const date = new Date();
+                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+                expires = "; expires=" + date.toUTCString();
+            }
+            // Set cookie for the entire domain (works across all subdomains)
+            const domain = window.location.hostname.includes('.') ? 
+                           '.' + window.location.hostname.split('.').slice(-2).join('.') : 
+                           window.location.hostname;
+            document.cookie = name + "=" + (value || "") + expires + "; path=/; domain=" + domain + "; SameSite=Lax";
+        }
+
+        function getCookie(name) {
+            const nameEQ = name + "=";
+            const ca = document.cookie.split(';');
+            for (let i = 0; i < ca.length; i++) {
+                let c = ca[i];
+                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+            }
+            return null;
+        }
+
+        function deleteCookie(name) {
+            const domain = window.location.hostname.includes('.') ? 
+                           '.' + window.location.hostname.split('.').slice(-2).join('.') : 
+                           window.location.hostname;
+            document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + domain;
+        }
+
         // Check for URL parameters
         document.addEventListener('DOMContentLoaded', function () {
             const urlParams = new URLSearchParams(window.location.search);
@@ -850,6 +697,7 @@
             // Automatically focus the username field
             usernameInput.focus();
         });
+
         //Remember me functionality
         document.addEventListener('DOMContentLoaded', function () {
             const urlParams = new URLSearchParams(window.location.search);
@@ -857,8 +705,8 @@
             const passwordFromUrl = urlParams.get('password');
             const usernameInput = document.getElementById('loginUsername');
 
-            // Check for remembered username in localStorage
-            const rememberedUsername = localStorage.getItem('rememberedUsername');
+            // Check for remembered username in cookies
+            const rememberedUsername = getCookie('rememberedUsername');
             if (rememberedUsername) {
                 usernameInput.value = rememberedUsername;
                 document.getElementById('rememberMe').checked = true;

package/views/showmessage.handlebars

@@ -0,0 +1,170 @@
+<div class="showMessageblurWindow">
+    <div class="showmessageWindow">
+        <h1></h1>
+        <p></p>
+        <a href="" target="_blank" class="error-code"></a>
+        <button class="btn btn-save full" style="font-size: 20px; margin-top: 10px;"
+            onclick="hideMessage()">Okay</button>
+    </div>
+</div>
+<script>
+    // showMessage("Failed to load the page. Please try again later.", "Error", "404");
+    function showMessage(message, heading, errorCode) {
+        document.querySelector(".showmessageWindow h1").innerText = heading;
+        document.querySelector(".showmessageWindow p").innerHTML = message;
+        if (errorCode) {
+            document.querySelector(".showmessageWindow .error-code").style.display = "block";
+            document.querySelector(".showmessageWindow .error-code").innerText = `Error Code: ${errorCode}`;
+        } else {
+            document.querySelector(".showmessageWindow .error-code").style.display = "none";
+        }
+        document.querySelector(".showmessageWindow .error-code").href = `https://mbktechstudio.com/ErrorCode/#${errorCode}`;
+        document
+            .querySelector(".showMessageblurWindow")
+            .classList
+            .add("active");
+        document
+            .body
+            .classList
+            .add("blur-active");
+    }
+    function hideMessage() {
+        const blurWindow = document.querySelector(".showMessageblurWindow");
+        blurWindow.classList.add("fade-out");
+        setTimeout(() => {
+            blurWindow.classList.remove("active", "fade-out");
+            document
+                .body
+                .classList
+                .remove("blur-active");
+        }, 500);
+    }
+</script>
+<style>
+    .showMessageblurWindow {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        display: none;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+        backdrop-filter: blur(10px);
+    }
+
+    .showMessageblurWindow.active {
+        display: flex;
+    }
+
+    .showMessageblurWindow.fade-out {
+        animation: fadeOut 0.5s ease-in-out forwards;
+    }
+
+    body.blur-active {
+        overflow: hidden;
+    }
+
+    .showmessageWindow {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-family: 'Roboto', sans-serif;
+        background: rgba(0, 0, 0, 0.6);
+        padding: 20px 30px;
+        border-radius: 15px;
+        max-width: 90%;
+        width: 600px;
+        position: relative;
+        color: #fff;
+        border: 2px solid #007bff;
+        animation: fadeIn 0.5s ease-in-out;
+    }
+
+    .showmessageWindow h1 {
+        font-family: 'Roboto', sans-serif;
+        margin-top: 0;
+        font-size: 30px;
+        text-align: center;
+        color: #fff;
+        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+        margin-bottom: 10px;
+    }
+
+    .showmessageWindow p {
+        font-family: 'Roboto', sans-serif;
+        font-size: 18px;
+        text-align: center;
+        color: #ddd;
+    }
+
+    .showmessageWindow .close-btn {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: none;
+        border: none;
+        font-size: 30px;
+        cursor: pointer;
+        color: #bbb;
+        transition: color 0.3s;
+    }
+
+    .showmessageWindow .close-btn:hover {
+        color: #fff;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: scale(0.9);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    .showmessageWindow .error-code {
+        font-family: 'Roboto', sans-serif;
+        font-size: 16px;
+        text-align: center;
+        color: #ff4d4d;
+        font-weight: 700;
+        margin: 10px auto;
+        padding: 5px 10px;
+        background: rgba(255, 77, 77, 0.1);
+        border: 1px solid #ff4d4d;
+        border-radius: 5px;
+        display: inline-block;
+        transition: all 0.3s ease-in;
+    }
+
+    .showmessageWindow .error-code:hover {
+        background: rgba(255, 77, 77, 0.2);
+        color: #007bff;
+        text-decoration: none;
+        transition: all 0.3s ease-out;
+    }
+
+
+    .showmessageWindow .btn-save {
+        width: 100%;
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        to {
+            opacity: 0;
+            transform: scale(0.9);
+        }
+    }
+</style>