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

edit account UI improvements

Browse Source
This commit is contained in:
Mr. Swordsteel
2025-08-03 17:57:29 +02:00
parent 76a4408d38
commit fae242b7b9
1 changed files with 27 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,20 +16,15 @@
<th:block th:replace="~{messages :: messageDisplay(messageList=${successMessage}, error=false, styleClass='text-green-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="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-800 p-6 rounded-lg border border-green-900"> <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> <!-- account stuff -->
<div class="mb-4"> <div class="mb-4">
<label class="block text-sm mb-2" for="username">Username:</label> <h2 class="text-lg sm:text-xl mb-4 terminal-glow">Account Details</h2>
<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 class="mb-4">
</div> <label class="block text-sm mb-2" for="username">Username:</label>
<div class="mb-4"> <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">
<label class="block text-sm mb-2" for="roles">Role:</label> </div>
<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>
<!-- Enable account -->
<div class="mb-4"> <div class="mb-4">
<label class="block text-sm mb-2" for="enabled">Enabled:</label> <label class="block text-sm mb-2" for="enabled">Enabled:</label>
<div class="switch-wrapper"> <div class="switch-wrapper">
@@ -37,17 +32,29 @@
<span class="switch-slider border-green-900"></span> <span class="switch-slider border-green-900"></span>
</div> </div>
</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>
<div class="bg-gray-800 p-6 rounded-lg border border-green-900"> <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"> <div class="mb-4">
<label class="block text-sm mb-2" for="password">Password:</label> <label class="block text-sm mb-2" for="roles">Role:</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"> <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">
</div> <optgroup th:each="group : ${roleGroups}" th:label="${group.key}" class="text-green-600">
<div class="mb-4"> <option th:each="role : ${group.value}" th:value="${role}" th:text="${role}" class="text-green-400"/>
<label class="block text-sm mb-2" for="passwordConfirm">Re-enter Password:</label> </optgroup>
<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"> </select>
<span id="passwordMatchMessage" class="text-sm text-green-600"></span> <p class="text-xs text-green-600 mt-1">[Hold Ctrl/Cmd to select multiple]</p>
</div> </div>
</div> </div>
</div> </div>