devices half made

backend/Api/BusinessLogic/DeviceLogic.cs

@@ -29,12 +29,21 @@ namespace Api.BusinessLogic
             return new OkObjectResult(devices);
         }
 
-        public async Task<IActionResult> AddDevice(Device device, int userId)
+        public async Task<IActionResult> AddDevice(string referenceId, int userId)
         {
             var profile = await _dbAccess.ReadUser(userId);
 
             if (profile == null) { return new ConflictObjectResult(new { message = "Could not find user" }); }
 
+            Device device = new Device
+            {
+                Name = "Undefined",
+                TempHigh = 0,
+                TempLow = 0,
+                ReferenceId = referenceId,
+                Logs = new List<TemperatureLogs>(),
+            };
+
             return await _dbAccess.CreateDevice(device, userId);
         }
 

backend/Api/BusinessLogic/UserLogic.cs

@@ -1,5 +1,6 @@
 using Api.DBAccess;
 using Api.Models;
+using Api.Models.User;
 using Microsoft.AspNetCore.Http.HttpResults;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.IdentityModel.Tokens;
@@ -22,6 +23,14 @@ namespace Api.BusinessLogic
             _configuration = configuration;
         }
 
+        public async Task<IActionResult> getUser(int userId)
+        {
+            User user = await _dbAccess.getUser(userId);
+
+            if (user == null || user.Id == 0) { return new ConflictObjectResult(new { message = "Could not find user" }); }
+            return new OkObjectResult(new { user.Id, user.UserName, user.Email });
+        }
+
         public async Task<IActionResult> RegisterUser(User user)
         {
             if (!new Regex(@".+@.+\..+").IsMatch(user.Email))
@@ -47,7 +56,6 @@ namespace Api.BusinessLogic
 
             return await _dbAccess.CreateUser(user);
         }
-
         public async Task<IActionResult> Login(Login login)
         {
             User user = await _dbAccess.Login(login);
@@ -59,30 +67,37 @@ namespace Api.BusinessLogic
             if (user.Password == hashedPassword)
             {
                 var token = GenerateJwtToken(user);
-                return new OkObjectResult(new { token, user.UserName, user.Id });
+                return new OkObjectResult(new { token, user.Id});
             }
 
             return new ConflictObjectResult(new { message = "Invalid password" });
         }
 
-        public async Task<IActionResult> EditProfile(User user, int userId)
+        public async Task<IActionResult> EditProfile(EditUserRequest userRequest, int userId)
         {
-            if (!new Regex(@".+@.+\..+").IsMatch(user.Email))
+            return await _dbAccess.UpdateUser(userRequest, userId);
+        }
+
+        public async Task<IActionResult> changePassword(ChangePasswordRequest passwordRequest, int userId)
+        {
+            var user = await _dbAccess.ReadUser(userId);
+
+            string hashedPassword = ComputeHash(passwordRequest.OldPassword, SHA256.Create(), user.Salt);
+
+            if (user.Password != hashedPassword)
             {
-                return new ConflictObjectResult(new { message = "Invalid email address" });
+                return new ConflictObjectResult(new { message = "Old password is incorrect" });
+
             }
 
-            if (!PasswordSecurity(user.Password))
+            if (!PasswordSecurity(passwordRequest.NewPassword))
             {
-                return new ConflictObjectResult(new { message = "Password is not up to the security standard" });
+                return new ConflictObjectResult(new { message = "New password is not up to the security standard" });
             }
 
-            var profile = await _dbAccess.ReadUser(userId);
+            string hashedNewPassword = ComputeHash(passwordRequest.NewPassword, SHA256.Create(), user.Salt);
 
-            string hashedPassword = ComputeHash(user.Password, SHA256.Create(), profile.Salt);
-            user.Password = hashedPassword;
-
-            return await _dbAccess.UpdateUser(user, userId);
+            return await _dbAccess.updatePassword(hashedNewPassword, userId);
         }
 
         public async Task<IActionResult> DeleteUser(int userId)

backend/Api/Controllers/DeviceController.cs

@@ -30,9 +30,9 @@ namespace Api.Controllers
 
         [Authorize]
         [HttpPost("adddevice/{userId}")]
-        public async Task<IActionResult> AddDevice([FromBody] Device device, int userId)
+        public async Task<IActionResult> AddDevice([FromBody] string referenceId, int userId)
         {
-            return await _deviceLogic.AddDevice(device, userId);
+            return await _deviceLogic.AddDevice(referenceId, userId);
         }
 
         [Authorize]
@@ -48,5 +48,13 @@ namespace Api.Controllers
         {
             return await _deviceLogic.EditDevice(device, deviceId);
         }
+
+
+        [Authorize]
+        [HttpDelete("Delete/{referenceId}")]
+        public async Task<IActionResult> EditDevice(string referenceId)
+        {
+            return await _deviceLogic.EditDevice(referenceId);
+        }
     }
 }

backend/Api/Controllers/UserController.cs

@@ -1,12 +1,8 @@
 using Microsoft.AspNetCore.Mvc;
 using Api.Models;
-using Api.DBAccess;
-using Microsoft.IdentityModel.Tokens;
-using System.IdentityModel.Tokens.Jwt;
-using System.Security.Claims;
-using System.Text;
 using Microsoft.AspNetCore.Authorization;
 using Api.BusinessLogic;
+using Api.Models.User;
 
 namespace Api.Controllers
 {
@@ -21,31 +17,43 @@ namespace Api.Controllers
             _userLogic = userLogic;
         }
 
-        [HttpPost("Login")]
+        //[Authorize]
+        [HttpGet("{userId}")]
+        public async Task<IActionResult> GetUSer(int userId)
+        {
+            return await _userLogic.getUser(userId);
+        }
+        [HttpPost("login")]
         public async Task<IActionResult> Login([FromBody] Login login)
         {
             return await _userLogic.Login(login);
         }
 
-        [HttpPost("Create")]
+        [HttpPost("create")]
         public async Task<IActionResult> CreateUser([FromBody] User user)
         {
             return await _userLogic.RegisterUser(user);
         }
 
-        [Authorize]
-        [HttpPut("Edit/{userId}")]
-        public async Task<IActionResult> EditUser([FromBody] User user, int userId)
+        //[Authorize]
+        [HttpPut("edit/{userId}")]
+        public async Task<IActionResult> EditUser([FromBody] EditUserRequest userRequest, int userId)
         {
-            return await _userLogic.EditProfile(user, userId);
+            return await _userLogic.EditProfile(userRequest, userId);
+        }
+
+        //[Authorize]
+        [HttpPut("change-password/{userId}")]
+        public async Task<IActionResult> changePassword([FromBody] ChangePasswordRequest passwordRequest, int userId)
+        {
+            return await _userLogic.changePassword(passwordRequest, userId);
         }
 
         [Authorize]
-        [HttpDelete("Delete/{userId}")]
+        [HttpDelete("delete/{userId}")]
         public async Task<IActionResult> DeleteUser(int userId)
         {
             return await _userLogic.DeleteUser(userId);
         }
-
     }
 }

backend/Api/DBAccess/DBAccess.cs

@@ -5,6 +5,7 @@ using System.Runtime.Intrinsics.Arm;
 using System.Security.Cryptography;
 using Microsoft.AspNetCore.Mvc;
 using static System.Runtime.InteropServices.JavaScript.JSType;
+using Api.Models.User;
 
 
 namespace Api.DBAccess
@@ -18,6 +19,12 @@ namespace Api.DBAccess
             _context = context;
         }
 
+        public async Task<User> getUser(int userId)
+        {
+            return await _context.Users.FirstOrDefaultAsync(u => u.Id == userId);
+        }
+
+
         public async Task<IActionResult> CreateUser(User user)
         {
             var users = await _context.Users.ToListAsync();
@@ -64,7 +71,7 @@ namespace Api.DBAccess
             return await _context.Users.FirstOrDefaultAsync(u => u.Id == userId);
         }
 
-        public async Task<IActionResult> UpdateUser(User user, int userId)
+        public async Task<IActionResult> UpdateUser(EditUserRequest user, int userId)
         {
             var profile = await _context.Users.FirstOrDefaultAsync(u => u.Id == userId);
             var users = await _context.Users.ToListAsync();
@@ -73,22 +80,39 @@ namespace Api.DBAccess
 
             foreach (var item in users)
             {
-                if (item.UserName == user.UserName)
+                if (item.UserName == user.UserName && userId != item.Id)
                 {
                     return new ConflictObjectResult(new { message = "Username is already in use." });
                 }
 
-                if (item.Email == user.Email)
+                if (item.Email == user.Email && userId != item.Id)
                 {
                     return new ConflictObjectResult(new { message = "Email is being used already" });
                 }
             }
 
-            profile.UserName = user.UserName;
+            if(user.Email != "" && user.Email != null)
+                profile.Email = user.Email;
 
-            profile.Email = user.Email;
+            if (user.UserName != "" && user.UserName != null)
+                profile.UserName = user.UserName;
 
-            profile.Password = user.Password;
+
+
+            bool saved = await _context.SaveChangesAsync() == 1;
+
+            if (saved) { return new OkObjectResult(profile); }
+
+            return new ConflictObjectResult(new { message = "Could not save to database" });
+        }
+
+        public async Task<IActionResult> updatePassword(string newPassword, int userId)
+        {
+            var profile = await _context.Users.FirstOrDefaultAsync(u => u.Id == userId);
+
+            if (profile == null) { return new ConflictObjectResult(new { message = "User does not exist" }); }
+
+            profile.Password = newPassword;
 
             bool saved = await _context.SaveChangesAsync() == 1;
 

backend/Api/DBAccess/DBContext.cs

@@ -1,5 +1,6 @@
 using Microsoft.EntityFrameworkCore;
 using Api.Models;
+using Api.Models.User;
 
 namespace Api
 {

backend/Api/Models/User/ChangePasswordRequest.cs

@@ -0,0 +1,8 @@
+namespace Api.Models.User
+{
+    public class ChangePasswordRequest
+    {
+        public string OldPassword { get; set; }
+        public string NewPassword { get; set; }
+    }
+}

backend/Api/Models/User/EditUserRequest.cs

@@ -0,0 +1,8 @@
+namespace Api.Models.User
+{
+    public class EditUserRequest
+    {
+        public string UserName { get; set; }
+        public string Email { get; set; }
+    }
+}

backend/Api/Models/User/User.cs

@@ -1,4 +1,4 @@
-namespace Api.Models
+namespace Api.Models.User
 {
     public class User
     {

frontend/devices/index.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <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/auth.css">
+    <link rel="stylesheet" href="/styles/devices.css" />
+    <script defer type="module" src="/scripts/devices.js"></script>
+    <script defer type="module" src="/shared/utils.js"></script>
+  </head>
+
+  <body>
+    <div id="container">
+        <div class="topnav">
+            <a href="/home/index.html">Home</a>
+            <a class="active" href="/devices/index.html">Devices</a>
+            <div style="display: flex; justify-content: flex-end;">
+              <a href="/profile/index.html">Profile</a>
+              <span class="logoutContainer">
+                <img class="logout" src="/img/logout.png">
+              </span>
+            </div>
+          </div>
+          <div class="addDeviceContainer">
+            <button id="addDevice">Add Device</button>
+          </div>
+          <div class="tableConatiner">
+            <table>
+              <tr>
+                <th>Id</th>
+                <th>Placement(name)</th>
+                <th>Set Temp High</th>
+                <th>Set Temp Low</th>
+                <th>Latest Meassurement</th>
+                <th></th>
+              </tr>
+              <tbody id="deviceTable"></tbody>
+            </table>
+          </div>
+    </div>
+
+
+    <div id="deleteModal" class="modal">
+      <form class="modal-content">
+        <div class="container">
+          <h1 class="deviceHeader" id="deleteDeviceHeader"></h1>
+          <p>Are you sure you want to delete this device from your account?</p>
+        
+          <div class="clearfix">
+            <button type="button" class="cancelbtn">Cancel</button>
+            <button type="button" id="deletebtn">Delete</button>
+          </div>
+        </div>
+      </form>
+    </div>
+
+    <div id="editModal" class="modal">
+      <div class="modal-content">
+        <div class="container">
+          <h1 class="deviceHeader" id="editDeviceHeader"></h1>
+          <form id="editForm">
+                <div class="form-container">
+                    <label for="name"><b>Name</b></label>
+                    <input type="text" placeholder="Enter a name for the placement" id="name" required>
+  
+                    <label for="tempHigh"><b>High Temperature</b></label>
+                    <input type="text" placeholder="Edit the high temperature" id="tempHigh" required>
+    
+                    <label for="tempLow"><b>Low Temperature</b></label>
+                    <input type="text" placeholder="Edit the low temperature" id="tempLow" required>
+    
+                    <div class="clearfix">
+                      <button type="button" class="cancelbtn">Cancel</button>
+                      <button type="button" id="editbtn">Save Changes</button>
+                    </div>
+    
+                    <div id="form-error"></div>
+                </div>
+            </form>
+        </div>
+      </div>
+  </div>
+
+  <div id="addModal" class="modal">
+    <div class="modal-content">
+      <div class="container">
+        <h1 class="deviceHeader">Add Device</h1>
+        <form id="editForm">
+              <div class="form-container">
+                  <label for="referenceId"><b>Device Id</b></label>
+                  <input type="text" placeholder="Enter the device Id" id="referenceId" required>  
+                  <div id="form-error"></div>
+              </div>
+              <div class="clearfix">
+                <button type="button" class="cancelbtn">Cancel</button>
+                <button type="button" id="addbtn">Add</button>
+              </div>
+
+              <div id="form-error"></div>
+          </form>
+      </div>
+    </div>
+</div>
+  </body>
+</html>

frontend/home/index.html

@@ -5,32 +5,39 @@
     <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/auth.css">
     <link rel="stylesheet" href="/styles/home.css" />
     <script type="module" src="/scripts/home.js"></script>
+    <script defer type="module" src="/shared/utils.js"></script>
   </head>
 
   <body>
     <div id="container">
       <div class="topnav">
         <a class="active" href="/home/index.html">Home</a>
+        <a href="/devices/index.html">Devices</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>
+          <a href="/profile/index.html">Profile</a>
+          <span class="logoutContainer">
+            <img class="logout" src="/img/logout.png">
+          </span>
         </div>
       </div>
       <div class="chartContainer">
         <canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
       </div>
-      <table>
-        <tr>
-          <th>Name</th>
-          <th>Temperature</th>
-          <th>Date</th>
-          <th>TempHigh</th>
-          <th>TempLow</th>
-        </tr>
-        <tbody id="TemperatureTable"></tbody>
-      </table>
+      <div class="tableConatiner">
+        <table>
+          <tr>
+            <th>Name</th>
+            <th>Temperature</th>
+            <th>Date</th>
+            <th>TempHigh</th>
+            <th>TempLow</th>
+          </tr>
+          <tbody id="TemperatureTable"></tbody>
+        </table>
+      </div>
     </div>
   </body>
 </html>

frontend/index.html

@@ -4,6 +4,8 @@
         <meta charset="UTF-8" />
         <title>Temperature Alarm</title>
         <link rel="stylesheet" href="/styles/frontpage.css">
+        <link rel="stylesheet" href="/styles/auth.css">
+
     </head>
     <body>
         <main>

frontend/login/index.html

@@ -20,9 +20,6 @@
 
                 <button type="submit">Login</button>
                 <div class="details">
-                    <label>
-                        <input type="checkbox" name="remember"> Remember me
-                    </label>
                     <span>
                         Dont have an account? <a href="/register">Register</a>
                     </span>

frontend/mockdata/devices.mockdata.js

@@ -0,0 +1,3 @@
+export const devices = [
+    {referenceId: "DKOFG", name: "Kitchen", tempHigh: 23.0, tempLow: 23.0, latestLog: { id: 1, temperature: 18.9, date: "2025-03-19T17:00:00Z", tempHigh: 22.0, tempLow: 18.0 }}
+]

frontend/profile/index.html

@@ -7,9 +7,20 @@
         <link rel="stylesheet" href="/styles/auth.css">
         <link rel="stylesheet" href="/styles/profile.css">
         <script defer type="module" src="/scripts/profile.js"></script>
+        <script defer type="module" src="/shared/utils.js"></script>
     </head>
     <body>
         <div id="container">
+            <div class="topnav">
+                <a href="/home/index.html">Home</a>
+                <a href="/devices/index.html">Devices</a>
+                <div style="display: flex; justify-content: flex-end;">
+                  <a class="active" href="/profile/index.html">Profile</a>
+                  <span class="logoutContainer">
+                    <img class="logout" src="/img/logout.png">
+                  </span>
+                </div>
+              </div>
             <div id="profileCard"></div>
             <div class="btnContainer">
                 <button class="btn" id="openEditModal">Edit</button>
@@ -25,14 +36,13 @@
                 <form id="editForm">
                     <div class="form-container">
                         <label for="email"><b>Email</b></label>
-                        <input type="email" placeholder="Enter email "id="email" required>
+                        <input type="email" placeholder="Enter email "id="email">
         
                         <label for="uname"><b>Username</b></label>
-                        <input type="text" placeholder="Enter username" id="uname" required>
+                        <input type="text" placeholder="Enter username" id="uname">
         
                         <button type="submit">Save Changes</button>
         
-                        <div class="error-text" id="form-error-edit"></div>
                     </div>
                 </form>
             </div>
@@ -55,7 +65,7 @@
         
                         <button type="submit">Change Password</button>
         
-                        <div class="error-text" id="form-error-password"></div>
+                        <div id="form-error"></div>
                     </div>
                 </form>
             </div>

frontend/register/index.html

@@ -10,7 +10,7 @@
     <body>
         <form id="registerForm">
             <div class="form-container">
-                <h1>Create Account</h1>
+                <h1>Sign Up</h1>
 
                 <label for="email"><b>Email</b></label>
                 <input type="email" placeholder="Enter email "id="email" required>

frontend/scripts/devices.js

@@ -0,0 +1,90 @@
+import { getDevicesOnUserId, deleteDevice, update, add } from "./services/devices.service.js";
+import { devices } from "../mockdata/devices.mockdata.js";
+
+let id = localStorage.getItem("id");
+// getDevicesOnUserId(id).then(res => {
+//     buildTable(res)
+// })
+buildTable(devices);
+
+let selectedReferenceId = null; // Store the selected referenceId
+
+function buildTable(data) {
+    var table = document.getElementById("deviceTable");
+    table.innerHTML = ""; // Clear existing rows before adding new ones
+
+    data.forEach((device) => {
+        var row = document.createElement("tr");
+        row.innerHTML = `
+            <td>${device.referenceId}</td>
+            <td>${device.name}</td>
+            <td>${device.tempHigh}</td>
+            <td>${device.tempLow}</td>
+            <td>Temperature: ${device.latestLog.temperature}°C, Date: ${device.latestLog.date}</td>
+            <td style="width: 90px;">
+                <img class="editIconbtn tableIcons" src="/img/Edit.png" data-referenceid="${device.referenceId}">
+                <img class="trashBtn tableIcons" src="/img/Trash.png" data-referenceid="${device.referenceId}">
+            </td>
+        `;
+        table.appendChild(row);
+    });
+
+    document.getElementById("addDevice").onclick = () => {
+      document.getElementById("addModal").style.display = "block";
+
+    }
+
+    // Attach click event to all trash buttons
+    document.querySelectorAll(".trashBtn").forEach((btn) => {
+        btn.onclick = function () {
+            selectedReferenceId = this.getAttribute("data-referenceid"); // Store referenceId
+            document.getElementById("deleteDeviceHeader").innerHTML = `Delete Device ${selectedReferenceId}`;
+            document.getElementById("deleteModal").style.display = "block";
+        };
+    });
+
+    // Attach click event to all trash buttons
+    document.querySelectorAll(".editIconbtn").forEach((btn) => {
+      btn.onclick = function () {
+          selectedReferenceId = this.getAttribute("data-referenceid"); // Store referenceId
+          document.getElementById("editDeviceHeader").innerHTML = `Edit Device ${selectedReferenceId}`;
+          document.getElementById("editModal").style.display = "block";
+      };
+  });
+}
+
+document.querySelectorAll(".cancelbtn").forEach(button => {
+  button.onclick = () => {
+      document.getElementById("deleteModal").style.display = "none";
+      document.getElementById("editModal").style.display = "none";
+      document.getElementById("addModal").style.display = "none";
+
+  };
+});
+// Delete button logic
+document.getElementById("deletebtn").onclick = () => {
+    if (selectedReferenceId) {
+        deleteDevice(selectedReferenceId); // Call delete function with referenceId
+        document.getElementById("deleteModal").style.display = "none";
+        window.location.reload();
+    }
+};
+
+document.getElementById("addbtn").onclick = () => {
+    const referenceId = document.getElementById("referenceId").value;
+      add(referenceId); // Call delete function with referenceId
+      document.getElementById("deleteModal").style.display = "none";
+      window.location.reload();
+};
+
+document.getElementById("editbtn").onclick = () => {
+  if (selectedReferenceId) {
+    const name = document.getElementById("name").value;
+    const tempHigh = document.getElementById("tempHigh").value;
+    const tempLow = document.getElementById("tempLow").value;
+
+    update(selectedReferenceId, name, tempHigh, tempLow); // Call delete function with referenceId
+      document.getElementById("deleteModal").style.display = "none";
+      window.location.reload();
+  }
+};

frontend/scripts/home.js

@@ -62,23 +62,3 @@ function buildTable(data) {
     table.innerHTML += row;
   });
 }
-
-// Get the modal
-var modal = document.getElementById("chartModal");
-var btn = document.getElementById("myBtn");
-var span = document.getElementsByClassName("close")[0];
-btn.onclick = function () {
-  modal.style.display = "block";
-};
-
-// When the user clicks on <span> (x), close the modal
-span.onclick = function () {
-  modal.style.display = "none";
-};
-
-// When the user clicks anywhere outside of the modal, close it
-window.onclick = function (event) {
-  if (event.target == modal) {
-    modal.style.display = "none";
-  }
-};

frontend/scripts/login.js

@@ -13,9 +13,13 @@ document.getElementById("loginForm").addEventListener("submit", function(event)
             if (response.error) {
                 document.getElementById("form-error").innerText = response.error;
                 document.getElementById("form-error").style.display = "block";
-
                 return;
             }
+            else{
+                if (typeof(Storage) !== "undefined") {
+                    localStorage.setItem("id", response.id);
+                }
+            }
 
             location.href = "/home";
         });

frontend/scripts/profile.js

@@ -1,23 +1,32 @@
 import { profileData } from "../mockdata/profile.mockdata.js";
+import { get } from "./services/users.service.js";
+import { update } from "./services/users.service.js";
+import { updatePassword } from "./services/users.service.js";
 
-var table = document.getElementById(`profileCard`);
+let id = localStorage.getItem("id");
+
+get(id).then(res => {
+    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>
+        <h2>${res.userName}</h2>
+        <h2>${res.email}</h2>
     </div>
 </div>`;
+})
+
+
 
 var pswModal = document.getElementById("PasswordModal");
 var editModal = document.getElementById("editModal");
-var editBtn = document.getElementById("openEditModal");
+var editIconbtn = document.getElementById("openEditModal");
 var passwordBtn = document.getElementById("openPasswordModal");
 
 // Open modals
-editBtn.onclick = () => (editModal.style.display = "block");
+editIconbtn.onclick = () => (editModal.style.display = "block");
 passwordBtn.onclick = () => (pswModal.style.display = "block");
 
 // Close modals when clicking on any close button
@@ -25,6 +34,8 @@ 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";
     };
 });
 
@@ -33,20 +44,22 @@ 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-edit").style.display = "none";
+    document.getElementById("form-error").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)
+    update(email, username, id)
         .then(response => {
             if (response?.error) {
                 document.getElementById("form-error").innerText = response.error;
@@ -55,37 +68,33 @@ document.getElementById("editForm").addEventListener("submit", function(event) {
                 return;
             }
 
-            location.href = "/login";
+            location.href = "/profile";
         });
 });
 
 document.getElementById("PasswordForm").addEventListener("submit", function(event) {
     event.preventDefault(); // Prevents default form submission
 
-    document.getElementById("form-error-password").style.display = "none";
+    document.getElementById("form-error").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");
+        let errorDiv = document.getElementById("form-error");
         errorDiv.style.display = "block"; 
         errorDiv.innerText = "Passwords do not match!";
         return;
     }
 
-    // Call function with form values
-    update(email, username)
+    updatePassword(oldPassword, newPassword, id)
         .then(response => {
-            if (response?.error) {
-                document.getElementById("form-error").innerText = response.error;
+            //error messages do not work
+            if (response.error) {
+                document.getElementById("form-error").innerText = response.message;
                 document.getElementById("form-error").style.display = "block";
-
                 return;
             }
-
-            location.href = "/login";
         });
 });

frontend/scripts/services/devices.service.js

@@ -1,25 +1,50 @@
-import { address } from "../../shared/constants";
+import { address } from "../../shared/constants.js";
 
-export function getDevicesOnUserId(id) {
-    fetch(`${address}/get-on-user-id`, {
+export function getDevicesOnUserId(userId) {
+    fetch(`${address}/device/${userId}`, {
         method: "GET",
         headers: {
             "Content-Type": "application/json"
         },
-        body: JSON.stringify({ id: id })
     })
     .then(response => response.json())
     .then(data => console.log("Success:", data))
     .catch(error => console.error("Error:", error));
 }
 
-export function update(ids) {
-    fetch(`${address}/get-on-user-id`, {
-        method: "PATCH",
+export function add(id) {
+    fetch(`${address}/device`, {
+        method: "CREATE",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ referenceId: id})
+    })
+    .then(response => response.json())
+    .then(data => console.log("Success:", data))
+    .catch(error => console.error("Error:", error));
+}
+
+export function update(id, name, tempHigh, tempLow) {
+    fetch(`${address}/device/${id}`, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ name: name, tempHigh: tempHigh, tempLow: tempLow })
+    })
+    .then(response => response.json())
+    .then(data => console.log("Success:", data))
+    .catch(error => console.error("Error:", error));
+}
+
+export function deleteDevice(referenceId) {
+    console.log(referenceId)
+    fetch(`${address}/device/${referenceId}`, {
+        method: "DELETE",
         headers: {
             "Content-Type": "application/json"
         },
-        body: JSON.stringify({ ids: ids })
     })
     .then(response => response.json())
     .then(data => console.log("Success:", data))

frontend/scripts/services/users.service.js

@@ -1,6 +1,18 @@
 import { address } from "../../shared/constants.js";
 import { handleResponse } from "../../shared/utils.js";
 
+
+export function get(userId) {
+    return fetch(`${address}/user/${userId}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json"
+        },
+    })
+    .then(handleResponse)
+    .catch(err => { error: err.message });
+}
+
 export function login(usernameOrEmail, password) {
     return fetch(`${address}/user/login`, {
         method: "POST",
@@ -28,9 +40,9 @@ export function create(email, username, password, repeatPassword){
     .catch(err => { error: err.message });
 }
 
-export function update(email, username){
-    return fetch(`${address}/user/update`, {
-        method: "PATCH",
+export function update(email, username, userId){
+    return fetch(`${address}/user/edit/${userId}`, {
+        method: "PUT",
         headers: {
             "Content-Type": "application/json"
         },
@@ -40,9 +52,9 @@ export function update(email, username){
     .catch(err => { error: err.message });
 }
 
-export function updatePassword(oldPassword, newPassword){
-    return fetch(`${address}/user/update-password`, {
-        method: "PATCH",
+export function updatePassword(oldPassword, newPassword, userId){
+    return fetch(`${address}/user/change-password/${userId}`, {
+        method: "PUT",
         headers: {
             "Content-Type": "application/json"
         },

frontend/shared/constants.js

@@ -1 +1 @@
-export const address = "hhttps://temperature.mercantec.tech/api"
+export const address = "http://127.0.0.1:5000/api"

frontend/shared/utils.js

@@ -10,3 +10,9 @@ export async function handleResponse(response) {
     return { error: "Request failed with HTTP code " + response.status };
 }
 
+document.querySelectorAll(".logoutContainer").forEach(closeBtn => {
+    closeBtn.onclick = () => {
+        localStorage.clear();
+        window.location.href = "/index.html";
+    };
+});

frontend/styles/auth.css

@@ -1,5 +1,32 @@
 body {
     font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+}
+
+.topnav {
+    overflow: hidden;
+    background-color: #333;
+  }
+  
+  .topnav a {
+    height: 20px;
+    float: left;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+  }
+  
+  .topnav a:hover, .topnav span:hover {
+    background-color: #ddd;
+    color: black;
+    cursor: pointer;
+}
+
+.topnav a.active {
+    background-color: #04aa6d;
+    color: white;
 }
 
 /* Full-width input fields */
@@ -15,12 +42,12 @@ input[type=text], input[type=password], input[type=email] {
 /* Set a style for all buttons */
 button {
     background-color: #04AA6D;
-    color: white;
     padding: 14px 20px;
     margin: 8px 0;
     border: none;
     cursor: pointer;
     width: 100%;
+    border-radius: 20px;
 }
 
 button:hover {
@@ -35,7 +62,7 @@ button:hover {
 
 .details {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
     margin-top: 0.5rem;
 }
 
@@ -49,6 +76,15 @@ button:hover {
     margin-top: 1rem;
 }
 
-button{
-    border-radius: 20px;
+.logoutContainer{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
 }
+
+.logout{
+  width: 20px;
+  height: 24px;
+}
+

frontend/styles/devices.css

@@ -0,0 +1,150 @@
+table {
+    margin: 20px;
+    font-family: arial, sans-serif;
+    border-collapse: collapse;
+    width: 95%;
+  }
+  
+  td,
+  th {
+    border: 1px solid #dddddd;
+    text-align: left;
+    padding: 8px;
+  }
+  
+  tr:nth-child(even) {
+    background-color: #dddddd;
+}
+
+.addDeviceContainer{
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+#addDevice{
+    width: 120px;
+    margin: 0 20px 0 0;
+}
+
+.tableConatiner{
+  display: flex;
+  justify-content: center;
+}
+
+.tableIcons{
+  margin-inline: 5px;
+  width: 30px;
+  height: 30px;
+}
+
+  .tableIcons:hover {
+    background-color: #ddd;
+    color: black;
+    cursor: pointer;
+  }
+
+
+  button {
+    background-color: #04AA6D;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    opacity: 0.9;
+  }
+  
+  button:hover {
+    opacity:1;
+  }
+  
+  /* Float cancel and delete buttons and add an equal width */
+  .cancelbtn, #addbtn, #deletebtn, #editbtn{
+    float: left;
+    width: 50%;
+  }
+  
+  /* Add a color to the cancel button */
+  .cancelbtn {
+    background-color: #ccc;
+    color: black;
+  }
+  
+  /* Add a color to the delete button */
+  #deletebtn {
+    background-color: #f44336;
+  }
+  
+  /* Add padding and center-align text to the container */
+  .container {
+    padding: 16px;
+  }
+  
+  /* The Modal (background) */
+  .modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: #474e5d;
+    padding-top: 50px;
+  }
+  
+  /* Modal Content/Box */
+  .modal-content {
+    background-color: #fefefe;
+    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
+  }
+  
+  /* Style the horizontal ruler */
+  hr {
+    border: 1px solid #f1f1f1;
+    margin-bottom: 25px;
+  }
+   
+  /* The Modal Close Button (x) */
+  #close {
+    position: absolute;
+    right: 35px;
+    top: 15px;
+    font-size: 40px;
+    font-weight: bold;
+    color: #f1f1f1;
+  }
+  
+  #close:hover,
+  #close:focus {
+    color: #f44336;
+    cursor: pointer;
+  }
+  
+  /* Clear floats */
+  .clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+  
+  /* Change styles for cancel button and delete button on extra small screens */
+  @media screen and (max-width: 300px) {
+    .cancelbtn, .deletebtn {
+       width: 100%;
+    }
+  }
+
+  .form-container{
+    width: 90%;
+  }
+
+  .deviceHeader{
+    display: flex;
+    text-align: center;
+  }

frontend/styles/frontpage.css

@@ -4,7 +4,6 @@
 }
 
 body {
-    margin: 0;
     font-family: sans-serif;
 }
 

frontend/styles/home.css

@@ -1,5 +1,4 @@
 body {
-  margin: 0;
   font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -8,34 +7,11 @@ body {
   opacity: 100%;
 }
 
-.topnav {
-  overflow: hidden;
-  background-color: #333;
-}
-
-.topnav a {
-  float: left;
-  color: #f2f2f2;
-  text-align: center;
-  padding: 14px 16px;
-  text-decoration: none;
-  font-size: 17px;
-}
-
-.topnav a:hover {
-  background-color: #ddd;
-  color: black;
-}
-
-.topnav a.active {
-  background-color: #04aa6d;
-  color: white;
-}
-
 table {
+  margin: 20px;
   font-family: arial, sans-serif;
   border-collapse: collapse;
-  width: 100%;
+  width: 95%;
 }
 
 td,
@@ -77,3 +53,8 @@ tr:nth-child(even) {
 .chartContainer{
   margin: 20px;
 }
+
+.tableConatiner{
+  display: flex;
+  justify-content: center;
+}

frontend/styles/profile.css

@@ -49,6 +49,21 @@ h2{
     padding: 20px;
     border: 1px solid #888;
     width: 80%;
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+  }
+  
+  /* Add Animation */
+  @-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0} 
+    to {top:0; opacity:1}
+  }
+  
+  @keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
   }
   
   /* The Close Button */