81 lines
No EOL
5.1 KiB
Text
81 lines
No EOL
5.1 KiB
Text
{% 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 %} |