minhnhat/cms.uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/cms.hailearning.edu.vn
Code Pull Requests Activity

feat: implement user authentication with database integration

Browse Source
This commit is contained in:
Wini_Fy
2026-02-09 16:36:50 +07:00
parent a2785955b3
commit 2ddf43c139
7 changed files with 1276 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
views/auth/forgot-password.ejs Normal file
View File

@@ -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>

75
views/auth/login.ejs
View File

@@ -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>

256
views/auth/register.ejs Normal file
View File

@@ -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>

239
views/auth/reset-password.ejs Normal file
View File

@@ -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>