Make login and register work in frontend
This commit is contained in:
parent
403882f40f
commit
daeb246765
GPG Key ID:
93549FA07F0AE268
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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);
|
||||
});
|
||||
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) {
|
||||
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);
|
||||
});
|
||||
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 { 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 });
|
||||
}
|
||||
|
||||
|
||||
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