Merge pull request 'feat: implement user authentication with database integration' (#35) from fea/thanh-05022026-home into main

Reviewed-on: UKSOURCE/cms.hailearning.edu.vn#35

models/User.js

@@ -0,0 +1,57 @@
+const mongoose = require("mongoose");
+const bcrypt = require("bcryptjs");
+
+const userSchema = new mongoose.Schema({
+  username: {
+    type: String,
+    required: true,
+    unique: true,
+    trim: true,
+  },
+  email: {
+    type: String,
+    required: true,
+    unique: true,
+    trim: true,
+    lowercase: true,
+  },
+  password: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  role: {
+    type: String,
+    enum: ["admin", "manager", "editor"],
+    default: "admin",
+  },
+  resetPasswordToken: String,
+  resetPasswordExpires: Date,
+  createdAt: {
+    type: Date,
+    default: Date.now,
+  },
+});
+
+// Hash password before saving
+userSchema.pre("save", async function (next) {
+  if (!this.isModified("password")) return next();
+
+  try {
+    const salt = await bcrypt.genSalt(10);
+    this.password = await bcrypt.hash(this.password, salt);
+    next();
+  } catch (err) {
+    next(err);
+  }
+});
+
+// Method to compare password
+userSchema.methods.comparePassword = async function (candidatePassword) {
+  return await bcrypt.compare(candidatePassword, this.password);
+};
+
+module.exports = mongoose.model("User", userSchema);

public/js/home-form-handler.js

@@ -0,0 +1,256 @@
+// Home Form Handler - Convert form inputs to JSON before submission
+document.addEventListener('DOMContentLoaded', function() {
+  const form = document.querySelector('form[action="/admin/home/update"]');
+  if (!form) return;
+
+  form.addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    try {
+      // Hero
+      const heroData = {
+        title: document.getElementById('heroTitle')?.value || '',
+        subtitle: document.getElementById('heroSubtitle')?.value || '',
+        description: document.getElementById('heroDescription')?.value || '',
+        primaryButton: {
+          label: document.getElementById('heroPrimaryButtonLabel')?.value || '',
+          href: document.getElementById('heroPrimaryButtonHref')?.value || '',
+        },
+        secondaryButton: {
+          label: document.getElementById('heroSecondaryButtonLabel')?.value || '',
+          href: document.getElementById('heroSecondaryButtonHref')?.value || '',
+        },
+        backgroundImage: document.getElementById('heroBackgroundImage')?.value || '',
+        videoUrl: document.getElementById('heroVideoUrl')?.value || '',
+      };
+      document.getElementById('heroJson').value = JSON.stringify(heroData);
+
+      // Why Choose Us
+      const whyChooseUsItems = [];
+      let index = 0;
+      while (document.getElementById(`whyChooseUsIcon_${index}`)) {
+        whyChooseUsItems.push({
+          icon: document.getElementById(`whyChooseUsIcon_${index}`)?.value || '',
+          title: document.getElementById(`whyChooseUsTitle_${index}`)?.value || '',
+          description: document.getElementById(`whyChooseUsItemDescription_${index}`)?.value || '',
+        });
+        index++;
+      }
+
+      const whyChooseUsFeatures = [];
+      index = 0;
+      while (document.getElementById(`whyChooseUsFeature_${index}`)) {
+        const feature = document.getElementById(`whyChooseUsFeature_${index}`)?.value;
+        if (feature) whyChooseUsFeatures.push(feature);
+        index++;
+      }
+
+      const whyChooseUsData = {
+        heading: document.getElementById('whyChooseUsHeading')?.value || '',
+        subheading: document.getElementById('whyChooseUsSubheading')?.value || '',
+        description: document.getElementById('whyChooseUsDescription')?.value || '',
+        items: whyChooseUsItems,
+        features: whyChooseUsFeatures,
+        ctaButton: {
+          label: document.getElementById('whyChooseUsCtaLabel')?.value || '',
+          href: document.getElementById('whyChooseUsCtaHref')?.value || '',
+        },
+      };
+      document.getElementById('whyChooseUsJson').value = JSON.stringify(whyChooseUsData);
+
+      // Visa Solutions
+      const visaSolutionsItems = [];
+      index = 0;
+      while (document.getElementById(`visaSolutionsNumber_${index}`)) {
+        visaSolutionsItems.push({
+          number: document.getElementById(`visaSolutionsNumber_${index}`)?.value || '',
+          title: document.getElementById(`visaSolutionsTitle_${index}`)?.value || '',
+          description: document.getElementById(`visaSolutionsDescription_${index}`)?.value || '',
+          link: document.getElementById(`visaSolutionsLink_${index}`)?.value || '',
+        });
+        index++;
+      }
+
+      const visaSolutionsData = {
+        heading: document.getElementById('visaSolutionsHeading')?.value || '',
+        subheading: document.getElementById('visaSolutionsSubheading')?.value || '',
+        items: visaSolutionsItems,
+      };
+      document.getElementById('visaSolutionsJson').value = JSON.stringify(visaSolutionsData);
+
+      // Visa Countries
+      const visaCountriesItems = [];
+      index = 0;
+      while (document.getElementById(`visaCountriesName_${index}`)) {
+        const visaTypesStr = document.getElementById(`visaCountriesVisaTypes_${index}`)?.value || '';
+        const visaTypes = visaTypesStr.split(',').map(v => v.trim()).filter(v => v);
+
+        visaCountriesItems.push({
+          name: document.getElementById(`visaCountriesName_${index}`)?.value || '',
+          code: document.getElementById(`visaCountriesCode_${index}`)?.value || '',
+          flag: document.getElementById(`visaCountriesFlag_${index}`)?.value || '',
+          link: document.getElementById(`visaCountriesLink_${index}`)?.value || '',
+          visaTypes: visaTypes,
+        });
+        index++;
+      }
+
+      const visaCountriesData = {
+        heading: document.getElementById('visaCountriesHeading')?.value || '',
+        subheading: document.getElementById('visaCountriesSubheading')?.value || '',
+        description: document.getElementById('visaCountriesDescription')?.value || '',
+        countries: visaCountriesItems,
+        ctaButton: {
+          label: document.getElementById('visaCountriesCtaLabel')?.value || '',
+          href: document.getElementById('visaCountriesCtaHref')?.value || '',
+        },
+      };
+      document.getElementById('visaCountriesJson').value = JSON.stringify(visaCountriesData);
+
+      // Testimonials
+      const testimonialsItems = [];
+      index = 0;
+      while (document.getElementById(`testimonialsName_${index}`)) {
+        testimonialsItems.push({
+          name: document.getElementById(`testimonialsName_${index}`)?.value || '',
+          role: document.getElementById(`testimonialsRole_${index}`)?.value || '',
+          country: document.getElementById(`testimonialsCountry_${index}`)?.value || '',
+          rating: parseInt(document.getElementById(`testimonialsRating_${index}`)?.value || 5),
+          comment: document.getElementById(`testimonialsComment_${index}`)?.value || '',
+          avatar: document.getElementById(`testimonialsAvatar_${index}`)?.value || '',
+        });
+        index++;
+      }
+
+      const testimonialsData = {
+        heading: document.getElementById('testimonialsHeading')?.value || '',
+        subheading: document.getElementById('testimonialsSubheading')?.value || '',
+        videoUrl: document.getElementById('testimonialsVideoUrl')?.value || '',
+        videoThumbnail: document.getElementById('testimonialsVideoThumbnail')?.value || '',
+        items: testimonialsItems,
+      };
+      document.getElementById('testimonialsJson').value = JSON.stringify(testimonialsData);
+
+      // Video Gallery
+      const videoGalleryData = {
+        heading: document.getElementById('videoGalleryHeading')?.value || '',
+        videoUrl: document.getElementById('videoGalleryVideoUrl')?.value || '',
+        thumbnail: document.getElementById('videoGalleryThumbnail')?.value || '',
+      };
+      document.getElementById('videoGalleryJson').value = JSON.stringify(videoGalleryData);
+
+      // FAQ
+      const faqItems = [];
+      index = 0;
+      while (document.getElementById(`faqQuestion_${index}`)) {
+        faqItems.push({
+          question: document.getElementById(`faqQuestion_${index}`)?.value || '',
+          answer: document.getElementById(`faqAnswer_${index}`)?.value || '',
+        });
+        index++;
+      }
+
+      const faqData = {
+        heading: document.getElementById('faqHeading')?.value || '',
+        subheading: document.getElementById('faqSubheading')?.value || '',
+        description: document.getElementById('faqDescription')?.value || '',
+        ctaButton: {
+          label: document.getElementById('faqCtaLabel')?.value || '',
+          href: document.getElementById('faqCtaHref')?.value || '',
+        },
+        items: faqItems,
+      };
+      document.getElementById('faqJson').value = JSON.stringify(faqData);
+
+      // Achievements
+      const achievementsItems = [];
+      index = 0;
+      while (document.getElementById(`achievementsValue_${index}`)) {
+        achievementsItems.push({
+          value: document.getElementById(`achievementsValue_${index}`)?.value || '',
+          suffix: document.getElementById(`achievementsSuffix_${index}`)?.value || '',
+          label: document.getElementById(`achievementsLabel_${index}`)?.value || '',
+          description: document.getElementById(`achievementsDescription_${index}`)?.value || '',
+        });
+        index++;
+      }
+
+      const achievementsData = {
+        heading: document.getElementById('achievementsHeading')?.value || '',
+        subheading: document.getElementById('achievementsSubheading')?.value || '',
+        items: achievementsItems,
+      };
+      document.getElementById('achievementsJson').value = JSON.stringify(achievementsData);
+
+      // Partners
+      const visaConsultancyItems = [];
+      document.querySelectorAll('.visa-consultancy-item').forEach((item) => {
+        const name = item.querySelector('.visa-consultancy-name')?.value || '';
+        const icon = item.querySelector('.visa-consultancy-icon')?.value || '';
+        const year = item.querySelector('.visa-consultancy-year')?.value || '';
+        
+        if (name || icon || year) {
+          visaConsultancyItems.push({ name, icon, year });
+        }
+      });
+
+      const brandItems = [];
+      document.querySelectorAll('.brand-item').forEach((item) => {
+        const logo = item.querySelector('.brand-logo')?.value || '';
+        if (logo) {
+          brandItems.push({ logo });
+        }
+      });
+
+      const partnersData = {
+        visaConsultancy: {
+          heading: document.getElementById('partnersVisaConsultancyHeading')?.value || '',
+          items: visaConsultancyItems,
+        },
+        brands: {
+          items: brandItems,
+        },
+      };
+      
+      document.getElementById('partnersJson').value = JSON.stringify(partnersData);
+
+      // Blog Preview
+      const blogPreviewItems = [];
+      index = 0;
+      while (document.getElementById(`blogPreviewTitle_${index}`)) {
+        blogPreviewItems.push({
+          title: document.getElementById(`blogPreviewTitle_${index}`)?.value || '',
+          excerpt: document.getElementById(`blogPreviewExcerpt_${index}`)?.value || '',
+          category: document.getElementById(`blogPreviewCategory_${index}`)?.value || '',
+          date: document.getElementById(`blogPreviewDate_${index}`)?.value || '',
+          author: {
+            name: document.getElementById(`blogPreviewAuthorName_${index}`)?.value || '',
+            avatar: document.getElementById(`blogPreviewAuthorAvatar_${index}`)?.value || '',
+          },
+          comments: parseInt(document.getElementById(`blogPreviewComments_${index}`)?.value || 0),
+          link: document.getElementById(`blogPreviewLink_${index}`)?.value || '',
+          thumbnail: document.getElementById(`blogPreviewThumbnail_${index}`)?.value || '',
+        });
+        index++;
+      }
+
+      const blogPreviewData = {
+        heading: document.getElementById('blogPreviewHeading')?.value || '',
+        subheading: document.getElementById('blogPreviewSubheading')?.value || '',
+        ctaButton: {
+          label: document.getElementById('blogPreviewCtaLabel')?.value || '',
+          href: document.getElementById('blogPreviewCtaHref')?.value || '',
+        },
+        items: blogPreviewItems,
+      };
+      document.getElementById('blogPreviewJson').value = JSON.stringify(blogPreviewData);
+
+      console.log('All JSON data prepared, submitting form...');
+      // Submit form
+      form.submit();
+    } catch (error) {
+      console.error('Error processing form:', error);
+      alert('Error processing form. Please check console for details.');
+    }
+  });
+});

routes/auth.js

@@ -1,8 +1,8 @@
 const express = require('express');
 const router = express.Router();
-
-const ADMIN_USERNAME = 'admin';
-const ADMIN_PASSWORD = 'admin1234';
+const User = require('../models/User');
+const crypto = require('crypto');
+const bcrypt = require('bcryptjs');
 
 // Login page
 router.get('/login', (req, res) => {
@@ -16,24 +16,216 @@ router.get('/login', (req, res) => {
   });
 });
 
+// Login handle
 router.post('/login', async (req, res) => {
   const { username, password } = req.body;
-  if (username === ADMIN_USERNAME && password === ADMIN_PASSWORD) {
+  
+  try {
+        // Check database user
+        const user = await User.findOne({ username });
+    
+    if (!user) {
+      req.flash('error_msg', 'Invalid username or password');
+      return res.redirect('/auth/login');
+    }
+
+    const isMatch = await user.comparePassword(password);
+    
+    if (!isMatch) {
+      req.flash('error_msg', 'Invalid username or password');
+      return res.redirect('/auth/login');
+    }
+
+    // Login success
     req.session.user = {
-      username: ADMIN_USERNAME,
-      email: 'admin@ggcamp.org',
-      name: 'Administrator',
-      role: 'admin'
+      id: user._id,
+      username: user.username,
+      email: user.email,
+      name: user.name,
+      role: user.role
     };
     req.session.isAuthenticated = true;
     req.flash('success_msg', 'Login successful');
     res.redirect('/admin/dashboard');
-  } else {
-    req.flash('error_msg', 'Invalid username or password');
+
+  } catch (err) {
+    console.error(err);
+    req.flash('error_msg', 'An error occurred during login');
     res.redirect('/auth/login');
   }
 });
 
+// Register page
+router.get('/register', (req, res) => {
+    if (req.session.isAuthenticated) {
+        return res.redirect('/admin/dashboard');
+    }
+    res.render('auth/register', {
+        title: 'Create Account',
+        layout: false
+    });
+});
+
+// Register handle
+router.post('/register', async (req, res) => {
+    const { username, email, password, confirm_password, name } = req.body;
+    let errors = [];
+
+    if (!username || !email || !password || !confirm_password || !name) {
+        errors.push({ msg: 'Please enter all fields' });
+    }
+
+    if (password !== confirm_password) {
+        errors.push({ msg: 'Passwords do not match' });
+    }
+
+    if (password.length < 6) {
+        errors.push({ msg: 'Password must be at least 6 characters' });
+    }
+
+    if (errors.length > 0) {
+        res.render('auth/register', {
+            errors,
+            username,
+            email,
+            name,
+            title: 'Create Account',
+            layout: false
+        });
+    } else {
+        try {
+            // Check if user exists
+            const existingUser = await User.findOne({ $or: [{ email }, { username }] });
+            
+            if (existingUser) {
+                errors.push({ msg: 'Email or Username already exists' });
+                return res.render('auth/register', {
+                    errors,
+                    username,
+                    email,
+                    name,
+                    title: 'Create Account',
+                    layout: false
+                });
+            }
+
+            const newUser = new User({
+                username,
+                email,
+                name,
+                password
+            });
+
+            await newUser.save();
+            req.flash('success_msg', 'You are now registered and can log in');
+            res.redirect('/auth/login');
+        } catch (err) {
+            console.error(err);
+            errors.push({ msg: 'An error occurred during registration' });
+            res.render('auth/register', {
+                errors,
+                username,
+                email,
+                name,
+                title: 'Create Account',
+                layout: false
+            });
+        }
+    }
+});
+
+// Forgot Password Page
+router.get('/forgot-password', (req, res) => {
+    res.render('auth/forgot-password', {
+        title: 'Forgot Password',
+        layout: false
+    });
+});
+
+// Forgot Password Handle
+router.post('/forgot-password', async (req, res) => {
+    const { email } = req.body;
+    try {
+        const user = await User.findOne({ email });
+        if (!user) {
+            req.flash('error_msg', 'No account with that email address exists.');
+            return res.redirect('/auth/forgot-password');
+        }
+
+        const token = crypto.randomBytes(20).toString('hex');
+
+        user.resetPasswordToken = token;
+        user.resetPasswordExpires = Date.now() + 3600000; // 1 hour
+
+        await user.save();
+
+        // Direct flow as requested: Enter email -> Submit -> Enter new password
+        // Redirect directly to the reset password page with the generated token
+        res.redirect(`/auth/reset-password/${token}`);
+
+    } catch (err) {
+        console.error(err);
+        req.flash('error_msg', 'Error processing request');
+        res.redirect('/auth/forgot-password');
+    }
+});
+
+// Reset Password Page
+router.get('/reset-password/:token', async (req, res) => {
+    try {
+        const user = await User.findOne({ 
+            resetPasswordToken: req.params.token, 
+            resetPasswordExpires: { $gt: Date.now() } 
+        });
+
+        if (!user) {
+            req.flash('error_msg', 'Password reset token is invalid or has expired.');
+            return res.redirect('/auth/forgot-password');
+        }
+
+        res.render('auth/reset-password', {
+            title: 'Reset Password',
+            layout: false,
+            token: req.params.token
+        });
+    } catch (err) {
+        console.error(err);
+        res.redirect('/auth/forgot-password');
+    }
+});
+
+// Reset Password Handle
+router.post('/reset-password/:token', async (req, res) => {
+    try {
+        const user = await User.findOne({ 
+            resetPasswordToken: req.params.token, 
+            resetPasswordExpires: { $gt: Date.now() } 
+        });
+
+        if (!user) {
+            req.flash('error_msg', 'Password reset token is invalid or has expired.');
+            return res.redirect('/auth/forgot-password');
+        }
+
+        if (req.body.password !== req.body.confirm_password) {
+            req.flash('error_msg', 'Passwords do not match.');
+            return res.redirect('back');
+        }
+
+        user.password = req.body.password;
+        user.resetPasswordToken = undefined;
+        user.resetPasswordExpires = undefined;
+
+        await user.save();
+        
+        req.flash('success_msg', 'Success! Your password has been changed.');
+        res.redirect('/auth/login');
+    } catch (err) {
+        console.error(err);
+        res.redirect('back');
+    }
+});
+
 router.get('/logout', (req, res) => {
   req.session.destroy((err) => {
     if (err) {

views/auth/forgot-password.ejs

@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>
+    <%= title %> | CMS-SIMS
+  </title>
+  <!-- Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <!-- Custom CSS -->
+  <link rel="stylesheet" href="/assets/css/variables.css">
+  <style>
+    body {
+      font-family: var(--font-family);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      background-color: var(--primary-color);
+    }
+
+    body::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: url('/images/bg-login.jpg') center/cover no-repeat fixed;
+      opacity: 0.4;
+      z-index: 0;
+    }
+
+    .main-content {
+      width: 100%;
+      max-width: 500px;
+      padding: 15px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .login-container {
+      background-color: var(--bg-card);
+      padding: 30px;
+      border-radius: var(--border-radius-lg);
+      box-shadow: var(--shadow-lg);
+    }
+
+    .logo-container {
+      text-align: center;
+      margin-bottom: 10px;
+    }
+
+    .logo-container img {
+      width: 100px;
+      height: auto;
+      margin-bottom: 5px;
+    }
+
+    .img-shine {
+      position: relative;
+      overflow: hidden;
+    }
+
+    .img-shine::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      transition: all 0.5s ease;
+    }
+
+    .img-shine:hover::after {
+      left: 100%;
+    }
+
+    .form-control {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      font-size: 14px;
+      transition: all 0.3s ease;
+    }
+
+    .form-control:focus {
+      outline: none;
+      border-color: var(--primary-color) !important;
+      box-shadow: 0 0 0 3px rgba(10, 35, 71, 0.1);
+    }
+
+    .form-label {
+      display: block;
+      margin-bottom: 6px;
+      font-weight: 600;
+      color: #475569;
+      font-size: 0.9rem;
+    }
+
+    .btn-shine {
+      background: var(--primary-color);
+      color: white;
+      border: none;
+      padding: 12px 30px;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 15px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      text-transform: uppercase;
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      min-width: 150px;
+      letter-spacing: 0.5px;
+    }
+
+    .btn-shine:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(10, 35, 71, 0.2);
+    }
+
+    .btn-shine::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      transition: all 0.5s ease;
+    }
+
+    .btn-shine:hover::after {
+      left: 100%;
+    }
+
+    @media (max-width: 768px) {
+      .main-content {
+        padding: 15px;
+      }
+
+      .login-container {
+        padding: 20px;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="main-content">
+    <!-- Flash Messages Data (Hidden) -->
+    <% if(typeof success_msg !=='undefined' || typeof error_msg !=='undefined' || typeof error !=='undefined' ) { %>
+      <div id="flash-messages-data" style="display: none;"><%- JSON.stringify({ success_msg: typeof success_msg
+          !=='undefined' && success_msg ? success_msg : null, error_msg: typeof error_msg !=='undefined' && error_msg ?
+          error_msg : null, error: typeof error !=='undefined' && error ? error : null }) %></div>
+      <% } %>
+
+        <div class="login-container">
+          <div class="logo-container img-shine">
+            <img src="/img/logo/logo-hai-learning.png" alt="Logo">
+          </div>
+
+          <div style="text-align: center; margin-bottom: 20px;">
+            <h4 style="color: var(--primary-color); font-weight: 600; margin-bottom: 5px;">Forgot Password</h4>
+            <p style="color: var(--text-color); font-size: 13px;">Enter your email to reset password</p>
+          </div>
+
+          <form action="/auth/forgot-password" method="POST" class="login-form">
+            <div class="form-group" style="margin-bottom: 12px;">
+              <label for="email" class="form-label">Email Address</label>
+              <input type="email" class="form-control" id="email" name="email" required autofocus>
+            </div>
+
+            <div style="text-align: center; margin-top: 20px;">
+              <button type="submit" class="btn-shine">
+                Reset Password
+              </button>
+            </div>
+
+            <div style="text-align: center; margin-top: 15px;">
+              <a href="/auth/login" style="color: var(--primary-color); text-decoration: none; font-size: 14px;">Back to
+                Login</a>
+            </div>
+          </form>
+        </div>
+
+        <div style="margin-top: 20px; text-align: center;">
+          <p style="font-size: 12px; color: #fff;">© 2024 Swiss Institute of Management and Sciences. All rights
+            reserved.</p>
+        </div>
+  </div>
+
+  <!-- Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const flashData = document.getElementById('flash-messages-data');
+      if (flashData) {
+        try {
+          const data = JSON.parse(flashData.innerHTML);
+          const container = document.querySelector('.login-container');
+
+          const addAlert = (msg, type) => {
+            const alertDiv = document.createElement('div');
+            alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
+            alertDiv.innerHTML = `
+                        ${msg}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                      `;
+            container.insertBefore(alertDiv, container.firstChild);
+          };
+
+          if (data.success_msg) addAlert(data.success_msg, 'success');
+          if (data.error_msg) addAlert(data.error_msg, 'danger');
+          if (data.error) addAlert(data.error, 'danger');
+
+        } catch (e) {
+          console.error("Error parsing flash data", e);
+        }
+      }
+    });
+  </script>
+</body>
+
+</html>

views/auth/login.ejs

@@ -11,35 +11,18 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <!-- Font Awesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <!-- Global CSS Variables -->
+  <link rel="stylesheet" href="/assets/css/variables.css">
   <!-- Custom CSS -->
   <style>
-    :root {
-      --primary-color: #0a2347;
-      --primary-light: #0a2347;
-      --primary-dark: #0a2347;
-      --text-on-primary: #ffffff;
-    }
-
     body {
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      font-family: var(--font-family);
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
-      background-color: #0f172a;
-    }
-
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: url('/images/bg-login.jpg') center/cover no-repeat fixed;
-      opacity: 0.4;
-      z-index: 0;
+      background-color: var(--primary-color);
     }
 
     .main-content {
@@ -51,27 +34,21 @@
     }
 
     .login-container {
-      background-color: #f6f6f6;
-      padding: 40px;
-      border-radius: 15px;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+      background-color: var(--bg-card);
+      padding: 30px;
+      border-radius: var(--border-radius-lg);
+      box-shadow: var(--shadow-lg);
     }
 
     .logo-container {
       text-align: center;
-      margin-bottom: 30px;
-      display: flex;
-      justify-content: center;
-      padding: 6px;
+      margin-bottom: 10px;
     }
 
     .logo-container img {
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      object-fit: cover;
-      background-color: var(--primary-color);
-      padding: 10px;
+      width: 100px;
+      height: auto;
+      margin-bottom: 5px;
     }
 
     .img-shine {
@@ -117,7 +94,7 @@
     }
 
     .btn-shine {
-      background: #0a2347;
+      background: var(--primary-color);
       color: white;
       border: none;
       padding: 12px 30px;
@@ -134,8 +111,8 @@
     }
 
     .btn-shine:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 5px 15px rgba(37, 99, 235, 0.35);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(10, 35, 71, 0.2);
     }
 
     .btn-shine::after {
@@ -179,34 +156,42 @@
             <img src="/img/logo/logo-hai-learning.png" alt="Logo">
           </div>
 
-          <div style="text-align: center; margin-bottom: 30px;">
-            <h4 style="color: var(--primary-color); font-weight: 600; margin-bottom: 10px;">CMS Management System</h4>
-            <p style="color: var(--text-color); font-size: 14px;">Welcome to Content Management System</p>
+          <div style="text-align: center; margin-bottom: 20px;">
+            <h4 style="color: var(--primary-color); font-weight: 600; margin-bottom: 5px;">CMS Management System</h4>
+            <p style="color: var(--text-color); font-size: 13px;">Welcome to Content Management System</p>
           </div>
 
           <form action="/auth/login" method="POST" class="login-form">
-            <div class="form-group" style="margin-bottom: 20px;">
+            <div class="form-group" style="margin-bottom: 12px;">
               <label for="username" class="form-label">Username</label>
               <input type="text" class="form-control" id="username" name="username" required autocomplete="username"
                 autofocus>
             </div>
 
-            <div class="form-group" style="margin-bottom: 20px;">
+            <div class="form-group" style="margin-bottom: 12px;">
               <label for="password" class="form-label">Password</label>
               <input type="password" class="form-control" id="password" name="password" required
                 autocomplete="current-password">
 
               <a href="/auth/forgot-password"
-                style="display: block; text-align: right; margin-top: 8px; color: #2563eb; text-decoration: none; font-size: 13px;">
+                style="display: block; text-align: right; margin-top: 8px; color: #2563eb; text-decoration: none; font-size: 13px; font-weight: 600;">
                 Forgot Your Password?
               </a>
             </div>
 
-            <div style="text-align: center; margin-top: 30px;">
+            <div style="text-align: center; margin-top: 20px;">
               <button type="submit" class="btn-shine">
                 Login
               </button>
             </div>
+
+            <div style="text-align: center; margin-top: 20px;">
+              <span style="font-size: 14px; color: #666;">Don't have an account?</span>
+              <a href="/auth/register"
+                style="color: var(--primary-color); font-weight: 600; text-decoration: none; margin-left: 5px;">
+                Create Account
+              </a>
+            </div>
           </form>
         </div>
 

views/auth/register.ejs

@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>
+        <%= title %> | CMS-SIMS
+    </title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Global CSS Variables -->
+    <link rel="stylesheet" href="/assets/css/variables.css">
+    <!-- Custom CSS -->
+    <style>
+        body {
+            font-family: var(--font-family);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            background-color: var(--primary-color);
+        }
+
+        .main-content {
+            width: 100%;
+            max-width: 500px;
+            padding: 15px;
+            position: relative;
+            z-index: 1;
+        }
+
+        .login-container {
+            background-color: var(--bg-card);
+            padding: 30px;
+            border-radius: var(--border-radius-lg);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .logo-container {
+            text-align: center;
+            margin-bottom: 10px;
+        }
+
+        .logo-container img {
+            width: 100px;
+            height: auto;
+            margin-bottom: 5px;
+        }
+
+        .img-shine {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .img-shine::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: all 0.5s ease;
+        }
+
+        .img-shine:hover::after {
+            left: 100%;
+        }
+
+        .form-control {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+
+        .form-control:focus {
+            outline: none;
+            border-color: var(--primary-color) !important;
+            box-shadow: 0 0 0 3px rgba(10, 35, 71, 0.1);
+        }
+
+        .form-label {
+            display: block;
+            margin-bottom: 6px;
+            font-weight: 600;
+            color: #475569;
+            font-size: 0.9rem;
+        }
+
+        .btn-shine {
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 10px 25px;
+            border-radius: 6px;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+            letter-spacing: 0.5px;
+        }
+
+        .btn-shine:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(10, 35, 71, 0.2);
+        }
+
+        .btn-shine::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: all 0.5s ease;
+        }
+
+        .btn-shine:hover::after {
+            left: 100%;
+        }
+
+        @media (max-width: 768px) {
+            .main-content {
+                padding: 15px;
+            }
+
+            .login-container {
+                padding: 20px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="main-content">
+        <!-- Flash Messages Data (Hidden) -->
+        <% if(typeof success_msg !=='undefined' || typeof error_msg !=='undefined' || typeof error !=='undefined' ||
+            (typeof errors !=='undefined' && errors.length> 0)) { %>
+            <div id="flash-messages-data" style="display: none;"><%- JSON.stringify({ success_msg: typeof success_msg
+                    !=='undefined' && success_msg ? success_msg : null, error_msg: typeof error_msg !=='undefined' &&
+                    error_msg ? error_msg : null, error: typeof error !=='undefined' && error ? error : null, errors:
+                    typeof errors !=='undefined' ? errors : [] }) %></div>
+            <% } %>
+
+                <div class="login-container">
+                    <div class="logo-container img-shine">
+                        <img src="/img/logo/logo-hai-learning.png" alt="Logo">
+                    </div>
+
+                    <div style="text-align: center; margin-bottom: 20px;">
+                        <h4 style="color: var(--primary-color); font-weight: 600; margin-bottom: 5px;">Create Account
+                        </h4>
+                        <p style="color: var(--text-color); font-size: 13px;">Join the CMS Management System</p>
+                    </div>
+
+                    <form action="/auth/register" method="POST" class="login-form">
+                        <div class="form-group" style="margin-bottom: 12px;">
+                            <label for="name" class="form-label">Full Name</label>
+                            <input type="text" class="form-control" id="name" name="name" required
+                                value="<%= typeof name != 'undefined' ? name : '' %>">
+                        </div>
+
+                        <div class="form-group" style="margin-bottom: 12px;">
+                            <label for="username" class="form-label">Username</label>
+                            <input type="text" class="form-control" id="username" name="username" required
+                                value="<%= typeof username != 'undefined' ? username : '' %>">
+                        </div>
+
+                        <div class="form-group" style="margin-bottom: 12px;">
+                            <label for="email" class="form-label">Email Address</label>
+                            <input type="email" class="form-control" id="email" name="email" required
+                                value="<%= typeof email != 'undefined' ? email : '' %>">
+                        </div>
+
+                        <div class="form-group" style="margin-bottom: 12px;">
+                            <label for="password" class="form-label">Password</label>
+                            <input type="password" class="form-control" id="password" name="password" required>
+                        </div>
+
+                        <div class="form-group" style="margin-bottom: 12px;">
+                            <label for="confirm_password" class="form-label">Confirm Password</label>
+                            <input type="password" class="form-control" id="confirm_password" name="confirm_password"
+                                required>
+                        </div>
+
+                        <div style="text-align: center; margin-top: 20px;">
+                            <button type="submit" class="btn-shine">
+                                Register
+                            </button>
+                        </div>
+
+                        <div style="text-align: center; margin-top: 20px;">
+                            <span style="font-size: 14px; color: #666;">Already have an account?</span>
+                            <a href="/auth/login"
+                                style="color: var(--primary-color); font-weight: 600; text-decoration: none; margin-left: 5px;">
+                                Login
+                            </a>
+                        </div>
+                    </form>
+                </div>
+
+                <div style="margin-top: 20px; text-align: center;">
+                    <p style="font-size: 12px; color: #fff;">© 2024 Swiss Institute of Management and Sciences. All
+                        rights reserved.</p>
+                </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const flashData = document.getElementById('flash-messages-data');
+            if (flashData) {
+                try {
+                    const data = JSON.parse(flashData.innerHTML);
+                    const container = document.querySelector('.login-container');
+
+                    const addAlert = (msg, type) => {
+                        const alertDiv = document.createElement('div');
+                        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
+                        alertDiv.innerHTML = `
+                        ${msg}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                      `;
+                        container.insertBefore(alertDiv, container.firstChild);
+                    };
+
+                    if (data.errors && Array.isArray(data.errors)) {
+                        data.errors.forEach(err => addAlert(err.msg, 'danger'));
+                    }
+                    if (data.success_msg) addAlert(data.success_msg, 'success');
+                    if (data.error_msg) addAlert(data.error_msg, 'danger');
+                    if (data.error) addAlert(data.error, 'danger');
+
+                } catch (e) {
+                    console.error("Error parsing flash data", e);
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>

views/auth/reset-password.ejs

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>
+    <%= title %> | CMS-SIMS
+  </title>
+  <!-- Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <!-- Custom CSS -->
+  <link rel="stylesheet" href="/assets/css/variables.css">
+  <style>
+    body {
+      font-family: var(--font-family);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      background-color: var(--primary-color);
+    }
+
+    body::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: url('/images/bg-login.jpg') center/cover no-repeat fixed;
+      opacity: 0.4;
+      z-index: 0;
+    }
+
+    .main-content {
+      width: 100%;
+      max-width: 500px;
+      padding: 15px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .login-container {
+      background-color: var(--bg-card);
+      padding: 30px;
+      border-radius: var(--border-radius-lg);
+      box-shadow: var(--shadow-lg);
+    }
+
+    .logo-container {
+      text-align: center;
+      margin-bottom: 10px;
+    }
+
+    .logo-container img {
+      width: 100px;
+      height: auto;
+      margin-bottom: 5px;
+    }
+
+    .img-shine {
+      position: relative;
+      overflow: hidden;
+    }
+
+    .img-shine::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      transition: all 0.5s ease;
+    }
+
+    .img-shine:hover::after {
+      left: 100%;
+    }
+
+    .form-control {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      font-size: 14px;
+      transition: all 0.3s ease;
+    }
+
+    .form-control:focus {
+      outline: none;
+      border-color: var(--primary-color) !important;
+      box-shadow: 0 0 0 3px rgba(10, 35, 71, 0.1);
+    }
+
+    .form-label {
+      display: block;
+      margin-bottom: 6px;
+      font-weight: 600;
+      color: #475569;
+      font-size: 0.9rem;
+    }
+
+    .btn-shine {
+      background: linear-gradient(90deg, #0a2347, #163a6f);
+      color: white;
+      border: none;
+      padding: 10px 25px;
+      border-radius: 6px;
+      font-weight: 600;
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      text-transform: uppercase;
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      letter-spacing: 0.5px;
+    }
+
+    .btn-shine:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(10, 35, 71, 0.2);
+    }
+
+    .btn-shine::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      transition: all 0.5s ease;
+    }
+
+    .btn-shine:hover::after {
+      left: 100%;
+    }
+
+    @media (max-width: 768px) {
+      .main-content {
+        padding: 15px;
+      }
+
+      .login-container {
+        padding: 20px;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="main-content">
+    <!-- Flash Messages Data (Hidden) -->
+    <% if(typeof success_msg !=='undefined' || typeof error_msg !=='undefined' || typeof error !=='undefined' ) { %>
+      <div id="flash-messages-data" style="display: none;"><%- JSON.stringify({ success_msg: typeof success_msg
+          !=='undefined' && success_msg ? success_msg : null, error_msg: typeof error_msg !=='undefined' && error_msg ?
+          error_msg : null, error: typeof error !=='undefined' && error ? error : null }) %></div>
+      <% } %>
+
+        <div class="login-container">
+          <div class="logo-container img-shine">
+            <img src="/img/logo/logo-hai-learning.png" alt="Logo">
+          </div>
+
+          <div style="text-align: center; margin-bottom: 20px;">
+            <h4 style="color: var(--primary-color); font-weight: 600; margin-bottom: 5px;">Reset Password</h4>
+            <p style="color: var(--text-color); font-size: 13px;">Enter your new password</p>
+          </div>
+
+          <form action="/auth/reset-password/<%= token %>" method="POST" class="login-form">
+            <div class="form-group" style="margin-bottom: 12px;">
+              <label for="password" class="form-label">New Password</label>
+              <input type="password" class="form-control" id="password" name="password" required autofocus>
+            </div>
+
+            <div class="form-group" style="margin-bottom: 12px;">
+              <label for="confirm_password" class="form-label">Confirm New Password</label>
+              <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
+            </div>
+
+            <div style="text-align: center; margin-top: 20px;">
+              <button type="submit" class="btn-shine">
+                Change Password
+              </button>
+            </div>
+
+            <div style="text-align: center; margin-top: 15px;">
+              <a href="/auth/login" style="color: var(--primary-color); text-decoration: none; font-size: 14px;">Back to
+                Login</a>
+            </div>
+          </form>
+        </div>
+
+        <div style="margin-top: 20px; text-align: center;">
+          <p style="font-size: 12px; color: #fff;">© 2024 Swiss Institute of Management and Sciences. All rights
+            reserved.</p>
+        </div>
+  </div>
+
+  <!-- Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const flashData = document.getElementById('flash-messages-data');
+      if (flashData) {
+        try {
+          const data = JSON.parse(flashData.innerHTML);
+          const container = document.querySelector('.login-container');
+
+          const addAlert = (msg, type) => {
+            const alertDiv = document.createElement('div');
+            alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
+            alertDiv.innerHTML = `
+                        ${msg}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                      `;
+            container.insertBefore(alertDiv, container.firstChild);
+          };
+
+          if (data.success_msg) addAlert(data.success_msg, 'success');
+          if (data.error_msg) addAlert(data.error_msg, 'danger');
+          if (data.error) addAlert(data.error, 'danger');
+
+        } catch (e) {
+          console.error("Error parsing flash data", e);
+        }
+      }
+    });
+  </script>
+</body>
+
+</html>