mbkauthe 1.1.6 → 1.1.8

package/index.js

@@ -1,9 +1,17 @@
 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";
+import { fileURLToPath } from "url";
+
 dotenv.config();
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 let mbkautheVar;
+
 try {
     mbkautheVar = JSON.parse(process.env.mbkautheVar);
 } catch (error) {
@@ -35,9 +43,9 @@ if (mbkautheVar.BypassUsers !== undefined) {
     }
 }
 
+const app = express();
 if (process.env.test === "true") {
     console.log("Test mode is enabled. Starting server in test mode.");
-    const app = express();
     const port = 3000;
     app.use(router);
     app.listen(port, () => {
@@ -45,6 +53,25 @@ if (process.env.test === "true") {
     });
 }
 
+app.set("views", path.join(__dirname, "node_modules/mbkauthe/views"));
+
+app.engine("handlebars", engine({
+    defaultLayout: false,
+    partialsDir: [
+        path.join(__dirname, "node_modules/mbkauthe/views"),
+    ],
+}));
+
+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

@@ -15,6 +15,15 @@ const mbkautheVar = JSON.parse(process.env.mbkautheVar);
 
 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 || ''
+  });
+});
+
 async function getLatestVersion() {
   try {
     const response = await fetch('https://raw.githubusercontent.com/MIbnEKhalid/mbkauthe/main/package.json');
@@ -96,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" };
@@ -491,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.6",
+  "version": "1.1.8",
   "description": "MBKTechStudio's reusable authentication system for Node.js applications.",
   "main": "index.js",
   "type": "module",
@@ -32,11 +32,15 @@
     "cookie-parser": "^1.4.7",
     "dotenv": "^16.4.7",
     "express": "^5.1.0",
+    "express-handlebars": "^8.0.1",
     "express-rate-limit": "^7.5.0",
     "express-session": "^1.18.1",
     "marked": "^15.0.11",
     "node-fetch": "^3.3.2",
-    "pg": "^8.14.1"
+    "path": "^0.12.7",
+    "pg": "^8.14.1",
+    "speakeasy": "^2.0.0",
+    "url": "^0.11.4"
   },
   "devDependencies": {
     "nodemon": "^2.0.22"

package/views/loginmbkauthe.handlebars

@@ -0,0 +1,570 @@
+<!DOCTYPE html>
+<html lang="en">
+{{> script/showmessage }}
+
+<head>
+    <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:image" content="https://www.mbktechstudio.com/Assets/Images/Icon/logo.png" />
+    <meta property="og:url" content="https://portal.mbktechstudio.com/login">
+    <title>Login | MBK Tech Studio Portal</title>
+    <link rel="icon" type="image/x-icon" href="/Assets/Images/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>
+        :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;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+
+        body {
+            background: var(--dark);
+            color: var(--light);
+            line-height: 1.6;
+            overflow-x: hidden;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* 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);
+        }
+
+        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;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80px;
+            height: 4px;
+            background: var(--gradient);
+            border-radius: 2px;
+        }
+
+        /* Form Elements */
+        .form-group {
+            position: relative;
+            margin-bottom: 2rem;
+        }
+
+        .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);
+        }
+
+        .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;
+        }
+
+        /* 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>
+
+<body>
+    <header>
+        <nav>
+            <div class="navbar">
+                <a class="logo">
+                    <img src="/Assets/Images/dg.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>
+
+                <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>
+
+                <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>
+
+    <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) : '/chatbot';
+                    } else {
+                        // 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');
+                        }
+                    }
+                })
+                .catch(error => {
+                    grecaptcha.reset();
+                    loginButton.disabled = false;
+                    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;
+            }
+        });
+    </script>
+</body>
+
+</html>