mbkauthe 2.1.0 → 2.3.0

package/lib/pool.js

@@ -1,30 +1,6 @@
 import pkg from "pg";
 const { Pool } = pkg;
-
-import dotenv from "dotenv";
-dotenv.config();
-
-let mbkautheVar;
-try {
-  mbkautheVar = JSON.parse(process.env.mbkautheVar);
-} catch (error) {
-  throw new Error("Invalid JSON in process.env.mbkautheVar");
-}
-if (!mbkautheVar) {
-  throw new Error("mbkautheVar is not defined");
-}
-const requiredKeys = ["APP_NAME", "SESSION_SECRET_KEY", "IS_DEPLOYED", "LOGIN_DB", "MBKAUTH_TWO_FA_ENABLE", "DOMAIN"];
-requiredKeys.forEach(key => {
-  if (!mbkautheVar[key]) {
-    throw new Error(`mbkautheVar.${key} is required`);
-  }
-});
-if (mbkautheVar.COOKIE_EXPIRE_TIME !== undefined) {
-  const expireTime = parseFloat(mbkautheVar.COOKIE_EXPIRE_TIME);
-  if (isNaN(expireTime) || expireTime <= 0) {
-    throw new Error("mbkautheVar.COOKIE_EXPIRE_TIME must be a valid positive number");
-  }
-}
+import { mbkautheVar } from "./config.js";
 
 const poolConfig = {
   connectionString: mbkautheVar.LOGIN_DB,

package/lib/validateSessionAndRole.js

@@ -1,29 +1,11 @@
 import { dblogin } from "./pool.js";
-const mbkautheVar = JSON.parse(process.env.mbkautheVar);
-
-const getCookieOptions = () => ({
-  maxAge: mbkautheVar.COOKIE_EXPIRE_TIME * 24 * 60 * 60 * 1000,
-  domain: mbkautheVar.IS_DEPLOYED === 'true' ? `.${mbkautheVar.DOMAIN}` : undefined,
-  secure: mbkautheVar.IS_DEPLOYED === 'true',
-  sameSite: 'lax',
-  path: '/',
-  httpOnly: true
-});
-
-const getClearCookieOptions = () => ({
-  domain: mbkautheVar.IS_DEPLOYED === 'true' ? `.${mbkautheVar.DOMAIN}` : undefined,
-  secure: mbkautheVar.IS_DEPLOYED === 'true',
-  sameSite: 'lax',
-  path: '/',
-  httpOnly: true
-});
+import { mbkautheVar, renderError, clearSessionCookies } from "./config.js";
 
 async function validateSession(req, res, next) {
   if (!req.session.user) {
     console.log("[mbkauthe] User not authenticated");
     console.log("[mbkauthe]: ", req.session.user);
-    return res.render("Error/dError.handlebars", {
-      layout: false,
+    return renderError(res, {
       code: 401,
       error: "Not Logged In",
       message: "You Are Not Logged In. Please Log In To Continue.",
@@ -38,19 +20,15 @@ async function validateSession(req, res, next) {
     // Normalize sessionId to lowercase for consistent comparison
     const normalizedSessionId = sessionId.toLowerCase();
 
-    // Single optimized query to validate session
-    const query = `SELECT "SessionId", "Active" FROM "Users" WHERE "id" = $1`;
+    // Single optimized query to validate session and get role
+    const query = `SELECT "SessionId", "Active", "Role" FROM "Users" WHERE "id" = $1`;
     const result = await dblogin.query({ name: 'validate-user-session', text: query, values: [id] });
 
     if (result.rows.length === 0 || result.rows[0].SessionId.toLowerCase() !== normalizedSessionId) {
       console.log(`[mbkauthe] Session invalidated for user "${req.session.user.username}"`);
       req.session.destroy();
-      const cookieOptions = getClearCookieOptions();
-      res.clearCookie("mbkauthe.sid", cookieOptions);
-      res.clearCookie("sessionId", cookieOptions);
-      res.clearCookie("username", cookieOptions);
-      return res.render("Error/dError.handlebars", {
-        layout: false,
+      clearSessionCookies(res);
+      return renderError(res, {
         code: 401,
         error: "Session Expired",
         message: "Your Session Has Expired. Please Log In Again.",
@@ -62,12 +40,8 @@ async function validateSession(req, res, next) {
     if (!result.rows[0].Active) {
       console.log(`[mbkauthe] Account is inactive for user "${req.session.user.username}"`);
       req.session.destroy();
-      const cookieOptions = getClearCookieOptions();
-      res.clearCookie("mbkauthe.sid", cookieOptions);
-      res.clearCookie("sessionId", cookieOptions);
-      res.clearCookie("username", cookieOptions);
-      return res.render("Error/dError.handlebars", {
-        layout: false,
+      clearSessionCookies(res);
+      return renderError(res, {
         code: 401,
         error: "Account Inactive",
         message: "Your Account Is Inactive. Please Contact Support.",
@@ -80,12 +54,8 @@ async function validateSession(req, res, next) {
       if (!allowedApps || !allowedApps.some(app => app.toLowerCase() === mbkautheVar.APP_NAME.toLowerCase())) {
         console.warn(`[mbkauthe] User \"${req.session.user.username}\" is not authorized to use the application \"${mbkautheVar.APP_NAME}\"`);
         req.session.destroy();
-        const cookieOptions = getClearCookieOptions();
-        res.clearCookie("mbkauthe.sid", cookieOptions);
-        res.clearCookie("sessionId", cookieOptions);
-        res.clearCookie("username", cookieOptions);
-        return res.render("Error/dError.handlebars", {
-          layout: false,
+        clearSessionCookies(res);
+        return renderError(res, {
           code: 401,
           error: "Unauthorized",
           message: `You Are Not Authorized To Use The Application \"${mbkautheVar.APP_NAME}\"`,
@@ -95,6 +65,9 @@ async function validateSession(req, res, next) {
       }
     }
 
+    // Store user role in request for checkRolePermission to use
+    req.userRole = result.rows[0].Role;
+
     next();
   } catch (err) {
     console.error("[mbkauthe] Session validation error:", err);
@@ -107,8 +80,7 @@ const checkRolePermission = (requiredRoles, notAllowed) => {
     try {
       if (!req.session || !req.session.user || !req.session.user.id) {
         console.log("[mbkauthe] User not authenticated");
-        return res.render("Error/dError.handlebars", {
-          layout: false,
+        return renderError(res, {
           code: 401,
           error: "Not Logged In",
           message: "You Are Not Logged In. Please Log In To Continue.",
@@ -117,21 +89,12 @@ const checkRolePermission = (requiredRoles, notAllowed) => {
         });
       }
 
-      const userId = req.session.user.id;
-
-      const query = `SELECT "Role" FROM "Users" WHERE "id" = $1`;
-      const result = await dblogin.query({ name: 'check-role-permission', text: query, values: [userId] });
-
-      if (result.rows.length === 0) {
-        return res.status(401).json({ success: false, message: "Authentication failed" });
-      }
-
-      const userRole = result.rows[0].Role;
+      // Use role from validateSession to avoid additional DB query
+      const userRole = req.userRole;
 
       // Check notAllowed role
       if (notAllowed && userRole === notAllowed) {
-        return res.render("Error/dError.handlebars", {
-          layout: false,
+        return renderError(res, {
           code: 403,
           error: "Access Denied",
           message: "You are not allowed to access this resource",
@@ -150,8 +113,7 @@ const checkRolePermission = (requiredRoles, notAllowed) => {
 
       // Check if user role is in allowed roles
       if (!rolesArray.includes(userRole)) {
-        return res.render("Error/dError.handlebars", {
-          layout: false,
+        return renderError(res, {
           code: 403,
           error: "Access Denied",
           message: "You do not have permission to access this resource",
@@ -179,7 +141,6 @@ const validateSessionAndRole = (requiredRole, notAllowed) => {
 const authenticate = (authentication) => {
   return (req, res, next) => {
     const token = req.headers["authorization"];
-    console.log(`[mbkauthe] Received token: ${token}`);
     if (token === authentication) {
       console.log("[mbkauthe] Authentication successful");
       next();
@@ -190,78 +151,5 @@ const authenticate = (authentication) => {
   };
 };
 
-const authapi = (requiredRole = []) => {
-  return (req, res, next) => {
-    const token = req.headers["authorization"];
-
-    // Validate token
-    if (!token) {
-      console.warn("[mbkauthe] [authapi] No token provided in the request headers");
-      return res.status(401).json({
-        success: false,
-        message: "Authorization token is required"
-      });
-    }
-
-    if (typeof token !== 'string' || token.length === 0 || token.length > 512) {
-      console.warn("[mbkauthe] [authapi] Invalid token format");
-      return res.status(401).json({
-        success: false,
-        message: "Invalid authorization token format"
-      });
-    }
-
-    if (typeof token === 'string' && token.length >= 64) {
-      console.log("[mbkauthe] [authapi] Received request with token:", token.substring(0, 3) + ".....", token.charAt(63));
-    } else {
-      console.log("[mbkauthe] [authapi] Received request with short token");
-    }
-
-    // Single query to validate API key and fetch user in one DB round trip.
-    (async () => {
-      try {
-        const jointQuery = `
-          SELECT u.id, u."UserName", u."Active", u."Role", k."key" as apikey
-          FROM "UserAuthApiKey" k
-          JOIN "Users" u ON u."UserName" = k.username
-          WHERE k."key" = $1 AND u."Active" = true
-          LIMIT 1
-        `;
-
-        const result = await dblogin.query({ name: 'validate-api-key', text: jointQuery, values: [token] });
-
-        if (result.rows.length === 0) {
-          console.warn("[mbkauthe] [authapi] Invalid token or associated user inactive");
-          return res.status(401).json({ success: false, message: "The AuthApiToken Is Invalid or user inactive" });
-        }
-
-        const user = result.rows[0];
-
-        if (user.UserName === "demo") {
-          console.warn("[mbkauthe] [authapi] Demo user attempted to access an endpoint. Access denied.");
-          return res.status(401).json({ success: false, message: "Demo user is not allowed to access endpoints" });
-        }
-
-        // role check
-        if ((requiredRole && user.Role !== requiredRole) && user.Role !== "SuperAdmin") {
-          console.warn(`[mbkauthe] [authapi] User does not have the required role. Required: ${requiredRole}, User's role: ${user.Role}`);
-          return res.status(403).json({ success: false, message: `Access denied. Required role: ${requiredRole}` });
-        }
-
-        req.user = {
-          username: user.UserName,
-          UserName: user.UserName,
-          role: user.Role,
-          Role: user.Role,
-        };
-
-        next();
-      } catch (err) {
-        console.error("[mbkauthe] [authapi] Database error while validating token/user:", err);
-        return res.status(500).json({ success: false, message: "Internal Server Error" });
-      }
-    })();
-  };
-};
 
-export { validateSession, checkRolePermission, validateSessionAndRole, authenticate, authapi };
+export { validateSession, checkRolePermission, validateSessionAndRole, authenticate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mbkauthe",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "MBKTech's reusable authentication system for Node.js applications.",
   "main": "index.js",
   "type": "module",
@@ -19,7 +19,7 @@
     "session",
     "security"
   ],
-  "author": "Muhammad Bin Khalid <support@mbktechstudio.com>",
+  "author": "Muhammad Bin Khalid <support@mbktech.org>",
   "license": "MPL-2.0",
   "bugs": {
     "url": "https://github.com/MIbnEKhalid/mbkauthe/issues"

package/public/icon.svg

@@ -0,0 +1,5 @@
+<svg data-v-423bf9ae="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="iconAboveSlogan">
+  <g data-v-423bf9ae="" id="8db2a7f9-6efc-4f7e-ae5b-8ba33875da43" transform="matrix(2.8125,0,0,2.8125,0,0)" stroke="none" fill="#88df95">
+    <path d="M0 32h32V0H0v32zm19.377-19.492l6.936-6.936v20.855h-6.936V12.508zM5.688 5.572l6.936 6.936v13.919H5.688V5.572z"></path>
+  </g>
+</svg>

package/views/2fa.handlebars

@@ -1,61 +1,38 @@
 <!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="Log in to portal.mbktech.org 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="Login | MBK Tech Studio" />
-    <meta property="og:image" content="https://mbktech.org/Assets/Images/Icon/logo.png" />
-    <meta property="og:url" content="/mbkauthe/2fa">
-    <title>2FA | MBK Tech Studio Portal</title>
-    <link rel="icon" type="image/x-icon" href="https://mbktech.org/Assets/Images/Icon/dgicon.svg">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    {{> sharedStyles}}
-</head>
+{{> head pageTitle="2FA" ogUrl="/mbkauthe/2fa"}}
 
 <body>
-    <header>
-        <div class="header-container">
-            <a class="logo">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="iconAboveSlogan">
-                    <g id="8db2a7f9-6efc-4f7e-ae5b-8ba33875da43" transform="matrix(2.8125,0,0,2.8125,0,0)" stroke="none"
-                        fill="#00b894">
-                        <path
-                            d="M0 32h32V0H0v32zm19.377-19.492l6.936-6.936v20.855h-6.936V12.508zM5.688 5.572l6.936 6.936v13.919H5.688V5.572z">
-                        </path>
-                    </g>
-                </svg>
-                <span class="logo-text">{{appName}} <span class="logo-comp">mbktech</span></span>
-            </a>
-        </div>
-    </header>
+    {{> header}}
 
     {{> showmessage}}
 
     <section class="login-container">
 
-        <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>
+        {{> backgroundElements}}
 
         <div class="login-box">
-            <h1 class="login-title">Two Factor Authorization</h1>
+            <h1 class="login-title">Two-Factor Authentication</h1>
+            <p class="login-subtitle">Enter the 6-digit code from your authenticator app</p>
 
             <form id="loginForm" method="POST">
                 <input type="hidden" name="_csrf" value="{{csrfToken}}">
                 <div class="form-group token-container" 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" />
+                        title="Token must be exactly 6 digits" maxlength="6" minlength="6" autocomplete="off" required />
                     <label class="form-label">2FA Token</label>
                     <i class="fas fa-info-circle input-icon" onclick="tokeninfo()"></i>
                 </div>
 
+                <div class="trust-device-container">
+                    <label class="trust-device-label">
+                        <input type="checkbox" id="trustDevice" name="trustDevice" class="trust-device-checkbox" />
+                        <span class="checkbox-custom"></span>
+                        <span class="checkbox-text">Trust this device for {{DEVICE_TRUST_DURATION_DAYS}} days</span>
+                    </label>
+                    <i class="fas fa-info-circle trust-device-info" onclick="trustDeviceInfo()" title="Learn more about trusted devices"></i>
+                </div>
 
                 <button type="submit" class="btn-login" id="loginButton">
                     <span id="loginButtonText">Verify</span>
@@ -73,19 +50,21 @@
         </div>
     </section>
 
-    <!-- Version Info -->
-    <div class="version-info">
-        v{{version}}
-    </div>
+    {{> versionInfo}}
 
     <script>
         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?`);
         }
 
+        function trustDeviceInfo() {
+            showMessage(`When you trust this device, you won't need to enter a 2FA code for {{DEVICE_TRUST_DURATION_DAYS}} days when logging in from this browser. This makes logging in faster while keeping your account secure. You can revoke trusted devices at any time from your account settings.`, `Trust This Device`);
+        }
+
         document.getElementById('loginForm').addEventListener('submit', async (e) => {
             e.preventDefault();
             const token = document.getElementById('token').value;
+            const trustDevice = document.getElementById('trustDevice').checked;
             const csrfToken = document.querySelector('input[name="_csrf"]').value;
             const loginButton = document.getElementById('loginButton');
             const loginButtonText = document.getElementById('loginButtonText');
@@ -101,6 +80,7 @@
                     },
                     body: JSON.stringify({
                         token,
+                        trustDevice,
                         _csrf: csrfToken
                     })
                 });

package/views/Error/dError.handlebars

@@ -1,14 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{code}} - {{error}}</title>
-  <link rel="icon" type="image/x-icon" href="https://mbktech.org/Assets/Images/Icon/dgicon.svg">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-  {{> sharedStyles}}
-  <style>
+{{> head pageCode=code pageError=error ogUrl="/error" extraStyles="<style>
     .login-box {
       max-width: 600px;
     }
@@ -171,34 +164,14 @@
         gap: 0.5rem;
       }
     }
-  </style>
-</head>
+  </style>"}}
 
 <body>
-  <header>
-    <div class="header-container">
-      <a class="logo">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="iconAboveSlogan">
-          <g id="8db2a7f9-6efc-4f7e-ae5b-8ba33875da43" transform="matrix(2.8125,0,0,2.8125,0,0)" stroke="none"
-            fill="#00b894">
-            <path
-              d="M0 32h32V0H0v32zm19.377-19.492l6.936-6.936v20.855h-6.936V12.508zM5.688 5.572l6.936 6.936v13.919H5.688V5.572z">
-            </path>
-          </g>
-        </svg>
-        <span class="logo-text">{{#if app}}{{app}}{{else}}mbkauthe{{/if}} <span
-            class="logo-comp">mbktech</span></span>
-      </a>
-    </div>
-  </header>
-
+  {{> header}}
 
   <section class="login-container">
 
-    <i class="fas fa-server ai-element"></i>
-    <i class="fas fa-database ai-element"></i>
-    <i class="fas fa-network-wired ai-element"></i>
-    <i class="fas fa-code ai-element"></i>
+    {{> backgroundElements}}
 
     <div class="login-box">
       <h1 class="status-code">{{code}}</h1>
@@ -230,10 +203,9 @@
 
     </div>
   </section>
-  <!-- Version Info -->
-  <div class="version-info">
-    v{{version}}
-  </div>
+
+  {{> versionInfo}}
+  
   <script>
     function toggleDetailsDropdown(element) {
       const errorDetailsWrapper = element.querySelector('.error-details-wrapper');

package/views/backgroundElements.handlebars

@@ -0,0 +1,6 @@
+<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>

package/views/head.handlebars

@@ -0,0 +1,14 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="{{#if description}}{{description}}{{else}}Log in to portal.mbktech.org to access your resources and manage projects securely.{{/if}}">
+    <meta name="keywords" content="MBK Tech, Web-Portal, Web, Portal, Admin-Panel, Admin, login">
+    <meta property="og:title" content="{{#if pageTitle}}{{pageTitle}}{{else}}{{#if pageCode}}{{pageCode}}{{/if}}{{#if pageError}} - {{pageError}}{{/if}}{{/if}} | MBK Tech" />
+    <meta property="og:image" content="https://mbktech.org/Assets/Images/Icon/logo.png" />
+    <meta property="og:url" content="{{ogUrl}}">
+    <title>{{#if pageTitle}}{{pageTitle}}{{else}}{{#if pageCode}}{{pageCode}}{{/if}}{{#if pageError}} - {{pageError}}{{/if}}{{/if}} | MBK Tech Portal</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    {{> sharedStyles}}
+    {{#if extraStyles}}{{{extraStyles}}}{{/if}}
+</head>

package/views/header.handlebars

@@ -0,0 +1,15 @@
+<header>
+    <div class="header-container">
+        <a class="logo">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="iconAboveSlogan">
+                <g id="8db2a7f9-6efc-4f7e-ae5b-8ba33875da43" transform="matrix(2.8125,0,0,2.8125,0,0)" stroke="none"
+                    fill="#00b894">
+                    <path
+                        d="M0 32h32V0H0v32zm19.377-19.492l6.936-6.936v20.855h-6.936V12.508zM5.688 5.572l6.936 6.936v13.919H5.688V5.572z">
+                    </path>
+                </g>
+            </svg>
+            <span class="logo-text">{{#if appName}}{{appName}}{{else}}{{#if app}}{{app}}{{else}}mbkauthe{{/if}}{{/if}} <span class="logo-comp">mbktech</span></span>
+        </a>
+    </div>
+</header>

package/views/info.handlebars

@@ -1,14 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Version and Configuration Information</title>
-    <link rel="icon" type="image/x-icon" href="https://mbktech.org/Assets/Images/Icon/dgicon.svg">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    {{> sharedStyles}}
-    <style>
+{{> head pageTitle="Version and Configuration Information" ogUrl="/mbkauthe/info" extraStyles="<style>
         .info-box {
             background: rgba(10, 20, 20, 0.95);
             backdrop-filter: blur(10px);
@@ -169,25 +162,10 @@
                 padding: 1rem;
             }
         }
-    </style>
-</head>
+    </style>"}}
 
 <body>
-    <header>
-        <div class="header-container">
-            <a class="logo">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="iconAboveSlogan">
-                    <g id="8db2a7f9-6efc-4f7e-ae5b-8ba33875da43" transform="matrix(2.8125,0,0,2.8125,0,0)" stroke="none"
-                        fill="#00b894">
-                        <path
-                            d="M0 32h32V0H0v32zm19.377-19.492l6.936-6.936v20.855h-6.936V12.508zM5.688 5.572l6.936 6.936v13.919H5.688V5.572z">
-                        </path>
-                    </g>
-                </svg>
-                <span class="logo-text">{{mbkautheVar.APP_NAME}} <span class="logo-comp">mbktech</span></span>
-            </a>
-        </div>
-    </header>
+    {{> header appName=mbkautheVar.APP_NAME}}
 
     <section class="login-container">
         <i class="fas fa-info-circle ai-element"></i>
@@ -227,6 +205,10 @@
                     <div class="info-label">Domain:</div>
                     <div class="info-value">{{mbkautheVar.DOMAIN}}</div>
                 </div>
+                <div class="info-row">
+                    <div class="info-label">IS_DEPLOYED:</div>
+                    <div class="info-value">{{mbkautheVar.IS_DEPLOYED}}</div>
+                </div>
                 <div class="info-row">
                     <div class="info-label">Login Redirect URL:</div>
                     <div class="info-value">{{mbkautheVar.loginRedirectURL}}</div>
@@ -250,10 +232,7 @@
         </div>
     </section>
 
-    <!-- Version Info -->
-    <div class="version-info">
-        v{{version}}
-    </div>
+    {{> versionInfo}}
 </body>
 
 </html>

package/views/loginmbkauthe.handlebars

@@ -1,48 +1,16 @@
 <!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="Log in to portal.mbktech.org 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="Login | MBK Tech Studio" />
-    <meta property="og:image" content="https://mbktech.org/Assets/Images/Icon/logo.png" />
-    <meta property="og:url" content="/mbkauthe/login">
-    <title>Login | MBK Tech Studio Portal</title>
-    <link rel="icon" type="image/x-icon" href="https://mbktech.org/Assets/Images/Icon/dgicon.svg">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    {{> sharedStyles}}
-</head>
+{{> head pageTitle="Login" ogUrl="/mbkauthe/login"}}
 
 <body>
-    <header>
-        <div class="header-container">
-            <a class="logo">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="iconAboveSlogan">
-                    <g id="8db2a7f9-6efc-4f7e-ae5b-8ba33875da43" transform="matrix(2.8125,0,0,2.8125,0,0)" stroke="none"
-                        fill="#00b894">
-                        <path
-                            d="M0 32h32V0H0v32zm19.377-19.492l6.936-6.936v20.855h-6.936V12.508zM5.688 5.572l6.936 6.936v13.919H5.688V5.572z">
-                        </path>
-                    </g>
-                </svg>
-                <span class="logo-text">{{appName}} <span class="logo-comp">mbktech</span></span>
-            </a>
-        </div>
-    </header>
+    {{> header}}
 
     {{> showmessage}}
 
     <section class="login-container">
 
-        <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>
+        {{> backgroundElements}}
 
         <div class="login-box">
             <h1 class="login-title">Login</h1>
@@ -110,10 +78,7 @@
         </div>
     </section>
 
-    <!-- Version Info -->
-    <div class="version-info">
-        v{{version}}
-    </div>
+    {{> versionInfo}}
 
     <script>
         // Toggle password visibility
@@ -133,7 +98,7 @@
 
         // Info dialogs
         function usernameinfo() {
-            showMessage(`Your username is the part of your MBK Tech Studio email before the @ (e.g., abc.xyz@mbktech.org
+            showMessage(`Your username is the part of your MBKTech.org email before the @ (e.g., abc.xyz@mbktech.org
  → abc.xyz). For guests or if you’ve forgotten your credentials, contact <a href="https://mbktech.org/Support">Support</a>.`, `What is my username?`);
         }