From d7b2bd0ccd1e92967021321b3fb99719d4acf9e8 Mon Sep 17 00:00:00 2001
From: Swordsteel <swordsteel@gmail.com>
Date: Sun, 3 Aug 2025 17:57:29 +0200
Subject: [PATCH] edit account UI improvements

---
 .../resources/templates/account/edit.html     | 47 +++++++++++--------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/main/resources/templates/account/edit.html b/src/main/resources/templates/account/edit.html
index 5dc315b..68d30f7 100644
--- a/src/main/resources/templates/account/edit.html
+++ b/src/main/resources/templates/account/edit.html
@@ -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">
-            <h2 class="text-lg sm:text-xl mb-4 terminal-glow">Account Details</h2>
+            <!-- account stuff -->
             <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>
+              <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">
@@ -37,17 +32,29 @@
                 <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">
-            <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>
+              <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>