Skip to content

Commit 4cb2fc1

Browse files
vntcorevntcore
committed
Add login page
1 parent be22aba commit 4cb2fc1

1 file changed

Lines changed: 121 additions & 0 deletions

File tree

‎login.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html lang="it">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Log in</title>
7+
8+
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
9+
<link href="assets/css/style.css" rel="stylesheet">
10+
</head>
11+
12+
<body>
13+
<div class="login-container">
14+
<h2>Log In</h2>
15+
<form>
16+
<input id="username_txt" type="text" placeholder="Username" required>
17+
<input id="password_txt" type="password" placeholder="Password" required>
18+
<input style="display: none;" id="otp_txt" type="number" placeholder="OTP code" required>
19+
<button id="loginBtn" type="button">Log in</button>
20+
<button style="display: none;" id="checkOtpBtn" type="button">Confirm</button>
21+
</form>
22+
<a href="signup.html">Don't have an account? Sign up</a>
23+
</div>
24+
25+
<script>
26+
const loginBtn = document.getElementById("loginBtn");
27+
28+
const username_txt = document.getElementById("username_txt");
29+
const password_txt = document.getElementById("password_txt");
30+
31+
const otp_txt = document.getElementById("otp_txt");
32+
const checkOtpBtn = document.getElementById("checkOtpBtn");
33+
34+
loginBtn.addEventListener('click', function() {
35+
const data = {
36+
"username": username_txt.value,
37+
"password": password_txt.value
38+
};
39+
40+
fetch("http://localhost:3000/api/login",
41+
{
42+
method: "POST",
43+
headers: {
44+
"Content-Type": "application/json"
45+
},
46+
body: JSON.stringify(data)
47+
}
48+
)
49+
.then(response => response.json())
50+
.then(data => {
51+
if(data["STATUS_CODE"] == 202) {
52+
username_txt.style.display = "none";
53+
loginBtn.style.display = "none";
54+
password_txt.style.display = "none";
55+
56+
otp_txt.style.display = "block";
57+
checkOtpBtn.style.display = "block";
58+
59+
setCookie("pendingID", data["PENDING_ID"], 10);
60+
}
61+
62+
else {
63+
alert("An error occurred:\nSTATUS CODE: " + data["STATUS_CODE"] + "\n\n" + data["MESSAGE"]);
64+
}
65+
});
66+
});
67+
68+
checkOtpBtn.addEventListener('click', function() {
69+
let pendingID = getCookie("pendingID");
70+
71+
const data = {
72+
"pendingID": pendingID,
73+
"otp": otp_txt.value
74+
};
75+
76+
fetch("http://localhost:3000/api/otp_verification",
77+
{
78+
method: "POST",
79+
headers: {
80+
"Content-Type": "application/json"
81+
},
82+
body: JSON.stringify(data)
83+
}
84+
)
85+
.then(response => response.json())
86+
.then(data => {
87+
if(data["STATUS_CODE"] == 200) {
88+
alert("Login successful:\nSTATUS CODE: " + data["STATUS_CODE"] + "\n\n" + data["MESSAGE"] + "\n\n\nI hope this repository has been helpful in understanding and learning how to manage a secure login!\n\nFeel free to experiment you can modify and improve my code, add extra checks, or implement new actions to execute after login.");
89+
}
90+
91+
else {
92+
alert("An error occurred:\nSTATUS CODE: " + data["STATUS_CODE"] + "\n\n" + data["MESSAGE"]);
93+
}
94+
});
95+
});
96+
97+
function setCookie(name, value, minutes) {
98+
let expires = "";
99+
if (minutes) {
100+
const date = new Date();
101+
date.setTime(date.getTime() + (minutes * 60 * 1000));
102+
expires = "; expires=" + date.toUTCString();
103+
}
104+
document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
105+
}
106+
107+
function getCookie(name) {
108+
const value = `; ${document.cookie}`;
109+
const parts = value.split(`; ${name}=`);
110+
if (parts.length === 2) return decodeURIComponent(parts.pop().split(';')[0]);
111+
return null;
112+
}
113+
114+
function deleteCookie(name) {
115+
setCookie(name, "", -1);
116+
}
117+
</script>
118+
119+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
120+
</body>
121+
</html>

0 commit comments

Comments
 (0)