mbkauthe 1.1.18 → 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>
@@ -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,48 +594,40 @@
                 },
                 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) {
-                            setCookie('rememberedUsername', username, 30); // 30 days
+                        if (data.twoFactorRequired) {
+                            // Redirect to 2FA page
+                            window.location.href = '/mbkauthe/2fa';
                         } else {
-                            deleteCookie('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');
                 });
         });

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>