waggeling.net/glauth-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

continued

Browse source 
implemented HTMX
implemented ORM (sequelize)
This commit is contained in:
Kai Waggeling 2025-11-29 21:56:21 +01:00
parent 2a9bd4e81b
commit d756a192e4
71 changed files with 3822 additions and 694 deletions
Download patch file Download diff file Expand all files Collapse all files

45
views/htmx/admin/editGroup.njk Normal file
View file

@ -0,0 +1,45 @@
<form class="flex flex-col gap-6 p-12" hx-post="/htmx/admin/groups/{{ group.id }}" hx-target="#admin-group-section">
<div class="w-full flex flex-row justify-between items-center">
<span class="text-2xl font-bold">
edit Group {{ group.name }}
</span>
</div>
<div class="flex flex-col gap-8">
<div class="flex flex-row align-center gap-4">
<div class="flex flex-col w-1/2 gap-3">
<label for="firstName" class="w-full text-sm font-medium">
Group Name
</label>
<input type="text" name="name" placeholder="Group Name" value="{{ group.name }}">
</div>
<div class="flex flex-col w-1/2 gap-3">
<label for="lastName" class="w-full text-sm font-medium">
Group ID
</label>
<input type="number" name="gidnumber" placeholder="1000" value="{{ group.gidnumber }}">
</div>
</div>
<div class="flex flex-row align-center gap-3">
<div class="flex flex-col w-full gap-2">
<span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
LDAP Path
</span>
<span class="select-text">
ou={{ group.name }},{{ ldap.baseDN }}
</span>
</div>
</div>
</div>
<div class="flex w-full justify-end gap-4">
<a href="#" class="button-sm"
hx-get="/htmx/admin/groups/table"
hx-target="#admin-group-section">
<i class="ti ti-arrow-left"></i>
Back
</a>
<button type="button" class="button-sm primary-fill">
<i class="ti ti-device-floppy"></i>
Save Changes
</button>
</div>
</form>

106
views/htmx/admin/editUser.njk Normal file
View file

@ -0,0 +1,106 @@
<div class="flex flex-col gap-8 w-full">
<form class="card flex flex-col gap-6 p-12" hx-post="/htmx/admin/groups/{{ group.id }}" hx-target="#admin-group-section">
<div class="w-full flex flex-row justify-between items-center">
<span class="text-2xl font-thin">
edit User {{ user.username }}
</span>
</div>
<div class="flex flex-col gap-8">
<div class="flex flex-row align-center gap-4">
<div class="flex flex-col w-1/2 gap-3">
<label for="username" class="w-full text-sm font-medium">
Username
</label>
<input type="text" name="username" placeholder="Username" value="{{ user.username }}">
</div>
<div class="flex flex-col w-1/2 gap-3">
<label for="uidnumber" class="w-full text-sm font-medium">
User ID
</label>
<input type="number" name="uidnumber" placeholder="1000" value="{{ user.uidnumber }}">
</div>
</div>
<div class="flex flex-row align-center gap-4">
<div class="flex flex-col w-1/2 gap-3">
<label for="firstName" class="w-full text-sm font-medium">
First Name
</label>
<input type="text" name="firstName" class="" placeholder="John" value="{{ user.firstName }}">
</div>
<div class="flex flex-col w-1/2 gap-3">
<label for="lastName" class="w-full text-sm font-medium">
Last Name
</label>
<input type="text" name="lastName" class="" placeholder="Doe" value="{{ user.lastName }}">
</div>
</div>
<div class="flex flex-row align-center gap-4">
<div class="flex flex-col w-1/2 gap-3">
<label for="username" class="w-full text-sm font-medium">
Primary Group
</label>
<select name="primaryGroup" class="">
{% for group in groupList %}
<option value="{{ group.gidnumber }}" {% if group.isPrimaryGroup %}selected{% endif %}>{{ group.name }}</option>
{% endfor %}
</select>
</div>
<div class="flex flex-col w-1/2 gap-3">
<label for="mail" class="w-full text-sm font-medium">
Mail Address
</label>
<input type="text" name="mail" class="" placeholder="john@doe.com" value="{{ user.mail }}">
</div>
</div>
</div>
<div class="flex w-full justify-end gap-4">
<a href="#" class="button-sm"
hx-get="/htmx/admin/users/table"
hx-target="#admin-user-section">
<i class="ti ti-arrow-left"></i>
Back
</a>
<button type="button" class="button-sm primary-fill">
<i class="ti ti-device-floppy"></i>
Save Changes
</button>
</div>
</form>
<div class="card flex flex-col w-full">
<div class="w-full flex flex-row justify-between items-center py-5 px-8">
<span class="text-2xl font-thin">
manage Groups for {{ user.username }}
</span>
</div>
<div class="table grid-cols-[min-content_1fr_min-content]">
<!-- Table Header -->
<div class="thead font-bold py-2 border-b">
<div>GID</div>
<div>Name</div>
<div>Actions</div>
</div>
{% for group in groupList %}
<!-- Table Row -->
<div class="trow py-2 border-b">
<div>{{ group.gidnumber }}</div>
<div>{{ group.name }}</div>
<div class="flex flex-row justify-end align-center gap-4">
{% if not group.isPrimaryGroup and not group.isOtherGroup %}
<a href="#" class="button-sm text-xs hover:underline success-fill whitespace-nowrap"
hx-get="/htmx/admin/groups/{{ group.id }}"
hx-target="#admin-group-section">
<i class="ti ti-user-plus"></i>
</a>
{% else %}
<a href="#" class="button-sm text-xs hover:underline danger-fill whitespace-nowrap"
hx-get="/htmx/admin/groups/{{ group.id }}"
hx-target="#admin-group-section">
<i class="ti ti-user-minus"></i>
</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>

41
views/htmx/admin/groupTable.njk Normal file
View file

@ -0,0 +1,41 @@
<div class="card flex flex-col w-full">
<div class="w-full py-5 px-8 flex flex-row justify-between items-center">
<span class="text-2xl font-bold">
Users
</span>
<div class="flex flex-row gap-4 items-center">
<a href="#" class="button-sm primary-fill"
hx-get="/htmx/admin/group/create"
hx-target="#profile-data-section">
<i class="ti ti-users-plus"></i>
Create Group
</a>
</div>
</div>
<table class="w-full text-sm text-left">
<thead class="text-xs uppercase" style="background: var(--color-base-bg-200); color: var(--color-base-fg-300);">
<tr>
<th scope="col" class="px-6 py-3">
Name
</th>
<th scope="col" class="px-6 py-3">
</th>
</tr>
</thead>
<tbody>
{% for group in groupList %}
<tr class="border-b border-gray-700">
<th class="px-6 py-4 select-all font-medium whitespace-nowrap">
{{group.name}}
</th>
<td class="px-6 py-4 text-right">
<a href="#" class="font-medium hover:underline"
hx-get="/htmx/admin/groups/{{group.id}}"
hx-target="#admin-group-section">Edit</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>

61
views/htmx/admin/userTable.njk Normal file
View file

@ -0,0 +1,61 @@
<div class="card flex flex-col w-full">
<div class="w-full py-5 px-8 flex flex-row justify-between items-center">
<span class="text-2xl font-bold">
Users
</span>
<div class="flex flex-row gap-4 items-center">
<a href="#" class="button-sm primary-fill"
hx-get="/htmx/admin/user/create"
hx-target="#profile-data-section">
<i class="ti ti-user-plus"></i>
Create User
</a>
</div>
</div>
<table class="w-full text-sm text-left">
<thead class="text-xs uppercase" style="background: var(--color-base-bg-200); color: var(--color-base-fg-300);">
<tr>
<th scope="col" class="px-6 py-3">
Name
</th>
<th scope="col" class="px-6 py-3">
Mail
</th>
<th scope="col" class="px-6 py-3 text-center">
Enabled
</th>
<th scope="col" class="px-6 py-3">
</th>
</tr>
</thead>
<tbody>
{% for user in userList %}
<tr class="border-b dark:border-gray-700 hover:bg-gray-100 hover:dark:bg-gray-700">
<th class="px-6 py-4 select-all font-medium whitespace-nowrap">
{{user.givenname}} {{user.sn}}
</th>
<td class="px-6 py-4 select-all">
{{user.mail}}
</td>
{% if user.disabled == 1 %}
<td class="px-6 py-4 text-2xl text-center text-red-400">
<i class="ti ti-square-rounded-x-filled"></i>
</td>
{% else %}
<td class="px-6 py-4 text-2xl text-center text-green-500">
<i class="ti ti-square-rounded-check-filled"></i>
</td>
{% endif %}
<td class="px-6 py-4 text-right">
<a href="#" class="font-medium hover:underline primary-text"
hx-get="/htmx/admin/users/{{user.id}}"
hx-target="#admin-user-section">
Edit
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>