basketballcantho/sisvietnamvn_01
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

login form okie

Browse Source
This commit is contained in:
Victor Phan
2026-07-01 15:40:46 +07:00
parent e9909784c7
commit ba587a40cb
107 changed files with 5601 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sisvietnamvn_main/src/main/resources/templates/fragments/manage-layout.html
+31 -4
View File
@@ -92,12 +92,36 @@
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
System
</div>
<!-- Nav Item - Users Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUsers"
aria-expanded="true" aria-controls="collapseUsers">
<i class="fas fa-fw fa-users"></i>
<span>Users</span>
</a>
<div id="collapseUsers" class="collapse" aria-labelledby="headingUsers" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">User Management:</h6>
<a class="collapse-item" th:href="@{/manage/users}">All Users</a>
<a class="collapse-item" th:href="@{/manage/users/new}">Add New</a>
</div>
</div>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Interface
</div>
<!-- Nav Item - Pages Collapse Menu -->
<!-- Nav Item - Components Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">
@@ -145,19 +169,22 @@
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Admin User</span>
<span class="mr-2 d-none d-lg-inline text-gray-600 small" sec:authentication="name">Admin User</span>
<img class="img-profile rounded-circle"
src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/img/undraw_profile.svg">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<a class="dropdown-item" th:href="@{/manage/profile}">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<form method="post" th:action="@{/manage/logout}" id="logoutForm" class="d-none">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
</form>
<a class="dropdown-item" href="#" onclick="document.getElementById('logoutForm').submit(); return false;">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
sisvietnamvn_main/src/main/resources/templates/manage/2fa/setup.html
+68
View File
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cài đặt 2FA / 2FA Setup - SIS Vietnam</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link th:href="@{/login-assets/css}" rel="stylesheet" type="text/css">
<link th:href="@{/login-assets/bootstrap.min.css}" rel="stylesheet" type="text/css">
<link th:href="@{/login-assets/login-dl.css}" rel="stylesheet" type="text/css">
<link th:href="@{/login-assets/customer-style.css}" rel="stylesheet" type="text/css">
</head>
<body class="login">
<div class="user-login-5">
<div class="row bs-reset">
<div class="col-md-8 col-sm-6 hidden-xs bs-reset mt-login-5-bsfix">
<div class="login-bg" style="background: none; position: relative; z-index: 0;">
<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 100vh; width: 100%; z-index: -999998; position: absolute;">
<img th:src="@{/login-assets/bg2.jpg}" style="position: absolute; margin: 0px; padding: 0px; border-width: medium; border-style: none; width: 100%; height: 100%; object-fit: cover; z-index: -999999; left: 0px; top: 0px;">
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 login-container bs-reset mt-login-5-bsfix">
<div class="login-content">
<img class="login-logo" th:src="@{/login-assets/logo.png}" style="width:260px; margin-bottom: 10px;">
<h3 class="font-green">Cài đặt 2FA / 2FA Setup</h3>
<p>Hệ thống yêu cầu bạn phải cài đặt 2FA trước khi tiếp tục. Vui lòng sử dụng ứng dụng Google Authenticator để quét mã QR bên dưới.</p>
<p>The system requires you to set up 2FA. Please use Google Authenticator to scan the QR code below.</p>
<div style="text-align: center; margin-bottom: 20px;">
<img th:src="${qrCode}" alt="QR Code" style="width: 200px; border: 1px solid #ccc; padding: 10px; border-radius: 10px; background: white;" />
<br/><br/>
<small>Hoặc nhập mã bí mật thủ công / Or enter secret manually:</small><br/>
<strong th:text="${secret}"></strong>
</div>
<div th:if="${errorMessage}" class="alert alert-danger">
<span th:text="${errorMessage}"></span>
</div>
<form th:action="@{/2fa/setup}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<div class="form-group">
<input autocomplete="off" class="form-control form-control-solid h-auto py-6 px-6 rounded-lg" required id="code" name="code" placeholder="Mã 6 số / 6-digit Code" type="text" autofocus>
</div>
<div class="pb-lg-0 pb-5 d-flex align-items-center mt-4">
<button type="submit" class="btn blue mr-3">Xác nhận & Hoàn tất / Verify & Finish</button>
</div>
</form>
</div>
<div class="login-footer">
<div class="row bs-reset">
<div class="col-xs-12 bs-reset">
<div class="login-copyright text-right">
<p>Copyright &copy; SIS Vietnam 2026</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
sisvietnamvn_main/src/main/resources/templates/manage/2fa/verify.html
+61
View File
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Xác minh 2FA / 2FA Verification - SIS Vietnam</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link th:href="@{/login-assets/css}" rel="stylesheet" type="text/css">
<link th:href="@{/login-assets/bootstrap.min.css}" rel="stylesheet" type="text/css">
<link th:href="@{/login-assets/login-dl.css}" rel="stylesheet" type="text/css">
<link th:href="@{/login-assets/customer-style.css}" rel="stylesheet" type="text/css">
</head>
<body class="login">
<div class="user-login-5">
<div class="row bs-reset">
<div class="col-md-8 col-sm-6 hidden-xs bs-reset mt-login-5-bsfix">
<div class="login-bg" style="background: none; position: relative; z-index: 0;">
<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 100vh; width: 100%; z-index: -999998; position: absolute;">
<img th:src="@{/login-assets/bg2.jpg}" style="position: absolute; margin: 0px; padding: 0px; border-width: medium; border-style: none; width: 100%; height: 100%; object-fit: cover; z-index: -999999; left: 0px; top: 0px;">
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 login-container bs-reset mt-login-5-bsfix">
<div class="login-content">
<img class="login-logo" th:src="@{/login-assets/logo.png}" style="width:260px; margin-bottom: 30px;">
<h3 class="font-green">Xác minh 2 bước / Two-Factor Authentication</h3>
<p>Vui lòng nhập mã 6 số từ ứng dụng Google Authenticator của bạn.</p>
<p>Please enter the 6-digit code from your Google Authenticator app.</p>
<div th:if="${errorMessage}" class="alert alert-danger">
<span th:text="${errorMessage}"></span>
</div>
<form th:action="@{/2fa}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<div class="form-group">
<input autocomplete="off" class="form-control form-control-solid h-auto py-6 px-6 rounded-lg" required id="code" name="code" placeholder="Mã 6 số / 6-digit Code" type="text" autofocus>
</div>
<div class="pb-lg-0 pb-5 d-flex align-items-center mt-4">
<button type="submit" class="btn blue mr-3">Xác minh / Verify</button>
</div>
</form>
</div>
<div class="login-footer">
<div class="row bs-reset">
<div class="col-xs-12 bs-reset">
<div class="login-copyright text-right">
<p>Copyright &copy; SIS Vietnam 2026</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
sisvietnamvn_main/src/main/resources/templates/manage/login.html
+114
View File
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Đăng nhập/Login - SIS Vietnam</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link th:href="@{/login-assets/css}" rel="stylesheet" type="text/css">
<link th:href="@{/login-assets/font-awesome.min.css}" rel="stylesheet" type="text/css">
<link th:href="@{/login-assets/simple-line-icons.min.css}" rel="stylesheet" type="text/css">
<link th:href="@{/login-assets/bootstrap.min.css}" rel="stylesheet" type="text/css">
<link th:href="@{/login-assets/bootstrap-switch.min.css}" rel="stylesheet" type="text/css">
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link th:href="@{/login-assets/select2.min.css}" rel="stylesheet" type="text/css">
<link th:href="@{/login-assets/select2-bootstrap.min.css}" rel="stylesheet" type="text/css">
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link th:href="@{/login-assets/components.min.css}" rel="stylesheet" id="style_components" type="text/css">
<link th:href="@{/login-assets/plugins.min.css}" rel="stylesheet" type="text/css">
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link th:href="@{/login-assets/login-dl.css}" rel="stylesheet" type="text/css">
<!-- END PAGE LEVEL STYLES -->
<link rel="shortcut icon" th:href="@{/favicon.ico}">
<link th:href="@{/login-assets/customer-style.css}" rel="stylesheet" type="text/css">
</head>
<body class="login">
<div class="user-login-5">
<div class="row bs-reset">
<div class="col-md-8 col-sm-6 hidden-xs bs-reset mt-login-5-bsfix">
<div class="login-bg" style="background: none; position: relative; z-index: 0;">
<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 100vh; width: 100%; z-index: -999998; position: absolute;">
<img th:src="@{/login-assets/bg2.jpg}" style="position: absolute; margin: 0px; padding: 0px; border-width: medium; border-style: none; width: 100%; height: 100%; object-fit: cover; z-index: -999999; left: 0px; top: 0px;">
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 login-container bs-reset mt-login-5-bsfix">
<div class="login-content">
<img class="login-logo" th:src="@{/login-assets/logo.png}" style="width:260px; margin-bottom: 30px;">
<div th:if="${param.error}" class="alert alert-danger">
<span>Tên đăng nhập hoặc mật khẩu không đúng / Invalid username or password.</span>
</div>
<div th:if="${param.logout}" class="alert alert-info">
<span>Bạn đã đăng xuất thành công / You have been logged out.</span>
</div>
<form th:action="@{/manage/login}" class="form fv-plugins-bootstrap fv-plugins-framework" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<!--begin::Form group-->
<div class="form-group fv-plugins-icon-container">
<input autocomplete="username" class="form-control form-control-solid h-auto py-6 px-6 rounded-lg" required id="username" name="username" placeholder="Tên đăng nhập / Login Name" type="text" autofocus>
</div>
<!--end::Form group-->
<!--begin::Form group-->
<div class="form-group fv-plugins-icon-container">
<input autocomplete="current-password" class="form-control form-control-solid h-auto py-6 px-6 rounded-lg" required id="password" name="password" placeholder="Mật khẩu / Password" type="password">
</div>
<div class="form-group fv-plugins-icon-container">
<div class="rem-password">
<label class="rememberme mt-checkbox mt-checkbox-outline font-white">
<input id="remember-me" name="remember-me" type="checkbox" value="true"> Ghi nhớ / Remember
<span></span>
</label>
</div>
</div>
<!--end::Form group-->
<!--begin::Action-->
<div class="pb-lg-0 pb-5 d-flex align-items-center">
<button type="submit" class="btn blue mr-3">Đăng nhập / Login</button>
<a th:href="@{/oauth2/authorization/google}" class="btn btn-outline-danger">
<i class="fab fa-google"></i> Login with Google
</a>
</div>
<div class="form-group fv-plugins-icon-container mt-4">
<div class="pull-left">
<a th:href="@{/}" class="btn" style="padding-left: 0;">
<i class="fa fa-arrow-left"></i> Quay lại trang chủ / Back to Home
</a>
</div>
<div class="pull-right">
<label class="rememberme mt-checkbox mt-checkbox-outline goback">
<a th:href="@{/account/reset/request}" class="btn">
Quên mật khẩu / Forgot Password?
</a>
</label>
</div>
</div>
<!--end::Action-->
</form>
</div>
<div class="login-footer">
<div class="row bs-reset">
<div class="col-xs-12 bs-reset">
<div class="login-copyright text-right">
<p>Copyright &copy; SIS Vietnam 2026</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script th:src="@{/login-assets/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/login-assets/bootstrap.min.js}" type="text/javascript"></script>
</body>
</html>
sisvietnamvn_main/src/main/resources/templates/manage/pages/form.html
+15 -3
View File
@@ -82,6 +82,7 @@
<div class="card-body">
<form id="pageForm" th:action="${isNew} ? @{/manage/pages} : @{/manage/pages/{id}(id=${page.id})}"
th:object="${page}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<!-- Validation errors summary -->
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
@@ -118,7 +119,7 @@
<div class="row">
<!-- Page Type -->
<div class="col-md-4">
<div class="col-md-3">
<div class="form-group">
<label for="pageType" class="font-weight-bold">Page Type <span
class="text-danger">*</span></label>
@@ -128,8 +129,19 @@
</div>
</div>
<!-- Layout -->
<div class="col-md-3">
<div class="form-group">
<label for="pageLayout" class="font-weight-bold">Layout <span
class="text-danger">*</span></label>
<select class="form-control" id="pageLayout" th:field="*{layout}">
<option th:each="l : ${layouts}" th:value="${l}" th:text="${l}"></option>
</select>
</div>
</div>
<!-- Status -->
<div class="col-md-4">
<div class="col-md-3">
<div class="form-group">
<label for="pageStatus" class="font-weight-bold">Status <span
class="text-danger">*</span></label>
@@ -140,7 +152,7 @@
</div>
<!-- Display Order -->
<div class="col-md-4">
<div class="col-md-3">
<div class="form-group">
<label for="pageDisplayOrder" class="font-weight-bold">Display Order</label>
<input type="number" class="form-control" id="pageDisplayOrder"
sisvietnamvn_main/src/main/resources/templates/manage/pages/list.html
+1
View File
@@ -72,6 +72,7 @@
</a>
<form th:action="@{/manage/pages/{id}/delete(id=${page.id})}" method="post" style="display:inline;"
onsubmit="return confirm('Are you sure you want to delete this page?');">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<button type="submit" class="btn btn-sm btn-danger" title="Delete">
<i class="fas fa-trash"></i> Delete
</button>
sisvietnamvn_main/src/main/resources/templates/manage/posts/categories.html
+2
View File
@@ -44,6 +44,7 @@
<div class="card-body">
<form th:action="${isNew} ? @{/manage/posts/categories} : @{/manage/posts/categories/{id}(id=${category.id})}"
th:object="${category}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<!-- Validation errors -->
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger alert-sm">
@@ -150,6 +151,7 @@
<form th:action="@{/manage/posts/categories/{id}/delete(id=${cat.id})}" method="post"
style="display:inline;"
onsubmit="return confirm('Are you sure you want to delete this category?');">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
<i class="fas fa-trash"></i>
</button>
sisvietnamvn_main/src/main/resources/templates/manage/posts/form.html
+1
View File
@@ -131,6 +131,7 @@
<form id="postForm" th:action="${isNew} ? @{/manage/posts/create} : @{/manage/posts/{id}(id=${post.id})}"
th:object="${post}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<!-- Validation errors summary -->
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
sisvietnamvn_main/src/main/resources/templates/manage/posts/list.html
+1
View File
@@ -129,6 +129,7 @@
</a>
<form th:action="@{/manage/posts/{id}/delete(id=${post.id})}" method="post" style="display:inline;"
onsubmit="return confirm('Are you sure you want to delete this post?');">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
<i class="fas fa-trash"></i>
</button>
sisvietnamvn_main/src/main/resources/templates/manage/posts/tags.html
+2
View File
@@ -44,6 +44,7 @@
<div class="card-body">
<form th:action="${isNew} ? @{/manage/posts/tags} : @{/manage/posts/tags/{id}(id=${tag.id})}"
th:object="${tag}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<!-- Validation errors -->
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger alert-sm">
@@ -134,6 +135,7 @@
<form th:action="@{/manage/posts/tags/{id}/delete(id=${t.id})}" method="post"
style="display:inline;"
onsubmit="return confirm('Are you sure you want to delete this tag?');">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
<i class="fas fa-trash"></i>
</button>
sisvietnamvn_main/src/main/resources/templates/manage/users/form.html
+133
View File
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/manage-layout}">
<head>
<title th:text="${isNew} ? 'Add New User' : 'Edit User'">User Form</title>
</head>
<body>
<div layout:fragment="content">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800" th:text="${isNew} ? 'Add New User' : 'Edit User'">User Form</h1>
<a th:href="@{/manage/users}" class="d-none d-sm-inline-block btn btn-sm btn-secondary shadow-sm">
<i class="fas fa-arrow-left fa-sm text-white-50"></i> Back to All Users
</a>
</div>
<!-- Form Card -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary" th:text="${isNew} ? 'Create a New User' : 'Update User Details'">Form</h6>
</div>
<div class="card-body">
<form th:action="${isNew} ? @{/manage/users} : @{/manage/users/{login}(login=${userDTO.login})}"
th:object="${userDTO}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<!-- Form Errors Summary -->
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
<ul class="mb-0">
<li th:each="err : ${#fields.errors('*')}" th:text="${err}"></li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<!-- Login -->
<div class="form-group">
<label for="login" class="font-weight-bold">Login <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="login" th:field="*{login}"
th:classappend="${#fields.hasErrors('login')} ? 'is-invalid' : ''"
th:readonly="${!isNew}" placeholder="Username" required>
<div class="invalid-feedback" th:if="${#fields.hasErrors('login')}" th:errors="*{login}"></div>
<small class="form-text text-muted" th:if="${!isNew}">The login cannot be changed after creation.</small>
</div>
<!-- Email -->
<div class="form-group">
<label for="email" class="font-weight-bold">Email <span class="text-danger">*</span></label>
<input type="email" class="form-control" id="email" th:field="*{email}"
th:classappend="${#fields.hasErrors('email')} ? 'is-invalid' : ''"
placeholder="user@example.com" required>
<div class="invalid-feedback" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></div>
</div>
<div class="row">
<!-- First Name -->
<div class="col-md-6">
<div class="form-group">
<label for="firstName" class="font-weight-bold">First Name</label>
<input type="text" class="form-control" id="firstName" th:field="*{firstName}"
th:classappend="${#fields.hasErrors('firstName')} ? 'is-invalid' : ''">
<div class="invalid-feedback" th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}"></div>
</div>
</div>
<!-- Last Name -->
<div class="col-md-6">
<div class="form-group">
<label for="lastName" class="font-weight-bold">Last Name</label>
<input type="text" class="form-control" id="lastName" th:field="*{lastName}"
th:classappend="${#fields.hasErrors('lastName')} ? 'is-invalid' : ''">
<div class="invalid-feedback" th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<!-- Activated -->
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="activated" th:field="*{activated}">
<label class="custom-control-label font-weight-bold" for="activated">Activated</label>
</div>
<small class="form-text text-muted">Deactivated users cannot log in.</small>
</div>
<!-- Language -->
<div class="form-group mt-3">
<label for="langKey" class="font-weight-bold">Language</label>
<select class="form-control" id="langKey" th:field="*{langKey}">
<option value="en">English</option>
<option value="vi">Vietnamese</option>
</select>
</div>
<!-- Roles / Authorities -->
<div class="form-group mt-3">
<label class="font-weight-bold">Profiles (Roles)</label>
<div>
<div th:each="auth : ${authorities}" class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input"
th:id="${'auth_' + auth}" th:value="${auth}" th:field="*{authorities}">
<label class="custom-control-label" th:for="${'auth_' + auth}" th:text="${auth}"></label>
</div>
</div>
</div>
<!-- Notice for new user -->
<div class="alert alert-info mt-3" th:if="${isNew}">
<i class="fas fa-info-circle"></i> A random password and reset key will be generated for new users. They must reset their password to log in.
</div>
</div>
</div>
<hr>
<div class="d-flex justify-content-between">
<a th:href="@{/manage/users}" class="btn btn-secondary">
<i class="fas fa-times"></i> Cancel
</a>
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i>
<span th:text="${isNew} ? 'Create User' : 'Update User'">Save</span>
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
sisvietnamvn_main/src/main/resources/templates/manage/users/list.html
+126
View File
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/manage-layout}">
<head>
<title>Users Management</title>
</head>
<body>
<div layout:fragment="content">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">User Management</h1>
<a th:href="@{/manage/users/new}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
<i class="fas fa-plus fa-sm text-white-50"></i> Add New User
</a>
</div>
<!-- Alerts -->
<div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
<span th:text="${successMessage}"></span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
<span th:text="${errorMessage}"></span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">All Registered Users</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Login</th>
<th>Email</th>
<th>Status</th>
<th>Language</th>
<th>Profiles</th>
<th>Created Date</th>
<th class="text-center" style="width: 150px;">Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td><strong th:text="${user.login}">login</strong></td>
<td th:text="${user.email}">user@example.com</td>
<td>
<span th:if="${user.activated}" class="badge badge-success">Activated</span>
<span th:unless="${user.activated}" class="badge badge-danger">Deactivated</span>
</td>
<td th:text="${user.langKey}">en</td>
<td>
<span th:each="auth : ${user.authorities}" class="badge badge-info mr-1" th:text="${auth}">ROLE</span>
</td>
<td th:text="${#temporals.format(user.createdDate, 'dd-MM-yyyy HH:mm')}"></td>
<td class="text-center">
<a th:href="@{/manage/users/{login}/edit(login=${user.login})}" class="btn btn-primary btn-sm" title="Edit User">
<i class="fas fa-edit"></i>
</a>
<button type="button" class="btn btn-danger btn-sm" title="Delete User"
th:data-login="${user.login}"
onclick="openDeleteModal(this.getAttribute('data-login'))">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr th:if="${#lists.isEmpty(users)}">
<td colspan="7" class="text-center">No users found.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<section layout:fragment="scripts">
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteUserModal" tabindex="-1" role="dialog" aria-labelledby="deleteUserModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form id="deleteUserForm" method="post" action="">
<!-- JHipster/Spring Security CSRF token if needed -->
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<div class="modal-header">
<h5 class="modal-title" id="deleteUserModalLabel">Confirm Delete</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete user <strong id="deleteUserLoginDisplay"></strong>?
<br>
<span class="text-danger small">This action cannot be undone.</span>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Delete</button>
</div>
</form>
</div>
</div>
</div>
<script>
function openDeleteModal(login) {
document.getElementById('deleteUserLoginDisplay').textContent = login;
document.getElementById('deleteUserForm').action = '/manage/users/' + login + '/delete';
$('#deleteUserModal').modal('show');
}
</script>
</section>
</body>
</html>
sisvietnamvn_main/src/main/resources/templates/manage/users/profile.html
+151
View File
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/manage-layout}">
<head>
<title>My Profile</title>
</head>
<body>
<div layout:fragment="content">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">My Profile</h1>
</div>
<!-- Success/Error Alerts for Profile -->
<div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
<span th:text="${successMessage}"></span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
<span th:text="${errorMessage}"></span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<!-- Success/Error Alerts for Password -->
<div th:if="${successPasswordMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
<span th:text="${successPasswordMessage}"></span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div th:if="${errorPasswordMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
<span th:text="${errorPasswordMessage}"></span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="row">
<!-- Profile Info Column -->
<div class="col-lg-6 mb-4">
<div class="card shadow">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Personal Information</h6>
</div>
<div class="card-body">
<form th:action="@{/manage/profile/update}" th:object="${userDTO}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<!-- Form Errors Summary -->
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
<ul class="mb-0">
<li th:each="err : ${#fields.errors('*')}" th:text="${err}"></li>
</ul>
</div>
<div class="form-group">
<label class="font-weight-bold">Login (Username)</label>
<input type="text" class="form-control" th:field="*{login}" readonly>
</div>
<div class="form-group">
<label for="email" class="font-weight-bold">Email <span class="text-danger">*</span></label>
<input type="email" class="form-control" id="email" th:field="*{email}"
th:classappend="${#fields.hasErrors('email')} ? 'is-invalid' : ''" required>
<div class="invalid-feedback" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="firstName" class="font-weight-bold">First Name</label>
<input type="text" class="form-control" id="firstName" th:field="*{firstName}"
th:classappend="${#fields.hasErrors('firstName')} ? 'is-invalid' : ''">
<div class="invalid-feedback" th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastName" class="font-weight-bold">Last Name</label>
<input type="text" class="form-control" id="lastName" th:field="*{lastName}"
th:classappend="${#fields.hasErrors('lastName')} ? 'is-invalid' : ''">
<div class="invalid-feedback" th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="langKey" class="font-weight-bold">Display Language</label>
<select class="form-control" id="langKey" th:field="*{langKey}">
<option value="en">English</option>
<option value="vi">Vietnamese</option>
</select>
</div>
<hr>
<div class="text-right">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i> Save Profile
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Password Column -->
<div class="col-lg-6 mb-4">
<div class="card shadow border-left-warning">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-warning">Change Password</h6>
</div>
<div class="card-body">
<form th:action="@{/manage/profile/password}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<div class="form-group">
<label for="currentPassword" class="font-weight-bold">Current Password <span class="text-danger">*</span></label>
<input type="password" class="form-control" id="currentPassword" name="currentPassword" required>
</div>
<div class="form-group">
<label for="newPassword" class="font-weight-bold">New Password <span class="text-danger">*</span></label>
<input type="password" class="form-control" id="newPassword" name="newPassword" minlength="4" maxlength="50" required>
</div>
<div class="form-group">
<label for="confirmPassword" class="font-weight-bold">Confirm New Password <span class="text-danger">*</span></label>
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword" minlength="4" maxlength="50" required>
</div>
<hr>
<div class="text-right">
<button type="submit" class="btn btn-warning">
<i class="fas fa-key"></i> Change Password
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>