From aa34aea154c4bf9c7595d492b693ad2c89add3cd Mon Sep 17 00:00:00 2001
From: Reimar <mail@reim.ar>
Date: Fri, 21 Mar 2025 11:02:56 +0100
Subject: [PATCH] Make login and register work in frontend
---
frontend/login/index.html | 38 ++++++++--------
frontend/register/index.html | 46 +++++++++----------
frontend/scripts/login.js | 16 ++++++-
frontend/scripts/register.js | 18 ++++++--
frontend/scripts/services/users.service.js | 33 +++++++-------
frontend/styles/auth.css | 51 ++++++++++++++++++++++
frontend/styles/common.css | 3 ++
frontend/styles/login.css | 41 -----------------
frontend/styles/register.css | 41 -----------------
9 files changed, 142 insertions(+), 145 deletions(-)
create mode 100644 frontend/styles/auth.css
create mode 100644 frontend/styles/common.css
delete mode 100644 frontend/styles/login.css
delete mode 100644 frontend/styles/register.css
diff --git a/frontend/login/index.html b/frontend/login/index.html
index 2f7f0f0..4b22dea 100644
--- a/frontend/login/index.html
+++ b/frontend/login/index.html
@@ -4,33 +4,33 @@
<meta charset="UTF-8" />
<title>Login - Temperature alarm</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="/styles/login.css">
+ <link rel="stylesheet" href="/styles/auth.css">
<script defer type="module" src="/scripts/login.js"></script>
</head>
<body>
- <div class="container">
- <form id="loginForm">
- <div class="form-container">
- <h1>Login</h1>
+ <form id="loginForm">
+ <div class="form-container">
+ <h1>Login</h1>
- <label for="emailorusn"><b>Email or Username</b></label>
- <input type="text" placeholder="Enter email or username" id="emailorusn" required>
+ <label for="emailorusn"><b>Email or Username</b></label>
+ <input type="text" placeholder="Enter email or username" id="emailorusn" required>
- <label for="psw"><b>Password</b></label>
- <input type="password" placeholder="Enter password" id="psw" required>
+ <label for="psw"><b>Password</b></label>
+ <input type="password" placeholder="Enter password" id="psw" required>
- <button type="submit">Login</button>
- <div class="registerText">
- <label>
- <input type="checkbox" name="remember"> Remember me
- </label>
- <p>
+ <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>
- </p>
- </div>
+ </span>
</div>
- </form>
- </div>
+
+ <div id="form-error"></div>
+ </div>
+ </form>
</body>
</html>
diff --git a/frontend/register/index.html b/frontend/register/index.html
index 0427296..666fe02 100644
--- a/frontend/register/index.html
+++ b/frontend/register/index.html
@@ -4,36 +4,38 @@
<meta charset="UTF-8" />
<title>Register - Temperature Alarm</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="/styles/register.css">
- <script type="module" src="/scripts/register.js"></script>
+ <link rel="stylesheet" href="/styles/auth.css">
+ <script defer type="module" src="/scripts/register.js"></script>
</head>
<body>
- <div class="container">
- <form id="registerForm">
- <div class="form-container">
- <h1>Create Account</h1>
+ <form id="registerForm">
+ <div class="form-container">
+ <h1>Create Account</h1>
- <label for="email"><b>Email</b></label>
- <input type="email" placeholder="Enter email "id="email" required>
+ <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>
+ <label for="uname"><b>Username</b></label>
+ <input type="text" placeholder="Enter username" id="uname" required>
- <label for="psw"><b>Password</b></label>
- <input type="password" placeholder="Enter password" id="psw" required>
+ <label for="psw"><b>Password</b></label>
+ <input type="password" placeholder="Enter password" id="psw" required>
- <label for="rpsw"><b>Repeat Password</b></label>
- <input type="password" placeholder="Enter password again" id="rpsw" required>
+ <label for="rpsw"><b>Repeat Password</b></label>
+ <input type="password" placeholder="Enter password again" id="rpsw" required>
- <button type="submit">Register</button>
- <div class="loginText">
- <label>
- Already have an account? <a href="./home.html">Login</a>
- </label>
- </div>
+ <button type="submit">Register</button>
+ <div class="details">
+ <div></div>
+
+ <label>
+ Already have an account? <a href="/login">Login</a>
+ </label>
</div>
- </form>
- </div>
+
+ <div id="form-error"></div>
+ </div>
+ </form>
</body>
</html>
diff --git a/frontend/scripts/login.js b/frontend/scripts/login.js
index 6160bca..e264a10 100644
--- a/frontend/scripts/login.js
+++ b/frontend/scripts/login.js
@@ -3,8 +3,20 @@ 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);
-});
\ No newline at end of file
+ login(emailOrUsername, password)
+ .then(response => {
+ if (response.error) {
+ document.getElementById("form-error").innerText = response.error;
+ document.getElementById("form-error").style.display = "block";
+
+ return;
+ }
+
+ location.href = "/home";
+ });
+});
diff --git a/frontend/scripts/register.js b/frontend/scripts/register.js
index c61efa6..56bc5ee 100644
--- a/frontend/scripts/register.js
+++ b/frontend/scripts/register.js
@@ -1,8 +1,10 @@
-import { create } from "../../services/users.service.js";
+import { create } from "./services/users.service.js";
document.getElementById("registerForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevents default form submission
+ document.getElementById("form-error").style.display = "none";
+
// Get form values
const email = document.getElementById("email").value;
const username = document.getElementById("uname").value;
@@ -10,5 +12,15 @@ document.getElementById("registerForm").addEventListener("submit", function(even
const repeatPassword = document.getElementById("rpsw").value;
// Call function with form values
- create(email, username, password, repeatPassword);
-});
\ No newline at end of file
+ create(email, username, password, repeatPassword)
+ .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 58fddd7..f95a076 100644
--- a/frontend/scripts/services/users.service.js
+++ b/frontend/scripts/services/users.service.js
@@ -1,43 +1,42 @@
import { address } from "../../shared/constants.js";
+import { handleResponse } from "../../shared/utils.js";
export function login(usernameOrEmail, password) {
- console.log(usernameOrEmail);
- console.log(password);
-
- fetch(`${address}/user/login`, {
+ return fetch(`${address}/user/login`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
- body: JSON.stringify({usernameOrEmail: usernameOrEmail, password: password})
+ body: JSON.stringify({
+ EmailOrUsrn: usernameOrEmail,
+ Password: password,
+ }),
})
- .then(response => response.json())
- .then(data => console.log("Success:", data))
- .catch(error => console.error("Error:", error));
+ .then(handleResponse)
+ .catch(err => { error: err.message });
}
export function create(email, username, password, repeatPassword){
- fetch(`${address}/user/create`, {
+ return fetch(`${address}/user/create`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({email: email, username: username, password: password, repeatPassword: repeatPassword})
})
- .then(response => response.json())
- .then(data => console.log("Success:", data))
- .catch(error => console.error("Error:", error));
+ .then(handleResponse)
+ .catch(err => { error: err.message });
}
- function update(email, username, password){
- fetch(`${address}/user/update`, {
+function update(email, username, password){
+ return fetch(`${address}/user/update`, {
method: "PATCH",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({email: email, username: username, password: password})
})
- .then(response => response.json())
- .then(data => console.log("Success:", data))
- .catch(error => console.error("Error:", error));
+ .then(handleResponse)
+ .catch(err => { error: err.message });
}
+
diff --git a/frontend/styles/auth.css b/frontend/styles/auth.css
new file mode 100644
index 0000000..1074997
--- /dev/null
+++ b/frontend/styles/auth.css
@@ -0,0 +1,51 @@
+body {
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Full-width input fields */
+input[type=text], input[type=password], input[type=email] {
+ width: 100%;
+ padding: 12px 20px;
+ margin: 8px 0;
+ display: inline-block;
+ border: 1px solid #ccc;
+ box-sizing: border-box;
+}
+
+/* Set a style for all buttons */
+button {
+ background-color: #04AA6D;
+ color: white;
+ padding: 14px 20px;
+ margin: 8px 0;
+ border: none;
+ cursor: pointer;
+ width: 100%;
+}
+
+button:hover {
+ opacity: 0.8;
+}
+
+.form-container {
+ width: 800px;
+ padding: 16px;
+ margin: auto;
+}
+
+.details {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 0.5rem;
+}
+
+#form-error {
+ display: none;
+ background-color: #FFCDD2;
+ color: #C62828;
+ border: 1px solid #C62828;
+ border-radius: 4px;
+ padding: 1rem 2rem;
+ margin-top: 1rem;
+}
+
diff --git a/frontend/styles/common.css b/frontend/styles/common.css
new file mode 100644
index 0000000..a4742c3
--- /dev/null
+++ b/frontend/styles/common.css
@@ -0,0 +1,3 @@
+.error {
+ background-color: #EF9A9A;
+}
diff --git a/frontend/styles/login.css b/frontend/styles/login.css
deleted file mode 100644
index ad00dbe..0000000
--- a/frontend/styles/login.css
+++ /dev/null
@@ -1,41 +0,0 @@
-body {font-family: Arial, Helvetica, sans-serif;}
-
-.container{
- display: flex;
- justify-content: center;
-}
-
-/* Full-width input fields */
-input[type=text], input[type=password], input[type=email] {
- width: 100%;
- padding: 12px 20px;
- margin: 8px 0;
- display: inline-block;
- border: 1px solid #ccc;
- box-sizing: border-box;
-}
-
-/* Set a style for all buttons */
-button {
- background-color: #04AA6D;
- color: white;
- padding: 14px 20px;
- margin: 8px 0;
- border: none;
- cursor: pointer;
- width: 100%;
-}
-
-button:hover {
- opacity: 0.8;
-}
-
-.form-container {
- width: 800px;
- padding: 16px;
-}
-
-.registerText{
-display: flex;
-justify-content: space-between;
-}
\ No newline at end of file
diff --git a/frontend/styles/register.css b/frontend/styles/register.css
deleted file mode 100644
index ed7bcfc..0000000
--- a/frontend/styles/register.css
+++ /dev/null
@@ -1,41 +0,0 @@
-body {font-family: Arial, Helvetica, sans-serif;}
-
-.container{
- display: flex;
- justify-content: center;
-}
-
-/* Full-width input fields */
-input[type=text], input[type=password], input[type=email] {
- width: 100%;
- padding: 12px 20px;
- margin: 8px 0;
- display: inline-block;
- border: 1px solid #ccc;
- box-sizing: border-box;
-}
-
-/* Set a style for all buttons */
-button {
- background-color: #04AA6D;
- color: white;
- padding: 14px 20px;
- margin: 8px 0;
- border: none;
- cursor: pointer;
- width: 100%;
-}
-
-button:hover {
- opacity: 0.8;
-}
-
-.form-container {
- width: 800px;
- padding: 16px;
-}
-
-.loginText{
-display: flex;
-justify-content: flex-end;
-}
\ No newline at end of file