From f76ca8f670ecccd2e378f2b38ad3c60726dd4317 Mon Sep 17 00:00:00 2001 From: LilleBRG Date: Thu, 10 Apr 2025 16:07:45 +0200 Subject: [PATCH 1/3] errormessages shown to user + updates to refreshtoken --- backend/Api/BusinessLogic/DeviceLogic.cs | 4 +- backend/Api/BusinessLogic/UserLogic.cs | 2 +- backend/Api/Controllers/UserController.cs | 2 +- frontend/devices/index.html | 41 ++++++----- frontend/profile/index.html | 2 +- frontend/scripts/devices.js | 87 ++++++++++++----------- frontend/scripts/profile.js | 15 ++-- frontend/shared/utils.js | 44 ++++++------ frontend/styles/devices.css | 8 ++- 9 files changed, 107 insertions(+), 98 deletions(-) diff --git a/backend/Api/BusinessLogic/DeviceLogic.cs b/backend/Api/BusinessLogic/DeviceLogic.cs index 9b317a2..d554420 100644 --- 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 devices = new List(); diff --git a/backend/Api/BusinessLogic/UserLogic.cs b/backend/Api/BusinessLogic/UserLogic.cs index 73b2710..0df8d1b 100644 --- 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); diff --git a/backend/Api/Controllers/UserController.cs b/backend/Api/Controllers/UserController.cs index 2cff6a3..cccb28f 100644 --- 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 ReadUser() { diff --git a/frontend/devices/index.html b/frontend/devices/index.html index 52597ab..a88c2b2 100644 --- a/frontend/devices/index.html +++ b/frontend/devices/index.html @@ -6,7 +6,8 @@ Temperature-Alarm-Web - + + @@ -26,19 +27,24 @@
-
- - - - - - - - - - -
IdPlacement(name)Set Temp HighSet Temp LowLatest Meassurement
+
+
+ + + + + + + + + + + + +
IdPlacement(name)Set Temp HighSet Temp LowLatest Meassurement
+
+
@@ -52,6 +58,7 @@ +
@@ -76,8 +83,8 @@ -
- +
+ @@ -98,8 +105,8 @@ -
- +
+ diff --git a/frontend/profile/index.html b/frontend/profile/index.html index 1ad1402..1e049c4 100644 --- a/frontend/profile/index.html +++ b/frontend/profile/index.html @@ -45,7 +45,7 @@ - +
diff --git a/frontend/scripts/devices.js b/frontend/scripts/devices.js index f9c8532..1e8d531 100644 --- 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 = ` - ${device.referenceId} - ${device.name} - ${device.tempHigh} - ${device.tempLow} - Temperature: ${device.latestLog.temperature}°C, Date: ${luxon.DateTime.fromISO(device.latestLog.date, { zone: "UTC" }).setZone("Europe/Copenhagen").toFormat("DD T")} - - - - - `; - 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 = ` + ${device.referenceId} + ${device.name} + ${device.tempHigh} + ${device.tempLow} + ${temperatureText} + + + + + `; + 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"; + }); } }; diff --git a/frontend/scripts/profile.js b/frontend/scripts/profile.js index 47724dd..39c373e 100644 --- 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"; }); }); diff --git a/frontend/shared/utils.js b/frontend/shared/utils.js index c0c94c0..5e3483b 100644 --- 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 = "/"; } diff --git a/frontend/styles/devices.css b/frontend/styles/devices.css index bc0b68f..ef51605 100644 --- 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) */ From 22c397aebb8ea026e39a931b7bea2ec26ed66c20 Mon Sep 17 00:00:00 2001 From: LilleBRG Date: Fri, 11 Apr 2025 09:10:45 +0200 Subject: [PATCH 2/3] all entries on devicelist is now white background --- frontend/styles/devices.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/styles/devices.css b/frontend/styles/devices.css index ef51605..8fc04bf 100644 --- a/frontend/styles/devices.css +++ b/frontend/styles/devices.css @@ -12,9 +12,6 @@ table { padding: 8px; } - tr:nth-child(even) { - background-color: #dddddd; -} .addDeviceContainer{ margin-top: 20px; From a4ebdbc96cc4d7c035443a1dc5a42f0f27d69fa2 Mon Sep 17 00:00:00 2001 From: LilleBRG Date: Fri, 11 Apr 2025 11:37:31 +0200 Subject: [PATCH 3/3] error mesasge on login pops up --- frontend/login/index.html | 2 +- frontend/scripts/login.js | 33 ++++++++++------------ frontend/scripts/services/users.service.js | 18 ++++-------- frontend/shared/utils.js | 9 ++---- 4 files changed, 24 insertions(+), 38 deletions(-) diff --git a/frontend/login/index.html b/frontend/login/index.html index 6e4a727..4746d25 100644 --- a/frontend/login/index.html +++ b/frontend/login/index.html @@ -26,7 +26,7 @@ -
+
diff --git a/frontend/scripts/login.js b/frontend/scripts/login.js index becf53e..dd78d41 100644 --- a/frontend/scripts/login.js +++ b/frontend/scripts/login.js @@ -3,26 +3,23 @@ import { login } from "./services/users.service.js"; document.getElementById("loginForm").addEventListener("submit", function(event) { event.preventDefault(); - document.getElementById("form-error").style.display = "none"; - const emailOrUsername = document.getElementById("emailorusn").value; const password = document.getElementById("psw").value; - login(emailOrUsername, password) - .then(response => { - if(response.token && response.refreshToken){ - document.cookie = `auth-token=${response.token}; Path=/`; - document.cookie = `refresh-token=${response.refreshToken}; Path=/`; - localStorage.setItem("user", JSON.stringify({ - id: response.id, - username: response.userName, - })); - location.href = "/home"; - } - }) - .catch(error => { - document.getElementById("form-error").innerText = error; - document.getElementById("form-error").style.display = "block"; - }); + login(emailOrUsername, password).then((response) => { + if(response.token && response.refreshToken){ + document.cookie = `auth-token=${response.token}; Path=/`; + document.cookie = `refresh-token=${response.refreshToken}; Path=/`; + localStorage.setItem("user", JSON.stringify({ + id: response.id, + username: response.userName, + })); + location.href = "/home"; + } + }) + .catch(error => { + document.getElementById("login-error").innerText = error; + document.getElementById("login-error").style.display = "block"; + }); }); diff --git a/frontend/scripts/services/users.service.js b/frontend/scripts/services/users.service.js index ad5c7a9..848b613 100644 --- a/frontend/scripts/services/users.service.js +++ b/frontend/scripts/services/users.service.js @@ -6,19 +6,11 @@ export function get() { return request("GET",`/user/get`) } -export function login(usernameOrEmail, password) { - return fetch(`${address}/user/login`, { - method: "POST", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify({ password: password, EmailOrUsrn: usernameOrEmail }) - }) - .then(response => { - if (!response.ok) { - return("Request failed with HTTP code " + response.status); - } - return response.json(); + +export function login(emailOrUsrn, password){ + return request("POST", "/user/login", { + emailOrUsrn, + password, }); } diff --git a/frontend/shared/utils.js b/frontend/shared/utils.js index 5e3483b..422a6d2 100644 --- a/frontend/shared/utils.js +++ b/frontend/shared/utils.js @@ -22,7 +22,7 @@ export async function request(method, path, body = null) { }) .then(async response => { if (response.status === 401) { - await getTokenByReferenceId(method, path, body); + getTokenByReferenceId(method, path, body); } try { @@ -45,11 +45,10 @@ export async function request(method, path, body = null) { }); } -export async function getTokenByReferenceId(method, path, body = null) { - console.log("gtbri"); +export function getTokenByReferenceId(method, path, body = null) { var token = document.cookie.match(/\brefresh-token=([^;\s]+)/); if (token != null) { - return await fetch(`${address}/user/refreshtoken/${token[1]}`, { + return fetch(`${address}/user/refreshtoken/${token[1]}`, { method: "POST", headers: { "Content-Type": "application/json" @@ -60,7 +59,6 @@ export async function getTokenByReferenceId(method, path, body = null) { document.cookie = `auth-token=${json.token}; Path=/`; document.cookie = `refresh-token=${json.refreshToken}; Path=/`; - console.log(json.token); return request(method, path, body); }) @@ -68,7 +66,6 @@ export async function getTokenByReferenceId(method, path, body = null) { location.href = "/login"; }); } - } export function logout() {