174 lines
9.7 KiB
HTML
174 lines
9.7 KiB
HTML
{% extends "base.html" %}
|
|
{% load crispy_forms_filters %}
|
|
{% load i18n static %}
|
|
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="row d-flex-center min-vh-50">
|
|
<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">{% trans 'Create your account today' %}</p>
|
|
</div>
|
|
<div class="text-start">
|
|
<div class="card theme-wizard" data-theme-wizard="data-theme-wizard">
|
|
<div class="card-header pt-3 pb-2 border-bottom-0">
|
|
<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"><svg class="svg-inline--fa fa-lock" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"></path></svg></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"><svg class="svg-inline--fa fa-user" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"></path></svg></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="svg-inline--fa fa-file-lines" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="file-lines" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z"></path></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"><svg class="svg-inline--fa fa-check" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg></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">
|
|
<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">
|
|
{{form1|crispy}}
|
|
</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">
|
|
{{form2|crispy}}
|
|
</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">
|
|
{{form3|crispy}}
|
|
</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 class="btn btn-primary px-6" id='submit_btn'>{% trans 'Submit' %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div 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 class="btn btn-phoenix-primary px-6 px-sm-6" type="submit" data-wizard-next-btn="data-wizard-next-btn">{% trans 'Next' %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
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;
|
|
}
|
|
|
|
const url = "{% url 'account_signup' %}";
|
|
let submit_btn = document.getElementById('submit_btn');
|
|
const csrfToken = getCookie('csrftoken');
|
|
|
|
submit_btn.addEventListener('click', async () => {
|
|
const allFormData = getAllFormData();
|
|
console.log(allFormData);
|
|
|
|
try {
|
|
showLoading();
|
|
const response = await fetch(url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': csrfToken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(allFormData),
|
|
});
|
|
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);
|
|
}
|
|
|
|
});
|
|
|
|
function getAllFormData() {
|
|
const forms = document.querySelectorAll('form');
|
|
const formData = {};
|
|
|
|
forms.forEach((form, index) => {
|
|
const formId = form.id || `form${index + 1}`;
|
|
formData[formId] = {};
|
|
|
|
const formElements = form.elements;
|
|
for (let element of formElements) {
|
|
if (element.name) {
|
|
formData[formId][element.name] = element.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
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
{% endblock content %} |