ReiMerc/temperature-alarm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

profile site started on

Browse Source
This commit is contained in:
LilleBRG 2025-03-24 11:32:28 +01:00
parent 6696a9678c
commit e803adb387
9 changed files with 257 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
frontend/devices/index.html Normal file
View File

8
frontend/home/index.html
View File

@ -5,12 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Temperature-Alarm-Web</title> <title>Temperature-Alarm-Web</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <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> </head>
<body> <body>
<div id="container"> <div id="container">
<div class="topnav"> <div class="topnav">
<a class="active" href="/home/index.html">Home</a> <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>
<div class="chartContainer"> <div class="chartContainer">
<canvas id="myChart" style="width: 49%; height: 49%;"></canvas> <canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
@ -27,6 +33,4 @@
</table> </table>
</div> </div>
</body> </body>
<link rel="stylesheet" href="/styles/home.css" />
<script type="module" src="/scripts/home.js"></script>
</html> </html>

BIN
frontend/img/user-32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

6
frontend/mockdata/profile.mockdata.js Normal file
View File

@ -0,0 +1,6 @@
export const profileData = {
id: 1,
username: "LilleBRG",
email: "lillebrg@gmail.com",
pfp: "/img/user-32.png"
}

65
frontend/profile/index.html
View File

@ -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">&times;</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">&times;</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>

91
frontend/scripts/profile.js
View File

@ -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";
});
});

16
frontend/scripts/services/users.service.js
View File

@ -28,13 +28,25 @@ export function create(email, username, password, repeatPassword){
.catch(err => { error: err.message }); .catch(err => { error: err.message });
} }
function update(email, username, password){ export function update(email, username){
return fetch(`${address}/user/update`, { return fetch(`${address}/user/update`, {
method: "PATCH", method: "PATCH",
headers: { headers: {
"Content-Type": "application/json" "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) .then(handleResponse)
.catch(err => { error: err.message }); .catch(err => { error: err.message });

3
frontend/styles/auth.css
View File

@ -49,3 +49,6 @@ button:hover {
margin-top: 1rem; margin-top: 1rem;
} }
button{
border-radius: 20px;
}

72
frontend/styles/profile.css
View File

@ -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%;
}