From e803adb387c1faa8a07d9bdd2adf8afa77746397 Mon Sep 17 00:00:00 2001 From: LilleBRG Date: Mon, 24 Mar 2025 11:32:28 +0100 Subject: [PATCH] profile site started on --- frontend/devices/index.html | 0 frontend/home/index.html | 8 +- frontend/img/user-32.png | Bin 0 -> 9683 bytes frontend/mockdata/profile.mockdata.js | 6 ++ frontend/profile/index.html | 65 +++++++++++++++ frontend/scripts/profile.js | 91 +++++++++++++++++++++ frontend/scripts/services/users.service.js | 16 +++- frontend/styles/auth.css | 3 + frontend/styles/profile.css | 72 ++++++++++++++++ 9 files changed, 257 insertions(+), 4 deletions(-) create mode 100644 frontend/devices/index.html create mode 100644 frontend/img/user-32.png create mode 100644 frontend/mockdata/profile.mockdata.js diff --git a/frontend/devices/index.html b/frontend/devices/index.html new file mode 100644 index 0000000..e69de29 diff --git a/frontend/home/index.html b/frontend/home/index.html index 2f7d6a8..403e197 100644 --- a/frontend/home/index.html +++ b/frontend/home/index.html @@ -5,12 +5,18 @@ Temperature-Alarm-Web + +
Home +
+ Devices + Profile +
@@ -27,6 +33,4 @@
- - diff --git a/frontend/img/user-32.png b/frontend/img/user-32.png new file mode 100644 index 0000000000000000000000000000000000000000..b9931d1773721c6b22a3764a57e628ee798acd35 GIT binary patch literal 9683 zcmbVxc|4R~|Mz8U?2|oNrYxx>*$Wwx{VPdit4WeABti^h$r2$HQCSPwCVSS&5~*b0 zV;ISjWu_PxGjn;a?(g@$@7M45*YiAQ=FD8LYtEVL^FE*De9rr`H@-Iu>^C(uF$9>H zn1ILd3)q_jqzr=GZvlY0IdB{R0CxB{et-qOVuD})YI{?FKETYx^ymFgV_{?Y)Aq5l zvalicArOB$I|mmBJ3A*k0>R0{$;rhHHv|VSl82l3&-I@_`7`~`EcngMj$r>Y;{UDf zy$AT%fkvQ#g-Hrv=3`>vW7_KkP_V3QFrq)8{%K6iEUaw%V39bv-~qM!Vewg5m|
2sBBLYD@}GAcLjMsjcpiyRO=D0@Wi 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 literal 0 HcmV?d00001 diff --git a/frontend/mockdata/profile.mockdata.js b/frontend/mockdata/profile.mockdata.js new file mode 100644 index 0000000..660eb90 --- /dev/null +++ b/frontend/mockdata/profile.mockdata.js @@ -0,0 +1,6 @@ +export const profileData = { + id: 1, + username: "LilleBRG", + email: "lillebrg@gmail.com", + pfp: "/img/user-32.png" +} \ No newline at end of file diff --git a/frontend/profile/index.html b/frontend/profile/index.html index e69de29..3592996 100644 --- a/frontend/profile/index.html +++ b/frontend/profile/index.html @@ -0,0 +1,65 @@ + + + + + Register - Temperature Alarm + + + + + + +
+
+
+ + + +
+
+ + + + + + + diff --git a/frontend/scripts/profile.js b/frontend/scripts/profile.js index e69de29..ccca75d 100644 --- a/frontend/scripts/profile.js +++ b/frontend/scripts/profile.js @@ -0,0 +1,91 @@ +import { profileData } from "../mockdata/profile.mockdata.js"; + +var table = document.getElementById(`profileCard`); +table.innerHTML += ` +
+ +
+
+

${profileData.username}

+

${profileData.email}

+
+
`; + +var pswModal = document.getElementById("PasswordModal"); +var editModal = document.getElementById("editModal"); +var editBtn = document.getElementById("openEditModal"); +var passwordBtn = document.getElementById("openPasswordModal"); + +// Open modals +editBtn.onclick = () => (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"; + }; +}); + +// 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("editForm").addEventListener("submit", function(event) { + event.preventDefault(); // Prevents default form submission + + document.getElementById("form-error-edit").style.display = "none"; + + // Get form values + const email = document.getElementById("email").value; + const username = document.getElementById("uname").value; + + // Call function with form values + update(email, username) + .then(response => { + if (response?.error) { + document.getElementById("form-error").innerText = response.error; + document.getElementById("form-error").style.display = "block"; + + return; + } + + location.href = "/login"; + }); +}); + +document.getElementById("PasswordForm").addEventListener("submit", function(event) { + event.preventDefault(); // Prevents default form submission + + document.getElementById("form-error-password").style.display = "none"; + + // Get form values + 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-password"); + errorDiv.style.display = "block"; + errorDiv.innerText = "Passwords do not match!"; + return; + } + + // Call function with form values + update(email, username) + .then(response => { + if (response?.error) { + document.getElementById("form-error").innerText = response.error; + document.getElementById("form-error").style.display = "block"; + + return; + } + + location.href = "/login"; + }); +}); diff --git a/frontend/scripts/services/users.service.js b/frontend/scripts/services/users.service.js index f95a076..4b5fa02 100644 --- a/frontend/scripts/services/users.service.js +++ b/frontend/scripts/services/users.service.js @@ -28,13 +28,25 @@ export function create(email, username, password, repeatPassword){ .catch(err => { error: err.message }); } -function update(email, username, password){ +export function update(email, username){ return fetch(`${address}/user/update`, { method: "PATCH", headers: { "Content-Type": "application/json" }, - body: JSON.stringify({email: email, username: username, password: password}) + body: JSON.stringify({email: email, username: username}) + }) + .then(handleResponse) + .catch(err => { error: err.message }); +} + +export function updatePassword(oldPassword, newPassword){ + return fetch(`${address}/user/update-password`, { + method: "PATCH", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({oldPassword: oldPassword, newPassword: newPassword}) }) .then(handleResponse) .catch(err => { error: err.message }); diff --git a/frontend/styles/auth.css b/frontend/styles/auth.css index 1074997..bb7a66a 100644 --- a/frontend/styles/auth.css +++ b/frontend/styles/auth.css @@ -49,3 +49,6 @@ button:hover { margin-top: 1rem; } +button{ + border-radius: 20px; +} diff --git a/frontend/styles/profile.css b/frontend/styles/profile.css index e69de29..3d2c752 100644 --- a/frontend/styles/profile.css +++ b/frontend/styles/profile.css @@ -0,0 +1,72 @@ +#profileCard{ + margin-top: 50px; + justify-content: center; + align-items: center; + flex-direction: column; + display: flex; +} + +.userData{ + margin-top: 10px; + justify-content: center; + align-items: center; + flex-direction: column; + display: flex; +} + +h2{ + margin: 0; +} + +.btnContainer{ + justify-content: center; + align-items: center; + display: flex; +} + +.btn{ + margin-inline: 5px; + width: 170px; +} + +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + } + + .modal-content { + background-color: #fefefe; + margin: auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + } + + /* The Close Button */ +.close { + color: #aaaaaa; + float: right; + font-size: 28px; + font-weight: bold; + } + + .close:hover, + .close:focus { + color: #000; + text-decoration: none; + cursor: pointer; + } + + .form-container{ + width: 90%; + } +