glauth-ui/ui/admin.njk
2025-05-17 16:40:38 +02:00

127 lines
No EOL
6.9 KiB
Text

{% extends "./master.njk" %}
{% block content %}
<div id="app" class="w-full">
{% include "./components/navbar.njk" %}
<div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
<div class="flex flex-row gap-8 w-full text-gray-700">
<!-- Setting Menu -->
<div class="flex flex-col w-2/6">
<div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 shadow-md rounded-lg gap-6">
<div class="flex w-full">
<h2 class="text-xl font-bold dark:text-gray-200">Settings</h2>
</div>
<div class="flex flex-col gap-3">
{% if page == 'users' %}
<a href="/admin/users" class="py-3 px-5 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 bg-gray-100 dark:bg-gray-900">
{% else %}
<a href="/admin/users" class="py-3 px-5 text-sm text-left rounded-lg text-gray-700 dark:text-gray-300 hover:text-gray-100 hover:bg-blue-500">
{% endif %}
Users
</a>
{% if page == 'groups' %}
<a href="/admin/groups" class="py-3 px-5 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 bg-gray-100 dark:bg-gray-900">
{% else %}
<a href="/admin/groups" class="py-3 px-5 text-sm text-left rounded-lg text-gray-700 dark:text-gray-300 hover:text-gray-100 hover:bg-blue-500">
{% endif %}
Groups
</a>
</div>
</div>
</div>
<div class="flex flex-col flex-auto gap-8">
{% if page == 'users' %}
<!-- Table: Users -->
<div class="relative overflow-x-auto shadow-md rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
<table class="w-full text-sm text-left">
<caption class="py-5 px-8 text-xl font-semibold text-left">
Users
<p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
Manage the users in the user directory
</p>
</caption>
<thead class="text-xs uppercase bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-400">
<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 users %}
<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.name}}
</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="/admin/user/{{user.id}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% if page == 'groups' %}
<!-- Table: Groups -->
<div class="relative overflow-x-auto shadow-md rounded-lg">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<caption class="py-5 px-8 text-xl font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
Groups
<p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
Manage the groups in the user directory
</p>
</caption>
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<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 groups %}
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th class="px-6 py-4 select-all font-medium text-gray-900 whitespace-nowrap dark:text-white">
{{group.name}}
</th>
<td class="px-6 py-4 text-right">
<a href="/admin/group/{{group.id}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<!-- / -->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
{% endblock %}