edit account UI improvements
This commit is contained in:
@@ -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">
|
||||||
|
<!-- account stuff -->
|
||||||
|
<div class="mb-4">
|
||||||
<h2 class="text-lg sm:text-xl mb-4 terminal-glow">Account Details</h2>
|
<h2 class="text-lg sm:text-xl mb-4 terminal-glow">Account Details</h2>
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<label class="block text-sm mb-2" for="username">Username:</label>
|
<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">
|
<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>
|
||||||
<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>
|
||||||
|
<!-- 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,8 +32,8 @@
|
|||||||
<span class="switch-slider border-green-900"></span>
|
<span class="switch-slider border-green-900"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Password -->
|
||||||
<div class="bg-gray-800 p-6 rounded-lg border border-green-900">
|
<div class="mb-4">
|
||||||
<h2 class="text-lg sm:text-xl mb-4 terminal-glow">Password Update</h2>
|
<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="password">Password:</label>
|
||||||
@@ -51,6 +46,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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">
|
<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>
|
<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>
|
<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>
|
||||||
|
|||||||
Reference in New Issue
Block a user