Update html layout

- 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:
2025-03-01 16:04:56 +01:00
parent 4c6c7dd9d8
commit 4c4baa95dd
22 changed files with 807 additions and 344 deletions

View File

@@ -1,10 +1,53 @@
<!DOCTYPE HTML>
<html lang="" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="documentHead">
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="documentHead (title)">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:text="${title}"/>
<link th:href="@{/css/management.css}" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<body class="bg-gray-900 text-green-400 min-h-screen flex flex-col">
<header th:fragment="header" class="bg-gray-800 border-b border-green-900">
<div class="container mx-auto px-4 py-2 flex items-center justify-between">
<div>
<h1 class="text-xl sm:text-2xl terminal-glow">Hlaeja Management</h1>
</div>
<div class="relative">
<button id="menu-toggle" class="focus:outline-none">
<svg class="w-6 h-6 text-green-400 hover:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<div id="dropdown-menu" class="hidden absolute right-0 mt-2 w-48 bg-gray-800 border border-green-900 shadow-lg z-10">
<th:block th:if="${remoteUser.hasRole('admin')}">
<a href="/account" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-green-300 transition-colors">Account</a>
<hr class="dropdown-divider">
</th:block>
<th:block th:if="${remoteUser.authenticated}">
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-green-300 transition-colors">$ diagnostics</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-green-300 transition-colors">$ logs</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-green-300 transition-colors">$ shutdown</a>
</th:block>
<th:block th:if="${remoteUser.authenticated}">
<hr class="dropdown-divider">
<a href="/logout" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-green-300 transition-colors">Logout</a>
</th:block>
<th:block th:unless="${remoteUser.authenticated}">
<a href="/login" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-green-300 transition-colors">Login</a>
</th:block>
</div>
</div>
</div>
</header>
<footer th:fragment="footer" class="bg-gray-800 border-t border-green-900 mt-4">
<div class="container mx-auto p-4">
<div class="flex flex-col sm:flex-row justify-between items-center text-sm">
<div class="text-green-600 mb-2 sm:mb-0">Hlaeja © 2025 Lulz Ltd</div>
<div class="flex space-x-4"></div>
</div>
</div>
</footer>
<div th:fragment="script">
<script th:src="@{/js/management.js}"></script>
</div>