Skip to content

Commit 6037c80

Browse files
SahooBishwajeetSahooBishwajeet
authored
Merge pull request #102 from codegasms/bishwajeet-login-register
[Frontend] add login & register
2 parents c6e2ec7 + f833e4b commit 6037c80

File tree

4 files changed

+336
-147
lines changed

4 files changed

+336
-147
lines changed

‎client/views/components/space/usermenu.ejs

+7-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,13 @@
4040
<%= user %>
4141
</button>
4242

43-
<button class="btn btn-sm btn-ghost px-[6px]">
43+
<button class="btn btn-sm btn-ghost px-[6px]" onclick="logoutUser()">
4444
<img src="/images/space/logout.png" class="contrast-0" />
4545
</button>
46+
<script>
47+
function logoutUser() {
48+
document.cookie.replace(/(?<=^|;).+?(?=\=|;|$)/g, name => location.hostname.split('.').reverse().reduce(domain => (domain=domain.replace(/^\.?[^.]+/, ''),document.cookie=`${name}=;max-age=0;path=/;domain=${domain}`,domain), location.hostname));
49+
window.location.href = '/login';
50+
}
51+
</script>
4652
</div>

‎client/views/login/index.ejs

+155-146
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,163 @@
1-
<!doctype html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link
7-
rel="stylesheet"
8-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
9-
/>
10-
<link
11-
rel="stylesheet"
12-
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
13-
/>
14-
<link rel="stylesheet" href="/css/login-register.css" />
15-
<link rel="stylesheet" href="/css/login-register-sm.css" />
16-
<title>Login - Register</title>
17-
</head>
18-
19-
<body>
20-
<div class="container" id="container">
21-
<div class="form-container sign-up">
22-
<form>
23-
<h1>Create Account</h1>
24-
25-
<div class="social-icons">
26-
<a href="#" class="icon"
27-
><i class="fa-brands fa-google-plus-g"></i
28-
></a>
29-
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
30-
<!--
31-
<a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
32-
<a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
33-
--></div>
34-
35-
<span>or use your email for registeration</span>
36-
37-
<input type="text" placeholder="Name" />
38-
<input type="email" placeholder="Email" />
39-
<input type="password" placeholder="Password" />
40-
<button>Register</button>
41-
</form>
42-
</div>
43-
44-
<div class="form-container sign-in">
45-
<form>
46-
<h1>Login</h1>
47-
<div class="social-icons">
48-
<a href="#" class="icon"
49-
><i class="fa-brands fa-google-plus-g"></i
50-
></a>
51-
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
52-
<!--
53-
<a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
54-
<a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
55-
--></div>
56-
57-
<span>or use your email password</span>
58-
59-
<input type="email" placeholder="Email" />
60-
<input type="password" placeholder="Password" />
61-
<a href="#">Forget Your Password?</a>
62-
<button>Login</button>
63-
</form>
64-
</div>
1+
<!-- source:https://codepen.io/owaiswiz/pen/jOPvEPB -->
2+
<%- await include("../layouts/header.ejs", {title: 'FLUX Login'}) %>
3+
4+
<div class="min-h-screen bg-gray-100 text-gray-900 flex justify-center">
5+
<div
6+
class="max-w-screen-xl m-0 sm:m-10 bg-white shadow sm:rounded-lg flex justify-center flex-1"
7+
>
8+
<div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
9+
<div class="mt-12 flex flex-col items-center">
10+
<h1 class="text-2xl xl:text-3xl font-extrabold">Sign In</h1>
11+
<div class="w-full flex-1 mt-8">
12+
<div class="flex flex-col items-center">
13+
<button
14+
class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"
15+
onclick="window.location.href='http://localhost:3000/oauth/google'"
16+
>
17+
<div class="bg-white p-2 rounded-full">
18+
<svg class="w-4" viewBox="0 0 533.5 544.3">
19+
<path
20+
d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z"
21+
fill="#4285f4"
22+
/>
23+
<path
24+
d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
25+
fill="#34a853"
26+
/>
27+
<path
28+
d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
29+
fill="#fbbc04"
30+
/>
31+
<path
32+
d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
33+
fill="#ea4335"
34+
/>
35+
</svg>
36+
</div>
37+
<span class="ml-4"> Sign In with Google </span>
38+
</button>
39+
40+
<button
41+
class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5"
42+
onclick="window.location.href='http://localhost:3000/oauth/github'"
43+
>
44+
<div class="bg-white p-1 rounded-full">
45+
<svg class="w-6" viewBox="0 0 32 32">
46+
<path
47+
fill-rule="evenodd"
48+
d="M16 4C9.371 4 4 9.371 4 16c0 5.3 3.438 9.8 8.207 11.387.602.11.82-.258.82-.578 0-.286-.011-1.04-.015-2.04-3.34.723-4.043-1.609-4.043-1.609-.547-1.387-1.332-1.758-1.332-1.758-1.09-.742.082-.726.082-.726 1.203.086 1.836 1.234 1.836 1.234 1.07 1.836 2.808 1.305 3.492 1 .11-.777.422-1.305.762-1.605-2.664-.301-5.465-1.332-5.465-5.93 0-1.313.469-2.383 1.234-3.223-.121-.3-.535-1.523.117-3.175 0 0 1.008-.32 3.301 1.23A11.487 11.487 0 0116 9.805c1.02.004 2.047.136 3.004.402 2.293-1.55 3.297-1.23 3.297-1.23.656 1.652.246 2.875.12 3.175.77.84 1.231 1.91 1.231 3.223 0 4.61-2.804 5.621-5.476 5.922.43.367.812 1.101.812 2.219 0 1.605-.011 2.898-.011 3.293 0 .32.214.695.824.578C24.566 25.797 28 21.3 28 16c0-6.629-5.371-12-12-12z"
49+
/>
50+
</svg>
51+
</div>
52+
<span class="ml-4"> Sign In with GitHub </span>
53+
</button>
54+
</div>
6555

66-
<div class="toggle-container">
67-
<div class="toggle">
68-
<div class="toggle-panel toggle-left">
69-
<h1>Welcome Back!</h1>
70-
<p>Login to use all of the site features</p>
71-
<button class="hidden" id="login">Login</button>
56+
<div class="my-12 border-b text-center">
57+
<div
58+
class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2"
59+
>
60+
Or sign in with e-mail
61+
</div>
7262
</div>
7363

74-
<div class="toggle-panel toggle-right">
75-
<h1>Welcome!</h1>
76-
<p>Register to use all of the site features</p>
77-
<button class="hidden" id="register">Register</button>
64+
<div class="mx-auto max-w-xs">
65+
<input
66+
class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
67+
type="email"
68+
placeholder="Email"
69+
/>
70+
<input
71+
class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
72+
type="password"
73+
placeholder="Password"
74+
/>
75+
<button
76+
class="signin-button mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
77+
>
78+
<svg
79+
class="w-6 h-6 -ml-2"
80+
fill="none"
81+
stroke="currentColor"
82+
stroke-width="2"
83+
stroke-linecap="round"
84+
stroke-linejoin="round"
85+
>
86+
<path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
87+
<circle cx="8.5" cy="7" r="4" />
88+
<path d="M20 8v6M23 11h-6" />
89+
</svg>
90+
<span class="ml-3"> Sign In </span>
91+
</button>
92+
<button
93+
class="signup-button mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
94+
onclick="window.location.href='http://localhost:8000/register'"
95+
>
96+
<svg
97+
class="w-6 h-6 -ml-2"
98+
fill="none"
99+
stroke="currentColor"
100+
stroke-width="2"
101+
stroke-linecap="round"
102+
stroke-linejoin="round"
103+
>
104+
<path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
105+
<circle cx="8.5" cy="7" r="4" />
106+
<path d="M20 8v6M23 11h-6" />
107+
</svg>
108+
<span class="ml-3"> Sign Up Instead</span>
109+
</button>
110+
<p class="mt-6 text-xs text-gray-600 text-center">
111+
I agree to abide by codegasm's
112+
<a href="#" class="border-b border-gray-500 border-dotted">
113+
Terms of Service
114+
</a>
115+
and its
116+
<a href="#" class="border-b border-gray-500 border-dotted">
117+
Privacy Policy
118+
</a>
119+
</p>
78120
</div>
79121
</div>
80122
</div>
81123
</div>
82-
83-
<div class="container-sm">
84-
<div class="signup-section">
85-
<header>Register</header>
86-
87-
<!--
88-
<div class="social-buttons">
89-
<button><i class='bx bxl-google'></i> Use Google</button>
90-
<button><i class='bx bxl-apple'></i> Use Apple</button>
91-
</div>
92-
-->
93-
<div class="social-icons">
94-
<a href="#" class="icon"
95-
><i class="fa-brands fa-google-plus-g"></i
96-
></a>
97-
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
98-
<!--
99-
<a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
100-
<a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
101-
--></div>
102-
103-
<div class="separator">
104-
<div class="line"></div>
105-
<p>Or</p>
106-
<div class="line"></div>
107-
</div>
108-
109-
<form>
110-
<input type="text" placeholder="Name" required />
111-
<input type="email" placeholder="Email" required />
112-
<input type="password" placeholder="Password" required />
113-
<a href="#">Forget Password?</a>
114-
<button type="submit" class="btn">Register</button>
115-
</form>
116-
</div>
117-
118-
<div class="login-section">
119-
<header>Login</header>
120-
121-
<!--
122-
<div class="social-buttons">
123-
<button><i class='bx bxl-google'></i> Use Google</button>
124-
<button><i class='bx bxl-apple'></i> Use Apple</button>
125-
</div>
126-
-->
127-
<div class="social-icons">
128-
<a href="#" class="icon"
129-
><i class="fa-brands fa-google-plus-g"></i
130-
></a>
131-
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
132-
<!--
133-
<a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
134-
<a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
135-
--></div>
136-
137-
<div class="separator">
138-
<div class="line"></div>
139-
<p>Or</p>
140-
<div class="line"></div>
141-
</div>
142-
143-
<form>
144-
<input type="email" placeholder="Email" required />
145-
<input type="password" placeholder="Password" required />
146-
<a href="#">Forget Password?</a>
147-
<button type="submit" class="btn">Login</button>
148-
</form>
149-
</div>
124+
<div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
125+
<div
126+
class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat"
127+
style="
128+
background-image: url('https://storage.googleapis.com/devitary-image-host.appspot.com/15848031292911696601-undraw_designer_life_w96d.svg');
129+
"
130+
></div>
150131
</div>
151-
152-
<script src="/js/login-register.js"></script>
153-
</body>
154-
</html>
132+
</div>
133+
</div>
134+
<script>
135+
document.querySelector('.signin-button').addEventListener('click', async function() {
136+
const email = document.querySelector('input[type="email"]').value;
137+
const password = document.querySelector('input[type="password"]').value;
138+
139+
await fetch('http://localhost:3000/auth/login', {
140+
method: 'POST',
141+
headers: {
142+
'accept': 'application/json',
143+
'Content-Type': 'application/json'
144+
},
145+
body: JSON.stringify({
146+
email: email,
147+
password: password
148+
})
149+
})
150+
.then(response => response.json())
151+
.then(data => {
152+
console.log(data);
153+
document.cookie = `accessToken=${data.access_token}; path=/;`;
154+
window.location.href = '/space';
155+
})
156+
.catch(error => {
157+
console.error(error);
158+
});
159+
});
160+
161+
162+
</script>
163+
<%- await include("../layouts/end.ejs") %>

‎client/views/partials/home/scroll-trigger.ejs

+3
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,7 @@
5151
class="font-medium text-md text-center my-4 text-pretty"
5252
>Explore More About Us</a
5353
>
54+
<a href="/register" class="font-medium text-md text-center my-4 text-pretty"
55+
>Create An Acoount Right Away & Join Us</a
56+
>
5457
</div>

0 commit comments

Comments
 (0)