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

initial upload

Browse source
This commit is contained in:
Kai Waggeling 2025-05-17 16:40:38 +02:00
parent 4c2141d89d
commit 2a9bd4e81b
33 changed files with 1238 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

81
ui/login.njk Normal file
View file

@ -0,0 +1,81 @@
{% 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">
{% if error == "login failed" %}
<!-- Login Error -->
<div id="alert-login-failed" class="flex items-center w-full max-w-md px-4 py-3 text-red-800 border-t-4 border-red-300 bg-white dark:text-red-400 dark:bg-gray-800 dark:border-red-800 shadow rounded-lg" role="alert">
<i class="ti ti-alert-hexagon-filled text-lg"></i>
<div class="ms-3 text-sm font-medium">
Login failed. Username or password is incorrect.
</div>
</div>
{% endif %}
{% if error == "otp failed" %}
<!-- Login Error -->
<div id="alert-login-failed" class="flex items-center w-full max-w-md px-4 py-3 text-red-800 border-t-4 border-red-300 bg-white dark:text-red-400 dark:bg-gray-800 dark:border-red-800 shadow rounded-lg" role="alert">
<i class="ti ti-alert-hexagon-filled text-lg"></i>
<div class="ms-3 text-sm font-medium">
Login failed. OTP token is incorrect.
</div>
</div>
{% endif %}
{% if step == "login" %}
<!-- Login Dialoge -->
<div class="w-full max-w-md bg-white rounded-lg shadow dark:border md:mt-0 xl:p-0 dark:bg-gray-800 dark:border-gray-700">
<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">
<img class="min-h-4 max-w-full max-h-64" src="/img/logo-dark.png" alt="logo">
<h1 class="text-3xl text-gray-900 dark:text-white">
Identity Manager
</h1>
</div>
<form class="space-y-4 md:space-y-6" action="/login" method="post" enctype="application/x-www-form-urlencoded">
<div>
<label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Your email
</label>
<input type="text" name="username" class="w-full py-2 px-4 text-sm bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:border-primary-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="john-doe" required="">
</div>
<div>
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Password
</label>
<input type="password" name="password" class="w-full py-2 px-4 text-sm bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:border-primary-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="••••••••" required="">
</div>
<div class="flex items-center justify-end">
<a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">Forgot password?</a>
</div>
<button type="submit" class="w-full px-5 py-3 text-sm text-center text-white bg-primary-600 hover:bg-primary-700 rounded-lg">Sign in</button>
</form>
</div>
</div>
{% endif %}
{% if step == "otp" %}
<!-- TOTP Dialoge -->
<div class="w-full max-w-md bg-white rounded-lg shadow dark:border md:mt-0 xl:p-0 dark:bg-gray-800 dark:border-gray-700">
<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">
<img class="min-h-4 max-w-full max-h-64" src="/img/logo-dark.png" alt="logo">
<h1 class="text-3xl text-gray-900 dark:text-white">
Identity Manager
</h1>
</div>
<form class="space-y-4 md:space-y-6" action="/login" method="post" enctype="application/x-www-form-urlencoded">
<div>
<label for="otpToken" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
OTP Token
</label>
<input type="text" name="otpToken" class="w-full py-2 px-4 text-sm bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:border-primary-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="12345" required="">
</div>
<button type="submit" class="w-full px-5 py-3 text-sm text-center text-white bg-primary-600 hover:bg-primary-700 rounded-lg">Continue</button>
</form>
</div>
</div>
<!-- / -->
{% endif %}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
{% endblock %}