New changes.
parent
0970ecba52
commit
4c7d45ea1f
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,91 @@
|
||||
{% extends "customer_main.html" %}
|
||||
{%load static%}
|
||||
{% block content %}
|
||||
|
||||
<div class="w-full px-5 s:px-9 grid grid-cols-1 xxlg1:grid-cols-3 justify-between gap-5">
|
||||
<div class="w-full flex flex-col gap-5">
|
||||
<div class="w-full p-9 flex flex-col justify-center items-center gap-5 shadow-md bg-white rounded-md">
|
||||
<div class="w-[80px] s:w-[100px] h-[80px] s:h-[100px] rounded-full border border-gray-50 shadow-md">
|
||||
<img src="{% static 'images/ositcom_logos/full-logo-blue-bg.png' %}" class="w-full h-full object-cover rounded-full">
|
||||
</div>
|
||||
|
||||
<div class="text-gray-500 font-light flex flex-col justify-center items-center">
|
||||
<p>{{request.user.first_name}} {{request.user.last_name}}</p>
|
||||
<p>{{request.user.email}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full p-5 flex flex-col shadow-md bg-white rounded-md">
|
||||
<a href="{% url 'userprofile' %}">
|
||||
<div
|
||||
class="w-full py-3 border-b border-gray-100 flex justify-start items-center gap-2 text-secondosiblue cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
|
||||
class="text-secondosiblue" color="#000000" fill="none">
|
||||
<path
|
||||
d="M6.57757 15.4816C5.1628 16.324 1.45336 18.0441 3.71266 20.1966C4.81631 21.248 6.04549 22 7.59087 22H16.4091C17.9545 22 19.1837 21.248 20.2873 20.1966C22.5466 18.0441 18.8372 16.324 17.4224 15.4816C14.1048 13.5061 9.89519 13.5061 6.57757 15.4816Z"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path
|
||||
d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z"
|
||||
stroke="currentColor" stroke-width="1.5" />
|
||||
</svg>
|
||||
|
||||
<p>Profile Details</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="group" href="{% url 'usersettings' %}">
|
||||
<div class="w-full py-3 flex justify-start items-center gap-2 text-gray-500">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||
class="text-gray-500 group-hover:text-secondosiblue duration-300" width="24" height="24"
|
||||
color="#000000" fill="none">
|
||||
<path
|
||||
d="M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z"
|
||||
stroke="currentColor" stroke-width="1.5" />
|
||||
<path
|
||||
d="M21.011 14.0965C21.5329 13.9558 21.7939 13.8854 21.8969 13.7508C22 13.6163 22 13.3998 22 12.9669V11.0332C22 10.6003 22 10.3838 21.8969 10.2493C21.7938 10.1147 21.5329 10.0443 21.011 9.90358C19.0606 9.37759 17.8399 7.33851 18.3433 5.40087C18.4817 4.86799 18.5509 4.60156 18.4848 4.44529C18.4187 4.28902 18.2291 4.18134 17.8497 3.96596L16.125 2.98673C15.7528 2.77539 15.5667 2.66972 15.3997 2.69222C15.2326 2.71472 15.0442 2.90273 14.6672 3.27873C13.208 4.73448 10.7936 4.73442 9.33434 3.27864C8.95743 2.90263 8.76898 2.71463 8.60193 2.69212C8.43489 2.66962 8.24877 2.77529 7.87653 2.98663L6.15184 3.96587C5.77253 4.18123 5.58287 4.28891 5.51678 4.44515C5.45068 4.6014 5.51987 4.86787 5.65825 5.4008C6.16137 7.3385 4.93972 9.37763 2.98902 9.9036C2.46712 10.0443 2.20617 10.1147 2.10308 10.2492C2 10.3838 2 10.6003 2 11.0332V12.9669C2 13.3998 2 13.6163 2.10308 13.7508C2.20615 13.8854 2.46711 13.9558 2.98902 14.0965C4.9394 14.6225 6.16008 16.6616 5.65672 18.5992C5.51829 19.1321 5.44907 19.3985 5.51516 19.5548C5.58126 19.7111 5.77092 19.8188 6.15025 20.0341L7.87495 21.0134C8.24721 21.2247 8.43334 21.3304 8.6004 21.3079C8.76746 21.2854 8.95588 21.0973 9.33271 20.7213C10.7927 19.2644 13.2088 19.2643 14.6689 20.7212C15.0457 21.0973 15.2341 21.2853 15.4012 21.3078C15.5682 21.3303 15.7544 21.2246 16.1266 21.0133L17.8513 20.034C18.2307 19.8187 18.4204 19.711 18.4864 19.5547C18.5525 19.3984 18.4833 19.132 18.3448 18.5991C17.8412 16.6616 19.0609 14.6226 21.011 14.0965Z"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
||||
</svg>
|
||||
|
||||
<p class="group-hover:text-secondosiblue duration-300">Settings</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full col-span-1 xxlg1:col-span-2 flex flex-col gap-5">
|
||||
<div
|
||||
class="grid grid-cols-1 s:grid-cols-2 gap-5 h-fit border shadow-md p-5 bg-white rounded-md">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-gray-500 font-light">First Name:</label>
|
||||
<input type="text"
|
||||
class="w-full border border-gray-200 px-3 py-3 bg-transparent text-gray-500 font-light rounded-md" disabled
|
||||
value="{{request.user.first_name}}">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-gray-500 font-light">Last Name:</label>
|
||||
<input type="text"
|
||||
class="w-full border border-gray-200 px-3 py-3 bg-transparent text-gray-500 font-light rounded-md" disabled
|
||||
value="{{request.user.last_name}}">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-gray-500 font-light">Email:</label>
|
||||
<input type="text"
|
||||
class="w-full border border-gray-200 px-3 py-3 bg-transparent text-gray-500 font-light rounded-md" disabled
|
||||
value="{{request.user.email}}">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-gray-500 font-light">Phone Number:</label>
|
||||
<input type="text"
|
||||
class="w-full border border-gray-200 px-3 py-3 bg-transparent text-gray-500 font-light rounded-md" disabled
|
||||
value="{{request.user.customer.mobile_number}}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
@ -0,0 +1,90 @@
|
||||
{% extends "customer_main.html" %}
|
||||
{%load static%}
|
||||
{% block content %}
|
||||
|
||||
<div class="w-full px-5 s:px-9 grid grid-cols-1 xxlg1:grid-cols-3 justify-between gap-5">
|
||||
<div class="w-full flex flex-col gap-5">
|
||||
<div class="w-full p-9 flex flex-col justify-center items-center gap-5 shadow-md bg-white rounded-md">
|
||||
<div class="w-[80px] s:w-[100px] h-[80px] s:h-[100px] rounded-full border border-gray-50 shadow-md">
|
||||
<img src="{% static 'images/ositcom_logos/full-logo-blue-bg.png' %}" class="w-full h-full object-cover rounded-full">
|
||||
</div>
|
||||
|
||||
<div class="text-gray-500 font-light flex flex-col justify-center items-center">
|
||||
<p>{{request.user.first_name}} {{request.user.last_name}}</p>
|
||||
<p>{{request.user.email}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full p-5 flex flex-col shadow-md bg-white rounded-md">
|
||||
<a class="group" href="{% url 'userprofile' %}">
|
||||
<div class="w-full py-3 border-b border-gray-100 flex justify-start items-center gap-2 text-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
|
||||
class="text-gray-500 group-hover:text-secondosiblue duration-300" color="#000000" fill="none">
|
||||
<path
|
||||
d="M6.57757 15.4816C5.1628 16.324 1.45336 18.0441 3.71266 20.1966C4.81631 21.248 6.04549 22 7.59087 22H16.4091C17.9545 22 19.1837 21.248 20.2873 20.1966C22.5466 18.0441 18.8372 16.324 17.4224 15.4816C14.1048 13.5061 9.89519 13.5061 6.57757 15.4816Z"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path
|
||||
d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z"
|
||||
stroke="currentColor" stroke-width="1.5" />
|
||||
</svg>
|
||||
|
||||
<p class="group-hover:text-secondosiblue duration-300">Profile Details</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="group" href="{% url 'usersettings' %}">
|
||||
<div
|
||||
class="w-full py-3 flex justify-start items-center gap-2 text-secondosiblue cursor-pointer">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||
class="" width="24" height="24" fill="none">
|
||||
<path
|
||||
d="M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z"
|
||||
stroke="currentColor" stroke-width="1.5" />
|
||||
<path
|
||||
d="M21.011 14.0965C21.5329 13.9558 21.7939 13.8854 21.8969 13.7508C22 13.6163 22 13.3998 22 12.9669V11.0332C22 10.6003 22 10.3838 21.8969 10.2493C21.7938 10.1147 21.5329 10.0443 21.011 9.90358C19.0606 9.37759 17.8399 7.33851 18.3433 5.40087C18.4817 4.86799 18.5509 4.60156 18.4848 4.44529C18.4187 4.28902 18.2291 4.18134 17.8497 3.96596L16.125 2.98673C15.7528 2.77539 15.5667 2.66972 15.3997 2.69222C15.2326 2.71472 15.0442 2.90273 14.6672 3.27873C13.208 4.73448 10.7936 4.73442 9.33434 3.27864C8.95743 2.90263 8.76898 2.71463 8.60193 2.69212C8.43489 2.66962 8.24877 2.77529 7.87653 2.98663L6.15184 3.96587C5.77253 4.18123 5.58287 4.28891 5.51678 4.44515C5.45068 4.6014 5.51987 4.86787 5.65825 5.4008C6.16137 7.3385 4.93972 9.37763 2.98902 9.9036C2.46712 10.0443 2.20617 10.1147 2.10308 10.2492C2 10.3838 2 10.6003 2 11.0332V12.9669C2 13.3998 2 13.6163 2.10308 13.7508C2.20615 13.8854 2.46711 13.9558 2.98902 14.0965C4.9394 14.6225 6.16008 16.6616 5.65672 18.5992C5.51829 19.1321 5.44907 19.3985 5.51516 19.5548C5.58126 19.7111 5.77092 19.8188 6.15025 20.0341L7.87495 21.0134C8.24721 21.2247 8.43334 21.3304 8.6004 21.3079C8.76746 21.2854 8.95588 21.0973 9.33271 20.7213C10.7927 19.2644 13.2088 19.2643 14.6689 20.7212C15.0457 21.0973 15.2341 21.2853 15.4012 21.3078C15.5682 21.3303 15.7544 21.2246 16.1266 21.0133L17.8513 20.034C18.2307 19.8187 18.4204 19.711 18.4864 19.5547C18.5525 19.3984 18.4833 19.132 18.3448 18.5991C17.8412 16.6616 19.0609 14.6226 21.011 14.0965Z"
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
||||
</svg>
|
||||
|
||||
<p>Settings</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full col-span-1 xxlg1:col-span-2 h-fit shadow-md p-5 rounded-md bg-white">
|
||||
<p class="text-secondosiblue text-xl font-poppinsBold">Change Password</p>
|
||||
|
||||
<form id="settingsContainer" method="POST" action="{% url 'changepassword' %}"
|
||||
class="w-full flex flex-col gap-3 mt-5">
|
||||
{% csrf_token %}
|
||||
|
||||
<input required name="current_password" type="password"
|
||||
class="w-full bg-transparent border border-gray-200 px-3 py-3 outline-none rounded-md" id="currentPasswordInput"
|
||||
placeholder="Current Password">
|
||||
|
||||
<p class="text-red-500 font-light" id="oldPasswordMatchError"></p>
|
||||
|
||||
<input name="new_password" type="password"
|
||||
class="w-full bg-transparent border border-gray-200 px-3 py-3 outline-none rounded-md" placeholder="New Password"
|
||||
required>
|
||||
|
||||
<input name="confirm_password" type="password"
|
||||
class="w-full bg-transparent border border-gray-200 px-3 py-3 outline-none rounded-md"
|
||||
placeholder="Password Confirmation" required>
|
||||
|
||||
<p class="text-red-500 font-light" id="passwordMatchError"></p>
|
||||
|
||||
<button type="submit"
|
||||
class="w-full bg-osiblue border border-osiblue text-white px-5 py-2 uppercase cursor-pointer hover:text-osiblue hover:bg-white duration-300 rounded-md">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!------------------------------------- JS SCRIPTS --------------------------------------->
|
||||
|
||||
<script type="text/javascript" src='{% static "js/customer_dashboard/change-password.js" %}'></script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@ -0,0 +1,93 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const currentPasswordInput = document.getElementById("currentPasswordInput");
|
||||
const oldPasswordMatchError = document.getElementById("oldPasswordMatchError");
|
||||
const passwordForm = document.getElementById("settingsContainer");
|
||||
const passwordInput1 = document.querySelector('input[name="new_password"]');
|
||||
const passwordInput2 = document.querySelector('input[name="confirm_password"]');
|
||||
const passwordMatchError = document.getElementById('passwordMatchError');
|
||||
|
||||
|
||||
passwordForm.addEventListener("submit", function (e) {
|
||||
e.preventDefault(); // Prevent the default form submission.
|
||||
|
||||
// Clear error messages.
|
||||
oldPasswordMatchError.textContent = '';
|
||||
passwordMatchError.textContent = '';
|
||||
|
||||
// Get the entered passwords.
|
||||
const currentPassword = currentPasswordInput.value;
|
||||
const newPassword1 = passwordInput1.value;
|
||||
const newPassword2 = passwordInput2.value;
|
||||
|
||||
// Function to get the CSRF token from cookies.
|
||||
function getCookie(name) {
|
||||
var cookieValue = null;
|
||||
if (document.cookie && document.cookie !== '') {
|
||||
var cookies = document.cookie.split(';');
|
||||
for (var i = 0; i < cookies.length; i++) {
|
||||
var cookie = cookies[i].trim();
|
||||
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return cookieValue;
|
||||
}
|
||||
|
||||
// Function to check passwords and perform validation
|
||||
function validatePasswords() {
|
||||
// Password strength requirements
|
||||
const isLengthValid = newPassword1.length >= 8;
|
||||
|
||||
if (newPassword1 && newPassword2) {
|
||||
if (newPassword1 === newPassword2) {
|
||||
let errorMessage = '';
|
||||
|
||||
if (!isLengthValid) {
|
||||
errorMessage += '- At least 8 characters\n';
|
||||
}
|
||||
|
||||
if (errorMessage) {
|
||||
passwordMatchError.textContent = errorMessage;
|
||||
passwordMatchError.style.whiteSpace = 'pre-line';
|
||||
}
|
||||
} else {
|
||||
passwordMatchError.textContent = 'Passwords do not match';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Check if the passwords match and perform validation
|
||||
if (currentPassword && newPassword1 && newPassword2) {
|
||||
// Send an AJAX request to check the current password.
|
||||
fetch('/check_current_password/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': getCookie('csrftoken')
|
||||
},
|
||||
body: JSON.stringify({ current_password: currentPassword }),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.is_current_password_correct) {
|
||||
// Current password is correct, now validate the new passwords.
|
||||
validatePasswords();
|
||||
|
||||
// Check if there are any error messages.
|
||||
if (!oldPasswordMatchError.textContent && !passwordMatchError.textContent) {
|
||||
// Password checks passed, submit the form.
|
||||
passwordForm.submit();
|
||||
}
|
||||
} else {
|
||||
// Password is incorrect. Display an error message.
|
||||
oldPasswordMatchError.textContent = 'Incorrect password';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue