errormessages shown to user + updates to refreshtoken

2025-04-10 16:07:45 +02:00 · 2025-04-10 16:07:45 +02:00 · f76ca8f670
commit f76ca8f670
parent 6b4445aa2f
9 changed files with 107 additions and 98 deletions
--- a/backend/Api/BusinessLogic/DeviceLogic.cs
+++ b/backend/Api/BusinessLogic/DeviceLogic.cs
@ -1,9 +1,7 @@
 using Api.DBAccess;
 using Api.Models;
 using Api.Models.Devices;
-using Api.Models.Users;
 using Microsoft.AspNetCore.Mvc;
-using Microsoft.EntityFrameworkCore;
 using Api.AMQP;

 namespace Api.BusinessLogic
@ -29,7 +27,7 @@ namespace Api.BusinessLogic
        {
            var userDetails = await _dbAccess.ReadUserDetails(userId);

-            if (userDetails.Devices.Count == 0) { return new OkObjectResult(new { message = "Could not find any devices connected to the user" }); }
+            if (userDetails.Devices.Count == 0) { return new ConflictObjectResult(new { message = "Could not find any devices connected to the user" }); }


            List<GetDeviceDTO> devices = new List<GetDeviceDTO>();
--- a/backend/Api/BusinessLogic/UserLogic.cs
+++ b/backend/Api/BusinessLogic/UserLogic.cs
@ -258,7 +258,7 @@ namespace Api.BusinessLogic
                _configuration["JwtSettings:Issuer"],
                _configuration["JwtSettings:Audience"],
                claims,
-                expires: DateTime.Now.AddHours(2),
+                expires: DateTime.Now.AddHours(1),
                signingCredentials: creds);

            return new JwtSecurityTokenHandler().WriteToken(token);
--- a/backend/Api/Controllers/UserController.cs
+++ b/backend/Api/Controllers/UserController.cs
@ -18,7 +18,7 @@ namespace Api.Controllers
            _userLogic = userLogic;
        }

-        //[Authorize]
+        [Authorize]
        [HttpGet("get")]
        public async Task<IActionResult> ReadUser()
        {
--- a/frontend/devices/index.html
+++ b/frontend/devices/index.html
@ -6,7 +6,8 @@
    <title>Temperature-Alarm-Web</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/luxon"></script>
-        <link rel="stylesheet" href="/styles/auth.css">
+    <link rel="stylesheet" href="/styles/common.css">
+    <link rel="stylesheet" href="/styles/auth.css">
    <link rel="stylesheet" href="/styles/devices.css" />
    <script defer type="module" src="/scripts/devices.js"></script>
  </head>
@ -26,19 +27,24 @@
          <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 style="display: flex; justify-content: center;">
+            <div class="tableConatiner">
+              <table>
+                <thead>
+                <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>
+              </thead>
+                <tbody id="deviceTable"></tbody>
+              </table>
+            </div>
          </div>
+          <div id="get-error" class="error"></div>
    </div>


@ -52,6 +58,7 @@
            <button type="button" class="cancelbtn">Cancel</button>
            <button type="button" id="deletebtn">Delete</button>
          </div>
+          <div id="delete-error" class="error"></div>
        </div>
      </form>
    </div>
@ -76,8 +83,8 @@
                      <button type="button" id="editbtn">Save Changes</button>
                    </div>
    
-                    <div id="form-error"></div>
-                </div>
+                    <div id="edit-error" class="error"></div>
+                  </div>
            </form>
        </div>
      </div>
@ -98,8 +105,8 @@
                <button type="button" id="addbtn">Add</button>
              </div>

-              <div id="form-error"></div>
-          </form>
+              <div id="add-error" class="error"></div>
+            </form>
      </div>
    </div>
 </div>
--- a/frontend/profile/index.html
+++ b/frontend/profile/index.html
@ -45,7 +45,7 @@
                        <input type="text" placeholder="Enter username" id="uname" required>
        
                        <button id="submitEditBtn" type="submit">Save Changes</button>
-        
+                        <div id="editprofile-error" class="error"></div>
                    </div>
                </form>
            </div>
--- a/frontend/scripts/devices.js
+++ b/frontend/scripts/devices.js
@ -1,10 +1,11 @@
 import { add, getDevices, update, deleteDevice } from "./services/devices.service.js";
-import { devices } from "../mockdata/devices.mockdata.js";
 import { logout } from "../shared/utils.js";

-getDevices().then(res => {
-  buildTable(res)
-})
+getDevices().then((res) => buildTable(res))
+      .catch(error => {
+          document.getElementById("get-error").innerText = error;
+          document.getElementById("get-error").style.display = "block";
+      });


 let selectedId = null; // Store the selected referenceId
@ -23,26 +24,32 @@ function buildTable(data) {
    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: ${luxon.DateTime.fromISO(device.latestLog.date, { zone: "UTC" }).setZone("Europe/Copenhagen").toFormat("DD T")}</td>
-            <td style="width: 90px;">
-                <img class="editIconbtn tableIcons" src="/img/Edit.png" data-id="${device.id}" data-referenceId="${device.referenceId}" data-name="${device.name}" data-tempHigh="${device.tempHigh}" data-tempLow="${device.tempLow}">
-                <img class="trashBtn tableIcons" src="/img/Trash.png" data-id="${device.id}" data-referenceId="${device.referenceId}">
-            </td>
-        `;
-        table.appendChild(row);
-    });
+      const latestLog = device.latestLog;
+      const temperatureText = latestLog
+          ? `Temperature: ${latestLog.temperature}°C, Date: ${luxon.DateTime.fromISO(latestLog.date, { zone: "UTC" }).setZone("Europe/Copenhagen").toFormat("DD T")}`
+          : "No logs yet";
+  
+      const row = document.createElement("tr");
+      row.innerHTML = `
+          <td>${device.referenceId}</td>
+          <td>${device.name}</td>
+          <td>${device.tempHigh}</td>
+          <td>${device.tempLow}</td>
+          <td>${temperatureText}</td>
+          <td style="width: 90px;">
+              <img class="editIconbtn tableIcons" src="/img/Edit.png" data-id="${device.id}" data-referenceId="${device.referenceId}" data-name="${device.name}" data-tempHigh="${device.tempHigh}" data-tempLow="${device.tempLow}">
+              <img class="trashBtn tableIcons" src="/img/Trash.png" data-id="${device.id}" data-referenceId="${device.referenceId}">
+          </td>
+      `;
+      table.appendChild(row);
+  });
+  

    // Attach click event to all trash buttons
    document.querySelectorAll(".trashBtn").forEach((btn) => {
        btn.onclick = function () {
            selectedId = this.getAttribute("data-id"); // Store referenceId
-            // document.getElementById("deleteDeviceHeader").innerHTML = `Delete Device ${this.getAttribute("data-referenceId")}`;
+            document.getElementById("deleteDeviceHeader").innerHTML = `Delete Device ${this.getAttribute("data-referenceId")}`;
            document.getElementById("deleteModal").style.display = "block";
        };
    });
@ -81,6 +88,13 @@ document.querySelectorAll(".cancelbtn").forEach(button => {
      document.getElementById("editModal").style.display = "none";
      document.getElementById("addModal").style.display = "none";

+      document.getElementById("add-error").style.display = "none";
+      document.getElementById("add-error").innerText = "";
+      document.getElementById("delete-error").style.display = "none";
+      document.getElementById("delete-error").innerText = "";
+      document.getElementById("edit-error").style.display = "none";
+      document.getElementById("edit-error").innerText = "";
+
  };
 });

@ -99,26 +113,20 @@ tempLowInput.addEventListener("input", checkForChanges);
 // Delete button logic
 document.getElementById("deletebtn").onclick = () => {
    if (selectedId) {
-        deleteDevice(selectedId).then((response) => {
-          if (response?.error) {
-            document.getElementById("form-error").innerText = response.error;
-            document.getElementById("form-error").style.display = "block";
-            return;
-          }
-          window.location.reload();
+        deleteDevice(selectedId).then(() => location.reload())
+        .catch(error => {
+            document.getElementById("delete-error").innerText = error;
+            document.getElementById("delete-error").style.display = "block";
        });
    }
 };

 document.getElementById("addbtn").onclick = () => {
    const referenceId = document.getElementById("referenceId").value;
-      add(referenceId).then((response) => {
-        if (response?.error) {
-          document.getElementById("form-error").innerText = response.error;
-          document.getElementById("form-error").style.display = "block";
-          return;
-        }
-        window.location.reload();
+      add(referenceId).then(() => location.reload())
+      .catch(error => {
+          document.getElementById("add-error").innerText = error;
+          document.getElementById("add-error").style.display = "block";
      });
 };

@ -129,14 +137,11 @@ document.getElementById("editbtn").onclick = () => {
    const tempLow = document.getElementById("tempLow").value;


-    update(selectedId, name, tempHigh, tempLow).then((response) => {
-          if (response?.error) {
-            document.getElementById("form-error").innerText = response.error;
-            document.getElementById("form-error").style.display = "block";
-            return;
-          }
-          window.location.reload();
-        });
+    update(selectedId, name, tempHigh, tempLow).then(() => location.reload())
+      .catch(error => {
+          document.getElementById("edit-error").innerText = error;
+          document.getElementById("edit-error").style.display = "block";
+      });
  }
 };

--- a/frontend/scripts/profile.js
+++ b/frontend/scripts/profile.js
@ -75,18 +75,13 @@ document
    .addEventListener("submit", function (event) {
        event.preventDefault(); // Prevents default form submission

-        document.getElementById("form-error").style.display = "none";
+        document.getElementById("editprofile-error").style.display = "none";

        // Call function with form values
-        update(emailInput.value, usernameInput.value).then((response) => {
-            if (response?.error) {
-                document.getElementById("form-error").innerText = response.error;
-                document.getElementById("form-error").style.display = "block";
-
-                return;
-            }
-
-            location.href = "/profile";
+        update(emailInput.value, usernameInput.value).then(() => location.reload())
+        .catch(error => {
+            document.getElementById("editprofile-error").innerText = error;
+            document.getElementById("editprofile-error").style.display = "block";
        });
    });

--- a/frontend/shared/utils.js
+++ b/frontend/shared/utils.js
@ -1,7 +1,13 @@
 import { address } from "./constants.js";

 export async function request(method, path, body = null) {
-    const token = await checkTokens()
+    var token = document.cookie.match(/\bauth-token=([^;\s]+)/);
+    if (token != null) {
+        token = token[1];
+    }
+    else{
+        await getTokenByReferenceId(method, path, body);
+    }
    const headers = {};
    headers["Authorization"] = `Bearer ${token}`;

@ -15,9 +21,9 @@ export async function request(method, path, body = null) {
            body: body ? JSON.stringify(body) : undefined,
        })
            .then(async response => {
-                // if (response.status === 401) {
-                //     location.href = "/login";
-                // }
+                if (response.status === 401) {
+                   await getTokenByReferenceId(method, path, body);
+                }

                try {
                    const json = await response.json();
@ -39,44 +45,36 @@ export async function request(method, path, body = null) {
    });
 }

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

            document.cookie = `auth-token=${json.token}; Path=/`;
            document.cookie = `refresh-token=${json.refreshToken}; Path=/`;
+            console.log(json.token);

-            return json.token;
+            return request(method, path, body);
+        })
+        .catch(error => {
+            location.href = "/login";
        });
    }

-    location.href = "/login";
 }

 export function logout() {
    localStorage.removeItem("user");
-    document.cookie = "auth-token=";
-    document.cookie = "refresh-token=";
+    document.cookie = "auth-token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT";
+    document.cookie = "refresh-token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT";
    window.location.href = "/";
 }

--- a/frontend/styles/devices.css
+++ b/frontend/styles/devices.css
@ -30,6 +30,12 @@ table {
 .tableConatiner{
  display: flex;
  justify-content: center;
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+  border: 1px solid #DDD;
+  margin-bottom: 2rem;
+  background-color: white;
 }

 .tableIcons{
@ -79,7 +85,7 @@ table {
  
  /* Add padding and center-align text to the container */
  .container {
-    padding: 16px;
+    margin: 0 2rem;
  }
  
  /* The Modal (background) */