122 lines
3.9 KiB
JavaScript
122 lines
3.9 KiB
JavaScript
import { profileData } from "../mockdata/profile.mockdata.js";
|
|
import { logout } from "../shared/utils.js";
|
|
import { get } from "./services/users.service.js";
|
|
import { update } from "./services/users.service.js";
|
|
import { updatePassword } from "./services/users.service.js";
|
|
|
|
var username;
|
|
var email;
|
|
|
|
get().then((res) => {
|
|
username = res.userName;
|
|
email = res.email;
|
|
var table = document.getElementById(`profileCard`);
|
|
table.innerHTML += `
|
|
<div class="pfp">
|
|
<img style="width:200px; height:200px" src="${profileData.pfp}">
|
|
</div>
|
|
<div class="userData">
|
|
<h2>${username}</h2>
|
|
<h2>${email}</h2>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
|
|
const checkForChanges = () => {
|
|
if (emailInput.value !== email || usernameInput.value !== username) {
|
|
submitBtn.disabled = false; // Enable button if changes were made
|
|
} else {
|
|
submitBtn.disabled = true; // Disable button if no changes
|
|
}
|
|
};
|
|
|
|
const emailInput = document.getElementById("email");
|
|
const usernameInput = document.getElementById("uname");
|
|
const submitBtn = document.getElementById("submitEditBtn");
|
|
var pswModal = document.getElementById("PasswordModal");
|
|
var editModal = document.getElementById("editModal");
|
|
var editIconbtn = document.getElementById("openEditModal");
|
|
var passwordBtn = document.getElementById("openPasswordModal");
|
|
|
|
emailInput.addEventListener("input", checkForChanges);
|
|
usernameInput.addEventListener("input", checkForChanges);
|
|
|
|
// Open modals
|
|
editIconbtn.onclick = () => {
|
|
document.getElementById("uname").value = username;
|
|
document.getElementById("email").value = email;
|
|
submitBtn.disabled = true;
|
|
editModal.style.display = "block";
|
|
};
|
|
passwordBtn.onclick = () => (pswModal.style.display = "block");
|
|
|
|
// Close modals when clicking on any close button
|
|
document.querySelectorAll(".close").forEach((closeBtn) => {
|
|
closeBtn.onclick = () => {
|
|
pswModal.style.display = "none";
|
|
editModal.style.display = "none";
|
|
document.getElementById("form-error").innerText = "";
|
|
document.getElementById("form-error").style.display = "none";
|
|
};
|
|
});
|
|
|
|
// Close modals when clicking outside
|
|
window.onclick = (event) => {
|
|
if (event.target == pswModal || event.target == editModal) {
|
|
pswModal.style.display = "none";
|
|
editModal.style.display = "none";
|
|
document.getElementById("form-error").innerText = "";
|
|
document.getElementById("form-error").style.display = "none";
|
|
}
|
|
};
|
|
|
|
document
|
|
.getElementById("editForm")
|
|
.addEventListener("submit", function (event) {
|
|
event.preventDefault(); // Prevents default form submission
|
|
|
|
document.getElementById("form-error").style.display = "none";
|
|
|
|
// Call function with form values
|
|
update(emailInput.value, usernameInput.value).then((response) => {
|
|
if (response?.error) {
|
|
document.getElementById("form-error").innerText = response.error;
|
|
document.getElementById("form-error").style.display = "block";
|
|
|
|
return;
|
|
}
|
|
|
|
location.href = "/profile";
|
|
});
|
|
});
|
|
|
|
document
|
|
.getElementById("PasswordForm")
|
|
.addEventListener("submit", function (event) {
|
|
event.preventDefault(); // Prevents default form submission
|
|
|
|
document.getElementById("form-error").style.display = "none";
|
|
|
|
const oldPassword = document.getElementById("oldpsw").value;
|
|
const newPassword = document.getElementById("psw").value;
|
|
const repeatPassword = document.getElementById("rpsw").value;
|
|
|
|
if (newPassword !== repeatPassword) {
|
|
let errorDiv = document.getElementById("form-error");
|
|
errorDiv.style.display = "block";
|
|
errorDiv.innerText = "Passwords do not match!";
|
|
return;
|
|
}
|
|
|
|
updatePassword(oldPassword, newPassword).then((response) => {
|
|
//error messages do not work
|
|
if (response.error) {
|
|
document.getElementById("form-error").innerText = response.message;
|
|
document.getElementById("form-error").style.display = "block";
|
|
return;
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelector(".logout-container").addEventListener("click", logout);
|