Skip to content

Commit cc72aea

Browse files
5codeman5codeman
committed
Design the sign in and sign up page
1 parent e607f97 commit cc72aea

File tree

6 files changed

+335
-15
lines changed

6 files changed

+335
-15
lines changed

‎app.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ const app = express();
66
// const bodyParser = require('body-parser');
77
// app.use(bodyParser.urlencoded({ extended: false }));
88

9+
// set the static folder in my express (by the we can use css and js file)
10+
app.use(express.static('./public'));
11+
912
// use express router
1013
app.use('/', require('./router/user'));
1114
app.use('/user', require('./router/user'));

‎controllers/home_controller.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const path = require('path');
22

33
module.exports.homePage = function (req, res) {
4-
res.sendFile(path.join(__dirname, '../public/views/sign_up.html'));
4+
res.sendFile(path.join(__dirname, '../public/views/sign_up-login.html'));
55
}
66

‎public/css/sign_up-login.css‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
/* background: #effeff; */
9+
background-image: radial-gradient(#effeff, #98c1d9);
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
flex-direction: column;
14+
font-family: "Montserrat", sans-serif;
15+
/* height: 100vh; */
16+
/* width: 100vw; */
17+
/* margin: -20px 0 50px; */
18+
margin-top: 10vh;
19+
}
20+
21+
h1 {
22+
font-weight: bold;
23+
margin: 0;
24+
}
25+
26+
h2 {
27+
text-align: center;
28+
}
29+
30+
p {
31+
font-size: 14px;
32+
font-weight: 100;
33+
line-height: 20px;
34+
letter-spacing: 0.5px;
35+
margin: 20px 0 30px;
36+
}
37+
38+
span {
39+
font-size: 12px;
40+
}
41+
42+
a {
43+
color: #333;
44+
font-size: 14px;
45+
text-decoration: none;
46+
margin: 15px 0;
47+
}
48+
49+
button {
50+
border-radius: 20px;
51+
border: 1px solid #293241;
52+
background-color: #293241;
53+
color: #ffffff;
54+
font-size: 12px;
55+
font-weight: bold;
56+
padding: 12px 45px;
57+
letter-spacing: 1px;
58+
text-transform: uppercase;
59+
transition: transform 80ms ease-in;
60+
}
61+
62+
button:active {
63+
transform: scale(0.95);
64+
}
65+
66+
button:focus {
67+
outline: none;
68+
}
69+
70+
button.ghost {
71+
background-color: transparent;
72+
border-color: #ffffff;
73+
}
74+
75+
form {
76+
background-color: #ffffff;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
flex-direction: column;
81+
padding: 0 50px;
82+
height: 100%;
83+
text-align: center;
84+
}
85+
86+
input {
87+
background-color: #eee;
88+
border: none;
89+
padding: 12px 15px;
90+
margin: 8px 0;
91+
width: 100%;
92+
}
93+
94+
.container {
95+
background-color: #fff;
96+
border-radius: 10px;
97+
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
98+
position: relative;
99+
overflow: hidden;
100+
width: 768px;
101+
max-width: 100%;
102+
min-height: 480px;
103+
}
104+
105+
.form-container {
106+
position: absolute;
107+
top: 0;
108+
height: 100%;
109+
transition: all 0.6s ease-in-out;
110+
}
111+
112+
.sign-in-container {
113+
left: 0;
114+
width: 50%;
115+
z-index: 2;
116+
}
117+
118+
.container.right-panel-active .sign-in-container {
119+
transform: translateX(100%);
120+
}
121+
122+
.sign-up-container {
123+
left: 0;
124+
width: 50%;
125+
opacity: 0;
126+
z-index: 1;
127+
}
128+
129+
.container.right-panel-active .sign-up-container {
130+
transform: translateX(100%);
131+
opacity: 1;
132+
z-index: 5;
133+
animation: show 0.6s;
134+
}
135+
136+
@keyframes show {
137+
0%,
138+
49.99% {
139+
opacity: 0;
140+
z-index: 1;
141+
}
142+
143+
50%,
144+
100% {
145+
opacity: 1;
146+
z-index: 5;
147+
}
148+
}
149+
150+
.overlay-container {
151+
position: absolute;
152+
top: 0;
153+
left: 50%;
154+
width: 50%;
155+
height: 100%;
156+
overflow: hidden;
157+
transition: transform 0.6s ease-in-out;
158+
z-index: 100;
159+
}
160+
161+
.container.right-panel-active .overlay-container {
162+
transform: translateX(-100%);
163+
}
164+
165+
.overlay {
166+
background: #98c1d9;
167+
background: -webkit-linear-gradient(to right, #3d5a80, #98c1d9);
168+
background: linear-gradient(to right, #3d5a80, #98c1d9);
169+
background-repeat: no-repeat;
170+
background-size: cover;
171+
background-position: 0 0;
172+
color: #ffffff;
173+
position: relative;
174+
left: -100%;
175+
height: 100%;
176+
width: 200%;
177+
transform: translateX(0);
178+
transition: transform 0.6s ease-in-out;
179+
}
180+
181+
.container.right-panel-active .overlay {
182+
transform: translateX(50%);
183+
}
184+
185+
.overlay-panel {
186+
position: absolute;
187+
display: flex;
188+
align-items: center;
189+
justify-content: center;
190+
flex-direction: column;
191+
padding: 0 40px;
192+
text-align: center;
193+
top: 0;
194+
height: 100%;
195+
width: 50%;
196+
transform: translateX(0);
197+
transition: transform 0.6s ease-in-out;
198+
}
199+
200+
.overlay-left {
201+
transform: translateX(-20%);
202+
}
203+
204+
.container.right-panel-active .overlay-left {
205+
transform: translateX(0);
206+
}
207+
208+
.overlay-right {
209+
right: 0;
210+
transform: translateX(0);
211+
}
212+
213+
.container.right-panel-active .overlay-right {
214+
transform: translateX(20%);
215+
}
216+
217+
.social-container {
218+
margin: 20px 0;
219+
}
220+
221+
.social-container a {
222+
border: 1px solid #dddddd;
223+
border-radius: 50%;
224+
display: inline-flex;
225+
justify-content: center;
226+
align-items: center;
227+
margin: 0 5px;
228+
height: 40px;
229+
width: 40px;
230+
}

‎public/js/sign_up-login.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const signUp = document.getElementById("signUp");
2+
const signIn = document.getElementById("signIn");
3+
const container = document.getElementById("container");
4+
const signUpBtn = document.getElementById("signUpBtn");
5+
const loginBtn = document.getElementById("loginBtn");
6+
const loginEmail = document.getElementById("loginEmail");
7+
const loginPassword = document.getElementById("loginPassword");
8+
9+
signUp.addEventListener("click", () => {
10+
container.classList.add("right-panel-active");
11+
});
12+
13+
signIn.addEventListener("click", () => {
14+
container.classList.remove("right-panel-active");
15+
});
16+
17+
function login() {
18+
const loginDetails = {
19+
loginEmail: loginEmail.value,
20+
loginPassword: loginPassword.value,
21+
};
22+
23+
axios
24+
.post("http://localhost:3000/user/login", loginDetails)
25+
.then((result) => {
26+
alert(result.data.message);
27+
localStorage.setItem("token", result.data.token);
28+
window.location.href = "/homePage";
29+
})
30+
.catch((error) => {
31+
if (error.response) {
32+
const errorMessage = error.response.data.message;
33+
alert(errorMessage);
34+
} else {
35+
alert("An error occurred. Please try again later.");
36+
}
37+
});
38+
}
39+
40+
loginBtn.addEventListener("click", login);

‎public/views/sign_up-login.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="css/sign_up-login.css" />
8+
<title>Sign-up || Login</title>
9+
</head>
10+
11+
<body>
12+
<h2>Tracking expenses is directly proportional to saving money</h2>
13+
14+
<div class="container" id="container">
15+
<div class="form-container sign-up-container">
16+
<form action="/user/signUp" method="post">
17+
<h1>Create Account</h1>
18+
<span>fill your credentials here</span>
19+
<input type="text" placeholder="Name" name="name" id="name" required />
20+
<input type="email" placeholder="Email" name="email" id="email" required />
21+
<input type="password" id="password" placeholder="Password" name="password" required />
22+
<button id="signUpBtn">Sign Up</button>
23+
</form>
24+
</div>
25+
26+
<div class="form-container sign-in-container">
27+
<form onsubmit="return false;">
28+
<h1>Login</h1>
29+
<span>use your previous credentials</span>
30+
<input type="email" placeholder="Email" name="loginEmail" id="loginEmail" required />
31+
<input type="password" placeholder="Password" name="loginPassword" id="loginPassword" required />
32+
<a href="/password/forgotPasswordPage">Forgot Password?</a>
33+
<button id="loginBtn">Login</button>
34+
</form>
35+
</div>
36+
37+
<div class="overlay-container">
38+
<div class="overlay">
39+
<div class="overlay-panel overlay-left">
40+
<h1>Welcome Back!</h1>
41+
<p>
42+
To keep connected with us please login with your personal info
43+
</p>
44+
<button class="ghost" id="signIn">Login</button>
45+
</div>
46+
47+
<div class="overlay-panel overlay-right">
48+
<h1>Hello, Friend!</h1>
49+
<p>Enter your personal details and start journey with us</p>
50+
<button class="ghost" id="signUp">Sign Up</button>
51+
</div>
52+
53+
</div>
54+
</div>
55+
56+
</div>
57+
58+
<script src="js/sign_up-login.js"></script>
59+
</body>
60+
61+
</html>

‎public/views/sign_up.html‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

0 commit comments

Comments
 (0)