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 0000000..b9931d1 Binary files /dev/null and b/frontend/img/user-32.png differ 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%; + } +