mbkauthe 1.1.7 → 1.1.9

package/index.js

@@ -1,5 +1,6 @@
 import express from "express"; // Add this line
 import router from "./lib/main.js";
+import { getLatestVersion } from "./lib/info.js";
 import { engine } from "express-handlebars";
 import dotenv from "dotenv";
 import path from "path";
@@ -63,6 +64,14 @@ app.engine("handlebars", engine({
 
 app.set("view engine", "handlebars");
 
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+const packageJson = require("./package.json");
+const latestVersion = await getLatestVersion();
+if(latestVersion !== packageJson.version) {
+    console.warn(`Warning: The current version (${packageJson.version}) is not the latest version (${latestVersion}). Please update mbkauthe.`);
+}
+
 export { validateSession, checkRolePermission, validateSessionAndRole, getUserData, authenticate, authapi } from "./lib/validateSessionAndRole.js";
 export { dblogin } from "./lib/pool.js";
 export default router;

package/lib/info.js

@@ -18,6 +18,7 @@ const router = express.Router();
 router.get(["/mbkauthe/login"], (req, res) => {
   return res.render("loginmbkauthe", {
     layout: false,
+    customURL: mbkautheVar.loginRedirectURL || '/home',
     userLoggedIn: !!req.session?.user,
     UserName: req.session?.user?.username || ''
   });
@@ -104,8 +105,8 @@ router.get(["/mbkauthe/info", "/mbkauthe/i"], async (_, res) => {
 
   try {
     pkgl = await getPackageLock();
-    //    latestVersion = await getLatestVersion();
-    latestVersion = "Under Development"; // Placeholder for the latest version
+    latestVersion = await getLatestVersion();
+    //latestVersion = "Under Development"; // Placeholder for the latest version
   } catch (err) {
     console.error("Error fetching package-lock.json:", err);
     pkgl = { error: "Failed to fetch package-lock.json" };
@@ -499,460 +500,6 @@ router.get(["/mbkauthe/info", "/mbkauthe/i"], async (_, res) => {
         `);
   }
 });
-const DOCUMENTATION_TITLE = "Project Documentation";
-const CACHE_TTL = 3600000; // 1 hour in milliseconds
-
-// Cache for the rendered HTML
-let cachedHtml = null;
-let cacheTimestamp = 0;
-
-router.get(["/mbkauthe/"], async (_, res) => {
-  try {
-    // Check cache first
-    const now = Date.now();
-    if (cachedHtml && (now - cacheTimestamp) < CACHE_TTL) {
-      return res.send(cachedHtml);
-    }
-
-    // Read and process file
-    let readmePath;
-    if (process.env.test === "true") {
-      readmePath = path.join(process.cwd(), "README.md");
-    }
-    else {
-      readmePath = path.join(process.cwd(), "./node_modules/mbkauthe/README.md");
-    }
-    const data = await fs.promises.readFile(readmePath, "utf8");
-
-    // Convert markdown to HTML
-    let html = marked(data, {
-      breaks: true,
-      gfm: true,
-      smartypants: true
-    });
-
-    // Process HTML with cheerio
-    const $ = cheerio.load(html);
-
-    // Add IDs to headers for anchor links
-    $('h1, h2, h3, h4, h5, h6').each(function () {
-      const id = $(this).text()
-        .toLowerCase()
-        .replace(/\s+/g, '-')
-        .replace(/[^\w-]+/g, '');
-      $(this).attr('id', id);
-      $(this).addClass('header-anchor');
-    });
-
-    // Fix table of contents links and add icons
-    $('a[href^="#"]').each(function () {
-      const href = $(this).attr('href');
-      const id = href.substring(1)
-        .toLowerCase()
-        .replace(/\s+/g, '-')
-        .replace(/[^\w-]+/g, '');
-      $(this).attr('href', `#${id}`);
-      $(this).addClass('toc-link');
-    });
-
-    // Add copy buttons to code blocks
-    $('pre').each(function () {
-      const $pre = $(this);
-      const $button = $(`<button class="copy-button" aria-label="Copy code">📋</button>`);
-      $pre.prepend($button);
-    });
-
-    // Create the full HTML response
-    const htmlContent = generateFullHtml($.html());
-
-    // Update cache
-    cachedHtml = htmlContent;
-    cacheTimestamp = now;
-
-    res.send(htmlContent);
-  } catch (err) {
-    console.error("Error processing documentation:", err);
-    res.status(500).send(generateErrorHtml());
-  }
-});
-
-function generateFullHtml(contentHtml) {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Project documentation generated from README.md">
-  <title>${DOCUMENTATION_TITLE}</title>
-  <style>
-    :root {
-      --primary-color: #bb86fc;
-      --primary-dark: #9a67ea;
-      --secondary-color: #03dac6;
-      --secondary-dark: #018786;
-      --background-dark: #121212;
-      --background-darker: #1e1e1e;
-      --background-light: #2d2d2d;
-      --text-primary: #e0e0e0;
-      --text-secondary: #a0a0a0;
-      --error-color: #cf6679;
-      --success-color: #4caf50;
-    }
-    
-    body {
-      font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
-      line-height: 1.6;
-      margin: 0;
-      padding: 0;
-      background-color: var(--background-dark);
-      color: var(--text-primary);
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-    
-    .header-anchor {
-      position: relative;
-      padding-left: 1.5rem;
-    }
-    
-    .header-anchor::before {
-      content: "#";
-      position: absolute;
-      left: 0;
-      color: var(--text-secondary);
-      opacity: 0;
-      transition: opacity 0.2s;
-    }
-    
-    .header-anchor:hover::before {
-      opacity: 1;
-    }
-    
-    pre {
-      position: relative;
-      background: var(--background-darker);
-      padding: 1.5rem;
-      border-radius: 8px;
-      overflow-x: auto;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    }
-    
-    .copy-button {
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
-      background: var(--background-light);
-      color: var(--text-primary);
-      border: none;
-      border-radius: 4px;
-      padding: 0.25rem 0.5rem;
-      cursor: pointer;
-      opacity: 0;
-      transition: opacity 0.2s, background 0.2s;
-    }
-    
-    pre:hover .copy-button {
-      opacity: 1;
-    }
-    
-    .copy-button:hover {
-      background: var(--primary-color);
-      color: var(--background-dark);
-    }
-    
-    .copy-button.copied {
-      background: var(--success-color);
-      color: white;
-    }
-    
-    code {
-      font-family: 'Fira Code', 'Courier New', monospace;
-      background: var(--background-darker);
-      padding: 0.2rem 0.4rem;
-      border-radius: 4px;
-      color: var(--secondary-color);
-      font-size: 0.9em;
-      word-wrap: break-word;
-    }
-    
-    h1, h2, h3, h4, h5, h6 {
-      color: var(--primary-color);
-      margin-top: 1.8em;
-      margin-bottom: 0.8em;
-      scroll-margin-top: 1em;
-    }
-    
-    h1 { 
-      font-size: 2.4rem;
-      border-bottom: 2px solid var(--primary-color);
-      padding-bottom: 0.5rem;
-    }
-    
-    h2 { font-size: 2rem; }
-    h3 { font-size: 1.6rem; }
-    
-    a {
-      color: var(--secondary-color);
-      text-decoration: none;
-      transition: color 0.2s;
-    }
-    
-    a:hover {
-      color: var(--primary-color);
-      text-decoration: underline;
-    }
-    
-    .toc-link {
-      display: inline-block;
-      padding: 0.2rem 0;
-    }
-    
-    .toc-link::before {
-      content: "→ ";
-      opacity: 0;
-      transition: opacity 0.2s;
-    }
-    
-    .toc-link:hover::before {
-      opacity: 1;
-    }
-    
-    blockquote {
-      border-left: 4px solid var(--primary-color);
-      padding-left: 1.5rem;
-      margin-left: 0;
-      color: var(--text-secondary);
-      font-style: italic;
-      background: rgba(187, 134, 252, 0.05);
-      border-radius: 0 4px 4px 0;
-      padding: 1rem;
-    }
-    
-    table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 1.5rem 0;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    }
-    
-    th, td {
-      border: 1px solid #444;
-      padding: 0.75rem;
-      text-align: left;
-    }
-    
-    th {
-      background-color: var(--background-darker);
-      font-weight: 600;
-    }
-    
-    tr:nth-child(even) {
-      background-color: rgba(255, 255, 255, 0.05);
-    }
-    
-    tr:hover {
-      background-color: rgba(187, 134, 252, 0.1);
-    }
-    
-    img {
-      max-width: 100%;
-      height: auto;
-      border-radius: 8px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    }
-    
-    hr {
-      border: none;
-      height: 1px;
-      background-color: #444;
-      margin: 2rem 0;
-    }
-    
-    /* Dark mode toggle */
-    .theme-toggle {
-      position: fixed;
-      bottom: 1rem;
-      right: 1rem;
-      background: var(--background-light);
-      border: none;
-      border-radius: 50%;
-      width: 3rem;
-      height: 3rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-      z-index: 100;
-    }
-    
-    /* Responsive design */
-    @media (max-width: 768px) {
-      body {
-        padding: 1rem;
-      }
-      
-      h1 {
-        font-size: 2rem;
-      }
-      
-      h2 {
-        font-size: 1.7rem;
-      }
-      
-      pre {
-        padding: 1rem;
-        font-size: 0.9em;
-      }
-    }
-    
-    /* Print styles */
-    @media print {
-      body {
-        background-color: white;
-        color: black;
-        padding: 0;
-      }
-      
-      a {
-        color: #0066cc;
-      }
-      
-      pre, code {
-        background-color: #f5f5f5;
-        color: #333;
-      }
-    }
-  </style>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Fira+Code&display=swap" rel="stylesheet">
-</head>
-<body>
-<a href="/mbkauthe/info/" class="toc-link">mbkauthe Info</a>
-  <main>
-    ${contentHtml}
-  </main>
-  
-  <button class="theme-toggle" aria-label="Toggle theme">🌓</button>
-  
-  <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      // Smooth scrolling for TOC links
-      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function(e) {
-          e.preventDefault();
-          const targetId = this.getAttribute('href');
-          const targetElement = document.querySelector(targetId);
-          
-          if (targetElement) {
-            targetElement.scrollIntoView({
-              behavior: 'smooth',
-              block: 'start'
-            });
-            
-            // Update URL without page jump
-            history.pushState(null, null, targetId);
-          }
-        });
-      });
-      
-      // Copy button functionality
-      document.querySelectorAll('.copy-button').forEach(button => {
-        button.addEventListener('click', function() {
-          const pre = this.parentElement;
-          const code = pre.querySelector('code') || pre;
-          const range = document.createRange();
-          range.selectNode(code);
-          window.getSelection().removeAllRanges();
-          window.getSelection().addRange(range);
-          
-          try {
-            const successful = document.execCommand('copy');
-            if (successful) {
-              this.textContent = '✓ Copied!';
-              this.classList.add('copied');
-              setTimeout(() => {
-                this.textContent = '📋';
-                this.classList.remove('copied');
-              }, 2000);
-            }
-          } catch (err) {
-            console.error('Failed to copy:', err);
-          }
-          
-          window.getSelection().removeAllRanges();
-        });
-      });
-      
-      // Highlight current section in view
-      const observerOptions = {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.5
-      };
-      
-      const observer = new IntersectionObserver(function(entries) {
-        entries.forEach(function(entry) {
-          const id = entry.target.getAttribute('id');
-          if (entry.isIntersecting) {
-            document.querySelectorAll('a[href="#' + id + '"]').forEach(function(link) {
-              link.style.fontWeight = '600';
-              link.style.color = 'var(--primary-color)';
-            });
-          } else {
-            document.querySelectorAll('a[href="#' + id + '"]').forEach(function(link) {
-              link.style.fontWeight = '';
-              link.style.color = '';
-            });
-          }
-        });
-      }, observerOptions);
-      
-      document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(function(heading) {
-        if (heading.id) {
-          observer.observe(heading);
-        }
-      });
-      
-      // Theme toggle functionality
-      const themeToggle = document.querySelector('.theme-toggle');
-      themeToggle.addEventListener('click', function() {
-        document.body.classList.toggle('light-theme');
-        const isLight = document.body.classList.contains('light-theme');
-        this.textContent = isLight ? '🌙' : '🌓';
-        localStorage.setItem('themePreference', isLight ? 'light' : 'dark');
-      });
-      
-      // Load saved theme preference
-      const savedTheme = localStorage.getItem('themePreference');
-      if (savedTheme === 'light') {
-        document.body.classList.add('light-theme');
-        themeToggle.textContent = '🌙';
-      }
-    });
-  </script>
-</body>
-</html>`;
-}
-
-function generateErrorHtml() {
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Error Loading Documentation</title>
-</head>
-<body>
-  <h1>Error Loading Documentation</h1>
-  <p>Failed to load README.md file. Please try again later.</p>
-  <p>If the problem persists, contact your system administrator.</p>
-  <a href="/">Return to Home</a>
-  <div class="error-details">
-    Error: ${err.message || 'Unknown error'}
-  </div>
-</body>
-</html>`;
-}
 
+export { getLatestVersion };
 export default router;

package/lib/main.js

@@ -10,6 +10,7 @@ import cookieParser from "cookie-parser";
 import bcrypt from 'bcrypt';
 import rateLimit from 'express-rate-limit';
 import mbkautheinfo from "./info.js";
+import speakeasy from "speakeasy";
 
 import dotenv from "dotenv";
 dotenv.config();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mbkauthe",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "MBKTechStudio's reusable authentication system for Node.js applications.",
   "main": "index.js",
   "type": "module",
@@ -39,6 +39,7 @@
     "node-fetch": "^3.3.2",
     "path": "^0.12.7",
     "pg": "^8.14.1",
+    "speakeasy": "^2.0.0",
     "url": "^0.11.4"
   },
   "devDependencies": {

package/views/loginmbkauthe.handlebars

@@ -1,257 +1,570 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="en">
+{{> script/showmessage }}
 
 <head>
-    <title>Login</title>
-    <script src="/Assets/Scripts/logout.js"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description"
         content="Log in to portal.mbktechstudio.com to access your resources and manage projects securely.">
     <meta name="keywords" content="MBK Tech Studio, Web-Portal, Web, Portal, Admin-Panel, Admin, login">
-    <meta property="og:title" content="Portal Login | MBK Tech STudio" />
+    <meta property="og:title" content="Login | MBK Tech Studio" />
     <meta property="og:image" content="https://www.mbktechstudio.com/Assets/Images/Icon/logo.png" />
     <meta property="og:url" content="https://portal.mbktechstudio.com/login">
-    <script type="application/ld+json">
-            { "@context": "https://schema.org", "@type": "Organization", "name": "MBK Tech Studio", "url":
-            "https://portal.mbktechstudio.com/login", "logo": "https://www.mbktechstudio.com/Assets/Images/Icon/logo.png", "description":
-            "MBK Tech Studio: Log in to portal.mbktechstudio.com to access your resources and manage projects securely." }
-        </script>
+    <title>Login | MBK Tech Studio Portal</title>
+    <link rel="icon" type="image/x-icon" href="https://mbktechstudio.com/Assets/Images/Icon/dgicon.svg">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <style>
-        .info {
-            font-family: 'Open Sans', sans-serif;
-            font-size: 14px;
-            color: #0c5460;
-            background-color: #d1ecf1;
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            padding: 5px 15px;
-            margin-top: 5px;
-            font-weight: 500;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            line-height: 1.2;
+        :root {
+            --primary: #4361ee;
+            --primary-dark: #3a0ca3;
+            --primary-light: rgba(67, 97, 238, 0.1);
+            --secondary: #f72585;
+            --secondary-light: rgba(247, 37, 133, 0.1);
+            --dark: #121212;
+            --dark-light: #1e1e1e;
+            --darker: #0a0a0a;
+            --light: #f8f9fa;
+            --lighter: #ffffff;
+            --gray: #cccccc;
+            --gray-dark: #888888;
+            --success: #4cc9f0;
+            --warning: #f8961e;
+            --danger: #ef233c;
+            --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
+            --glass: rgba(30, 30, 30, 0.5);
+            --glass-border: rgba(255, 255, 255, 0.1);
+            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
+            --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.2);
+            --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.3);
+            --radius-sm: 8px;
+            --radius-md: 12px;
+            --radius-lg: 16px;
+            --radius-xl: 24px;
         }
 
-        .info span {
-            color: #007bff;
-            /* Highlight for the info icon */
-            margin-right: 8px;
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
         }
 
-        section .button {
-            margin: 0 0 2px !important;
+        body {
+            background: var(--dark);
+            color: var(--light);
+            line-height: 1.6;
+            overflow-x: hidden;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
         }
 
-        section .button button {
-            margin: 0 !important;
+        /* Header - Consistent with index */
+        header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            z-index: 1000;
+            transition: var(--transition);
+            background: linear-gradient(to bottom, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.7));
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--glass-border);
         }
 
-        .back {
-            top: 0;
-            color: #fff;
+        nav {
+            padding: 15px 5%;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .navbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .logo img {
+            height: 30px;
+            width: auto;
+            transition: var(--transition);
+        }
+
+        .logo:hover img {
+            transform: rotate(15deg);
+        }
+
+        .logo-text {
+            font-size: 1.8rem;
+            font-weight: 700;
+            background: var(--gradient);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+
+        /* Login Container */
+        .login-container {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 120px 5% 80px;
+            position: relative;
+            overflow: hidden;
+            background: radial-gradient(circle at 70% 20%, rgba(67, 97, 238, 0.15), transparent 60%);
+        }
+
+        .login-box {
+            background: var(--dark-light);
+            border-radius: var(--radius-xl);
+            padding: 3rem;
+            width: 100%;
+            max-width: 500px;
+            box-shadow: var(--shadow-lg);
+            border: 1px solid var(--glass-border);
+            position: relative;
+            z-index: 2;
+            transition: var(--transition);
+        }
+
+        .login-box:hover {
+            box-shadow: var(--shadow-lg);
+        }
+
+        .login-title {
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 2rem;
+            position: relative;
+            color: var(--lighter);
+        }
+
+        .login-title::after {
+            content: '';
             position: absolute;
-            margin-top: 10px;
-            font-size: 20px;
-            transition: color 0.3s ease;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80px;
+            height: 4px;
+            background: var(--gradient);
+            border-radius: 2px;
         }
 
-        .back:hover {
-            color: rgb(185, 185, 185);
-            transition: color 0.3s ease;
+        /* Form Elements */
+        .form-group {
+            position: relative;
+            margin-bottom: 2rem;
         }
 
-        @media(max-width: 1200px) {
-            .user-box label {
-                left: 2% !important;
-            }
+        .form-input {
+            width: 100%;
+            padding: 15px 20px;
+            background: var(--darker);
+            border: 2px solid var(--glass-border);
+            border-radius: var(--radius-sm);
+            color: var(--light);
+            font-size: 1rem;
+            transition: var(--transition);
         }
 
-        @media(max-width: 1200px) {
-            .user-box label {
-                left: 2% !important;
-            }
+        .form-input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px var(--primary-light);
+        }
+
+        .form-label {
+            position: absolute;
+            top: 15px;
+            left: 20px;
+            color: var(--gray);
+            transition: var(--transition);
+            pointer-events: none;
+        }
+
+        .form-input:focus+.form-label,
+        .form-input:not(:placeholder-shown)+.form-label {
+            top: -10px;
+            left: 15px;
+            font-size: 0.8rem;
+            background: var(--dark-light);
+            padding: 0 5px;
+            color: var(--primary);
         }
 
+        .input-icon {
+            position: absolute;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--gray);
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .input-icon:hover {
+            color: var(--primary);
+        }
+
+        .btn-login {
+            width: 100%;
+            padding: 15px;
+            border-radius: var(--radius-sm);
+            background: var(--primary);
+            color: white;
+            font-weight: 600;
+            font-size: 1rem;
+            border: none;
+            cursor: pointer;
+            transition: var(--transition);
+            box-shadow: var(--shadow-sm);
+            margin-top: 1rem;
+        }
+
+        .btn-login:hover {
+            background: var(--primary-dark);
+            transform: translateY(-3px);
+            box-shadow: var(--shadow-md);
+        }
+
+        .btn-login:disabled {
+            background: var(--gray-dark);
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+
+        /* Additional Links */
+        .login-links {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 1.5rem;
+            font-size: 0.9rem;
+        }
+
+        .login-link {
+            color: var(--gray);
+            transition: var(--transition);
+        }
+
+        .login-link:hover {
+            color: var(--primary);
+        }
+
+        /* Terms Info */
+        .terms-info {
+            margin-top: 2rem;
+            font-size: 0.8rem;
+            color: var(--gray);
+            text-align: center;
+        }
+
+        .terms-link {
+            color: var(--primary);
+            font-weight: 500;
+        }
+
+        /* Recaptcha */
         .recaptcha-container {
+            margin: 2rem 0;
             display: flex;
             justify-content: center;
-            align-items: center;
-            margin-top: 7px;
+        }
+
+        /* 2FA Token Container */
+        .token-container {
+            animation: fadeInUp 0.4s ease-out;
+        }
+
+        .token-container.disable {
+            display: none;
+        }
+
+        .token-container.enable {
+            display: block;
+        }
+
+        /* Floating Elements */
+        .ai-element {
+            position: absolute;
+            opacity: 0.1;
+            z-index: 1;
+            animation: float 6s ease-in-out infinite;
+        }
+
+        .ai-element:nth-child(1) {
+            top: 20%;
+            left: 10%;
+            font-size: 5rem;
+            animation-delay: 0s;
+        }
+
+        .ai-element:nth-child(2) {
+            top: 60%;
+            left: 80%;
+            font-size: 4rem;
+            animation-delay: 1s;
+        }
+
+        .ai-element:nth-child(3) {
+            top: 30%;
+            left: 70%;
+            font-size: 3rem;
+            animation-delay: 2s;
+        }
+
+        .ai-element:nth-child(4) {
+            top: 80%;
+            left: 20%;
+            font-size: 6rem;
+            animation-delay: 3s;
+        }
+
+        @keyframes float {
+
+            0%,
+            100% {
+                transform: translateY(0) rotate(0deg);
+            }
+
+            50% {
+                transform: translateY(-20px) rotate(5deg);
+            }
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Responsive Styles */
+        @media (max-width: 768px) {
+            .login-box {
+                padding: 2rem;
+            }
+
+            .login-title {
+                font-size: 1.8rem;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .login-box {
+                padding: 1.5rem;
+                border-radius: var(--radius-lg);
+            }
+
+            .login-links {
+                flex-direction: column;
+                gap: 0.5rem;
+                align-items: center;
+            }
         }
     </style>
 </head>
-{{> header1 }}
 
 <body>
-    <section class="about" id="about">
-        <div class="content">
-            <div class="portalbox">
-                <div class="title">
-                    <span style="font-size:30px;">Login</span>
+    <header>
+        <nav>
+            <div class="navbar">
+                <a class="logo">
+                    <img src="https://mbktechstudio.com/Assets/Images/Icon/dgicon.svg" alt="MBK Tech Studio Logo">
+                    <span class="logo-text">MBK Authe</span>
+                </a>
+            </div>
+        </nav>
+    </header>
+
+    <section class="login-container">
+        <!-- Floating AI elements -->
+        <i class="fas fa-robot ai-element"></i>
+        <i class="fas fa-microchip ai-element"></i>
+        <i class="fas fa-user-astronaut ai-element"></i>
+        <i class="fas fa-satellite-dish ai-element"></i>
+        <i class="fas fa-cloud ai-element"></i>
+        <i class="fas fa-shield-alt ai-element"></i>
+
+        <div class="login-box">
+            <h1 class="login-title">Login</h1>
+
+            <form id="loginForm" method="POST">
+                <div class="form-group">
+                    <input id="loginUsername" class="form-input" type="text" name="username" placeholder=" " required
+                        pattern="^[a-z0-9.]+$"
+                        title="Username must contain lowercase letters, numbers, and periods only, no spaces, no special characters."
+                        oninput="this.value = this.value.toLowerCase().replace(/[^a-z0-9.]/g, '')" />
+                    <label class="form-label">Username</label>
+                    <i class="fas fa-info-circle input-icon" onclick="usernameinfo()"></i>
                 </div>
-                <form id="loginForm" action="/login" method="POST">
-                    <div class="back" onclick="loadpage('/')">
-                        <i class="fa-solid fa-arrow-left"></i>
-                    </div>
-                    <div class="user-box">
-                        <input id="loginUsername" type="text" name="username" required pattern="^[a-z0-9.]+$"
-                            title="Username must contain lowercase letters, numbers, and periods only, no spaces, no special characters."
-                            oninput="this.value = this.value.toLowerCase().replace(/[^a-z0-9.]/g, '')" />
-                        <label>User Name</label>
-                        <span class="info-icon" onclick="usernameinfo()">
-                            <i class="fa fa-info-circle"></i>
-                        </span>
-                    </div>
-                    <div class="user-box">
-                        <input id="loginPassword" type="password" name="Password" required="" />
-                        <label>Password</label>
-                        <span class="password-toggle-icon">
-                            <i class="fa fa-eye"></i>
-                        </span>
-                    </div>
-                    <div class="user-box" id="tokenCon" style="display: none;">
-                        <input id="token" type="text" class="no-spinner" name="token" pattern="\d{6}"
-                            title="Token must be exactly 6 digits" maxlength="6" minlength="6" />
-                        <label>Token</label>
-                        <span class="info-icon" onclick="tokeninfo()">
-                            <i class="fa fa-info-circle"></i>
-                        </span>
-                    </div>
-                    <div class="wrap">
-                        <div class="button">
-                            <button style="font-size: 17px;" type="submit">Login</button>
-                        </div>
-                    </div>
-                </form>
-                {{#if userLoggedIn }}
-                {{> alreadyloggedin UserName=UserName }}
-                {{/if }}
-                <p class="info maincssp">
-                    <span class="">
-                        <i class="fa fa-info-circle"></i>
-                    </span>By Logging In, You Are Automatically Agreeing To Our
-                    <a class="links" href="/info/Terms&Conditions">Use Of Terms & Conditions
-                    </a>
-                </p>
+
+                <div class="form-group">
+                    <input id="loginPassword" class="form-input" type="password" name="Password" placeholder=" "
+                        required />
+                    <label class="form-label">Password</label>
+                    <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="recaptcha-container">
                     <div class="g-recaptcha" data-theme="dark" data-sitekey="6LfhaPgqAAAAAPgOw7r3rNOHKKfh5d7K3MMJeUHo">
                     </div>
                 </div>
-            </div>
+
+                <button type="submit" class="btn-login" id="loginButton">
+                    <span id="loginButtonText">Login</span>
+                </button>
+
+                <div class="login-links">
+                    <a onclick="fpass()" class="login-link">Forgot Password?</a>
+                    <a href="https://www.mbktechstudio.com/Support" target="_blank" class="login-link">Need Help?</a>
+                </div>
+
+                <p class="terms-info">
+                    By logging in, you agree to our
+                    <a href="/info/Terms&Conditions" class="terms-link">Terms & Conditions</a>
+                    and
+                    <a href="/info/PrivacyPolicy" class="terms-link">Privacy Policy</a>.
+                </p>
+            </form>
         </div>
     </section>
-</body>
-{{> footer }}
-<script>
-    function usernameinfo() {
-        showMessage(
-            '<div style="">If you are a member of the Mbk Tech Studio team, your username is the first part of your email address (e.' +
-            'g., for abc.xyz@mbktechstudio.com, your username is abc.xyz). If you are a guest or have forgotten your username and pas' +
-            'sword, please fill contact form at <a class="links" href="https://www.mbktechstudio.com/Support">mbktechstudio.com/Suppo' +
-            'rt</a> or contact me directly.<div>',
-            "What Is My Username?"
-        );
-    }
-    function tokeninfo() {
-        showMessage(
-            '<div style="">The 2FA token or Auth token is required for SuperAdmin and NormalAdmin to log in. Each user has been given' +
-            ' an Auth Code, which they can use to generate an Auth token using any Auth App.<div>',
-            "What Is Token?"
-        );
-    }
-
-    document.getElementById('loginForm').addEventListener('submit', function (event) {
-        event.preventDefault();
-        const username = document.getElementById('loginUsername').value.trim();
-        const password = document.getElementById('loginPassword').value.trim();
-        const token = document.getElementById('token').value.trim(); // 2FA token
-        let recaptchaResponse;
-
-        recaptchaResponse = grecaptcha.getResponse();
-
-        if (!username || !password) {
-            showMessage("Username and password cannot be empty", "Error");
-            return;
-        }
-        const loginButton = document.querySelector('button[type="submit"]');
-        loginButton.disabled = true;
-        loginButton.innerText = "Logging in.....";
-        fetch('/mbkauthe/api/login', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ username, password, token, recaptcha: recaptchaResponse || null })
-        })
-            .then(response => {
-                loginButton.disabled = false;
-                loginButton.innerText = "Login";
-                return response.json().then(data => {
-                    if (response.ok) {
-                        return data;
+
+    <script>
+
+
+        // Toggle password visibility
+        const togglePassword = document.getElementById('togglePassword');
+        const passwordInput = document.getElementById('loginPassword');
+
+        togglePassword.addEventListener('click', function () {
+            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+            passwordInput.setAttribute('type', type);
+            togglePassword.classList.toggle('fa-eye');
+            togglePassword.classList.toggle('fa-eye-slash');
+        });
+
+        function fpass() {
+            showMessage(`If you have forgotten your password, please contact support at <a href="https://www.mbktechstudio.com/Support" target="_blank">https://www.mbktechstudio.com/Support</a> to reset it.`, `Forgot Password`);
+        }
+
+        // Info dialogs
+        function usernameinfo() {
+            showMessage(`If you are a member of the MBK Tech Studio team, your username is the first part of your email address (e.g., for abc.xyz@mbktechstudio.com, your username is abc.xyz). If you are a guest or have forgotten your username and password, please contact support.`, `What is my username?`);
+        }
+
+        function tokeninfo() {
+            showMessage(`The 2FA token is a 6-digit code generated by your authenticator app (such as Google Authenticator, Microsoft Authenticator, or Authy). Enter the code shown in your app to complete login. If you have not set up 2FA or are having trouble, please contact support.`, `What is the 2FA token?`);
+        }
+
+        // Form submission
+        document.getElementById('loginForm').addEventListener('submit', function (event) {
+            event.preventDefault();
+
+            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 recaptchaResponse = grecaptcha.getResponse();
+            const loginButton = document.getElementById('loginButton');
+            const loginButtonText = document.getElementById('loginButtonText');
+
+            if (!username || !password) {
+                showMessage('Username and password are required', 'Login Error');
+                return;
+            }
+
+            loginButton.disabled = true;
+            loginButtonText.textContent = 'Authenticating...';
+
+            fetch('/mbkauthe/api/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    username,
+                    password,
+                    token,
+                    recaptcha: recaptchaResponse
+                })
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        loginButtonText.textContent = 'Success! Redirecting...';
+                        sessionStorage.setItem('sessionId', data.sessionId);
+
+                        // Redirect to the appropriate page
+                        const redirectUrl = new URLSearchParams(window.location.search).get('redirect');
+                        window.location.href = redirectUrl ? decodeURIComponent(redirectUrl) : '{{customURL}}';
                     } else {
-                        throw new Error(data.message || "An error occurred");
+                        // Handle errors
+                        grecaptcha.reset();
+                        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');
+                        }
                     }
-                });
-            })
-            .then(data => {
-                if (data.success) {
-                    sessionStorage.setItem('sessionId', data.sessionId);
-                    clearAllCookies();
-                    const redirectUrl = new URLSearchParams(window.location.search).get('redirect');
-                    loginButton.innerText = "Redirecting.....";
-                    window.location.href = redirectUrl ? decodeURIComponent(redirectUrl) : '/chatbot';
-                } else {
+                })
+                .catch(error => {
                     grecaptcha.reset();
-                    showMessage(data.message, "Error");
-                    document.getElementById('loginMessage').innerText = data.message;
-                    if (data.code === 401 && data.message === "Invalid 2FA code") {
-                        console.log("data.message");
-                    }
-                }
-            })
-            .catch(error => {
-                grecaptcha.reset();
-                if (error.message === "Please Enter 2FA code") {
-                    showMessage("Please enter the 2FA code", "Error");
-                    const tokenCon = document.getElementById('tokenCon');
-                    const tokenInput = document.getElementById('token');
-                    tokenCon.style.display = "block";
-                    tokenInput.setAttribute('required', '');
-                } else {
-                    console.error('Error:', error);
-                    showMessage(error.message, "Error");
                     loginButton.disabled = false;
-                    loginButton.innerText = "Login";
-                }
-            });
-    });
-    document.addEventListener('DOMContentLoaded', function () {
-        const loginButton = document.querySelector('button[type="submit"]');
-        loginButton.innerText = "Login";
-    });
-    // Event listener for toggling password visibility
-    document.addEventListener('DOMContentLoaded', function () { // Set the value of the input field with the page URL
-        const passwordInput = document.getElementById('loginPassword');
-        const toggleIcon = document.querySelector('.password-toggle-icon');
-        toggleIcon.addEventListener('click', function () { // Toggle the type of the input field
-            if (passwordInput.type === 'password') {
-                passwordInput.type = 'text'; // Show password
-                toggleIcon.innerHTML = '<i class="fa fa-eye-slash"></i>'; // Change icon to closed eye
-            } else {
-                passwordInput.type = 'password'; // Hide password
-                toggleIcon.innerHTML = '<i class="fa fa-eye"></i>'; // Change icon to open eye
+                    loginButtonText.textContent = 'Login';
+                    console.error('Error:', error);
+                    showMessage('An error occurred. Please try again.', 'Login Error');
+                });
+        });
+
+        // Check for URL parameters
+        document.addEventListener('DOMContentLoaded', function () {
+            const urlParams = new URLSearchParams(window.location.search);
+            const usernameFromUrl = urlParams.get('username');
+            const passwordFromUrl = urlParams.get('password');
+
+            if (usernameFromUrl) {
+                document.getElementById('loginUsername').value = usernameFromUrl;
+            }
+
+            if (passwordFromUrl) {
+                document.getElementById('loginPassword').value = passwordFromUrl;
             }
         });
-    });
-    const urlParams = new URLSearchParams(window.location.search);
-    const usernameFromUrl = urlParams.get('username');
-    const passwordFromUrl = urlParams.get('password');
-    if (usernameFromUrl && !document.getElementById('loginUsername').value) {
-        document.getElementById('loginUsername').value = usernameFromUrl;
-    }
-    if (passwordFromUrl && !document.getElementById('loginPassword').value) {
-        document.getElementById('loginPassword').value = passwordFromUrl;
-    }
-</script>
+    </script>
+</body>
 
 </html>