mbkauthe 1.1.13 → 1.1.15

package/.env.example

@@ -1,15 +1,12 @@
 mbkautheVar='{
     "APP_NAME": "MBKAUTH",
-    "RECAPTCHA_SECRET_KEY": "your-recaptcha-secret-key",
-    "RECAPTCHA_Enabled": "f",
-    "BypassUsers": ["demo","user1"],
     "SESSION_SECRET_KEY": "your-session-secret-key",
     "IS_DEPLOYED": "true",
     "LOGIN_DB": "postgres://username:password@host:port/database",
     "MBKAUTH_TWO_FA_ENABLE": "false",
     "COOKIE_EXPIRE_TIME": 2,
     "DOMAIN": "yourdomain.com",
-    "layout": false
+    "loginRedirectURL": "/admin"
 }'
 
 # See env.md for more details

package/README.md

@@ -28,7 +28,7 @@
   - [License](#license)
   - [Contact \& Support](#contact--support)
 
-`mbkAuthe` is a reusable authentication system for Node.js applications, designed to simplify session management, user authentication, and role-based access control. It integrates seamlessly with PostgreSQL and supports features like Two-Factor Authentication (2FA), session restoration, and reCAPTCHA verification.
+`mbkAuthe` is a reusable authentication system for Node.js applications, designed to simplify session management, user authentication, and role-based access control. It integrates seamlessly with PostgreSQL and supports features like Two-Factor Authentication (2FA) and session restoration.
 
 ## Features
 
@@ -36,7 +36,6 @@
 - **User Authentication:** Provides robust authentication, including support for username/password and Two-Factor Authentication (2FA).
 - **Role-Based Access Control (RBAC):** Enables fine-grained access control by validating user roles and permissions.
 - **Integration with PostgreSQL:** Seamlessly integrates with PostgreSQL for user and session data storage.
-- **reCAPTCHA Verification:** Adds an extra layer of security with reCAPTCHA support to prevent automated attacks.
 - **Middleware Functions:** Includes reusable middleware for session validation, role checking, and user authentication.
 - **API Endpoints:** Offers a set of RESTful APIs for login, logout, session termination, and package information retrieval.
 - **Environment Configuration:** Supports flexible configuration through .env files for deployment-specific settings.
@@ -86,16 +85,13 @@ Example `.env` file:
 ```code
 mbkautheVar='{
     "APP_NAME": "MBKAUTH",
-    "RECAPTCHA_SECRET_KEY": "your-recaptcha-secret-key",
-    "RECAPTCHA_Enabled": "false",
-    "BypassUsers": ["user1","user2"],
     "SESSION_SECRET_KEY": "your-session-secret-key",
     "IS_DEPLOYED": "true",
     "LOGIN_DB": "postgres://username:password@host:port/database",
     "MBKAUTH_TWO_FA_ENABLE": "false",
     "COOKIE_EXPIRE_TIME": 2,
     "DOMAIN": "yourdomain.com",
-    "layout": false
+    "loginRedirectURL": "/admin"
 }'
 ```
 
@@ -198,7 +194,6 @@ router.post(["/terminateAllSessions"], authenticate(mbkautheVar.Password), (req,
   - `username`: User's username.
   - `password`: User's password.
   - `token`: (Optional) 2FA token.
-  - `recaptcha`: reCAPTCHA response.
 
 - Response:
   - `200`: Login successful.

package/env.md

@@ -1,75 +1,198 @@
-# Configuration Guide
+# Environment Configuration Guide
 
-[<- Back](README.md)
+[← Back to README](README.md)
 
-## Application Settings
+This guide explains how to configure your MBKAuth application using environment variables. Create a `.env` file in your project root and set the following variables according to your deployment needs.
 
-```properties
+---
+
+## 📱 Application Settings
+
+### App Name Configuration
+```env
 APP_NAME=mbkauthe
 ```
 
-> **APP_NAME**: Specifies the name of the application. This is used to distinguish one project from another and is critical for ensuring users are restricted to specific apps. It corresponds to the `AllowedApp` column in the Users table.
+**Description:** Defines the application identifier used for user access control.
+
+- **Purpose:** Distinguishes this application from others in your ecosystem
+- **Security:** Users are restricted to apps they're authorized for via the `AllowedApp` column in the Users table
+- **Required:** Yes
 
-## reCAPTCHA Settings
+---
 
-```properties
-RECAPTCHA_ENABLED=true
-RECAPTCHA_SECRET_KEY=your-secret-key
-BYPASS_USERS=["demo", "user1"]
+## 🔐 Session Management
+
+### Session Configuration
+```env
+SESSION_SECRET_KEY=your-secure-random-key-here
+IS_DEPLOYED=false
+DOMAIN=localhost
 ```
 
-> **RECAPTCHA_ENABLED**: Set to `true` to enable reCAPTCHA verification.
+#### SESSION_SECRET_KEY
+**Description:** Cryptographic key for session security.
+
+- **Security:** Use a strong, randomly generated key (minimum 32 characters)
+- **Generation:** Generate securely at [Generate Secret](https://generate-secret.vercel.app/32)
+- **Example:** `SESSION_SECRET_KEY=a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6`
+- **Required:** Yes
 
-> **RECAPTCHA_SECRET_KEY**: Provide the secret key obtained from the [Google reCAPTCHA Admin Console](https://www.google.com/recaptcha/admin).
+#### IS_DEPLOYED
+**Description:** Deployment environment flag that affects session behavior.
 
-> **BYPASS_USERS**: Specify an array of usernames (e.g., `["demo", "user1"]`) that will bypass reCAPTCHA verification.
+**Values:**
+- `true` - Production/deployed environment
+  - Sessions work across all subdomains of your specified domain
+  - **Important:** Login will NOT work on `localhost` when set to `true`
+- `false` - Local development environment
+  - Sessions work on localhost for development
 
-> **Note**: Ensure `RECAPTCHA_SECRET_KEY` is set when `RECAPTCHA_ENABLED=true`.
+**Default:** `false`
 
+#### DOMAIN
+**Description:** Your application's domain name.
 
-## Session Settings
-```properties
-SESSION_SECRET_KEY=123
+**Configuration:**
+- **Production:** Set to your actual domain (e.g., `mbktechstudio.com`)
+- **Development:** Use `localhost` or set `IS_DEPLOYED=false`
+- **Subdomains:** When `IS_DEPLOYED=true`, sessions are shared across all subdomains
+
+**Examples:**
+```env
+# Production
+DOMAIN=yourdomain.com
 IS_DEPLOYED=true
-DOMAIN=mbktechstudio.com
+
+# Development
+DOMAIN=localhost
+IS_DEPLOYED=false
 ```
-> **SESSION_SECRET_KEY**: Generate a secure key using [Generate Secret](https://generate-secret.vercel.app/32).
 
-> **IS_DEPLOYED**:
+---
+
+## 🗄️ Database Configuration
+
+### PostgreSQL Connection
+```env
+LOGIN_DB=postgresql://username:password@host:port/database_name
+```
 
-> - `true`: For deployed environments. Sessions are shared across all subDOMAINs of `.mbktechstudio.com` or the DOMAIN specified in `DOMAIN`.
+**Description:** PostgreSQL database connection string for user authentication.
 
-> - `false`: For local development.
+**Format:** `postgresql://[username]:[password]@[host]:[port]/[database]`
 
-> - Important: If set to `true`, login functionality will not work on `localhost`. Use a valid DOMAIN for proper operation.
+**Examples:**
+```env
+# Local database
+LOGIN_DB=postgresql://admin:password123@localhost:5432/mbkauth_db
 
-> **DOMAIN**:
+# Remote database
+LOGIN_DB=postgresql://user:pass@db.example.com:5432/production_db
 
-> - Set `DOMAIN` to your DOMAIN
+# With SSL (recommended for production)
+LOGIN_DB=postgresql://user:pass@host:5432/db?sslmode=require
+```
 
-> - If you don't have a DOMAIN, set `IS_DEPLOYED=false`.
+**Required:** Yes
 
+---
 
-## Database Settings
+## 🔒 Two-Factor Authentication (2FA)
 
-```properties
-LOGIN_DB=postgresql://username:password@server.DOMAIN/db_name
+### 2FA Configuration
+```env
+MBKAUTH_TWO_FA_ENABLE=false
 ```
-> Replace the placeholder with your PostgreSQL connection string.
 
+**Description:** Enables or disables Two-Factor Authentication for enhanced security.
 
-## Two-Factor Authentication (2FA)
-```properties
-MBKAUTH_TWO_FA_ENABLE=false
+**Values:**
+- `true` - Enable 2FA (recommended for production)
+- `false` - Disable 2FA (default)
+
+**Note:** When enabled, users will need to configure an authenticator app (Google Authenticator, Authy, etc.) for login.
+
+---
+
+## 🍪 Cookie Settings
+
+### Cookie Expiration
+```env
+COOKIE_EXPIRE_TIME=2
+```
+
+**Description:** Sets how long authentication cookies remain valid.
+
+- **Unit:** Days
+- **Default:** `2` days
+- **Range:** 1-30 days (recommended)
+- **Security:** Shorter periods are more secure but require more frequent logins
+
+**Examples:**
+```env
+COOKIE_EXPIRE_TIME=1   # 1 day (high security)
+COOKIE_EXPIRE_TIME=7   # 1 week (balanced)
+COOKIE_EXPIRE_TIME=30  # 1 month (convenience)
 ```
-> MBKAUTH_TWO_FA_ENABLE: Set to `true` to enable Two-Factor Authentication.
 
+---
 
-## Cookie Settings
+## 🚀 Quick Setup Examples
 
-```properties
-COOKIE_EXPIRE_TIME=5
+### Development Environment
+```env
+# .env file for local development
+APP_NAME=mbkauthe
+SESSION_SECRET_KEY=dev-secret-key-change-in-production
+IS_DEPLOYED=false
+DOMAIN=localhost
+LOGIN_DB=postgresql://admin:password@localhost:5432/mbkauth_dev
+MBKAUTH_TWO_FA_ENABLE=false
+COOKIE_EXPIRE_TIME=7
+```
+
+### Production Environment
+```env
+# .env file for production deployment
+APP_NAME=mbkauthe
+SESSION_SECRET_KEY=your-super-secure-production-key-here
+IS_DEPLOYED=true
+DOMAIN=yourdomain.com
+LOGIN_DB=postgresql://dbuser:securepass@prod-db.example.com:5432/mbkauth_prod
+MBKAUTH_TWO_FA_ENABLE=true
+COOKIE_EXPIRE_TIME=2
 ```
-> Cookie expiration time in days. Default is `2 days`.
 
-"layout": false
+---
+
+## ⚠️ Important Security Notes
+
+1. **Never commit your `.env` file** to version control
+2. **Use strong, unique secrets** for production environments
+3. **Enable HTTPS** when `IS_DEPLOYED=true`
+4. **Regularly rotate** your `SESSION_SECRET_KEY`
+5. **Use environment-specific databases** (separate dev/prod databases)
+6. **Enable 2FA** for production environments
+
+---
+
+## 🔧 Troubleshooting
+
+### Common Issues
+
+**Login not working on localhost:**
+- Ensure `IS_DEPLOYED=false` for local development
+- Check that `DOMAIN=localhost`
+
+**Session not persisting:**
+- Verify `SESSION_SECRET_KEY` is set and consistent
+- Check cookie settings in your browser
+
+**Database connection errors:**
+- Verify database credentials and connection string format
+- Ensure database server is running and accessible
+
+**2FA issues:**
+- Confirm authenticator app time is synchronized
+- Verify `MBKAUTH_TWO_FA_ENABLE` setting matches your setup

package/index.js

@@ -20,28 +20,18 @@ try {
 if (!mbkautheVar) {
     throw new Error("mbkautheVar is not defined");
 }
-const requiredKeys = ["APP_NAME", "RECAPTCHA_Enabled", "SESSION_SECRET_KEY", "IS_DEPLOYED", "LOGIN_DB", "MBKAUTH_TWO_FA_ENABLE", "DOMAIN"];
+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.RECAPTCHA_Enabled === "true") {
-    if (mbkautheVar.RECAPTCHA_SECRET_KEY === undefined) {
-        throw new Error("mbkautheVar.RECAPTCHA_SECRET_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");
     }
 }
-if (mbkautheVar.BypassUsers !== undefined) {
-    if (!Array.isArray(mbkautheVar.BypassUsers)) {
-        throw new Error("mbkautheVar.BypassUsers must be a valid array");
-    }
-}
 
 const app = express();
 if (process.env.test === "true") {
@@ -59,6 +49,7 @@ app.engine("handlebars", engine({
     defaultLayout: false,
     partialsDir: [
         path.join(__dirname, "node_modules/mbkauthe/views"),
+        path.join(__dirname, "node_modules/mbkauthe/views/Error"),
     ],
 }));
 

package/lib/main.js

@@ -144,36 +144,9 @@ router.post("/mbkauthe/api/terminateAllSessions", authenticate(mbkautheVar.Main_
 router.post("/mbkauthe/api/login", LoginLimit, async (req, res) => {
   console.log("Login request received");
 
-  const { username, password, token, recaptcha } = req.body;
+  const { username, password, token } = req.body;
   console.log(`Login attempt for username: ${username}`);
 
-  const secretKey = mbkautheVar.RECAPTCHA_SECRET_KEY;
-  const verificationUrl = `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${recaptcha}`;
-
-  let BypassUsers = Array.isArray(mbkautheVar.BypassUsers) ? mbkautheVar.BypassUsers : JSON.parse(mbkautheVar.BypassUsers);
-
-  if (mbkautheVar.RECAPTCHA_Enabled === "true") {
-    if (!BypassUsers.includes(username)) {
-      if (!recaptcha) {
-        console.log("Missing reCAPTCHA token");
-        return res.status(400).json({ success: false, message: "Please complete the reCAPTCHA" });
-      }
-      try {
-        const response = await fetch(verificationUrl, { method: 'POST' });
-        const body = await response.json();
-        console.log("reCAPTCHA verification response:", body);
-
-        if (!body.success) {
-          console.log("Failed reCAPTCHA verification");
-          return res.status(400).json({ success: false, message: "Failed reCAPTCHA verification" });
-        }
-      } catch (err) {
-        console.log("Error during reCAPTCHA verification:", err);
-        return res.status(500).json({ success: false, message: "Internal Server Error" });
-      }
-    }
-  }
-
   if (!username || !password) {
     console.log("Missing username or password");
     return res.status(400).json({
@@ -360,7 +333,7 @@ router.post("/mbkauthe/api/logout", async (req, res) => {
 
 
 router.get("/mbkauthe/login", LoginLimit, (req, res) => {
-  return res.render("loginmbkauthe", {
+  return res.render("loginmbkauthe.handlebars", {
     layout: false,
     customURL: mbkautheVar.loginRedirectURL || '/home',
     userLoggedIn: !!req.session?.user,
@@ -728,10 +701,6 @@ router.get(["/mbkauthe/info", "/mbkauthe/i"], LoginLimit, async (_, res) => {
             <div class="info-label">APP_NAME:</div>
             <div class="info-value">${mbkautheVar.APP_NAME}</div>
           </div>
-          <div class="info-row">
-            <div class="info-label">RECAPTCHA_Enabled:</div>
-            <div class="info-value">${mbkautheVar.RECAPTCHA_Enabled}</div>
-          </div>
           <div class="info-row">
             <div class="info-label">MBKAUTH_TWO_FA_ENABLE:</div>
             <div class="info-value">${mbkautheVar.MBKAUTH_TWO_FA_ENABLE}</div>

package/lib/pool.js

@@ -13,28 +13,18 @@ try {
 if (!mbkautheVar) {
   throw new Error("mbkautheVar is not defined");
 }
-const requiredKeys = ["APP_NAME", "RECAPTCHA_Enabled", "SESSION_SECRET_KEY", "IS_DEPLOYED", "LOGIN_DB", "MBKAUTH_TWO_FA_ENABLE", "DOMAIN"];
+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.RECAPTCHA_Enabled === "true") {
-    if (mbkautheVar.RECAPTCHA_SECRET_KEY === undefined) {
-        throw new Error("mbkautheVar.RECAPTCHA_SECRET_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");
     }
 }
-if (mbkautheVar.BypassUsers !== undefined) {
-    if (!Array.isArray(mbkautheVar.BypassUsers)) {
-        throw new Error("mbkautheVar.BypassUsers must be a valid array");
-    }
-}
 
 const poolConfig = {
   connectionString: mbkautheVar.LOGIN_DB,

package/lib/validateSessionAndRole.js

@@ -36,9 +36,13 @@ async function validateSession(req, res, next) {
   if (!req.session.user) {
     console.log("User not authenticated");
     console.log(req.session.user);
-    return res.render("templates/Error/NotLoggedIn.handlebars", {
-      layout: mbkautheVar.layout === true ? true : false,
-      currentUrl: req.originalUrl,
+    return res.render("error.handlebars", {
+      layout: false,
+      code: 401,
+      error: "Not Logged In",
+      message: "You Are Not Logged In. Please Log In To Continue.",
+      pagename: "Login",
+      page: `/mbkauthe/login?redirect=${encodeURIComponent(req.originalUrl)}`,
     });
   }
 
@@ -55,9 +59,13 @@ async function validateSession(req, res, next) {
       res.clearCookie("mbkauthe.sid", cookieOptions);
       res.clearCookie("sessionId", cookieOptions);
       res.clearCookie("username", cookieOptions);
-      return res.render("templates/Error/SessionExpire.handlebars", {
-        layout: mbkautheVar.layout === true ? true : false,
-        currentUrl: req.originalUrl,
+      return res.render("error.handlebars", {
+        layout: false,
+        code: 401,
+        error: "Session Expired",
+        message: "Your Session Has Expired. Please Log In Again.",
+        pagename: "Login",
+        page: `/mbkauthe/login?redirect=${encodeURIComponent(req.originalUrl)}`,
       });
     }
 
@@ -68,9 +76,13 @@ async function validateSession(req, res, next) {
       res.clearCookie("mbkauthe.sid", cookieOptions);
       res.clearCookie("sessionId", cookieOptions);
       res.clearCookie("username", cookieOptions);
-      return res.render("templates/Error/AccountInactive.handlebars", {
-        layout: mbkautheVar.layout === true ? true : false,
-        currentUrl: req.originalUrl,
+      return res.render("error.handlebars", {
+        layout: false,
+        code: 401,
+        error: "Account Inactive",
+        message: "Your Account Is Inactive. Please Contact Support.",
+        pagename: "Support",
+        page: "https://mbktechstudio.com/Support",
       });
     }
 
@@ -83,9 +95,13 @@ async function validateSession(req, res, next) {
         res.clearCookie("mbkauthe.sid", cookieOptions);
         res.clearCookie("sessionId", cookieOptions);
         res.clearCookie("username", cookieOptions);
-        return res.render("templates/Error/Error.handlebars", {
-          layout: mbkautheVar.layout === true ? true : false,
-          error: `You Are Not Authorized To Use The Application \"${mbkautheVar.APP_NAME}\"`,
+        return res.render("error.handlebars", {
+          layout: false,
+          code: 401,
+          error: "Unauthorized",
+          message: `You Are Not Authorized To Use The Application \"${mbkautheVar.APP_NAME}\"`,
+          pagename: "Home",
+          page: `/${mbkautheVar.loginRedirectURL}`
         });
       }
     }
@@ -103,9 +119,13 @@ const checkRolePermission = (requiredRole) => {
       if (!req.session || !req.session.user || !req.session.user.id) {
         console.log("User not authenticated");
         console.log(req.session);
-        return res.render("templates/Error/NotLoggedIn.handlebars", {
-          layout: mbkautheVar.layout === true ? true : false,
-          currentUrl: req.originalUrl,
+        return res.render("error.handlebars", {
+          layout: false,
+          code: 401,
+          error: "Not Logged In",
+          message: "You Are Not Logged In. Please Log In To Continue.",
+          pagename: "Login",
+          page: `/mbkauthe/login?redirect=${encodeURIComponent(req.originalUrl)}`,
         });
       }
 
@@ -124,10 +144,13 @@ const checkRolePermission = (requiredRole) => {
 
       const userRole = result.rows[0].Role;
       if (userRole !== requiredRole) {
-        return res.render("templates/Error/AccessDenied.handlebars", {
-          layout: mbkautheVar.layout === true ? true : false,
-          currentRole: userRole,
-          requiredRole: requiredRole,
+        return res.render("error.handlebars", {
+          layout: false,
+          code: 403,
+          error: "Access Denied",
+          message: `You do not have permission to access this resource. Required role: ${requiredRole}`,
+          pagename: "Home",
+          page: `/${mbkautheVar.loginRedirectURL}`
         });
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mbkauthe",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "description": "MBKTechStudio's reusable authentication system for Node.js applications.",
   "main": "index.js",
   "type": "module",

package/views/Error/error.handlebars

@@ -0,0 +1,723 @@
+<!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://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">
+  <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 {
+      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: 10px 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 {
+      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: 2rem;
+      width: 100%;
+      max-width: 500px;
+      box-shadow: var(--shadow-lg);
+      border: .125rem 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-group {
+      position: relative;
+      margin-bottom: 1rem;
+    }
+
+    .form-input {
+      width: 100%;
+      padding: 12px 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: 10px;
+      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);
+    }
+
+    .btn-login:hover {
+      background: var(--primary-dark);
+      box-shadow: var(--shadow-md);
+    }
+
+    .btn-login:disabled {
+      background: var(--gray-dark);
+      cursor: not-allowed;
+      transform: none;
+      box-shadow: none;
+    }
+
+    .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 {
+      margin-top: 2rem;
+      font-size: 0.8rem;
+      color: var(--gray);
+      text-align: center;
+    }
+
+    .terms-link {
+      color: var(--primary);
+      font-weight: 500;
+    }
+
+    .token-container {
+      animation: fadeInUp 0.4s ease-out;
+    }
+
+    .token-container.disable {
+      display: none;
+    }
+
+    .token-container.enable {
+      display: block;
+    }
+
+    .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);
+      }
+    }
+
+    @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;
+      }
+    }
+
+    .remember-me {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      margin: 1rem 0;
+    }
+
+    .remember-me input[type="checkbox"] {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 18px;
+      height: 18px;
+      border: 2px solid var(--glass-border);
+      border-radius: var(--radius-sm);
+      margin-right: 10px;
+      cursor: pointer;
+      position: relative;
+      transition: var(--transition);
+    }
+
+    .remember-me input[type="checkbox"]:checked {
+      background-color: var(--primary);
+      border-color: var(--primary);
+    }
+
+    .remember-me input[type="checkbox"]:checked::after {
+      content: '\f00c';
+      font-family: 'Font Awesome 6 Free';
+      font-weight: 900;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: white;
+      font-size: 10px;
+    }
+
+    .remember-me label {
+      color: var(--gray);
+      cursor: pointer;
+      transition: var(--transition);
+      font-size: 0.9rem;
+    }
+
+    .remember-me label:hover {
+      color: var(--light);
+    }
+
+    .WarningboxInfo {
+      background: var(--dark-light);
+      border: 0.5px solid var(--warning);
+      border-left: 4px solid var(--warning);
+      padding: 0.75rem 1rem;
+      border-radius: var(--radius-sm);
+      color: var(--warning);
+      font-size: 0.9rem;
+      font-weight: 500;
+      margin-top: 1rem;
+      text-align: center;
+      box-shadow: var(--shadow-sm);
+    }
+
+    .status-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%);
+    }
+
+    .status-box {
+      background: var(--dark-light);
+      border-radius: var(--radius-xl);
+      padding: 2rem;
+      width: 100%;
+      max-width: 600px;
+      box-shadow: var(--shadow-lg);
+      border: .125rem solid var(--glass-border);
+      position: relative;
+      z-index: 2;
+      transition: var(--transition);
+    }
+
+    .status-box:hover {
+      box-shadow: var(--shadow-lg);
+      transform: scale(1.05);
+    }
+
+    .status-code {
+      text-align: center;
+      margin-bottom: 1rem;
+      font-size: 2.5rem;
+      font-weight: 700;
+      color: var(--success);
+      position: relative;
+    }
+
+    .status-title {
+      text-align: center;
+      margin-bottom: 1rem;
+      font-size: 1.5rem;
+      color: var(--lighter);
+    }
+
+    .status-code::after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 100px;
+      height: 4px;
+      background: var(--gradient);
+      border-radius: 2px;
+    }
+
+    .status-content {
+      margin-bottom: 1.5rem;
+      text-align: center;
+    }
+
+    .status-message {
+      font-size: 1.2rem;
+      margin: 0.5rem 0;
+      color: var(--warning);
+    }
+
+    .status-links {
+      display: flex;
+      justify-content: center;
+      margin-top: 1rem;
+    }
+
+    .status-link {
+      color: var(--primary);
+      text-decoration: none;
+      transition: var(--transition);
+      margin: 0 15px;
+      font-size: 1rem;
+      font-weight: 600;
+    }
+
+    .status-link:hover {
+      text-decoration: underline;
+      color: var(--primary-dark);
+    }
+
+    .details-wrapper {
+      margin-top: 1rem;
+      background: var(--dark-light);
+      border-radius: var(--radius-md);
+      padding: 1.5rem;
+      box-shadow: var(--shadow-md);
+      cursor: pointer;
+      transition: var(--transition);
+    }
+
+    .details-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: var(--lighter);
+      font-size: 1.2rem;
+    }
+
+    .details-header i {
+      transition: var(--transition);
+    }
+
+    .details-wrapper:hover i {
+      transform: rotate(180deg);
+    }
+
+    .error-details-wrapper {
+      display: none;
+      margin-top: 1rem;
+    }
+
+    .details-wrapper.active .error-details-wrapper {
+      display: block;
+    }
+
+    .error-details {
+      width: 100%;
+      height: 150px;
+      background: var(--darker);
+      border: 1px solid var(--glass-border);
+      border-radius: var(--radius-sm);
+      color: var(--light);
+      padding: 1rem;
+      resize: none;
+      font-size: 0.9rem;
+    }
+
+    .copy-btn {
+      margin-top: 0.5rem;
+      background: var(--primary);
+      color: var(--lighter);
+      border: none;
+      border-radius: var(--radius-sm);
+      padding: 0.75rem 1.5rem;
+      cursor: pointer;
+      transition: var(--transition);
+      font-size: 1rem;
+    }
+
+    .copy-btn:hover {
+      background: var(--primary-dark);
+    }
+
+    .status-element {
+      position: absolute;
+      opacity: 0.1;
+      z-index: 1;
+      animation: float 6s ease-in-out infinite;
+    }
+
+    .status-element:nth-child(1) {
+      top: 20%;
+      left: 10%;
+      font-size: 5rem;
+      animation-delay: 0s;
+    }
+
+    .status-element:nth-child(2) {
+      top: 60%;
+      left: 80%;
+      font-size: 4rem;
+      animation-delay: 1s;
+    }
+
+    .status-element:nth-child(3) {
+      top: 30%;
+      left: 70%;
+      font-size: 3rem;
+      animation-delay: 2s;
+    }
+
+    .status-element:nth-child(4) {
+      top: 80%;
+      left: 20%;
+      font-size: 6rem;
+      animation-delay: 3s;
+    }
+
+    .status-element:nth-child(5) {
+      top: 50%;
+      left: 40%;
+      font-size: 4.5rem;
+      animation-delay: 4s;
+    }
+
+    .status-element:nth-child(6) {
+      top: 70%;
+      left: 60%;
+      font-size: 5.5rem;
+      animation-delay: 5s;
+    }
+
+    @keyframes float {
+
+      0%,
+      100% {
+        transform: translateY(0) rotate(0deg);
+      }
+
+      50% {
+        transform: translateY(-20px) rotate(5deg);
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <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="status-container">
+
+    <i class="fas fa-server status-element"></i>
+    <i class="fas fa-database status-element"></i>
+    <i class="fas fa-network-wired status-element"></i>
+    <i class="fas fa-code status-element"></i>
+    <i class="fas fa-cloud status-element"></i>
+    <i class="fas fa-shield-alt status-element"></i>
+
+    <div class="status-box">
+      <h1 class="status-code">{{code}}</h1>
+      <h1 class="status-title">{{error}}</h1>
+
+      <div class="status-content">
+        <p class="status-message">{{message}}</p>
+      </div>
+
+      <div class="status-links">
+        <a href="{{page}}" class="status-link">Go to {{pagename}} page</a>
+      </div>
+
+      {{#if details}}
+      <div class="details-wrapper" onclick="toggleDetailsDropdown(this)">
+        <div class="details-header">
+          <span>Show Error Details</span>
+          <i class="fas fa-chevron-down"></i>
+        </div>
+        <div class="error-details-wrapper">
+          <textarea class="error-details" id="errorDetails" readonly>{{details}}</textarea>
+          <button class="copy-btn" type="button" aria-label="Copy error details"
+            onclick="copyErrorDetails(this); event.stopPropagation();">
+            <i class="fas fa-copy"></i> Copy
+          </button>
+        </div>
+      </div>
+      {{/if}}
+
+    </div>
+  </section>
+  <script>
+    function toggleDetailsDropdown(element) {
+      const errorDetailsWrapper = element.querySelector('.error-details-wrapper');
+      const icon = element.querySelector('.details-header i');
+
+      if (errorDetailsWrapper.style.display === 'block') {
+        errorDetailsWrapper.style.display = 'none';
+        icon.style.transform = 'rotate(0deg)';
+      } else {
+        errorDetailsWrapper.style.display = 'block';
+        icon.style.transform = 'rotate(180deg)';
+      }
+    }
+
+    function copyErrorDetails(button) {
+      const details = button.previousElementSibling.value;
+      navigator.clipboard.writeText(details).then(() => {
+        button.textContent = 'Copied!';
+        setTimeout(() => {
+          button.textContent = 'Copy';
+        }, 2000);
+      }).catch(err => {
+        console.error('Failed to copy: ', err);
+      });
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+      const detailsWrappers = document.querySelectorAll('.details-wrapper');
+      detailsWrappers.forEach(wrapper => {
+        wrapper.addEventListener('click', () => {
+          wrapper.classList.toggle('active');
+        });
+      });
+    });
+  </script>
+</body>
+
+</html>

package/views/loginmbkauthe.handlebars

@@ -5,7 +5,8 @@
 <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="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="Login | MBK Tech Studio" />
     <meta property="og:image" content="https://www.mbktechstudio.com/Assets/Images/Icon/logo.png" />
@@ -15,8 +16,8 @@
     <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>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
     <style>
         :root {
             --primary: #4361ee;
@@ -270,12 +271,6 @@
             font-weight: 500;
         }
 
-        .recaptcha-container {
-            margin: 1rem 0;
-            display: flex;
-            justify-content: center;
-        }
-
         .token-container {
             animation: fadeInUp 0.4s ease-out;
         }
@@ -418,7 +413,7 @@
         .remember-me label:hover {
             color: var(--light);
         }
-        
+
         .WarningboxInfo {
             background: var(--dark-light);
             border: 0.5px solid var(--warning);
@@ -483,11 +478,6 @@
                     <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 class="form-group remember-me">
                     <input type="checkbox" id="rememberMe" name="rememberMe">
                     <label for="rememberMe">Remember me</label>
@@ -553,7 +543,6 @@
             const username = document.getElementById('loginUsername').value.trim();
             const password = document.getElementById('loginPassword').value.trim();
             const token = document.getElementById('token') ? document.getElementById('token').value.trim() : '';
-            const recaptchaResponse = grecaptcha.getResponse();
             const loginButton = document.getElementById('loginButton');
             const loginButtonText = document.getElementById('loginButtonText');
             const rememberMe = document.getElementById('rememberMe').checked;
@@ -575,8 +564,7 @@
                 body: JSON.stringify({
                     username,
                     password,
-                    token,
-                    recaptcha: recaptchaResponse
+                    token
                 })
             })
                 .then(response => response.json())
@@ -590,7 +578,7 @@
                         } else {
                             localStorage.removeItem('rememberedUsername');
                         }
-                        
+
                         // Redirect to the appropriate page
                         const redirectUrl = new URLSearchParams(window.location.search).get('redirect');
                         window.location.href = redirectUrl ? decodeURIComponent(redirectUrl) : '{{customURL}}';
@@ -599,7 +587,6 @@
                         loginButtonText.textContent = 'Login';
                     } else {
                         // Handle errors
-                        grecaptcha.reset();
                         loginButton.disabled = false;
                         loginButtonText.textContent = 'Login';
 
@@ -615,7 +602,6 @@
                     }
                 })
                 .catch(error => {
-                    grecaptcha.reset();
                     loginButton.disabled = false;
                     loginButtonText.textContent = 'Login';
                     console.error('Error:', error);