ReiMerc/temperature-alarm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix changing password in frontend

Browse Source
This commit is contained in:
Reimar 2025-04-09 09:43:52 +02:00
parent 2e5334001f
commit d25b72c3db
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
4 changed files with 81 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/profile/index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Register - Temperature Alarm</title> <title>Register - Temperature Alarm</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles/common.css">
<link rel="stylesheet" href="/styles/auth.css"> <link rel="stylesheet" href="/styles/auth.css">
<link rel="stylesheet" href="/styles/profile.css"> <link rel="stylesheet" href="/styles/profile.css">
<script defer type="module" src="/scripts/profile.js"></script> <script defer type="module" src="/scripts/profile.js"></script>
@ -67,7 +68,7 @@
<button type="submit">Change Password</button> <button type="submit">Change Password</button>
<div id="form-error"></div> <div id="password-error" class="error"></div>
</div> </div>
</form> </form>
</div> </div>

105
frontend/scripts/profile.js
View File

@ -8,10 +8,10 @@ var username;
var email; var email;
get().then((res) => { get().then((res) => {
username = res.userName; username = res.userName;
email = res.email; email = res.email;
var table = document.getElementById(`profileCard`); var table = document.getElementById(`profileCard`);
table.innerHTML += ` table.innerHTML += `
<div class="pfp"> <div class="pfp">
<img style="width:200px; height:200px" src="${profileData.pfp}"> <img style="width:200px; height:200px" src="${profileData.pfp}">
</div> </div>
@ -43,79 +43,76 @@ usernameInput.addEventListener("input", checkForChanges);
// Open modals // Open modals
editIconbtn.onclick = () => { editIconbtn.onclick = () => {
document.getElementById("uname").value = username; document.getElementById("uname").value = username;
document.getElementById("email").value = email; document.getElementById("email").value = email;
submitBtn.disabled = true; submitBtn.disabled = true;
editModal.style.display = "block"; editModal.style.display = "block";
}; };
passwordBtn.onclick = () => (pswModal.style.display = "block"); passwordBtn.onclick = () => (pswModal.style.display = "block");
// Close modals when clicking on any close button // Close modals when clicking on any close button
document.querySelectorAll(".close").forEach((closeBtn) => { document.querySelectorAll(".close").forEach((closeBtn) => {
closeBtn.onclick = () => { closeBtn.onclick = () => {
pswModal.style.display = "none"; pswModal.style.display = "none";
editModal.style.display = "none"; editModal.style.display = "none";
document.getElementById("form-error").innerText = ""; document.getElementById("form-error").innerText = "";
document.getElementById("form-error").style.display = "none"; document.getElementById("form-error").style.display = "none";
}; };
}); });
// Close modals when clicking outside // Close modals when clicking outside
window.onclick = (event) => { window.onclick = (event) => {
if (event.target == pswModal || event.target == editModal) { if (event.target == pswModal || event.target == editModal) {
pswModal.style.display = "none"; pswModal.style.display = "none";
editModal.style.display = "none"; editModal.style.display = "none";
document.getElementById("form-error").innerText = ""; document.getElementById("form-error").innerText = "";
document.getElementById("form-error").style.display = "none"; document.getElementById("form-error").style.display = "none";
} }
}; };
document document
.getElementById("editForm") .getElementById("editForm")
.addEventListener("submit", function (event) { .addEventListener("submit", function (event) {
event.preventDefault(); // Prevents default form submission event.preventDefault(); // Prevents default form submission
document.getElementById("form-error").style.display = "none"; document.getElementById("form-error").style.display = "none";
// Call function with form values // Call function with form values
update(emailInput.value, usernameInput.value).then((response) => { update(emailInput.value, usernameInput.value).then((response) => {
if (response?.error) { if (response?.error) {
document.getElementById("form-error").innerText = response.error; document.getElementById("form-error").innerText = response.error;
document.getElementById("form-error").style.display = "block"; document.getElementById("form-error").style.display = "block";
return; return;
} }
location.href = "/profile"; location.href = "/profile";
});
}); });
});
document document
.getElementById("PasswordForm") .getElementById("PasswordForm")
.addEventListener("submit", function (event) { .addEventListener("submit", function (event) {
event.preventDefault(); // Prevents default form submission event.preventDefault(); // Prevents default form submission
document.getElementById("form-error").style.display = "none"; document.getElementById("password-error").style.display = "none";
const oldPassword = document.getElementById("oldpsw").value; const oldPassword = document.getElementById("oldpsw").value;
const newPassword = document.getElementById("psw").value; const newPassword = document.getElementById("psw").value;
const repeatPassword = document.getElementById("rpsw").value; const repeatPassword = document.getElementById("rpsw").value;
if (newPassword !== repeatPassword) { if (newPassword !== repeatPassword) {
let errorDiv = document.getElementById("form-error"); document.getElementById("password-error").style.display = "block";
errorDiv.style.display = "block"; document.getElementById("password-error").innerText = "Passwords do not match!";
errorDiv.innerText = "Passwords do not match!"; return;
return; }
}
updatePassword(oldPassword, newPassword).then((response) => { updatePassword(oldPassword, newPassword)
//error messages do not work .then(() => location.reload())
if (response.error) { .catch(error => {
document.getElementById("form-error").innerText = response.message; document.getElementById("password-error").innerText = error;
document.getElementById("form-error").style.display = "block"; document.getElementById("password-error").style.display = "block";
return; });
}
}); });
});
document.querySelector(".logout-container").addEventListener("click", logout); document.querySelector(".logout-container").addEventListener("click", logout);

2
frontend/scripts/services/users.service.js
View File

@ -39,7 +39,7 @@ export function update(email, username){
} }
export function updatePassword(oldPassword, newPassword){ export function updatePassword(oldPassword, newPassword){
return request("PUT", "/user/update-password", { return request("PUT", "/user/change-password", {
oldPassword, oldPassword,
newPassword, newPassword,
}); });

54
frontend/shared/utils.js
View File

@ -41,36 +41,36 @@ export async function request(method, path, body = null) {
export function checkTokens() { export function checkTokens() {
var token = document.cookie.match(/\bauth-token=([^;\s]+)/); var token = document.cookie.match(/\bauth-token=([^;\s]+)/);
if(token != null){ if (token != null) {
return token[1] return token[1];
} }
const match = document.cookie.match(/\brefresh-token=([^;\s]+)/); const match = document.cookie.match(/\brefresh-token=([^;\s]+)/);
token = match ? match[1] : null; token = match ? match[1] : null;
console.log("refresh "+token);
if(token != null){ if (token != null) {
return fetch(`${address}/user/refreshtoken/${token}`, { return fetch(`${address}/user/refreshtoken/${token}`, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json"
}, },
}) })
.then(async response => { .then(async response => {
if (!response.ok) { if (!response.ok) {
window.location.href = "/login"; location.href = "/login";
return; return;
} }
const json = await response.json() const json = await response.json()
document.cookie = `auth-token=${json.token}; Path=/`; document.cookie = `auth-token=${json.token}; Path=/`;
document.cookie = `refresh-token=${json.refreshToken}; Path=/`; document.cookie = `refresh-token=${json.refreshToken}; Path=/`;
return json.token; return json.token;
}); });
} }
else{
window.location.href = "/login"; location.href = "/login";
}
} }
export function logout() { export function logout() {