165 lines
7.5 KiB
HTML
165 lines
7.5 KiB
HTML
{% load i18n %}
|
|
<div class="oh-onboarding-card__header">
|
|
<span class="oh-onboarding-card__company-name">Horilla HRMS</span>
|
|
<ul class="oh-onboarding-card__step">
|
|
<li class="oh-onboarding-card__step">
|
|
<div class="oh-onboarding-card__count">1</div>
|
|
<span class="oh-onboarding-card__text">Authentication</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">Sign Up</span>
|
|
</li>
|
|
<li class="oh-onboarding-card__step">
|
|
<div class="oh-onboarding-card__count">3</div>
|
|
<span class="oh-onboarding-card__text">Company</span>
|
|
</li>
|
|
<li class="oh-onboarding-card__step">
|
|
<div class="oh-onboarding-card__count">4</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">5</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="email">{% trans "Email" %}</label>
|
|
<input type="text" id="email" name="email" class="oh-input w-100" placeholder="e.g. adam.luis@horilla.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>
|
|
<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="badge_id">{% trans "Badge ID" %}</label>
|
|
<input type="text" id="badge_id" name="badge_id" class="oh-input w-100" placeholder="e.g. PEP001"
|
|
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="username">{% trans "Username" %}</label>
|
|
<input type="text" id="username" name="username" class="oh-input w-100"
|
|
placeholder="e.g. adam.luis@horilla.com" required />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="passwordError" class="mt-2" style="background-color: rgba(229, 79, 56, 0.17); border: 2px solid hsl(8, 77%, 56%); border-radius: 18px; padding: 10px; font-weight: bold; width: 35%; display: none;"></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="adminPassword">{% trans "Password" %}</label>
|
|
<div class="oh-password-input-container">
|
|
<input type="password" name="password" id="adminPassword" 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 class="col-12 col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label" for="confirmPassword">{% trans "Confirm Password" %}</label>
|
|
<div class="oh-password-input-container">
|
|
<input type="password" id="confirmPassword" name="confirm_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>
|
|
<button type="submit" class="oh-btn oh-onboarding-card__button mt-4 oh-btn--secondary oh-btn--shadow w-100 mb-4" id="formButton">
|
|
<ion-icon class="me-2" name="lock-closed-outline"></ion-icon>
|
|
{% trans "Secure Sign-up" %}
|
|
</button>
|
|
</form>
|
|
<script>
|
|
$(document).ready(function (e) {
|
|
function checkPasswordsMatch() {
|
|
const password = $("#adminPassword").val();
|
|
const confirmPassword = $("#confirmPassword").val();
|
|
|
|
if (password !== confirmPassword) {
|
|
$("#passwordError").text("Passwords do not match").show();
|
|
return false;
|
|
} else {
|
|
$("#passwordError").hide();
|
|
return true;
|
|
}
|
|
}
|
|
|
|
$("#adminPassword, #confirmPassword").on("keyup", function () {
|
|
checkPasswordsMatch();
|
|
});
|
|
|
|
$("#formButton").click(function (e) {
|
|
if (!checkPasswordsMatch()) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
$(".oh-password-input--toggle").click(function () {
|
|
var passwordInput = $(this).closest('div').find("input[type='password']");
|
|
if(passwordInput.length === 0){
|
|
passwordInput = $(this).closest('div').find("input[type='text']");
|
|
}
|
|
var showIcon = $(this).find(".oh-passowrd-input__show-icon");
|
|
var hideIcon = $(this).find(".oh-passowrd-input__hide-icon");
|
|
if (passwordInput.attr("type") === "password") {
|
|
passwordInput.attr("type", "text");
|
|
showIcon.addClass("d-none");
|
|
hideIcon.removeClass("d-none");
|
|
} else {
|
|
passwordInput.attr("type", "password");
|
|
showIcon.removeClass("d-none");
|
|
hideIcon.addClass("d-none");
|
|
}
|
|
});
|
|
});
|
|
</script>
|