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 @@ Login - Temperature alarm - + -
-
-
-

Login

+ +
+

Login

- - + + - - + + - -
- -

+ +

+ + Dont have an account? Register -

-
+
- -
+ +
+
+ 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 @@ Register - Temperature Alarm - - + + -
-
-
-

Create Account

+ +
+

Create Account

- - + + - - + + - - + + - - + + - -
- -
+ +
+
+ +
- -
+ +
+
+ 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/shared/utils.js b/frontend/shared/utils.js new file mode 100644 index 0000000..419b3c0 --- /dev/null +++ b/frontend/shared/utils.js @@ -0,0 +1,12 @@ +export async function handleResponse(response) { + const json = await response.json(); + + if (response.ok || json.error) return json; + + if (json.errors) { + return { error: Object.values(response.errors)[0][0] }; + } + + return { error: "Request failed with HTTP code " + response.status }; +} + 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