Swordsteel
4c4baa95dd
- 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
72 lines
4.5 KiB
HTML
72 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<!--/*/<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 :: footer}"/>/*/-->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
passwordMatchCheck(
|
|
document.getElementById('password'),
|
|
document.getElementById('passwordConfirm'),
|
|
document.getElementById('passwordMatchMessage')
|
|
);
|
|
});
|
|
</script>
|
|
<!--/*/<th:block th:replace="~{layout.html :: script}"/>/*/-->
|
|
</body>
|
|
</html>
|