388 lines
24 KiB
HTML
388 lines
24 KiB
HTML
{% extends "welcome_base.html" %}
|
|
{% load crispy_forms_filters %}
|
|
{% load i18n static %}
|
|
{% block content %}
|
|
<section class="main my-2">
|
|
<div class="container" style="max-width:60rem;">
|
|
<div class="row form-container" id="form-container">
|
|
<div class="col-12 ">
|
|
<a class="d-flex flex-center text-decoration-none mb-4"
|
|
href="{% url 'home' %}">
|
|
<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
|
|
<img class="d-dark-none"
|
|
src="{% static 'images/logos/logo-d.png' %}"
|
|
alt="{% trans 'home' %}"
|
|
width="58" />
|
|
<img class="d-light-none"
|
|
src="{% static 'images/logos/logo.png' %}"
|
|
alt="{% trans 'home' %}"
|
|
width="58" />
|
|
</div>
|
|
</a>
|
|
<div class="text-center">
|
|
<h3 class="text-body-highlight">{% trans 'Sign Up' %}</h3>
|
|
<p class="text-body-tertiary fs-9">{% trans 'Create your account today' %}</p>
|
|
</div>
|
|
<div data-signals="{ form1:{email:'',password:'',confirm_password:''}, form2:{name:'',arabic_name:'',phone_number:''}, form3:{crn:'',vrn:'',address:''}, form1_valid:true, form2_valid:true, form3_valid:true, email_valid:true, password_valid:true, phone_number_valid:true }"
|
|
class="card theme-wizard"
|
|
data-theme-wizard="data-theme-wizard">
|
|
<div class="card-header pt-3 pb-2 ">
|
|
<ul class="nav justify-content-between nav-wizard nav-wizard-success"
|
|
role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active fw-semibold"
|
|
href="#bootstrap-wizard-validation-tab1"
|
|
data-bs-toggle="tab"
|
|
data-wizard-step="1"
|
|
aria-selected="true"
|
|
role="tab">
|
|
<div class="text-center d-inline-block">
|
|
<span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-lock"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Access' %}</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link fw-semibold"
|
|
href="#bootstrap-wizard-validation-tab2"
|
|
data-bs-toggle="tab"
|
|
data-wizard-step="2"
|
|
aria-selected="false"
|
|
tabindex="-1"
|
|
role="tab">
|
|
<div class="text-center d-inline-block">
|
|
<span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-user"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Account' %}</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link fw-semibold"
|
|
href="#bootstrap-wizard-validation-tab3"
|
|
data-bs-toggle="tab"
|
|
data-wizard-step="3"
|
|
aria-selected="false"
|
|
tabindex="-1"
|
|
role="tab">
|
|
<div class="text-center d-inline-block">
|
|
<span class="nav-item-circle-parent"><span class="nav-item-circle">
|
|
<svg class="fa fa-file-lines">
|
|
</svg>
|
|
</span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Extra' %}</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link fw-semibold"
|
|
href="#bootstrap-wizard-validation-tab4"
|
|
data-bs-toggle="tab"
|
|
data-wizard-step="4"
|
|
aria-selected="false"
|
|
tabindex="-1"
|
|
role="tab">
|
|
<div class="text-center d-inline-block">
|
|
<span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-check"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Done' %}</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body pt-4 pb-0">
|
|
<div class="tab-content" data-signals-current_form="1">
|
|
<div class="tab-pane active"
|
|
role="tabpanel"
|
|
aria-labelledby="bootstrap-wizard-validation-tab1"
|
|
id="bootstrap-wizard-validation-tab1">
|
|
<form class="needs-validation"
|
|
id="wizardValidationForm1"
|
|
novalidate="novalidate"
|
|
data-wizard-form="1"
|
|
data-ref-f1>
|
|
<div class="mb-3">
|
|
<label for="email"
|
|
data-class="{'text-danger':!$email_valid}"
|
|
class="form-label">
|
|
{% trans "Email" %}
|
|
<span data-show="!$email_valid" class="text-danger">*</span>
|
|
</label>
|
|
<input data-on-input="$email_valid = validateEmail($form1.email)"
|
|
data-on-blur="$email_valid = validateEmail($form1.email)"
|
|
data-bind-form1.email
|
|
data-class="{'is-invalid': !$email_valid , 'is-valid': ($email_valid && $form1.email)}"
|
|
type="email"
|
|
class="form-control"
|
|
id="email"
|
|
name="email"
|
|
required>
|
|
<div class="invalid-feedback" data-show="!$email_valid">{% trans "Please enter a valid email address" %}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">{% trans "Password" %}</label>
|
|
<input data-bind-form1.password
|
|
type="password"
|
|
data-on-input="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
|
|
data-on-blur="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
|
|
class="form-control"
|
|
data-class="{'is-invalid':($form1.password.length && $form1.password.length < 8),'is-valid':$form1.password.length > 8 }"
|
|
id="password"
|
|
name="password"
|
|
required>
|
|
<div class="invalid-feedback" data-show="!$password_valid">
|
|
{% trans "Password does not match. or length is less than 8 characters." %}
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="confirm_password" class="form-label">{% trans "Confirm Password" %}</label>
|
|
<span class="text-danger" data-show="!$password_valid">*</span>
|
|
<input data-bind-form1.confirm_password
|
|
data-on-input="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
|
|
data-on-blur="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
|
|
type="password"
|
|
class="form-control"
|
|
data-class="{'is-invalid':!$password_valid,'is-valid':($password_valid&& $form1.confirm_password)}"
|
|
id="confirm_password"
|
|
name="confirm_password"
|
|
required>
|
|
<div class="invalid-feedback" data-show="!$password_valid">
|
|
{% trans "Password does not match. or length is less than 8 characters." %}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="tab-pane"
|
|
role="tabpanel"
|
|
aria-labelledby="bootstrap-wizard-validation-tab2"
|
|
id="bootstrap-wizard-validation-tab2">
|
|
<form class="needs-validation"
|
|
id="wizardValidationForm2"
|
|
novalidate="novalidate"
|
|
data-wizard-form="2"
|
|
data-ref-f2>
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">{% trans "Name" %}</label>
|
|
<input data-bind-form2.name
|
|
type="text"
|
|
class="form-control"
|
|
id="name"
|
|
name="name"
|
|
required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="arabic_name" class="form-label">{% trans "Arabic Name" %}</label>
|
|
<input data-bind-form2.arabic_name
|
|
type="text"
|
|
class="form-control"
|
|
id="arabic_name"
|
|
name="arabic_name"
|
|
required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="phone_number" class="form-label">{% trans "Phone Number" %}</label>
|
|
<span data-show="!$phone_number_valid" class="text-danger">*</span>
|
|
<input data-bind-form2.phone_number
|
|
type="tel"
|
|
data-class="{'is-invalid':!$phone_number_valid}"
|
|
class="form-control"
|
|
id="phone_number"
|
|
name="phone_number"
|
|
required
|
|
data-on-input="$phone_number_valid = validate_sa_phone_number($form2.phone_number)">
|
|
<div class="invalid-feedback" data-show="!$phone_number_valid">{% trans "Please enter a valid phone number" %}</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="tab-pane"
|
|
role="tabpanel"
|
|
aria-labelledby="bootstrap-wizard-validation-tab3"
|
|
id="bootstrap-wizard-validation-tab3">
|
|
<form class="needs-validation"
|
|
id="wizardValidationForm3"
|
|
novalidate="novalidate"
|
|
data-wizard-form="3"
|
|
data-ref-f3>
|
|
<div class="mb-3">
|
|
<label for="crn" class="form-label">{% trans "CRN" %}</label>
|
|
<input data-bind-form3.crn
|
|
type="text"
|
|
class="form-control"
|
|
id="crn"
|
|
name="crn"
|
|
required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="vrn" class="form-label">{% trans "VRN" %}</label>
|
|
<input data-bind-form3.vrn
|
|
type="text"
|
|
class="form-control"
|
|
id="vrn"
|
|
name="vrn"
|
|
required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="address" class="form-label">{% trans "Address" %}</label>
|
|
<textarea data-bind-form3.address
|
|
class="form-control"
|
|
id="address"
|
|
name="address"
|
|
required></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="tab-pane"
|
|
role="tabpanel"
|
|
aria-labelledby="bootstrap-wizard-validation-tab4"
|
|
id="bootstrap-wizard-validation-tab4">
|
|
<div class="row flex-center pb-8 pt-4 gx-3 gy-4">
|
|
<div class="col-12 col-sm-auto">
|
|
<div class="text-center text-sm-start">
|
|
<img class="d-dark-none"
|
|
src="{% static 'images/spot-illustrations/38.webp' %}"
|
|
alt=""
|
|
width="220">
|
|
<img class="d-light-none"
|
|
src="{% static 'images/spot-illustrations/dark_38.webp' %}"
|
|
alt=""
|
|
width="220">
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-auto">
|
|
<div class="text-center text-sm-start">
|
|
<h5 class="mb-3">{% trans 'You are all set!' %}</h5>
|
|
<p class="text-body-emphasis fs-9">
|
|
{% trans 'Now you can access your account' %}
|
|
<br>
|
|
{% trans 'anytime' %} {% trans 'anywhere' %}
|
|
</p>
|
|
<button data-on-click="sendFormData()"
|
|
class="btn btn-primary px-6"
|
|
id='submit_btn'>{% trans 'Submit' %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div data-computed-form1_valid="validatePassword($form1.password,$form1.confirm_password) && validateEmail($form1.email)"
|
|
class="card-footer border-top-0"
|
|
data-wizard-footer="data-wizard-footer">
|
|
<div class="d-flex pager wizard list-inline mb-0">
|
|
<button class="d-none btn btn-link ps-0"
|
|
type="button"
|
|
data-wizard-prev-btn="data-wizard-prev-btn">{% trans 'Previous' %}</button>
|
|
<div class="flex-1 text-end">
|
|
<button data-attr-disabled="!$form1_valid"
|
|
data-attr-disabled="!$phone_number_valid"
|
|
class="btn btn-phoenix-primary px-6 px-sm-6 next"
|
|
type="button"
|
|
id="next_btn"
|
|
data-wizard-next-btn="data-wizard-next-btn">{% trans 'Next' %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% include 'footer.html' %}
|
|
<script src="{% static 'js/phoenix.js' %}"></script>
|
|
{% endblock content %}
|
|
{% block customJS %}
|
|
<script src="{% static 'js/main.js' %}"></script>
|
|
<script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
|
|
<script type="module"
|
|
src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.11/bundles/datastar.js"></script>
|
|
<script>
|
|
function validatePassword(password, confirmPassword) {
|
|
return password === confirmPassword && password.length > 7 && password !== '';
|
|
}
|
|
function validateEmail(email) {
|
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
return emailRegex.test(email) && email !== '';
|
|
}
|
|
function validateform2(name,arabic_name,phone_number) {
|
|
if (name === '' || arabic_name === '' || phone_number === '' || phone_number.length < 10 || !phone_number.startsWith('05')) {
|
|
return false;
|
|
}
|
|
return true
|
|
}
|
|
function validate_sa_phone_number(phone_number) {
|
|
const phone_numberRegex = /^05[0-9]{8}$/;
|
|
return phone_numberRegex.test(phone_number) && phone_numberRegex !== '';
|
|
}
|
|
function getAllFormData() {
|
|
const forms = document.querySelectorAll('.needs-validation');
|
|
const formData = {};
|
|
forms.forEach(form => {
|
|
const fields = form.querySelectorAll('input,textarea,select');
|
|
fields.forEach(field => {
|
|
formData[field.name] = field.value;
|
|
});
|
|
});
|
|
return formData;
|
|
}
|
|
|
|
function showLoading() {
|
|
Swal.fire({
|
|
title: "{% trans 'Please Wait' %}",
|
|
text: "{% trans 'Loading' %}...",
|
|
allowOutsideClick: false,
|
|
didOpen: () => {
|
|
Swal.showLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
function hideLoading() {
|
|
Swal.close();
|
|
}
|
|
|
|
function notify(tag,msg){
|
|
Swal.fire({
|
|
icon: tag,
|
|
titleText: msg
|
|
});
|
|
}
|
|
function getCookie(name) {
|
|
let cookieValue = null;
|
|
if (document.cookie && document.cookie !== "") {
|
|
const cookies = document.cookie.split(";");
|
|
for (let cookie of cookies) {
|
|
cookie = cookie.trim();
|
|
if (cookie.substring(0, name.length + 1) === name + "=") {
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return cookieValue;
|
|
}
|
|
async function sendFormData() {
|
|
const formData = getAllFormData();
|
|
const url = "{% url 'account_signup' %}";
|
|
const csrftoken = getCookie('csrftoken');
|
|
try {
|
|
showLoading();
|
|
const response = await fetch(url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': '{{csrf_token}}',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData),
|
|
});
|
|
hideLoading();
|
|
const data = await response.json();
|
|
if (response.ok) {
|
|
notify("success","Account created successfully");
|
|
setTimeout(() => {
|
|
window.location.href = "{% url 'account_login' %}";
|
|
}, 1000);
|
|
} else {
|
|
notify("error",data.error);
|
|
}
|
|
} catch (error) {
|
|
notify("error",error);
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock customJS %}
|