198 lines
9.2 KiB
HTML
198 lines
9.2 KiB
HTML
{% load static i18n %}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link href="{% static 'horilla_theme/assets/css/tailwind.css' %}" rel="stylesheet">
|
|
<title>Login - {{white_label_company_name}} Dashboard</title>
|
|
<link
|
|
rel="apple-touch-icon"
|
|
sizes="180x180"
|
|
href="{% if white_label_company.icon %}{{white_label_company.icon.url}} {% else %}{% static 'favicons/apple-touch-icon.png' %}{% endif %}"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="{% if white_label_company.icon %}{{white_label_company.icon.url}} {% else %}{% static 'favicons/favicon-32x32.png' %}{% endif %}"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="16x16"
|
|
href="{% if white_label_company.icon %}{{white_label_company.icon.url}} {% else %}{% static 'favicons/favicon-16x16.png' %}{% endif %}"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="/static/horilla_theme/assets/css/global.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="/static/horilla_theme/assets/css/v1_styles.css"
|
|
/>
|
|
<script src="{% static "horilla_theme/assets/js/tailwindcdn.js" %}"></script>
|
|
<script src="{% static '/jquery/jquery.min.js' %}"></script>
|
|
</head>
|
|
|
|
<body class="bg-[#f8f8f9] font-[Inter,_sans-serif]">
|
|
<div class="oh-alert-container">
|
|
{% for message in messages %}
|
|
<div class="oh-alert oh-alert--animated {{ message.tags }}">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="h-screen w-full flex items-center justify-center">
|
|
<div
|
|
class="bg-[white] p-[50px] rounded-md [box-shadow:0px_0px_20px_#ebebeb] w-[450px]"
|
|
>
|
|
<img
|
|
src="{% if white_label_company.icon %}{{white_label_company.icon.url}}{% else %}{% static 'horilla_theme/assets/img/logo.svg' %}{% endif %}"
|
|
alt=""
|
|
class="m-auto mb-4"
|
|
width="80"
|
|
/>
|
|
<h1 class="text-3xl font-bold mb-2 text-center">
|
|
{% trans "Welcome to" %} {{white_label_company_name}} {% trans "HR" %}
|
|
</h1>
|
|
<p class="mb-5 text-center text-sm text-color-600">
|
|
{% trans "Please login to access the dashboard." %}
|
|
</p>
|
|
<form method="post" class="oh-form-group">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
<label for="username" class="text-sm text-color-600"
|
|
>{% trans "Username" %}</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
placeholder="e.g. adam.luis@horilla.com"
|
|
class="text-color-600 w-full border border-dark-50 rounded-md p-3 mt-1 focus-visible:outline-0 placeholder:text-[#00000041] placeholder:font-medium text-xs [transition:.3s] focus:border-primary-600"
|
|
/>
|
|
</div>
|
|
<label for="password" class="text-sm text-color-600"
|
|
>{% trans "Password" %}</label
|
|
>
|
|
<div class="oh-password-input-container relative">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
placeholder="Enter Password"
|
|
class="oh-input--password text-color-600 p-3 pr-[40px] w-full border border-dark-50 rounded-md mt-1 focus-visible:outline-0 placeholder:text-[#00000041] placeholder:font-medium text-xs [transition:.3s] focus:border-primary-600"
|
|
/>
|
|
<span
|
|
type="button"
|
|
class="oh-btn oh-btn--transparent oh-password-input--toggle"
|
|
>
|
|
<ion-icon
|
|
class="oh-password-input__show-icon"
|
|
title="{% trans 'Show Password' %}"
|
|
name="eye-outline"
|
|
></ion-icon>
|
|
<ion-icon
|
|
class="oh-password-input__hide-icon hidden"
|
|
title="{% trans 'Hide Password' %}"
|
|
name="eye-off-outline"
|
|
></ion-icon>
|
|
</span>
|
|
</div>
|
|
{% if not initialize_database %}
|
|
<div class="flex justify-end">
|
|
<a
|
|
href="{% url 'forgot-password' %}"
|
|
class="text-sm text-right font-medium text-[red] mb-3 mt-2 cursor-pointer"
|
|
>
|
|
{% trans "Forgot Password ?" %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
<button
|
|
type="submit"
|
|
class="p-3 mt-3 bg-primary-600 hover:bg-secondary-600 w-full flex gap-3 justify-center rounded-md text-[white] [transition:.3s]"
|
|
>
|
|
<img src="{% static "horilla_theme/assets/icons/sign.svg" %}" alt="" /> {% trans "Sign In" %}
|
|
</button>
|
|
</form>
|
|
{% if initialize_database %}
|
|
<div>
|
|
<div class="d-flex gap-2">
|
|
<a
|
|
href="{% url 'initialize-database' %}"
|
|
class="oh-btn oh-onboarding-card__button mt-4 oh-btn--secondary oh-btn--shadow w-full mb-4"
|
|
role="button"
|
|
style="
|
|
background-color: rgba(229, 79, 56, 0.1);
|
|
color: hsl(8, 77%, 56%);
|
|
"
|
|
>
|
|
{% trans "Initialize Database" %}
|
|
<ion-icon
|
|
class="ms-2"
|
|
name="arrow-forward-outline"
|
|
></ion-icon>
|
|
</a>
|
|
<a
|
|
onclick="$('#dataLoadAuthentication').toggleClass('oh-modal--show');"
|
|
class="oh-btn oh-onboarding-card__button mt-4 oh-btn--secondary oh-btn--shadow w-full mb-4"
|
|
style="background-color: #31b46e1f; color: #1fad61"
|
|
role="button"
|
|
>
|
|
{% trans "Load Demo Data" %}
|
|
<ion-icon
|
|
class="ms-2"
|
|
name="arrow-forward-outline"
|
|
></ion-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="oh-modal"
|
|
id="dataLoadAuthentication"
|
|
role="dialog"
|
|
aria-labelledby="dataLoadAuthenticationLabel"
|
|
style="backdrop-filter: blur(8px)"
|
|
>
|
|
<div class="oh-modal__dialog">
|
|
{% include "demo_database/auth_load_data.html" %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="{% static 'images/ionicons/ui_icons/ionicons/ionicons.esm.js' %}"></script>
|
|
<script>
|
|
document.querySelectorAll('.oh-password-input--toggle').forEach(toggle => {
|
|
toggle.addEventListener('click', function (e) {
|
|
console.log("ppppppppppppppp")
|
|
e.preventDefault();
|
|
const container = this.closest('.oh-password-input-container');
|
|
|
|
if (!container) return;
|
|
|
|
const passwordInput = container.querySelector('.oh-input--password');
|
|
const showIcon = container.querySelector('.oh-password-input__show-icon, .oh-passowrd-input__show-icon');
|
|
const hideIcon = container.querySelector('.oh-password-input__hide-icon, .oh-passowrd-input__hide-icon');
|
|
|
|
if (!passwordInput || !showIcon || !hideIcon) return;
|
|
|
|
if (passwordInput.type === 'password') {
|
|
passwordInput.type = 'text';
|
|
showIcon.classList.add('hidden', 'd-none');
|
|
hideIcon.classList.remove('hidden', 'd-none');
|
|
} else {
|
|
passwordInput.type = 'password';
|
|
showIcon.classList.remove('hidden', 'd-none');
|
|
hideIcon.classList.add('hidden', 'd-none');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|