[ADD] BASE: Initial user onboarding in Horilla

base/urls.py

@@ -34,6 +34,47 @@ from horilla_audit.models import AuditTag
 
 urlpatterns = [
     path("", views.home, name="home-page"),
+    path("initialize-database", views.initialize_database, name="initialize-database"),
+    path(
+        "initialize-database-user",
+        views.initialize_database_user,
+        name="initialize-database-user",
+    ),
+    path(
+        "initialize-database-company",
+        views.initialize_database_company,
+        name="initialize-database-company",
+    ),
+    path(
+        "initialize-database-department",
+        views.initialize_database_department,
+        name="initialize-database-department",
+    ),
+    path(
+        "initialize-department-edit/<int:obj_id>",
+        views.initialize_department_edit,
+        name="initialize-department-edit",
+    ),
+    path(
+        "initialize-department-delete/<int:obj_id>",
+        views.initialize_department_delete,
+        name="initialize-department-delete",
+    ),
+    path(
+        "initialize-database-job-position",
+        views.initialize_database_job_position,
+        name="initialize-database-job-position",
+    ),
+    path(
+        "initialize-job-position-edit/<int:obj_id>",
+        views.initialize_job_position_edit,
+        name="initialize-job-position-edit",
+    ),
+    path(
+        "initialize-job-position-delete/<int:obj_id>",
+        views.initialize_job_position_delete,
+        name="initialize-job-position-delete",
+    ),
     path("login/", views.login_user, name="login"),
     path(
         "forgot-password",

base/views.py

@@ -16,6 +16,7 @@ from django.contrib import messages
 from django.contrib.auth import authenticate, login, logout
 from django.contrib.auth.models import Group, Permission, User
 from django.contrib.auth.views import PasswordResetConfirmView, PasswordResetView
+from django.core.exceptions import ObjectDoesNotExist
 from django.core.mail import send_mail
 from django.core.paginator import Paginator
 from django.db.models import F, ProtectedError, Q
@@ -181,11 +182,203 @@ def paginator_qry(queryset, page_number):
     return queryset
 
 
+def initialize_database_condition():
+    initialize_database = not User.objects.exists()
+    if not initialize_database:
+        initialize_database = True
+        superusers = User.objects.filter(is_superuser=True)
+        for user in superusers:
+            if hasattr(user, "employee_get"):
+                initialize_database = False
+                break
+    return initialize_database
+
+
+def initialize_database(request):
+    if initialize_database_condition():
+        return render(
+            request,
+            "initialize_database/horilla_user.html",
+        )
+    else:
+        return redirect("/")
+
+
+@hx_request_required
+def initialize_database_user(request):
+    if request.method == "POST":
+        form_data = request.__dict__.get("_post")
+        first_name = form_data.get("firstname")
+        last_name = form_data.get("lastname")
+        username = form_data.get("username")
+        password = form_data.get("password")
+        email = form_data.get("email")
+        phone = form_data.get("phone")
+        user = User.objects.filter(username=username).first()
+        if user and not hasattr(user, "employee_get"):
+            user.delete()
+        user = User.objects.create_superuser(
+            username=username, email=email, password=password
+        )
+        employee = Employee()
+        employee.employee_user_id = user
+        employee.employee_first_name = first_name
+        employee.employee_last_name = last_name
+        employee.email = email
+        employee.phone = phone
+        employee.save()
+        user = authenticate(request, username=username, password=password)
+        login(request, user)
+        return render(
+            request,
+            "initialize_database/horilla_company.html",
+            {"form": CompanyForm(initial={"hq": True})},
+        )
+    return render(request, "initialize_database/horilla_user.html")
+
+
+@hx_request_required
+def initialize_database_company(request):
+    form = CompanyForm()
+    if request.method == "POST":
+        form = CompanyForm(request.POST, request.FILES)
+        if form.is_valid():
+            company = form.save()
+            return render(
+                request,
+                "initialize_database/horilla_department.html",
+                {"form": DepartmentForm(initial={"company_id": company})},
+            )
+    return render(request, "initialize_database/horilla_company.html", {"form": form})
+
+
+@hx_request_required
+def initialize_database_department(request):
+    departments = Department.objects.all()
+    form = DepartmentForm(initial={"company_id": Company.objects.first()})
+    if request.method == "POST":
+        form = DepartmentForm(request.POST)
+        if form.is_valid():
+            company = form.cleaned_data.get("company_id")
+            form.save()
+            form = DepartmentForm(initial={"company_id": company})
+    return render(
+        request,
+        "initialize_database/horilla_department_form.html",
+        {"form": form, "departments": departments},
+    )
+
+
+@hx_request_required
+def initialize_department_edit(request, obj_id):
+    department = Department.find(obj_id)
+    form = DepartmentForm(instance=department)
+    if request.method == "POST":
+        form = DepartmentForm(request.POST, instance=department)
+        if form.is_valid():
+            company = form.cleaned_data.get("company_id")
+            form.save()
+            return render(
+                request,
+                "initialize_database/horilla_department_form.html",
+                {
+                    "form": DepartmentForm(initial={"company_id": company}),
+                    "departments": Department.objects.all(),
+                },
+            )
+    return render(
+        request,
+        "initialize_database/horilla_department_form.html",
+        {
+            "form": form,
+            "department": department,
+            "departments": Department.objects.all(),
+        },
+    )
+
+
+@hx_request_required
+def initialize_department_delete(request, obj_id):
+    department = Department.find(obj_id)
+    department.delete() if department else None
+    return redirect(initialize_database_department)
+
+
+@hx_request_required
+def initialize_database_job_position(request):
+    company = Company.objects.first()
+    form = JobPositionForm(initial={"company_id": company})
+    if request.method == "POST":
+        form = JobPositionForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = JobPositionForm(initial={"company_id": Company.objects.first()})
+        return render(
+            request,
+            "initialize_database/horilla_job_position_form.html",
+            {
+                "form": form,
+                "job_positions": JobPosition.objects.all(),
+                "company": company,
+            },
+        )
+    return render(
+        request,
+        "initialize_database/horilla_job_position.html",
+        {"form": form, "job_positions": JobPosition.objects.all(), "company": company},
+    )
+
+
+@hx_request_required
+def initialize_job_position_edit(request, obj_id):
+    company = Company.objects.first()
+    job_position = JobPosition.find(obj_id)
+    form = JobPositionForm(instance=job_position)
+    if request.method == "POST":
+        form = JobPositionForm(request.POST, instance=job_position)
+        if form.is_valid():
+            form.save()
+            return render(
+                request,
+                "initialize_database/horilla_job_position_form.html",
+                {
+                    "form": JobPositionForm(initial={"company_id": company}),
+                    "job_positions": JobPosition.objects.all(),
+                    "company": company,
+                },
+            )
+    return render(
+        request,
+        "initialize_database/horilla_job_position_form.html",
+        {
+            "form": form,
+            "job_position": job_position,
+            "job_positions": JobPosition.objects.all(),
+            "company": company,
+        },
+    )
+
+
+@hx_request_required
+def initialize_job_position_delete(request, obj_id):
+    company = Company.objects.first()
+    job_position = JobPosition.find(obj_id)
+    job_position.delete() if job_position else None
+    return render(
+        request,
+        "initialize_database/horilla_job_position_form.html",
+        {
+            "form": JobPositionForm(initial={"company_id": Company.objects.first()}),
+            "job_positions": JobPosition.objects.all(),
+            "company": company,
+        },
+    )
+
+
 def login_user(request):
     """
     This method is used render login template and authenticate user
     """
-
     if request.method == "POST":
         username = request.POST["username"]
         password = request.POST["password"]
@@ -223,7 +416,9 @@ def login_user(request):
                 url += f"?{params}"
             return redirect(url)
         return redirect("/")
-    return render(request, "login.html")
+    return render(
+        request, "login.html", {"initialize_database": initialize_database_condition()}
+    )
 
 
 def include_employee_instance(request, form):

horilla/group_by.py

@@ -1,5 +1,6 @@
 from django.core.paginator import Paginator
 from django.db.models.fields.related_descriptors import ForwardManyToOneDescriptor
+
 from horilla.horilla_middlewares import _thread_locals
 
 

horilla_crumbs/context_processors.py

@@ -118,6 +118,11 @@ sidebar_urls = [
     "interview-view",
     "view-compensatory-leave",
     "compensatory-leave-settings-view",
+    "project-dashboard-view",
+    "project-view",
+    "view-time-sheet",
+    "templates",
+    "sidebar.html",
 ]
 remove_urls = [
     "feedback-detailed-view",
@@ -198,6 +203,7 @@ def breadcrumbs(request):
                 last_path in sidebar_urls
                 or parts[-2] == "employee-view"
                 or parts[-2] == "candidate-view"
+                or parts[-2] == "view-payslip"
             ):
                 breadcrumbs = user_breadcrumbs[user_id]
                 first_path = breadcrumbs[0]

horilla_views/templates/generic/reload_select_field.html

@@ -10,4 +10,3 @@ $("#{{dynamic_id}} [name={{field.name}}]").change(function (e) {
     }
 });
 </script>
-

templates/initialize_database/horilla_company.html

@@ -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>

templates/initialize_database/horilla_department.html

@@ -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" %}

templates/initialize_database/horilla_department_form.html

@@ -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>

templates/initialize_database/horilla_job_position.html

@@ -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" %}

templates/initialize_database/horilla_job_position_form.html

@@ -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>

templates/initialize_database/horilla_user.html

@@ -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>

templates/login.html

@@ -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>