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

22
views/admin/groups.njk Normal file
View file

@ -0,0 +1,22 @@
{% extends "../master.njk" %}
{% block content %}
<div id="app" class="w-full">
{% include "../components/navbar.njk" %}
<div class="container relative mx-auto py-24 flex flex-col justify-center items-center gap-8">
<div class="flex flex-col gap-12 max-w-[60%] w-full">
<!-- Page Header -->
<div class="w-full flex flex-row justify-start items-center">
<h2 class="text-4xl font-bold">
Manage Groups
</h2>
</div>
<div id="admin-group-section" class="flex flex-col w-full gap-8"
hx-get="/htmx/admin/groups/table"
hx-trigger="load">
<!-- load via HTMX -->
</div>
</div>
</div>
</div>
{% endblock %}

27
views/admin/users.njk Normal file
View file

@ -0,0 +1,27 @@
{% extends "../master.njk" %}
{% block content %}
<div id="app" class="w-full">
{% include "../components/navbar.njk" %}
<div class="container relative mx-auto py-24 flex flex-col justify-center items-center gap-8">
<div class="flex flex-col gap-12 max-w-[60%] w-full">
<!-- Page Header -->
<div class="w-full flex flex-row justify-start items-center">
<h2 class="text-4xl font-bold">
Manage Users
</h2>
</div>
<div id="admin-user-section" class="flex flex-col w-full"
hx-get="/htmx/admin/users/table"
hx-trigger="load">
<!-- Section: User Table -->
{# <div id="admin-user-section" class="flex flex-col flex-auto w-full"
hx-get="/htmx/admin/users/table"
hx-trigger="load">
<!-- load via HTMX -->
</div> #}
</div>
</div>
</div>
</div>
{% endblock %}

170
views/components/meta.njk Normal file
View file

@ -0,0 +1,170 @@
<link rel="icon" type="image/x-icon" href="/img/favicon.svg">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/js/tailwind.min.js"></script>
<script src="/js/htmx.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/styles/tabler-icons.min.css">
<link rel="stylesheet" href="/styles/theme.default.css">
<link rel="stylesheet" href="/styles/theme.light.css">
<style>
body,
html {
/* width: 100svw; */
min-height: 100svh;
user-select: none;
}
* {
box-sizing: border-box;
}
</style>
<style type="text/tailwindcss">
@layer components {
body {
@apply w-full flex flex-col items-center;
background: var(--color-base-bg-400);
color: var(--color-base-fg-100);
}
#navbar {
@apply: sticky top-0 z-50 w-full flex flex-col;
background: var(--color-base-bg-100);
}
#pageHeader {
@apply w-full flex flex-col items-center;
padding: 2rem 0rem 5rem;
margin: 0rem 0rem -3rem;
background: var(--color-base-bg-100);
color: var(--color-base-fg-100);
}
#pageContent {
@apply container flex flex-col items-center gap-8;
color: var(--color-base-fg-100);
}
.card {
@apply rounded-lg;
background: var(--color-base-bg-300);
border: 1px solid var(--color-base-bg-200);
}
.button {
@apply rounded-lg text-center font-medium;
@apply px-5 py-2.5;
border: 1px solid transparent;
}
.button-sm {
@apply rounded-lg text-center font-medium;
@apply px-3 py-2 text-sm;
}
.primary-outline,
.primary-outline-hover:hover {
border: 1px solid var(--color-primary-bg);
}
.primary-fill,
.primary-fill-hover:hover {
color: var(--color-primary-fg);
background: var(--color-primary-bg);
}
.primary-text,
.primary-text-hover:hover {
color: var(--color-primary-bg);
}
.danger-outline,
.danger-outline-hover:hover {
border: 1px solid var(--color-error-fg);
}
.danger-fill,
.danger-fill-hover:hover {
color: var(--color-error-fg);
background: var(--color-error-bg);
}
.danger-text,
.danger-text-hover:hover {
color: var(--color-error-fg);
}
.success-outline,
.success-outline-hover:hover {
border: 1px solid var(--color-success-fg);
}
.success-fill,
.success-fill-hover:hover {
color: var(--color-success-fg);
background: var(--color-success-bg);
}
.success-text,
.success-text-hover:hover {
color: var(--color-success-fg);
}
input,
textarea,
select {
@apply rounded-lg py-2 px-4 text-sm;
color: var(--color-base-fg-300);
background: var(--color-base-bg-200);
border: 1px solid var(--color-base-fg-300);
}
input:focus,
textarea:focus,
select:focus {
color: var(--color-base-fg-100);
border: 1px solid var(--color-primary-bg) !important;
}
input::placeholder {
color: var(--color-base-fg-300);
}
div.table {
@apply grid;
}
div.thead {
@apply grid grid-cols-subgrid col-span-full items-center;
@apply px-6 py-4 gap-8;
@apply border-b text-xs tracking-widest uppercase;
background: var(--color-base-bg-100);
border-color: var(--color-base-bg-300);
color: var(--color-base-fg-300);
}
div.trow {
@apply grid grid-cols-subgrid col-span-full items-center;
@apply px-6 py-4 gap-8;
@apply border-b;
border-color: var(--color-base-bg-100);
}
div.trow:hover {
background: var(--color-base-bg-300);
}
div.table > *:last-child {
@apply border-b-0;
}
.alert-danger {
@apply rounded-lg border-t-4;
@apply flex items-center px-4 py-3;
background: var(--color-base-bg-300);
border-color: var(--color-error-fg);
color: var(--color-error-fg);
}
}
</style>

36
views/components/navbar.njk Normal file
View file

@ -0,0 +1,36 @@
<header id="navbar">
<nav class="container flex justify-between items-center py-4 mx-auto relative ">
<!-- Application Logo -->
<div class="flex items-center gap-4">
<span class="bg-center bg-no-repeat bg-contain" style="height: 2rem; width: var(--header-logo-width); background-image: var(--header-logo-source);">
<!-- Logo Source from theme.css -->
</span>
<span class="self-center text-xl font-semibold whitespace-nowrap">User Portal</span>
</div>
<div class="flex items-center gap-24">
<!-- Menu Items -->
<div class="flex items-center gap-12">
<a href="/admin/users" class="button primary-text-hover">
Users
</a>
<a href="/admin/groups" class="button primary-text-hover">
Groups
</a>
</div>
<!-- User Menu -->
<div class="flex items-center gap-12">
<a href="/logout" class="button primary-text-hover">
Sign Out
</a>
<a href="/profile" class="button primary-text-hover">
{{ user.firstName }} {{ user.lastName }}
</a>
</div>
</div>
</nav>
</header>

37
views/components/widgets.njk Normal file
View file

@ -0,0 +1,37 @@
{% macro jumbotron(id='', title='', text='') %}
<section class="w-full">
<div class="py-4 px-4 mx-auto max-w-screen-xl text-center">
<h1 class="my-4 font-extrabold tracking-tight leading-none text-gray-900 text-4xl md:text-5xl lg:text-6xl">
{{ title }}
</h1>
<p class="my-4 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48">
{{ text }}
</p>
{{ caller() }}
</div>
</section>
{% endmacro %}
{% macro container(id='', width='w-full', flow='row', vAlign='center', hAlign='center') %}
<div class="container mx-auto {{width}} pt-24 pb-32 flex flex-{{flow}} justify-{{hAlign}} items-{{vAlign}}">
{{ caller() }}
</div>
{% endmacro %}
{% macro grid(id='', title='', columns=3) %}
<div class="my-4 grid grid-cols-1 md:grid-cols-{{2 if columns > 2 else columns}} lg:grid-cols-{{columns}} gap-6">
{{ caller() }}
</div>
{% endmacro %}
{% macro link(id='', link='#', title='New Link', description='Description') %}
<a href="{{ link }}" target="_blank" class="p-8 bg-gray-50 rounded-md border border-gray-200 hover:border-purple-400">
<h4 class="font-medium text-gray-700 text-lg mb-4">
{{ title }}
</h4>
<p class="font-normal text-gray-500 text-md">
{{ description }}
</p>
</a>
{% endmacro %}

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>

46
views/htmx/authForm.njk Normal file
View file

@ -0,0 +1,46 @@
<div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
{% for error in errors %}
<!-- Login Error -->
<div class="alert-danger w-full max-w-md" role="alert">
<i class="ti ti-alert-hexagon-filled text-lg"></i>
<div class="ms-3 text-sm font-medium">
{{ error.title }}: {{ error.detail }}
</div>
</div>
{% endfor %}
<!-- Login Dialoge -->
<div id="dialoge" class="card w-full max-w-md">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<div class="px-4 flex flex-col items-center gap-4">
<span class="w-full block bg-center bg-no-repeat bg-contain" style="height: var(--login-logo-height); background-image: var(--login-logo-source);">
<!-- Logo Source from theme.css -->
</span>
<h1 class="text-3xl">
Welcome
</h1>
<h4 class="text-sm">
Sign In to User-Portal
</h4>
</div>
<form class="space-y-4 md:space-y-6" hx-post="/htmx/authForm" hx-target="#app">
<div>
<label for="username" class="block mb-2 text-sm font-medium">
Username
</label>
<input type="text" name="username" class="w-full" placeholder="john-doe" required="">
</div>
<div>
<label for="password" class="block mb-2 text-sm font-medium">
Password
</label>
<input type="password" name="password" class="w-full" placeholder="••••••••" required="">
</div>
<div class="flex items-center justify-end">
<a href="#" class="text-sm font-medium hover:underline">Forgot password?</a>
</div>
<button type="submit" class="w-full button primary-fill">Sign in</button>
</form>
</div>
</div>
<!-- / -->
</div>

41
views/htmx/profile/editData.njk Normal file
View file

@ -0,0 +1,41 @@
<form class="flex flex-col gap-6" hx-post="/htmx/profile/data/edit" hx-target="#profile-data-section">
<div class="flex w-full">
<span class="text-2xl font-bold">
edit Personal Data
</span>
</div>
<div class="flex flex-col gap-3">
<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="{{ data.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="{{ data.lastName }}">
</div>
</div>
<div class="flex flex-col 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="{{ data.mail }}">
</div>
</div>
<div class="flex w-full justify-end gap-4">
<a href="#" class="button-sm"
hx-get="/htmx/profile/data/show"
hx-target="#profile-data-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>

49
views/htmx/profile/editMFA.njk Normal file
View file

@ -0,0 +1,49 @@
<!-- Form: create OTP-Secret -->
<div class="flex flex-col flex-auto">
<div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-sm gap-6">
<div class="flex w-full">
<h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
Two-Factor Authentication
</h2>
</div>
<div class="flex w-full">
<div class="flex flex-col w-full px-4 py-3 text-sm bg-blue-100 dark:bg-blue-600 dark:text-white rounded-lg gap-2" role="alert">
<div class="flex items-center gap-4">
<span class="font-medium">next steps:</span>
</div>
<ul class="px-3 list-disc list-inside">
<li>scan the QR-Code with your authenticator app or add your secret manually</li>
<li>enter the generated one-time password in the input field for confirmation</li>
<li>validate the code from your authenticator app</li>
</ul>
</div>
</div>
<form class="flex gap-8" action="/profile/otp/create" method="post" enctype="application/x-www-form-urlencoded">
<div class="flex flex-col w-48">
<img class="rounded-lg w-full" src="{{ otp.qrcode }}">
</div>
<div class="flex flex-col flex-auto gap-4">
<div class="flex flex-col lg:flex-row gap-4">
<div class="flex flex-col gap-3 lg:w-4/6">
<label class="w-full text-sm font-medium text-gray-900 dark:text-white">
your OTP-Secret:
</label>
<input type="text" name="otpsecret" class="w-full p-2.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:border-blue-500 text-sm text-gray-900 dark:text-white" value="{{ otp.otpsecret }}" readonly>
</div>
<div class="flex flex-col gap-3 lg:flex-auto">
<label class="w-full text-sm font-medium text-gray-900 dark:text-white">
TOTP Code:
</label>
<input type="text" name="otpcode" class="w-full p-2.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:border-blue-500 text-sm text-gray-900 dark:text-white" placeholder="123456">
</div>
</div>
<div class="flex flex-auto"></div>
<div class="flex w-full justify-end gap-4">
<button type="submit" class="py-3 px-8 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-gray-100 bg-gray-100 dark:bg-gray-600 hover:bg-blue-500">
Validate
</button>
</div>
</div>
</form>
</div>
</div>

32
views/htmx/profile/editPasswd.njk Normal file
View file

@ -0,0 +1,32 @@
<!-- Form: Change Password -->
<div class="flex flex-col flex-auto">
<div class="card flex flex-col px-8 py-6 gap-6">
<div class="flex w-full">
<h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
Change Password
</h2>
</div>
<div class="flex flex-col gap-3">
<div class="flex flex-col w-1/2 gap-3">
<label for="leihgeber.person" class="text-sm font-medium text-gray-900 dark:text-white">
old Password
</label>
<input type="password" name="old_password" class="" placeholder="••••••••" value="">
</div>
<div class="flex flex-row align-center gap-4">
<div class="flex flex-col w-1/2 gap-3">
<label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
new Password
</label>
<input type="password" name="new_password_1" class="" placeholder="••••••••" value="">
</div>
<div class="flex flex-col flex-auto gap-3">
<label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
repeat new Password
</label>
<input type="password" name="new_password_2" class="" placeholder="••••••••" value="">
</div>
</div>
</div>
</div>
</div>

59
views/htmx/profile/showData.njk Normal file
View file

@ -0,0 +1,59 @@
<div class="flex flex-col gap-8">
<div class="w-full flex flex-row justify-between items-center">
<span class="text-2xl font-bold">
Personal Data
</span>
<div class="flex flex-row gap-4 items-center">
<a href="#" class="button-sm primary-fill"
hx-get="/htmx/profile/data/edit"
hx-target="#profile-data-section">
<i class="ti ti-pencil"></i>
Edit Data
</a>
<a href="#" class="button-sm primary-fill"
hx-get="/htmx/profile/password/edit"
hx-target="#profile-data-section">
<i class="ti ti-key"></i>
Edit Password
</a>
</div>
</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-2">
<span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
Username
</span>
<span class="select-text">
{{ data.username }}
</span>
</div>
<div class="flex flex-col w-1/2 gap-2">
<span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
User ID
</span>
<span class="select-text">
{{ data.uidnumber }}
</span>
</div>
</div>
<div class="flex flex-row align-center gap-4">
<div class="flex flex-col w-1/2 gap-2">
<span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
Name
</span>
<span class="select-text">
{{ data.firstName }} {{ data.lastName }}
</span>
</div>
<div class="flex flex-col w-1/2 gap-2">
<span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
Mail Address
</span>
<span class="select-text">
{{ data.mail }}
</span>
</div>
</div>
</div>
</div>

51
views/htmx/profile/showMFA.njk Normal file
View file

@ -0,0 +1,51 @@
<!-- Form: 2FA -->
<div class="flex flex-col gap-6">
<div class="w-full flex flex-row justify-between items-center">
<span class="text-2xl font-bold">
Multi-Factor Authentication
</span>
<div class="flex flex-row gap-4 items-center">
{% if otpsecret and otpsecret.length > 0 %}
<a href="#" class="button-sm primary-fill">
<i class="ti ti-cross"></i>
disable TOTP
</a>
{% else %}
<a href="#" class="button-sm primary-fill">
<i class="ti ti-check"></i>
enable TOTP
</a>
{% endif %}
</div>
</div>
{% if otp.active != true %}
<div class="flex w-full">
<div class="flex items-center w-full px-4 py-2 text-sm bg-yellow-100 dark:bg-yellow-600 dark:text-white rounded-lg gap-4" role="alert">
<i class="ti ti-alert-hexagon-filled text-lg"></i>
<div class="ms-3 text-sm font-medium">
You have not yet configured 2-factor authentication.
</div>
</div>
</div>
{% endif %}
<div class="flex gap-8">
{% if otp.active == true %}
<div class="flex flex-col w-48">
<img class="rounded-lg w-full" src="{{ otp.qrcode }}">
</div>
<div class="flex flex-col flex-auto gap-4">
<div class="flex flex-col lg:flex-row gap-4">
<div class="flex flex-col flex-auto gap-3">
<label class="w-full text-sm font-medium text-gray-900 dark:text-white">
your OTP-Secret:
</label>
<input type="text" name="otpsecret" class="" value="{{ otp.otpsecret }}" readonly>
</div>
<button type="button" class="button primary-fill">
Delete
</button>
</div>
</div>
{% endif %}
</div>
</div>

34
views/htmx/totpForm.njk Normal file
View file

@ -0,0 +1,34 @@
<div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
{% for error in errors %}
<!-- TOTP Error -->
<div class="alert-danger w-full max-w-md" role="alert">
<i class="ti ti-alert-hexagon-filled text-lg"></i>
<div class="ms-3 text-sm font-medium">
{{ error.title }}: {{ error.detail }}
</div>
</div>
{% endfor %}
<!-- TOTP Dialoge -->
<div class="card w-full max-w-md">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<div class="px-4 flex flex-col items-center gap-4">
<span class="w-full block bg-center bg-no-repeat bg-contain" style="height: var(--login-logo-height); background-image: var(--login-logo-source);">
<!-- Logo Source from theme.css -->
</span>
<h1 class="text-3xl">
Identity Manager
</h1>
</div>
<form class="space-y-4 md:space-y-6" hx-post="/htmx/totpForm" hx-target="#app">
<div>
<label for="otpToken" class="block mb-2 text-sm font-medium">
OTP Token
</label>
<input type="text" name="otpToken" class="w-full" placeholder="123456" required="">
</div>
<button type="submit" class="w-full button primary-fill">Continue</button>
</form>
</div>
</div>
<!-- / -->
</div>

12
views/login.njk Normal file
View file

@ -0,0 +1,12 @@
{% extends "./master.njk" %}
{% block content %}
<div id="app"
class="w-full flex align-center"
style="min-height: 100svh;"
hx-get="/htmx/authForm"
hx-trigger="load">
<!-- HTMX Content -->
</div>
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
{% endblock %}

21
views/logout.njk Normal file
View file

@ -0,0 +1,21 @@
{% extends "./master.njk" %}
{% block content %}
<div id="app" class="w-full flex align-center" style="min-height: 100svh;">
<div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
<!-- Login Dialoge -->
<div class="flex flex-col w-full max-w-md p-6 gap-4 bg-white dark:bg-gray-800 dark:border dark:border-gray-700 rounded-lg shadow">
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-4">
<h3 class="text-2xl text-gray-900 dark:text-white">
You have been logged out
</h3>
</div>
</div>
<a href="/login" class="w-full px-5 py-3 text-sm text-center text-white bg-primary-600 hover:bg-primary-700 rounded-lg">Sign in</a>
</div>
<!-- / -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
{% endblock %}

43
views/master.njk Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>Account Manager</title>
{% include "./components/meta.njk" %}
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
box-sizing: border-box;
}
</style>
<script>
if (localStorage.getItem('color-theme') != undefined) {
document.documentElement.classList.add(
localStorage.getItem('color-theme')
);
console.log(localStorage.getItem('color-theme'));
} else {
document.documentElement.classList.add('theme-default');
console.log(localStorage.getItem('theme-default'));
}
tailwind.config = {
theme: {
fontFamily: {
'sans': [
'Poppins',
'Noto Sans'
]
}
}
}
</script>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>

17
views/messages/404.njk Normal file
View file

@ -0,0 +1,17 @@
{% extends "./master.njk" %}
{% block content %}
<div class="container">
<div class="d-flex align-items-center justify-content-center py-5">
<div class="text-center">
<h1 class="display-1 fw-bold">{{ Error.Code }}</h1>
<p class="fs-3"> <span class="text-danger">Opps!</span> {{ Error.Title }}</p>
<p class="lead">
{{ Error.Message }}
</p>
<a href="{{ Error.Link }}" class="btn btn-primary">Go Back</a>
</div>
</div>
</div>
{% endblock %}

20
views/messages/success.njk Normal file
View file

@ -0,0 +1,20 @@
{% extends "../master.njk" %}
{% block content %}
<div id="app" class="w-full min-h-svh flex align-center justify-center">
<div class="m-auto max-w-lg relative p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow">
<h5 class="mb-2 text-3xl font-bold text-gray-900 dark:text-white">
{{ message.title }}
</h5>
<p class="mb-5 text-base text-gray-500 sm:text-lg dark:text-gray-400">
{{ message.text }}
</p>
<div class="flex items-center justify-end space-y-4 sm:flex sm:space-y-0 sm:space-x-4 rtl:space-x-reverse">
<a href="{{ message.link }}" class="py-2 px-6 rounded text-sm text-white bg-primary-500 hover:bg-primary-600">
Continue
</a>
</div>
</div>
</div>
{% endblock %}

33
views/profile.njk Normal file
View file

@ -0,0 +1,33 @@
{% extends "./master.njk" %}
{% block content %}
<div id="app" class="w-full">
{% include "./components/navbar.njk" %}
<div class="container relative mx-auto py-24 flex flex-col justify-center items-center gap-8">
<div class="flex flex-col gap-12 max-w-[60%] w-full">
<!-- Page Header -->
<div class="w-full flex flex-row justify-start items-center">
<h2 class="text-4xl font-bold">
Your User-Profile
</h2>
</div>
<div class="flex flex-col gap-8 w-full">
<!-- Section: Personal Data -->
<div id="profile-data-section" class="flex flex-col flex-auto card p-12"
hx-get="/htmx/profile/data/show"
hx-trigger="load">
<!-- load via HTMX -->
</div>
<!-- Section: Multi Factor Authentification -->
<div id="profile-mfa-section" class="flex flex-col flex-auto card p-12"
hx-get="/htmx/profile/mfa/show"
hx-trigger="load">
<!-- load via HTMX -->
</div>
<!-- / -->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
{% endblock %}