[ADD] BASE: Initial user onboarding in Horilla

This commit is contained in:
Horilla
2024-07-02 10:14:22 +05:30
parent abff59d524
commit 4886698f3b
13 changed files with 4885 additions and 7 deletions

View File

@@ -0,0 +1,128 @@
{% load i18n %}
<div class="oh-onboarding-card__header">
<span class="oh-onboarding-card__company-name">Horilla HRMS</span>
<ul class="oh-onboarding-card__steps">
<li class="oh-onboarding-card__step">
<div class="oh-onboarding-card__count">1</div>
<span class="oh-onboarding-card__text">Sign Up</span>
</li>
<li class="oh-onboarding-card__step oh-onboarding-card__step--active">
<div class="oh-onboarding-card__count">2</div>
<span class="oh-onboarding-card__text">Company</span>
</li>
<li class="oh-onboarding-card__step">
<div class="oh-onboarding-card__count">3</div>
<span class="oh-onboarding-card__text">Department</span>
</li>
<li class="oh-onboarding-card__step oh-onboarding-card__step">
<div class="oh-onboarding-card__count">4</div>
<span class="oh-onboarding-card__text">Job Position</span>
</li>
</ul>
</div>
<h1
class="oh-onboarding-card__title oh-onboarding-card__title--h2 text-center my-3"
>
{% trans "Company" %}
</h1>
<form
hx-post="{% url 'initialize-database-company' %}"
hx-target="#ohAuthCard"
hx-encoding="multipart/form-data"
class="oh-profile-section"
>
{% csrf_token %}
<div class="oh-inner-sidebar-content__body">
<div class="oh-input-group mb-2">
<label for="id_{{form.company.name}}" class="mb-1"
>{% trans "Company" %}</label
>
{{form.company}} {{form.company.errors}}
</div>
<div class="oh-input-group mb-2">
<label for="id_{{form.address.name}}" class="mb-1"
>{% trans "Address" %}</label
>
{{form.address}} {{form.address.errors}}
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group mb-2">
<label for="" class="mb-1">{% trans "Country" %}</label>
<select name="country" id="id_country" class="oh-select oh-select-2">
<option value="{{form.instance.country}}" selected>
{{form.instance.country}}
</option>
</select>
{{form.country.errors}}
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group mb-2">
<label for="" class="mb-1">{% trans "State" %}</label>
<select name="state" id="id_state" class="oh-select oh-select-2">
<option value="{{form.instance.state}}" selected>
{{form.instance.state}}
</option>
</select>
{{form.state.errors}}
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group mb-2">
<label for="id_{{form.city.name}}" class="mb-1"
>{% trans "City" %}</label
>
{{form.city}} {{form.city.errors}}
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group mb-2">
<label for="id_{{form.zip.name}}" class="mb-1"
>{% trans "Zip" %}</label
>
{{form.zip}} {{form.zip.errors}}
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group mb-2">
<label for="id_{{form.icon.name}}" class="mb-1"
>{% trans "Icon" %}</label
>
{{form.icon}} {{form.icon.errors}}
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group mb-2">
<div class="oh-switch" style="display: grid">
<label
for="id_{{form.hq.name}}"
class="mb-1 mr-3"
style="padding-right: 15px"
>{% trans "Hq" %}</label
>
<p class="m-2">{{form.hq}}</p>
</div>
</div>
</div>
</div>
</div>
<div class="oh-modal__dialog-footer p-0 mt-3">
<button
type="submit"
class="oh-btn oh-onboarding-card__button mt-4 oh-btn--secondary oh-btn--shadow w-100 mb-4"
role="button"
>
{% trans "Next Step" %}
<ion-icon class="ms-2" name="arrow-forward-outline"></ion-icon>
</button>
</div>
</form>
<script>
{% include 'country.js' %}
</script>

View File

@@ -0,0 +1,28 @@
{% load i18n %} {% load i18n %}
<div class="oh-onboarding-card__header">
<span class="oh-onboarding-card__company-name">Horilla HRMS</span>
<ul class="oh-onboarding-card__steps">
<li class="oh-onboarding-card__step">
<div class="oh-onboarding-card__count">1</div>
<span class="oh-onboarding-card__text">Sign Up</span>
</li>
<li class="oh-onboarding-card__step">
<div class="oh-onboarding-card__count">2</div>
<span class="oh-onboarding-card__text">Company</span>
</li>
<li class="oh-onboarding-card__step oh-onboarding-card__step--active">
<div class="oh-onboarding-card__count">3</div>
<span class="oh-onboarding-card__text">Department</span>
</li>
<li class="oh-onboarding-card__step oh-onboarding-card__step">
<div class="oh-onboarding-card__count">4</div>
<span class="oh-onboarding-card__text">Job Position</span>
</li>
</ul>
</div>
<h1
class="oh-onboarding-card__title oh-onboarding-card__title--h2 text-center my-3"
>
{% trans "Department" %}
</h1>
{% include "initialize_database/horilla_department_form.html" %}

View File

@@ -0,0 +1,89 @@
{% load i18n %}
<div id="initializeDepartment">
{% if departments %}
<div class="oh-main__titlebar oh-main__titlebar--left">
<div class="mb-2 mt-2">
<div class="oh-filter-tag-container">
{% for instance in departments %}
<span class="oh-filter-tag">
<span
hx-get="{% url 'initialize-department-edit' instance.id %}"
hx-target="#initializeDepartment"
hx-swap="outerHTML"
>{{instance}}</span
>
<form
hx-confirm="{% trans 'Are you sure you want to delete this department?' %}"
hx-get="{% url 'initialize-department-delete' instance.id %}"
hx-target="#initializeDepartment"
hx-swap="outerHTML"
>
<button class="oh-filter-tag__close" style="color: red;" title={% trans "Delete" %}>
<ion-icon name="trash-outline"></ion-icon>
</button>
</form>
</span>
{% endfor %}
</div>
</div>
</div>
{% endif %}
<form
class="oh-profile-section"
{% if department %}
hx-post="{% url 'initialize-department-edit' department.id %}"
{% else %}
hx-post="{% url 'initialize-database-department' %}"
{% endif %}
hx-target="#initializeDepartment"
hx-swap="outerHTML"
>
{% csrf_token %} {{form.non_field_errors}}
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-10">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group mb-2">
<label for="{{form.department.id_for_label}}" class="mb-1"
>{% trans "Department" %}</label
>
{{form.department}} {{form.department.errors}}
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group mb-2">
<label for="{{form.company_id.id_for_label}}" class="mb-1"
>{% trans "Company" %}</label
>
{{form.company_id}} {{form.company_id.errors}}
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-2">
<button
type="submit"
title="{% trans 'Save' %}"
class="oh-btn oh-btn--secondary mr-1 mt-4 w-100"
style="height: 43px"
>
<ion-icon name="save"></ion-icon>
</button>
</div>
{% if departments %}
<div class="oh-modal__dialog-footer p-0 mt-3">
<button
hx-get="{% url 'initialize-database-job-position' %}"
hx-target="#ohAuthCard"
hx-swap="innerHTML"
class="oh-btn oh-btn--secondary-outline m-2"
role="button"
>
{% trans "Next Step" %}
<ion-icon class="ms-2" name="arrow-forward-outline"></ion-icon>
</button>
</div>
{% endif %}
</div>
</form>
</div>

View File

@@ -0,0 +1,28 @@
{% load i18n %}
<div class="oh-onboarding-card__header">
<span class="oh-onboarding-card__company-name">Horilla HRMS</span>
<ul class="oh-onboarding-card__steps">
<li class="oh-onboarding-card__step">
<div class="oh-onboarding-card__count">1</div>
<span class="oh-onboarding-card__text">Sign Up</span>
</li>
<li class="oh-onboarding-card__step">
<div class="oh-onboarding-card__count">2</div>
<span class="oh-onboarding-card__text">Company</span>
</li>
<li class="oh-onboarding-card__step">
<div class="oh-onboarding-card__count">3</div>
<span class="oh-onboarding-card__text">Department</span>
</li>
<li class="oh-onboarding-card__step oh-onboarding-card__step--active">
<div class="oh-onboarding-card__count">4</div>
<span class="oh-onboarding-card__text">Job Position</span>
</li>
</ul>
</div>
<h1
class="oh-onboarding-card__title oh-onboarding-card__title--h2 text-center my-3"
>
{% trans "Job Position" %}
</h1>
{% include "initialize_database/horilla_job_position_form.html" %}

View File

@@ -0,0 +1,95 @@
{% load i18n %}
<div id="initializeJobPositions">
{% if job_positions %}
<div class="oh-main__titlebar oh-main__titlebar--left">
<div class="mb-2 mt-2">
<div class="oh-filter-tag-container">
{% for instance in job_positions %}
<span class="oh-filter-tag">
<span
hx-get="{% url 'initialize-job-position-edit' instance.id %}"
hx-target="#initializeJobPositions"
hx-swap="outerHTML"
>{{instance}}</span
>
<form
hx-confirm="{% trans 'Are you sure you want to delete this job position?' %}"
hx-get="{% url 'initialize-job-position-delete' instance.id %}"
hx-target="#initializeJobPositions"
hx-swap="outerHTML"
>
<button class="oh-filter-tag__close" style="color: red;" title={% trans "Delete" %}>
<ion-icon name="trash-outline"></ion-icon>
</button>
</form>
</span>
{% endfor %}
</div>
</div>
</div>
{% endif %}
<form
class="oh-profile-section"
{% if job_position %}
hx-post="{% url 'initialize-job-position-edit' job_position.id %}"
{% else %}
hx-post="{% url 'initialize-database-job-position' %}"
{% endif %}
hx-target="#initializeJobPositions"
hx-swap="outerHTML"
>
{% csrf_token %} {{form.non_field_errors}}
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-10">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
<div class="oh-input-group mb-2">
<label for="{{form.job_position.id_for_label}}" class="mb-1"
>{% trans "Job Position" %}</label
>
{{form.job_position}} {{form.job_position.errors}}
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
<div class="oh-input-group mb-2">
<label for="{{form.department_id.id_for_label}}" class="mb-1"
>{% trans "Department" %}</label
>
{{form.department_id}} {{form.department_id.errors}}
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
<div class="oh-input-group mb-2">
<label for="{{form.company_id.id_for_label}}" class="mb-1"
>{% trans "Company" %}</label
>
{{form.company_id}} {{form.company_id.errors}}
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-2">
<button
type="submit"
title="{% trans 'Save' %}"
class="oh-btn oh-btn--secondary mr-1 mt-4 w-100"
style="height: 43px"
>
<ion-icon name="save"></ion-icon>
</button>
</div>
{% if job_positions %}
<div class="oh-modal__dialog-footer p-0 mt-3">
<a
hx-get="{% url "update-selected-company" %}?company_id={{company.id}}"
class="oh-btn oh-btn--secondary-outline m-2"
role="button"
>
{% trans "Go To Home" %}
<ion-icon class="ms-2" name="arrow-forward-outline"></ion-icon>
</a>
</div>
{% endif %}
</div>
</form>
</div>

View File

@@ -0,0 +1,254 @@
{% load static %} {% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 '/build/css/style.min.css' %}" />
<link rel="manifest" href="{% static 'build/manifest.json' %}" />
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
<style>
.animated-background {
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background-color: #f6f7f8;
background: linear-gradient(
to right,
#eeeeee9c -58%,
#e4e4e496 18%,
#eeeeee61 33%
);
background-size: 800px 64px;
height: 623px;
position: relative;
}
.select2-selection.select2-selection--multiple {
height: 46px !important;
}
</style>
<div id="main">
<div class="oh-alert-container">
{% for message in messages %}
<div class="oh-alert oh-alert--animated {{ message.tags }}">
{{ message }}
</div>
{% endfor %}
</div>
<main class="oh-auth">
<div
class="oh-onboarding-card"
style="max-height: 790px;max-width: 975px;"
id="ohAuthCard"
>
<div class="oh-onboarding-card__header">
<span class="oh-onboarding-card__company-name">Horilla HRMS</span>
<ul class="oh-onboarding-card__steps">
<li
class="oh-onboarding-card__step oh-onboarding-card__step--active"
>
<div class="oh-onboarding-card__count">1</div>
<span class="oh-onboarding-card__text">Sign Up</span>
</li>
<li class="oh-onboarding-card__step">
<div class="oh-onboarding-card__count">2</div>
<span class="oh-onboarding-card__text">Company</span>
</li>
<li class="oh-onboarding-card__step">
<div class="oh-onboarding-card__count">3</div>
<span class="oh-onboarding-card__text">Department</span>
</li>
<li class="oh-onboarding-card__step oh-onboarding-card__step">
<div class="oh-onboarding-card__count">4</div>
<span class="oh-onboarding-card__text">Job Position</span>
</li>
</ul>
</div>
<h1
class="oh-onboarding-card__title oh-onboarding-card__title--h2 text-center my-3"
>
{% trans "Sign Up" %}
</h1>
<p class="text-muted text-center">
{% trans "Please sign up to access the Horilla HRMS." %}
</p>
<form
hx-post="{% url 'initialize-database-user' %}"
hx-target="#ohAuthCard"
class="oh-form-group"
>
{% csrf_token %}
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group">
<label class="oh-label" for="firstname"
>{% trans "First Name" %}</label
>
<input
type="text"
id="firstname"
name="firstname"
class="oh-input w-100"
placeholder="e.g. Adam"
required
/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group">
<label class="oh-label" for="lastname"
>{% trans "Last Name" %}</label
>
<input
type="text"
id="lastname"
name="lastname"
class="oh-input w-100"
placeholder="e.g. Luis"
required
/>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group">
<label class="oh-label" for="username"
>{% trans "Username" %}</label
>
<input
type="text"
id="username"
name="username"
class="oh-input w-100"
placeholder="e.g. jane.doe@acme.com"
required
/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group">
<label class="oh-label" for="password"
>{% trans "Password" %}</label
>
<div class="oh-password-input-container">
<input
type="password"
id="password"
name="password"
class="oh-input oh-input--password w-100"
placeholder="Use alphanumeric characters"
required
/>
<button
type="button"
class="oh-btn oh-btn--transparent oh-password-input--toggle"
>
<ion-icon
class="oh-passowrd-input__show-icon"
title="Show Password"
name="eye-outline"
></ion-icon>
<ion-icon
class="oh-passowrd-input__hide-icon d-none"
title="Hide Password"
name="eye-off-outline"
></ion-icon>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group">
<label class="oh-label" for="email"
>{% trans "Email" %}</label
>
<input
type="text"
id="email"
name="email"
class="oh-input w-100"
placeholder="e.g. jane.doe@acme.com"
required
/>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<div class="oh-input-group">
<label class="oh-label" for="phone"
>{% trans "Phone" %}</label
>
<input
type="text"
id="phone"
name="phone"
class="oh-input w-100"
placeholder="e.g. 9865324512"
required
/>
</div>
</div>
</div>
<button
type="submit"
class="oh-btn oh-onboarding-card__button mt-4 oh-btn--secondary oh-btn--shadow w-100 mb-4"
role="button"
>
<ion-icon class="me-2" name="lock-closed-outline"></ion-icon>
{% trans "Secure Sign-up" %}
</button>
</form>
</div>
<img src={% if white_label_company.icon %} "{{white_label_company.icon.url}}" {% else %} "{% static 'images/ui/auth-logo.png' %}" {% endif %} alt="Horilla" />
</main>
</div>
<script src="{% static '/build/js/web.frontend.min.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="{% static 'htmx/htmx.min.js' %}"></script>
<script src="{% static '/index/index.js' %}"></script>
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
<script src="{% static 'build/js/hxSelect2.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
$(document).on("htmx:beforeRequest", function (event, data) {
var response = event.detail.xhr.response;
var target = $(event.detail.elt.getAttribute("hx-target"));
if (!target.closest("form").length) {
target.html(`<div class="animated-background"></div>`);
}
});
</script>
</body>
</html>

View File

@@ -91,10 +91,15 @@
>
</form>
</div>
<img
src={% if white_label_company.icon %}"{{white_label_company.icon.url}}" {% else %} "{% static 'images/ui/auth-logo.png' %}" {% endif %}
alt="Horilla"
/>
<div>
<img
src={% if white_label_company.icon %}"{{white_label_company.icon.url}}" {% else %} "{% static 'images/ui/auth-logo.png' %}" {% endif %}
alt="Horilla"
/>
{% if initialize_database %}
<a href="{% url 'initialize-database' %}" class="oh-link justify-content-center mt-2" style="font-size: large;color: crimson;">{% trans "Initialize Database" %}<ion-icon name="arrow-forward-circle-outline"></ion-icon></a>
{% endif %}
</div>
</main>
</div>
<script src="{% static '/build/js/web.frontend.min.js' %}"></script>