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 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Temperature-Alarm-Web</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+ <link rel="stylesheet" href="/styles/home.css" />
+ <script type="module" src="/scripts/home.js"></script>
</head>
<body>
<div id="container">
<div class="topnav">
<a class="active" href="/home/index.html">Home</a>
+ <div style="display: flex; justify-content: flex-end;">
+ <a class="" href="/home/index.html">Devices</a>
+ <a class="" href="/profile/index.html">Profile</a>
+ </div>
</div>
<div class="chartContainer">
<canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
@@ -27,6 +33,4 @@
</table>
</div>
</body>
- <link rel="stylesheet" href="/styles/home.css" />
- <script type="module" src="/scripts/home.js"></script>
</html>
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 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <title>Register - Temperature Alarm</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="/styles/auth.css">
+ <link rel="stylesheet" href="/styles/profile.css">
+ <script defer type="module" src="/scripts/profile.js"></script>
+ </head>
+ <body>
+ <div id="container">
+ <div id="profileCard"></div>
+ <div class="btnContainer">
+ <button class="btn" id="openEditModal">Edit</button>
+ <button class="btn" id="openPasswordModal">Change Password</button>
+
+ </div>
+ </div>
+
+ <div id="editModal" class="modal">
+ <div class="modal-content">
+ <span class="close">×</span>
+ <h2>Edit Username or Email</h2>
+ <form id="editForm">
+ <div class="form-container">
+ <label for="email"><b>Email</b></label>
+ <input type="email" placeholder="Enter email "id="email" required>
+
+ <label for="uname"><b>Username</b></label>
+ <input type="text" placeholder="Enter username" id="uname" required>
+
+ <button type="submit">Save Changes</button>
+
+ <div class="error-text" id="form-error-edit"></div>
+ </div>
+ </form>
+ </div>
+ </div>
+
+ <div id="PasswordModal" class="modal">
+ <div class="modal-content">
+ <span class="close">×</span>
+ <h2>Change Password</h2>
+ <form id="PasswordForm">
+ <div class="form-container">
+ <label for="psw"><b>Old Password</b></label>
+ <input type="password" placeholder="Enter your current password" id="oldpsw" required>
+
+ <label for="psw"><b>New Password</b></label>
+ <input type="password" placeholder="Enter the new password" id="psw" required>
+
+ <label for="rpsw"><b>Repeat New Password</b></label>
+ <input type="password" placeholder="Enter the new password again" id="rpsw" required>
+
+ <button type="submit">Change Password</button>
+
+ <div class="error-text" id="form-error-password"></div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </body>
+</html>
+
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 += `
+ <div class="pfp">
+ <img style="width:200px; height:200px" src="${profileData.pfp}">
+ </div>
+ <div class="userData">
+ <h2>${profileData.username}</h2>
+ <h2>${profileData.email}</h2>
+ </div>
+</div>`;
+
+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%;
+ }
+