hlaeja-old/hlaeja-management
6
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update html layout

Browse Source 
- add messages fragment
  - extract error and success message list from edit.html
  - extract error message list from create.html
  - add messages.html

- update edit account
  - update AccountController
    - update postEditAccount for validation
    - update getEditAccount for roleGroups
  - update validation for AccountForm for edit
  - add EditGroup
  - update Account.Response.toAccountForm()
  - update edit.html

- update create account
  - update AccountController
    - update postCreateAccount for validation
    - update getCreateAccount for role group
  - add validation to AccountForm
  - add PasswordMatchValidator
  - add annotation PasswordMatch
  - add CreateGroup
  - add temporary getRoles() in AccountRegistryService
  - update AccountForm.toAccountRequest() in Mapping
  - change management.css
    - add ::selection
    - add Selected Option Styling
  - add passwordMatchCheck to management.js
  - update create.html

- update user
  - add makeLocalTime in management.js
  - update users.html
  - update Pagination
    - add size of items
    - rename size to show

- update goodbye.html

- update logout.html

- update login.html

- update welcome.html

- update index.html

- update layout
  - update management.css
  - update management.js
  - update layout.html
This commit is contained in:
Mr. Swordsteel
2025-03-01 16:04:56 +01:00
parent 4c6c7dd9d8
commit 4c4baa95dd
22 changed files with 807 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/main/resources/templates/account/edit.html
View File

@@ -1,96 +1,71 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Home Pages</title>
<!--/*/<th:block th:insert="~{layout.html :: documentHead}"/>/*/-->
</head>
<body>
<main>
<h1>Test edit user <strong th:text="${accountForm.username}">username</strong></h1>
<hr>
<form th:action="@{/account/edit-{account}(account = ${account})}" th:method="post">
<!-- Display error message if present -->
<div th:if="${errorMessage != null}" style="color: red; margin-bottom: 10px;">
<span th:text="${errorMessage}">Error Message</span>
</div>
<div th:if="${successMessage != null}" style="color: blue; margin-bottom: 10px;">
<span th:text="${successMessage}">success Message</span>
</div>
<!-- Username -->
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" th:field="*{accountForm.username}" required/>
</div>
<!-- Role -->
<div>
<label for="role">Role:</label>
<select id="role" name="role" th:field="*{accountForm.role}" required>
<option value="user">User</option>
<option value="registered">Registered</option>
<option value="admin">Admin</option>
</select>
</div>
<!-- Enabled -->
<div>
<label for="enabled">Enabled:</label>
<input type="checkbox" id="enabled" name="enabled" th:field="*{accountForm.enabled}"/>
</div>
<hr>
<!-- Password -->
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
</div>
<!-- Re-enter Password -->
<div>
<label for="passwordConfirm">Re-enter Password:</label>
<input type="password" id="passwordConfirm" name="passwordConfirm"/>
<span id="passwordMatchMessage"></span>
</div>
<hr>
<!-- Submit Button -->
<button type="submit">Update User</button>
</form>
<br>
<a href="/account">Account</a>
<a href="/logout">Logout</a><br>
<!--/*/<th:block th:replace="~{layout.html :: documentHead ('Hlaeja Management')}"/>/*/-->
<body class="bg-gray-900 text-green-400 min-h-screen flex flex-col">
<!--/*/<th:block th:replace="~{layout.html :: header}"/>/*/-->
<main class="container mx-auto p-4 flex-grow flex items-center justify-center">
<div class="w-full max-w-4xl">
<form th:action="@{/account/edit-{account}(account = ${account})}" th:method="post">
<div class="mb-4">
<h1 class="text-lg sm:text-xl mb-4 terminal-glow">Edit User <strong th:text="${accountForm.username}"/></h1>
<hr class="border-green-900 mb-4">
<th:block th:replace="~{messages :: messageDisplay(messageList=${validationErrors}, error=true, styleClass='text-red-600')}"/>
<th:block th:replace="~{messages :: messageDisplay(messageList=${successMessage}, error=false, styleClass='text-green-600')}"/>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-800 p-6 rounded-lg border border-green-900">
<h2 class="text-lg sm:text-xl mb-4 terminal-glow">Account Details</h2>
<div class="mb-4">
<label class="block text-sm mb-2" for="username">Username:</label>
<input th:field="*{accountForm.username}" id="username" name="username" type="text" class="w-full bg-gray-900 border border-green-900 rounded px-3 py-2 text-green-400 focus:outline-none focus:border-green-600">
</div>
<div class="mb-4">
<label class="block text-sm mb-2" for="roles">Role:</label>
<select th:field="*{accountForm.roles}" id="roles" multiple="multiple" size="6" class="w-full bg-gray-900 border border-green-900 rounded scrollable-no-radius-right px-3 py-2 text-green-400 focus:outline-none focus:border-green-600 overflow-y-auto">
<optgroup th:each="group : ${roleGroups}" th:label="${group.key}" class="text-green-600">
<option th:each="role : ${group.value}" th:value="${role}" th:text="${role}" class="text-green-400"/>
</optgroup>
</select>
<p class="text-xs text-green-600 mt-1">[Hold Ctrl/Cmd to select multiple]</p>
</div>
<div class="mb-4">
<label class="block text-sm mb-2" for="enabled">Enabled:</label>
<div class="switch-wrapper">
<input th:checked="${accountForm.enabled}" value="true" id="enabled" name="enabled" type="checkbox">
<span class="switch-slider border-green-900"></span>
</div>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-green-900">
<h2 class="text-lg sm:text-xl mb-4 terminal-glow">Password Update</h2>
<div class="mb-4">
<label class="block text-sm mb-2" for="password">Password:</label>
<input th:field="*{accountForm.password}" id="password" name="password" type="password" placeholder="Leave blank to keep current" class="w-full bg-gray-900 border border-green-900 rounded px-3 py-2 text-green-400 focus:outline-none focus:border-green-600">
</div>
<div class="mb-4">
<label class="block text-sm mb-2" for="passwordConfirm">Re-enter Password:</label>
<input th:field="*{accountForm.passwordConfirm}" id="passwordConfirm" name="passwordConfirm" type="password" placeholder="Confirm new password" class="w-full bg-gray-900 border border-green-900 rounded px-3 py-2 text-green-400 focus:outline-none focus:border-green-600">
<span id="passwordMatchMessage" class="text-sm text-green-600"></span>
</div>
</div>
</div>
<div class="mt-4 flex justify-end space-x-4">
<a href="/account" class="bg-gray-800 hover:bg-gray-700 text-green-400 px-4 py-2 rounded border border-green-900 transition-colors inline-block">Cancel</a>
<button type="submit" class="bg-green-900 hover:bg-green-800 text-green-400 px-4 py-2 rounded border border-green-600 transition-colors">Update User</button>
</div>
</div>
</form>
</div>
</main>
<!--/*/<th:block th:replace="~{layout.html :: script}"/>/*/-->
<!--/*/<th:block th:replace="~{layout.html :: footer}"/>/*/-->
<script>
// Get password fields
const password = document.getElementById('password');
const passwordConfirm = document.getElementById('passwordConfirm');
const passwordMatchMessage = document.getElementById('passwordMatchMessage');
// Function to check if passwords match
function checkPasswordMatch() {
if (password.value === passwordConfirm.value) {
passwordMatchMessage.textContent = 'Passwords match!';
passwordMatchMessage.style.color = 'green';
} else {
passwordMatchMessage.textContent = 'Passwords do not match!';
passwordMatchMessage.style.color = 'red';
}
}
// Add event listeners to both password fields
password.addEventListener('input', checkPasswordMatch);
passwordConfirm.addEventListener('input', checkPasswordMatch);
// Form submit validation
document.querySelector('form').addEventListener('submit', function(e) {
if (password.value !== passwordConfirm.value) {
alert('Passwords do not match!');
e.preventDefault();
}
document.addEventListener('DOMContentLoaded', () => {
passwordMatchCheck(
document.getElementById('password'),
document.getElementById('passwordConfirm'),
document.getElementById('passwordMatchMessage')
);
});
</script>
<!--/*/<th:block th:replace="~{layout.html :: script}"/>/*/-->
</body>
</html>