82 lines
4.7 KiB
HTML
82 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<title>Hlæja Management</title>
|
|
<th:block th:replace="~{layout.html :: metadata}"/>
|
|
</head>
|
|
<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">
|
|
<!-- account stuff -->
|
|
<div class="mb-4">
|
|
<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>
|
|
<!-- Enable account -->
|
|
<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>
|
|
<!-- Password -->
|
|
<div class="mb-4">
|
|
<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="bg-gray-800 p-6 rounded-lg border border-green-900">
|
|
<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="15" 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>
|
|
</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>
|