Make login and register work in frontend
This commit is contained in:
parent
403882f40f
commit
daeb246765
@ -4,33 +4,33 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Login - Temperature alarm</title>
|
<title>Login - Temperature alarm</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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>
|
<script defer type="module" src="/scripts/login.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<form id="loginForm">
|
||||||
<form id="loginForm">
|
<div class="form-container">
|
||||||
<div class="form-container">
|
<h1>Login</h1>
|
||||||
<h1>Login</h1>
|
|
||||||
|
|
||||||
<label for="emailorusn"><b>Email or Username</b></label>
|
<label for="emailorusn"><b>Email or Username</b></label>
|
||||||
<input type="text" placeholder="Enter email or username" id="emailorusn" required>
|
<input type="text" placeholder="Enter email or username" id="emailorusn" required>
|
||||||
|
|
||||||
<label for="psw"><b>Password</b></label>
|
<label for="psw"><b>Password</b></label>
|
||||||
<input type="password" placeholder="Enter password" id="psw" required>
|
<input type="password" placeholder="Enter password" id="psw" required>
|
||||||
|
|
||||||
<button type="submit">Login</button>
|
<button type="submit">Login</button>
|
||||||
<div class="registerText">
|
<div class="details">
|
||||||
<label>
|
<label>
|
||||||
<input type="checkbox" name="remember"> Remember me
|
<input type="checkbox" name="remember"> Remember me
|
||||||
</label>
|
</label>
|
||||||
<p>
|
<span>
|
||||||
Dont have an account? <a href="/register">Register</a>
|
Dont have an account? <a href="/register">Register</a>
|
||||||
</p>
|
</span>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
</div>
|
<div id="form-error"></div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
@ -4,36 +4,38 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Register - Temperature Alarm</title>
|
<title>Register - Temperature Alarm</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="/styles/register.css">
|
<link rel="stylesheet" href="/styles/auth.css">
|
||||||
<script type="module" src="/scripts/register.js"></script>
|
<script defer type="module" src="/scripts/register.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<form id="registerForm">
|
||||||
<form id="registerForm">
|
<div class="form-container">
|
||||||
<div class="form-container">
|
<h1>Create Account</h1>
|
||||||
<h1>Create Account</h1>
|
|
||||||
|
|
||||||
<label for="email"><b>Email</b></label>
|
<label for="email"><b>Email</b></label>
|
||||||
<input type="email" placeholder="Enter email "id="email" required>
|
<input type="email" placeholder="Enter email "id="email" required>
|
||||||
|
|
||||||
<label for="uname"><b>Username</b></label>
|
<label for="uname"><b>Username</b></label>
|
||||||
<input type="text" placeholder="Enter username" id="uname" required>
|
<input type="text" placeholder="Enter username" id="uname" required>
|
||||||
|
|
||||||
<label for="psw"><b>Password</b></label>
|
<label for="psw"><b>Password</b></label>
|
||||||
<input type="password" placeholder="Enter password" id="psw" required>
|
<input type="password" placeholder="Enter password" id="psw" required>
|
||||||
|
|
||||||
<label for="rpsw"><b>Repeat Password</b></label>
|
<label for="rpsw"><b>Repeat Password</b></label>
|
||||||
<input type="password" placeholder="Enter password again" id="rpsw" required>
|
<input type="password" placeholder="Enter password again" id="rpsw" required>
|
||||||
|
|
||||||
<button type="submit">Register</button>
|
<button type="submit">Register</button>
|
||||||
<div class="loginText">
|
<div class="details">
|
||||||
<label>
|
<div></div>
|
||||||
Already have an account? <a href="./home.html">Login</a>
|
|
||||||
</label>
|
<label>
|
||||||
</div>
|
Already have an account? <a href="/login">Login</a>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
</div>
|
<div id="form-error"></div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
@ -3,8 +3,20 @@ import { login } from "./services/users.service.js";
|
|||||||
document.getElementById("loginForm").addEventListener("submit", function(event) {
|
document.getElementById("loginForm").addEventListener("submit", function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
document.getElementById("form-error").style.display = "none";
|
||||||
|
|
||||||
const emailOrUsername = document.getElementById("emailorusn").value;
|
const emailOrUsername = document.getElementById("emailorusn").value;
|
||||||
const password = document.getElementById("psw").value;
|
const password = document.getElementById("psw").value;
|
||||||
|
|
||||||
login(emailOrUsername, password);
|
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";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
@ -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) {
|
document.getElementById("registerForm").addEventListener("submit", function(event) {
|
||||||
event.preventDefault(); // Prevents default form submission
|
event.preventDefault(); // Prevents default form submission
|
||||||
|
|
||||||
|
document.getElementById("form-error").style.display = "none";
|
||||||
|
|
||||||
// Get form values
|
// Get form values
|
||||||
const email = document.getElementById("email").value;
|
const email = document.getElementById("email").value;
|
||||||
const username = document.getElementById("uname").value;
|
const username = document.getElementById("uname").value;
|
||||||
@ -10,5 +12,15 @@ document.getElementById("registerForm").addEventListener("submit", function(even
|
|||||||
const repeatPassword = document.getElementById("rpsw").value;
|
const repeatPassword = document.getElementById("rpsw").value;
|
||||||
|
|
||||||
// Call function with form values
|
// Call function with form values
|
||||||
create(email, username, password, repeatPassword);
|
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";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
@ -1,43 +1,42 @@
|
|||||||
import { address } from "../../shared/constants.js";
|
import { address } from "../../shared/constants.js";
|
||||||
|
import { handleResponse } from "../../shared/utils.js";
|
||||||
|
|
||||||
export function login(usernameOrEmail, password) {
|
export function login(usernameOrEmail, password) {
|
||||||
console.log(usernameOrEmail);
|
return fetch(`${address}/user/login`, {
|
||||||
console.log(password);
|
|
||||||
|
|
||||||
fetch(`${address}/user/login`, {
|
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json"
|
"Content-Type": "application/json"
|
||||||
},
|
},
|
||||||
body: JSON.stringify({usernameOrEmail: usernameOrEmail, password: password})
|
body: JSON.stringify({
|
||||||
|
EmailOrUsrn: usernameOrEmail,
|
||||||
|
Password: password,
|
||||||
|
}),
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(handleResponse)
|
||||||
.then(data => console.log("Success:", data))
|
.catch(err => { error: err.message });
|
||||||
.catch(error => console.error("Error:", error));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function create(email, username, password, repeatPassword){
|
export function create(email, username, password, repeatPassword){
|
||||||
fetch(`${address}/user/create`, {
|
return fetch(`${address}/user/create`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json"
|
"Content-Type": "application/json"
|
||||||
},
|
},
|
||||||
body: JSON.stringify({email: email, username: username, password: password, repeatPassword: repeatPassword})
|
body: JSON.stringify({email: email, username: username, password: password, repeatPassword: repeatPassword})
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(handleResponse)
|
||||||
.then(data => console.log("Success:", data))
|
.catch(err => { error: err.message });
|
||||||
.catch(error => console.error("Error:", error));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function update(email, username, password){
|
function update(email, username, password){
|
||||||
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, password: password})
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(handleResponse)
|
||||||
.then(data => console.log("Success:", data))
|
.catch(err => { error: err.message });
|
||||||
.catch(error => console.error("Error:", error));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
12
frontend/shared/utils.js
Normal file
12
frontend/shared/utils.js
Normal file
@ -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 };
|
||||||
|
}
|
||||||
|
|
51
frontend/styles/auth.css
Normal file
51
frontend/styles/auth.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
|
3
frontend/styles/common.css
Normal file
3
frontend/styles/common.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.error {
|
||||||
|
background-color: #EF9A9A;
|
||||||
|
}
|
@ -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;
|
|
||||||
}
|
|
@ -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;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user