edit account UI improvements

This commit is contained in:
2025-08-03 17:57:29 +02:00
parent 76a4408d38
commit fae242b7b9

View File

@@ -16,20 +16,15 @@
<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 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>
<!-- Enable account -->
<div class="mb-4">
<label class="block text-sm mb-2" for="enabled">Enabled:</label>
<div class="switch-wrapper">
@@ -37,8 +32,8 @@
<span class="switch-slider border-green-900"></span>
</div>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg border border-green-900">
<!-- 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>
@@ -51,6 +46,18 @@
</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>