docserver/resources/templates/login.html.j2

121 lines
7.5 KiB
Django/Jinja

{% include "partials/header.html.j2" %}
{% if usr_roles is containing('new') %}
{% set logo= assets_url~"/images/tii_cl_logo_new.svg" %}
{% elif usr_roles is containing('dev') %}
{% set logo= assets_url~"/images/tii_cl_logo_dev.svg" %}
{% else %}
{% set logo= assets_url~"/images/tii_cl_logo.svg" %}
{% endif %}
{% if not signin_target %}
{% set signin_target = "" %}
{% endif %}
<div class="blue-digital">
{% include "partials/mini_navbar.html.j2" %}
<section class="w-auto min-h-200 mt-10%">
<div
class="flex flex-col items-center justify-center min-h-70%"
>
<form id="main-form" class="border-1 border-gray-500 bg-white dark:bg-gray-800 shadow-md rounded px-11 pt-6 pb-8 mb-4 -mt-8" onsubmit="return false;">
<div
class="flex items-center justify-center p-5">
<a href="/"><img src="{{logo}}" style="height: 7.5rem" class="" alt="TII Cryptographiuc Library" /></a>
</div>
<div class="mb-4">
<label class="block text-slate-700 dark:text-slate-200 text-sm font-bold mb-2" for="username"> Username </label>
<div class="flex">
<input type="text" id="login-name-inpt" onchange="set_name(this)"
class="shadow appearance-none border rounded w-full py-2 px-3 text-slate-700 dark:text-slate-200 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline"
placeholder="Username"
/>
</div>
</div>
<div class="mb-3">
<label class="block text-slate-700 dark:text-slate-200 text-sm font-bold mb-2" for="password" > Password </label>
<div class="flex">
<input type="password" id="login-password-inpt" onchange="set_password(this)"
class="shadow appearance-none border border-slate-500 rounded w-full py-2 px-3 text-gray-700 dark:text-slate-200 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
placeholder="********"
/>
<i id="show-password">
<svg class="hidden pl-3 mt-2 text-slate-700 w-8 h-8"><use href="#symbl-eye-slash" /></svg>
<svg class="pl-3 mt-2 text-slate-700 w-8 h-8"><use href="#symbl-eye" /></svg>
</i>
</div>
</div>
<div id="login-messages-inpt" class="mb-3 text-red-500 text-xs italic"></div>
<div id="main-loading" class="hidden flex flex-col justify-center md:w-2/3 w-1/3 ml-3 my-2 md:mt-0 p-3 text-xl border-slate-200 rounded-lg border-0 text-slate-600">
<svg class=""><use href="#symbl-loading" /></svg>
<span class="text-lg m-auto pt-5"> Checking ... </span>
</div>
<div id="main-btns" class="flex items-center justify-between">
<button id="signin-button" class="!bg-indigo-500 !hover:bg-indigo-200 text-white hover:text-indigo-500 py-2 px-4 rounded focus:outline-none focus:shadow-inline accent-indigo-600" onclick="log_in()">
{{login_text | default (value="Login")}}
</button>
{% if use_mail %}
<a class="inline-block ml-3 align-baseline text-center text-xs text-blue-500 hover:text-blue-800" onclick="on_forgot_passwd()">
Forgot <br>Password?
</a>
{% endif %}
{% if signup_mode == "open" %}
<a id="login-button" class="ml-3 hover:bg-indigo-200 hover:text-indigo-800 border-indigo-500 border-1 text-indigo-500 py-2 px-4 rounded focus:outline-none focus:shadow-inline accent-indigo-600" onclick="sign_up()">
SingUp
</a>
{% endif %}
</div>
{% if signin_target == "" %}
{% include "partials/openid_login.html.j2" %}
{% else %}
<div class="flex items-center mt-2 space-x-2">
<svg class="mr-3" width="30" height="30" aria-hidden="true"><use href="#symbl-openid"/></svg>
<div class="text-xs"> Link credentials </div>
</div>
{% endif %}
</form>
<div id="forgot-messages" class="hidden border-1 border-gray-500 bg-white dark:bg-gray-800 shadow-md rounded px-5 pt-4 pb-4 mb-11 text-orange-500 text-sm"></div>
{% if with_totp %}
<form id="otp-form" class="hidden bg-white dark:bg-gray-800 shadow-md rounded px-11 pt-6 pb-8 mb-4 -mt-8" onsubmit="return false;">
<div
class="flex items-center justify-center p-5">
<a id="otp-logo-link" href="/"><img src="{{logo}}" style="height: 7.5rem" class="" alt="TII Cryptographiuc Library" /></a>
</div>
<div class="mb-4">
<label class="block text-slate-700 dark:text-slate-200 text-sm font-bold mb-2" for="username"> Enter TOTP code </label>
<div class="flex">
<input type="text" id="login-totp-inpt" onchange="set_totp(this)"
class="shadow appearance-none border rounded w-full py-2 px-3 text-slate-700 dark:text-slate-200 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline"
placeholder="totp-code"
/>
</div>
</div>
<div id="otp-messages-inpt" class="mb-3 text-red-500 text-xs italic"></div>
<div id="otp-loading" class="hidden flex flex-col items-center justify-center md:w-2/3 w-1/3 ml-3 my-2 md:mt-0 p-3 text-xl border-slate-200 border-0 rounded-lg text-slate-600">
<svg class=""><use href="#symbl-loading" /></svg>
<span class="text-lg m-auto pt-5"> Checking ... </span>
</div>
<div id="otp-btns" class="flex flex-col space-y-2 items-center justify-between">
<button id="otp-forgot-password" class="hidden !bg-indigo-500 hover:bg-indigo-200 text-white py-2 px-4 rounded focus:outline-none focus:shadow-inline accent-indigo-600" onclick="forgot_passwd()">
Reset Password
</button>
<button href="#" id="otp-login-link" class="hidden border-1 border-indigo-500 hover:bg-indigo-200 text-indigo-500 py-2 px-4 rounded focus:outline-none focus:shadow-inline accent-indigo-600" onclick="restart()">
Back to Login
</button>
<button id="otp-signin-button" class="!bg-indigo-500 hover:bg-indigo-200 text-white py-2 px-4 rounded focus:outline-none focus:shadow-inline accent-indigo-600" onclick="otp_in()">
Login
</button>
</div>
</form>
{% endif %}
</div>
</section>
</div>
<script>
const SIGNIN_URL = "{{main_url}}/login";
const SIGNUP_URL = "{{main_url}}/signup";
const RESET_URL = "{{main_url}}/reset";
const totp_digits = {{totp_digits | default(value=0)}};
</script>
<script src="{{assets_url | default(value='')}}/js/login.js"></script>
{% include "partials/symbols.html.j2" %}
{% include "partials/footer.html.j2" %}