This commit is contained in:
ismail 2025-07-27 17:54:19 +03:00
parent 7bd18296ac
commit 4474c18ca7
10 changed files with 206 additions and 189 deletions

View File

@ -223,7 +223,7 @@ class CarMake(models.Model, LocalizedNameMixin):
name = models.CharField(max_length=255, blank=True, null=True)
slug = models.SlugField(max_length=255, unique=True, blank=True, null=True)
arabic_name = models.CharField(max_length=255, blank=True, null=True)
logo = models.ImageField(_("logo"), upload_to="car_make", blank=True, null=True,default="user-logo.png")
logo = models.ImageField(_("logo"), upload_to="car_make", blank=True, null=True,default="user-logo.jpg")
is_sa_import = models.BooleanField(default=False)
car_type = models.SmallIntegerField(choices=CarType.choices, blank=True, null=True)
@ -593,7 +593,7 @@ class AdditionalServices(models.Model, LocalizedNameMixin):
class Car(Base):
item_model = models.OneToOneField(
ItemModel,
models.DO_NOTHING,
@ -1288,7 +1288,7 @@ class Staff(models.Model, LocalizedNameMixin):
max_length=200, blank=True, null=True, verbose_name=_("Address")
)
logo = models.ImageField(
upload_to="logos/staff", blank=True, null=True, verbose_name=_("Image"),default="user-logo.png"
upload_to="logos/staff", blank=True, null=True, verbose_name=_("Image"),default="user-logo.jpg"
)
thumbnail = ImageSpecField(
source="logo",
@ -1661,7 +1661,7 @@ class Organization(models.Model, LocalizedNameMixin):
max_length=200, blank=True, null=True, verbose_name=_("Address")
)
logo = models.ImageField(
upload_to="logos", blank=True, null=True, verbose_name=_("Logo"),default="user-logo.png"
upload_to="logos", blank=True, null=True, verbose_name=_("Logo"),default="user-logo.jpg"
)
thumbnail = ImageSpecField(
source="logo",
@ -2481,7 +2481,7 @@ class Vendor(models.Model, LocalizedNameMixin):
email = models.EmailField(max_length=255, verbose_name=_("Email Address"))
address = models.CharField(max_length=200, verbose_name=_("Address"))
logo = models.ImageField(
upload_to="logos/vendors", blank=True, null=True, verbose_name=_("Logo"),default="user-logo.png"
upload_to="logos/vendors", blank=True, null=True, verbose_name=_("Logo"),default="user-logo.jpg"
)
thumbnail = ImageSpecField(
source="logo",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 150 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
static/user-logo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -3,7 +3,7 @@
{% load i18n static %}
{% block content %}
<section class="main my-2">
<div class="container-fluid">
<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"
@ -23,7 +23,9 @@
<h3 class="text-body-highlight">{% trans 'Sign Up' %}</h3>
<p class="text-body-tertiary fs-9">{% trans 'Create your account today' %}</p>
</div>
<div class="card theme-wizard" data-theme-wizard="data-theme-wizard">
<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">
@ -84,7 +86,7 @@
</ul>
</div>
<div class="card-body pt-4 pb-0">
<div class="tab-content">
<div class="tab-content" data-signals-current_form="1">
<div class="tab-pane active"
role="tabpanel"
aria-labelledby="bootstrap-wizard-validation-tab1"
@ -92,11 +94,57 @@
<form class="needs-validation"
id="wizardValidationForm1"
novalidate="novalidate"
data-wizard-form="1">
{{ form1|crispy }}
<a class="fs-10 text-decoration-none"
href="{% url 'terms_and_privacy' %}"
target="_blank">{{ _("Read Terms of Service and Privacy Policy") }}</a>
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"
@ -106,8 +154,39 @@
<form class="needs-validation"
id="wizardValidationForm2"
novalidate="novalidate"
data-wizard-form="2">
{{ form2|crispy }}
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"
@ -117,8 +196,34 @@
<form class="needs-validation"
id="wizardValidationForm3"
novalidate="novalidate"
data-wizard-form="3">
{{ form3|crispy }}
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"
@ -146,22 +251,28 @@
<br>
{% trans 'anytime' %} {% trans 'anywhere' %}
</p>
<button class="btn btn-primary px-6" id='submit_btn'>{% trans 'Submit' %}</button>
<button data-on-click="sendFormData()"
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"
<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 class="btn btn-phoenix-primary px-6 px-sm-6 next"
type="submit"
<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>
@ -177,160 +288,36 @@
<script src="{% static 'js/phoenix.js' %}"></script>
{% endblock content %}
{% block customJS %}
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
<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>
const validator = new JustValidate('#wizardValidationForm1', {
validateBeforeSubmitting: true,
});
const validator1 = new JustValidate('#wizardValidationForm2', {
validateBeforeSubmitting: true,
});
validator1.addField('#wizardValidationForm2 [name="phone_number"]', [
{
rule: 'required',
},
{
rule: 'customRegexp',
value: /^05\d{8}$/,
errorMessage: '{% trans 'Please enter a valid phone number' %}',
},
{
rule: 'maxLength',
value: 10,
errorMessage: '{% trans 'Please enter a valid phone number' %}',
},
]);
validator.addField('#wizardValidationForm1 [name="email"]', [
{
rule: 'required',
},
{
rule: 'email',
},
]);
validator.addField('#wizardValidationForm1 [name="password"]', [
{
rule: 'required',
},
{
rule: 'minLength',
value: 6,
},
]);
validator.addField('#wizardValidationForm1 [name="confirm_password"]', [
{
rule: 'required',
},
{
rule: 'minLength',
value: 6,
errorMessage: '{% trans 'Password does not match' %}',
},
{
validator: (value, context) => {
if (value !== document.querySelector('#id_password').value) {
return false;
}
return true;
},
},
])
validator.addField('#wizardValidationForm1 [name="terms"]', [
{
rule: 'required',
},
])
/*
validator = new JustValidate('#wizardValidationForm1', {
rules: {
email: {
required: true,
email: true,
},
password: {
required: true,
min: 6,
},
confirm_password: {
required: true,
min: 6,
equalTo: '#password',
},
},
messages: {
name: {
required: 'Please enter your name',
},
email: {
required: 'Please enter your email',
email: 'Please enter a valid email address',
},
password: {
required: 'Please enter your password',
min: 'Password must be at least 6 characters',
},
confirm_password: {
required: 'Please confirm your password',
min: 'Password must be at least 6 characters',
equalTo: 'Passwords do not match',
},
}
})
*/
const url = "{% url 'account_signup' %}";
let submit_btn = document.getElementById('submit_btn');
const csrftoken = getCookie('csrftoken');
submit_btn.addEventListener('click', async () => {
const allFormData = getAllFormData();
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 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('056')) {
return false;
}
});
return true
}
function validate_sa_phone_number(phone_number) {
const phone_numberRegex = /^056[0-9]{7}$/;
return phone_numberRegex.test(phone_number) && phone_numberRegex !== '';
}
function getAllFormData() {
const forms = document.querySelectorAll('form');
const forms = document.querySelectorAll('.needs-validation');
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;
}
}
forms.forEach(form => {
const fields = form.querySelectorAll('input,textarea,select');
fields.forEach(field => {
formData[field.name] = field.value;
});
});
return formData;
}
@ -370,5 +357,33 @@
}
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 %}

View File

@ -307,7 +307,7 @@
return true
}
function validate_sa_phone_number(phone_number) {
const phone_numberRegex = /^056[0-9]{7}$/;
const phone_numberRegex = /^05[0-9]{8}$/;
return phone_numberRegex.test(phone_number) && phone_numberRegex !== '';
}
function getAllFormData() {

View File

@ -66,7 +66,7 @@
rel="stylesheet"
id="user-style-default">
{% endif %}
<script src="{% static 'js/main.js' %}"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>
@ -83,7 +83,7 @@
{% include "plans/expiration_messages.html" %}
{% block period_navigation %}
{% endblock period_navigation %}
<div id="main_content" class="fade-me-in" hx-boost="false" hx-target="#main_content" hx-select="#main_content" hx-swap="innerHTML transition:true" hx-select-oob="#toast-container" hx-history-elt>
<div id="main_content" class="fade-me-in" hx-boost="true" hx-target="#main_content" hx-select="#main_content" hx-swap="innerHTML transition:true" hx-select-oob="#toast-container" hx-history-elt>
<div id="spinner" class="htmx-indicator spinner-bg">
<img src="{% static 'spinner.svg' %}" width="100" height="100" alt="">
</div>

View File

@ -1,18 +1,18 @@
{% load static %}
{% load i18n %}
<style>
.empty-state-container {
background-color: #ffffff;
padding: 40px;
border-radius: 15px; /* Rounded corners */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Subtle shadow */
padding: 50px;
border-radius: 5px; /* Rounded corners */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* Subtle shadow */
text-align: center;
max-width: 80rem; /* Max width for content - made wider */
max-width: 70rem; /* Max width for content - made wider */
width: 90%; /* Fluid width */
margin: 10px auto; /* Added margin-top and auto for horizontal centering */
max-height: auto; /* Added min-height to control the height */
margin: 0px auto; /* Added margin-top and auto for horizontal centering */
max-height: 80vh; /* Added min-height to control the height */
display: flex; /* Use flexbox for vertical centering of content */
flex-direction: column; /* Stack children vertically */
justify-content: center; /* Center content vertically */
@ -20,8 +20,8 @@
}
.empty-state-image {
max-width: 50%; /* Responsive image size */
height: auto;
margin-bottom: 10px;
height: auto%;
border-radius: 10px; /* Rounded corners for image */
}
.empty-state-title {
@ -42,14 +42,16 @@
<img src="{% static 'images/logos/no-content-new.jpg' %}" alt="No-empty-state-image" class="empty-state-image">
<!-- Title -->
<h3 class="empty-state-title">No {{ value|capfirst }} Yet</h3>
<h3 class="empty-state-title">{% trans "No" %} {{ value|capfirst }} {% trans "Yet" %}</h3>
<!-- Description -->
<p class="empty-state-text">
It looks like you haven't added any {{ value }} to your account.
Click the button below to get started and add your first {{ value }}!
{% trans "It looks like you haven't added any {{ value }} to your account.
Click the button below to get started and add your first {{ value }}!" %}
</p>
<!-- Call to Action Button -->
<a class="btn btn-lg btn-primary" href="{{ url }}">Create New {{ value|capfirst }} </a>
<a class="btn btn-lg btn-primary" href="{{ url }}">
<i class="fa fa-plus me-2"></i>{% trans "Create New " %}{{ value|capfirst }}
</a>
</div>

View File

@ -55,7 +55,7 @@
{% if user.logo %}
<img class="avatar-img rounded-circle"
src="{{user.thumbnail.url}}"
onerror="this.src='/static/user-logo.png'"
onerror="this.src='/static/user-logo.jpg'"
alt="Logo">
{% endif %}
</div>