Skip to content

Commit acdce5a

Browse files
adityaks-ltsadityaks-lts
committed
linked backend with forntend of login and signup pages
1 parent a4d304f commit acdce5a

File tree

5 files changed

+188
-87
lines changed

5 files changed

+188
-87
lines changed

‎Frontend/assets/ZKZg.gif

70.5 KB
Loading

‎Frontend/login.html

+87-57
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,95 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<!-- <meta http-equiv="Refresh" content="5; URL=index.html" /> -->
77
<title>Login</title>
8-
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
9-
</head>
10-
11-
<body class="bg-zinc-100 flex items-center justify-center h-screen">
12-
<div class="bg-white shadow-lg rounded-lg p-8 flex flex-col md:flex-row items-center dark:bg-zinc-800">
8+
<link
9+
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
10+
rel="stylesheet"
11+
/>
12+
</head>
1313

14-
<div class="md:w-1/2 px-4">
15-
<img class="rounded-lg mb-4 md:mb-0" src="./assets/signin-image.jpg" alt="Live the Dream">
16-
</div>
14+
<body class="bg-zinc-100 flex items-center justify-center h-screen">
15+
<div
16+
class="bg-white shadow-lg rounded-lg p-8 flex flex-col md:flex-row items-center dark:bg-zinc-800"
17+
>
18+
<div class="md:w-1/2 px-4">
19+
<img
20+
class="rounded-lg mb-4 md:mb-0"
21+
src="./assets/signin-image.jpg"
22+
alt="Live the Dream"
23+
/>
24+
</div>
1725

26+
<div class="md:w-1/2 max-w-md px-4">
27+
<h2 class="text-2xl font-bold mb-6 text-zinc-800 dark:text-white">
28+
Sign in
29+
</h2>
30+
<form id="login-form" method="POST">
31+
<div class="mb-4">
32+
<label
33+
class="block text-zinc-700 text-sm font-bold mb-2 dark:text-zinc-300"
34+
for="user_email"
35+
>Your Email</label
36+
>
37+
<input
38+
type="email"
39+
id="user_email"
40+
name="user_email"
41+
required
42+
class="shadow appearance-none border rounded w-full py-2 px-3 text-zinc-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-zinc-200 dark:text-zinc-800 dark:border-zinc-300"
43+
placeholder="Your email"
44+
/>
45+
</div>
46+
<div class="mb-6">
47+
<label
48+
class="block text-zinc-700 text-sm font-bold mb-2 dark:text-zinc-300"
49+
for="user_password"
50+
>Password</label
51+
>
52+
<input
53+
type="password"
54+
id="user_password"
55+
name="user_password"
56+
required
57+
class="shadow appearance-none border rounded w-full py-2 px-3 text-zinc-700 mb-3 leading-tight focus:outline-none focus:shadow-outline dark:bg-zinc-200 dark:text-zinc-800 dark:border-zinc-300"
58+
placeholder="Password must contain at least 6 character(s)"
59+
/>
60+
</div>
1861

19-
<div class="md:w-1/2 max-w-md px-4">
20-
<h2 class="text-2xl font-bold mb-6 text-zinc-800 dark:text-white">Sign in</h2>
21-
<form action="#" method="POST">
22-
<div class="mb-4">
23-
<label class="block text-zinc-700 text-sm font-bold mb-2 dark:text-zinc-300" for="user_email">Your
24-
Email</label>
25-
<input type="email" id="user_email" name="user_email" required
26-
class="shadow appearance-none border rounded w-full py-2 px-3 text-zinc-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-zinc-200 dark:text-zinc-800 dark:border-zinc-300"
27-
placeholder="Invalid email">
28-
</div>
29-
<div class="mb-6">
30-
<label class="block text-zinc-700 text-sm font-bold mb-2 dark:text-zinc-300"
31-
for="user_password">Password</label>
32-
<input type="password" id="user_password" name="user_password" required
33-
class="shadow appearance-none border rounded w-full py-2 px-3 text-zinc-700 mb-3 leading-tight focus:outline-none focus:shadow-outline dark:bg-zinc-200 dark:text-zinc-800 dark:border-zinc-300"
34-
placeholder="String must contain at least 6 character(s)">
35-
</div>
36-
<div class="mb-6">
37-
<input type="checkbox" id="remember" name="remember">
38-
<label for="remember" class="text-sm text-zinc-600 dark:text-zinc-300">Remember me</label>
39-
</div>
40-
<div class="flex items-center justify-between">
41-
<button
42-
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-red-700 dark:hover:bg-red-900"
43-
type="submit" id="submit-login">
44-
Log in
45-
</button>
46-
<p class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-500"
47-
>
48-
Don't have an account? Signup
49-
</p>
50-
</div>
51-
</form>
52-
<p class="text-center my-4 dark:text-zinc-300">Or login with</p>
53-
<div class="flex justify-center">
54-
<button
55-
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mx-2 dark:bg-blue-700 dark:hover:bg-blue-900">F</button>
56-
<button
57-
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mx-2 dark:bg-red-700 dark:hover:bg-red-900">G</button>
58-
</div>
62+
<div class="flex items-center justify-between">
63+
<button
64+
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-red-700 dark:hover:bg-red-900"
65+
type="submit"
66+
id="submit-login"
67+
>
68+
Log in
69+
</button>
70+
<div id="loading"></div>
71+
<p
72+
class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-500"
73+
>
74+
Don't have an account? Signup
75+
</p>
76+
</div>
77+
</form>
78+
<p class="text-center my-4 dark:text-zinc-300">Or login with</p>
79+
<div class="flex justify-center">
80+
<button
81+
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mx-2 dark:bg-blue-700 dark:hover:bg-blue-900"
82+
>
83+
F
84+
</button>
85+
<button
86+
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mx-2 dark:bg-red-700 dark:hover:bg-red-900"
87+
>
88+
G
89+
</button>
5990
</div>
91+
</div>
6092
</div>
61-
</body>
62-
<script src="./scripts/login.js">
63-
64-
</script>
65-
</html>
93+
</body>
94+
<script src="./scripts/login.js"></script>
95+
</html>

‎Frontend/scripts/login.js

+30-8
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,53 @@
11
let userEmail = document.getElementById("user_email");
22
let userPassword = document.getElementById("user_password");
33
let submitLogin = document.getElementById("submit-login");
4+
let form = document.getElementById("login-form");
5+
let loading = document.getElementById("loading");
6+
47
let userURL = "https://tapti-recursion-010-v93f.onrender.com/users";
8+
form .addEventListener("submit", (e)=>{e.preventDefault();})
9+
10+
11+
function showLoading(){
12+
let img = document.createElement("img");
13+
img.src = "assets/ZKZg.gif"
14+
loading.append(img);
15+
}
516

6-
submitLogin.addEventListener("click", verifyUserData);
17+
function stopLoading(){
18+
loading.innerHTML = "";
19+
}
20+
21+
submitLogin.addEventListener("click", (e)=>{
22+
verifyUserData();
23+
});
724

825
async function verifyUserData(){
926
if(userEmail.value && userPassword.value){
27+
showLoading();
1028
try{
1129
let res = await fetch(userURL);
1230
let data = await res.json();
1331
let flag = false;
14-
data.forEach(element => {
32+
for(let element of data){
1533
if(element.email == userEmail.value && element.password == userPassword.value){
34+
stopLoading();
1635
alert(`Welcome ${element.name}!`);
1736
localStorage.setItem("loggedIn",element.name);
18-
19-
}
20-
else{
21-
alert("Email or Password is Invalid");
37+
flag = true;
38+
window.location.assign("index.html");
39+
// head.appendChild(redirect);
40+
break;
2241
}
23-
});
24-
console.log(data);
42+
43+
};
44+
if(!flag) alert("Email or Password is Invalid");
45+
// console.log(data);
2546
}
2647
catch(err){
2748
console.log(err);
2849
}
50+
stopLoading();
2951
}
3052
else{
3153
alert("Please enter all the field first!");

‎Frontend/scripts/signup.js

+68-20
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,82 @@
11
let userName = document.getElementById("user_name");
22
let userEmail = document.getElementById("user_email");
33
let userPassword = document.getElementById("user_password");
4+
let userPasswordConfirm = document.getElementById("confirm-password")
45
let submitSignup = document.getElementById("submit-signup");
6+
let terms = document.getElementById("terms");
7+
let loading = document.getElementById("loading");
58
let userURL = "https://tapti-recursion-010-v93f.onrender.com/users";
69
console.log("SCript");
10+
let form = document.getElementById("signup-form")
11+
12+
form.addEventListener("submit", (e)=>{e.preventDefault});
713
submitSignup.addEventListener("click", sendUserData)
8-
async function sendUserData(){
914

10-
let newObj = {"name": userName.value,
15+
16+
async function verifyUserData(){
17+
if(userEmail.value && userPassword.value){
18+
try{
19+
let res = await fetch(userURL);
20+
let data = await res.json();
21+
for(let element of data){
22+
if(element.email == userEmail.value && element.password == userPassword.value){
23+
return true
24+
}
25+
26+
};
27+
}
28+
catch(err){
29+
console.log(err);
30+
}
31+
}
32+
return false;
33+
34+
}
35+
36+
function showLoading(){
37+
let img = document.createElement("img");
38+
img.src = "assets/ZKZg.gif"
39+
loading.append(img);
40+
}
41+
function stopLoading(){
42+
loading.innerHTML = "";
43+
}
44+
async function sendUserData(){
45+
if(userName.value && userEmail.value && userPassword.value && userPasswordConfirm.value && terms.checked){
46+
47+
showLoading()
48+
if(userPassword.value.length < 5) alert("Password must contain at least 6 characters")
49+
else if(await verifyUserData()) alert(`User Email is already registered!`);
50+
else if(userPasswordConfirm.value == userPassword.value){
51+
52+
let newObj = {"name": userName.value,
1153
"email":userEmail.value,
1254
"password":userPassword.value,
13-
};
14-
// let dummyObj = {"name": "admin",
15-
// "email":"admin@gmail.com",
16-
// "password":"admin@123",
17-
// };
18-
try{
55+
};
56+
try{
57+
await fetch(userURL,{
58+
method: "POST",
59+
headers: {
60+
'Content-Type': 'application/json',
61+
},
62+
body: JSON.stringify(newObj),
63+
});
64+
stopLoading();
65+
alert("Registered Successful");
66+
window.location.assign("login.html");
1967

20-
await fetch(userURL,{
21-
method: "POST",
22-
headers: {
23-
'Content-Type': 'application/json',
24-
},
25-
body: JSON.stringify(newObj),
26-
});
27-
alert("Login Successful")
68+
}
69+
catch(err){
70+
console.log(err);
71+
}
72+
stopLoading();
73+
}
74+
else{
75+
alert("Password didn't match");
76+
}
2877
}
29-
catch(err){
30-
console.log(err);
78+
else{
79+
alert("Fill all the fields")
3180
}
81+
3282
}
33-
34-
// sendUserData();

‎Frontend/signup.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<body class="bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center h-screen">
1212
<div class="bg-white dark:bg-zinc-900 p-8 rounded-lg shadow-lg max-w-md w-full">
1313
<h2 class="text-2xl font-bold mb-6 text-center">Sign up</h2>
14-
<form>
14+
<form id="signup-form" method="post">
1515
<div class="mb-4">
1616
<label class="block text-zinc-700 dark:text-zinc-300 text-sm font-bold mb-2" for="user_name">
1717
Your Name
@@ -34,7 +34,7 @@ <h2 class="text-2xl font-bold mb-6 text-center">Sign up</h2>
3434
</label>
3535
<input
3636
class="shadow appearance-none border rounded w-full py-2 px-3 text-zinc-700 dark:text-zinc-300 dark:bg-zinc-800 mb-3 leading-tight focus:outline-none focus:shadow-outline"
37-
id="user_password" type="password" placeholder="********" />
37+
id="user_password" type="password" placeholder="Password must contain at least 6 character(s)" />
3838
</div>
3939
<div class="mb-4">
4040
<label class="block text-zinc-700 dark:text-zinc-300 text-sm font-bold mb-2"
@@ -57,6 +57,7 @@ <h2 class="text-2xl font-bold mb-6 text-center">Sign up</h2>
5757
type="button">
5858
Register
5959
</button>
60+
<div id="loading"></div>
6061
<a
6162
class="inline-block align-baseline font-bold text-sm text-blue-500 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-500"
6263
href="#">

0 commit comments

Comments
 (0)