diff --git a/deploy.sh b/deploy.sh index 441cf66..653578c 100644 --- a/deploy.sh +++ b/deploy.sh @@ -1,4 +1,4 @@ -#!/usr/bin +#!/bin/sh BASEPATH=/home/developers/temperature-alarm @@ -13,5 +13,5 @@ chown www-data:www-data -R /var/www/html # Update backend docker stop api docker build --tag api $BASEPATH/backend/Api -docker run -d -p 8080:80 -p 8081:443 -p 5000:5000 --name api --rm api +docker run -d -p 5000:5000 --name api --rm api diff --git a/frontend/devices/index.html b/frontend/devices/index.html new file mode 100644 index 0000000..e69de29 diff --git a/frontend/favicon.ico b/frontend/favicon.ico new file mode 100644 index 0000000..6288598 Binary files /dev/null and b/frontend/favicon.ico differ diff --git a/frontend/fonts/PoetsenOne-Regular.ttf b/frontend/fonts/PoetsenOne-Regular.ttf new file mode 100644 index 0000000..1a89422 Binary files /dev/null and b/frontend/fonts/PoetsenOne-Regular.ttf differ 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/background.jpg b/frontend/img/background.jpg index c179474..9f343f8 100644 Binary files a/frontend/img/background.jpg and b/frontend/img/background.jpg differ diff --git a/frontend/img/background2.jpg b/frontend/img/background2.jpg deleted file mode 100644 index 9f343f8..0000000 Binary files a/frontend/img/background2.jpg and /dev/null differ diff --git a/frontend/img/logo.webp b/frontend/img/logo.webp new file mode 100644 index 0000000..bb6d3a1 Binary files /dev/null and b/frontend/img/logo.webp differ 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/index.html b/frontend/index.html index 271d790..c30d98b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,23 +3,26 @@ Temperature Alarm - - - -
-
-

Temperature Alarm

+ + + +
+
+

+ + Temperature Alarm +

- -
-
- + +
+
+ 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/frontpage.css b/frontend/styles/frontpage.css index 3de40fe..f8cbe7a 100644 --- a/frontend/styles/frontpage.css +++ b/frontend/styles/frontpage.css @@ -1,3 +1,8 @@ +@font-face { + font-family: "Poetsen One"; + src: url("/fonts/PoetsenOne-Regular.ttf"); +} + body { margin: 0; font-family: sans-serif; @@ -6,17 +11,26 @@ body { main { width: 100vw; height: 100vh; - background-image: url("/img/background2.jpg"); + background-image: url("/img/background.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; background-color: rgba(255, 255, 255, 0.5); } +#logo { + height: 1em; + position: relative; + top: 5px; + filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4)); +} + h1 { margin: 0; font-size: 4rem; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); + font-family: "Poetsen One"; + font-weight: normal; } #title { 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%; + } + diff --git a/iot/Makefile b/iot/Makefile index 1635675..d9c12c7 100644 --- a/iot/Makefile +++ b/iot/Makefile @@ -1,3 +1,3 @@ -all: main.c mqtt.c temperature.c - $(CC) -lmosquitto -lpthread -li2c main.c mqtt.c temperature.c +all: main.c mqtt.c temperature.c device_id.c + $(CC) -lmosquitto -lpthread -li2c main.c mqtt.c temperature.c device_id.c diff --git a/iot/device_id.c b/iot/device_id.c new file mode 100644 index 0000000..f85597f --- /dev/null +++ b/iot/device_id.c @@ -0,0 +1,46 @@ +#include +#include + +#include "device_id.h" + +#define DEVICE_ID_SIZE 5 + +char *get_device_id(void) +{ + FILE *file = fopen("device_id.txt", "r"); + + if (!file) { + char *device_id = generate_device_id(); + + file = fopen("device_id.txt", "w"); + fprintf(file, "%s", device_id); + fclose(file); + + return device_id; + } + + char *device_id = malloc(DEVICE_ID_SIZE + 1); + fgets(device_id, DEVICE_ID_SIZE + 1, file); + fclose(file); + + return device_id; +} + +char *generate_device_id(void) +{ + char *device_id = malloc(DEVICE_ID_SIZE + 1); + + for (int i = 0; i < DEVICE_ID_SIZE; i++) { + device_id[i] = 'A' + (random() % 26); + } + + device_id[DEVICE_ID_SIZE] = '\0'; + + return device_id; +} + +void destroy_device_id(char *device_id) +{ + free(device_id); +} + diff --git a/iot/device_id.h b/iot/device_id.h new file mode 100644 index 0000000..f7939b4 --- /dev/null +++ b/iot/device_id.h @@ -0,0 +1,6 @@ +char *get_device_id(void); + +char *generate_device_id(void); + +void destroy_device_id(char *device_id); + diff --git a/iot/main.c b/iot/main.c index 8430bb3..fb1571c 100644 --- a/iot/main.c +++ b/iot/main.c @@ -4,23 +4,36 @@ #include #include #include +#include #include "mqtt.h" #include "temperature.h" +#include "device_id.h" void *watch_temperature(void *arg) { + char *device_id = get_device_id(); + + printf("Device ID: %s\n", device_id); + temperature_handle_t temp_handle = init_temperature(); get_temperature(temp_handle); while (true) { double temperature = get_temperature(temp_handle); + size_t timestamp = time(NULL); - char *str = malloc(snprintf(NULL, 0, "%lf", temperature) + 1); - sprintf(str, "%lf", temperature); + char *format = "{" + "\"temperature\": %lf," + "\"device_id\": \"%s\"," + "\"timestamp\": %zu" + "}"; - mqtt_send_message("/temperature", str); + char *str = malloc(snprintf(NULL, 0, format, temperature, device_id, timestamp) + 1); + sprintf(str, format, temperature, device_id, timestamp); + + mqtt_send_message("temperature", str); free(str); @@ -29,6 +42,8 @@ void *watch_temperature(void *arg) sleep(60); } + destroy_device_id(device_id); + return NULL; } @@ -40,6 +55,8 @@ void mqtt_on_connect(void) int main(void) { + srand(time(NULL)); + init_mqtt(); return EXIT_SUCCESS;