├── requirements.txt
├── .vscode
└── settings.json
├── docs
└── logo.png
├── models
└── user.js
├── package.json
├── script.js
├── forgotpassword.html
├── dashboard.html
├── dashboard.css
├── forgotpassword.css
├── index.html
├── db.js
└── style.css
/requirements.txt:
--------------------------------------------------------------------------------
1 | http://localhost:4000/login
2 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5501
3 | }
--------------------------------------------------------------------------------
/docs/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sukeshperiyasamy/demopowerpay/HEAD/docs/logo.png
--------------------------------------------------------------------------------
/models/user.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose');
2 |
3 | const userSchema = new mongoose.Schema({
4 | email: {
5 | type: String,
6 | required: true,
7 | unique: true
8 | },
9 | password: {
10 | type: String,
11 | required: true
12 | }
13 | });
14 |
15 | const User = mongoose.model('User', userSchema);
16 |
17 | module.exports = User;
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "version": "1.0.0",
4 | "description": "web app power pay project ",
5 | "main": "index.html",
6 | "directories": {
7 | "doc": "docs"
8 | },
9 | "scripts": {
10 | "test": "echo \"Error: no test specified\" && exit 1"
11 | },
12 | "author": "sukesh",
13 | "license": "ISC",
14 | "dependencies": {
15 | "bcrypt": "^5.1.0",
16 | "express": "^4.18.2",
17 | "mongodb": "^5.3.0",
18 | "mongoose": "^7.0.5",
19 | "nodemon": "^2.0.22"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const loginText = document.querySelector(".title-text .login");
2 | const loginForm = document.querySelector("form.login");
3 | const loginBtn = document.querySelector("label.login");
4 | const signupBtn = document.querySelector("label.signup");
5 | const signupLink = document.querySelector("form .signup-link a");
6 | signupBtn.onclick = (()=>{
7 | loginForm.style.marginLeft = "-50%";
8 | loginText.style.marginLeft = "-50%";
9 | });
10 | loginBtn.onclick = (()=>{
11 | loginForm.style.marginLeft = "0%";
12 | loginText.style.marginLeft = "0%";
13 | });
14 | signupLink.onclick = (()=>{
15 | signupBtn.click();
16 | return false;
17 | });
18 |
--------------------------------------------------------------------------------
/forgotpassword.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Get New Password
5 |
6 |
7 |
8 |
9 |
Enter New Password
10 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/dashboard.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Dashboard
8 |
9 |
10 |
11 |
12 | Welcome to the Dashboard!
13 |
14 |
15 |
23 |
24 |
25 | Dashboard Content
26 | This is the main content of the dashboard.
27 |
28 |
29 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/dashboard.css:
--------------------------------------------------------------------------------
1 | /* Reset some default styles */
2 | body, h1, h2, p, ul, li {
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | /* Style the header */
8 | header {
9 | background-color: #f9f9f9;
10 | padding: 20px;
11 | text-align: center;
12 | }
13 |
14 | /* Style the navigation */
15 | nav {
16 | background-color: #333;
17 | color: #fff;
18 | }
19 |
20 | nav ul {
21 | display: flex;
22 | justify-content: space-around;
23 | list-style: none;
24 | padding: 10px;
25 | }
26 |
27 | nav ul li {
28 | flex: 1;
29 | }
30 |
31 | nav ul li a {
32 | color: #fff;
33 | text-decoration: none;
34 | padding: 10px;
35 | }
36 |
37 | nav ul li a:hover {
38 | background-color: #555;
39 | }
40 |
41 | /* Style the main content */
42 | main {
43 | padding: 20px;
44 | }
45 |
46 | /* Style the footer */
47 | footer {
48 | background-color: #f9f9f9;
49 | padding: 10px;
50 | text-align: center;
51 | }
52 |
53 | /* Custom styling for the dashboard content */
54 | h2 {
55 | color: #333;
56 | margin-bottom: 10px;
57 | }
58 |
59 | p {
60 | color: #777;
61 | }
62 |
--------------------------------------------------------------------------------
/forgotpassword.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background-color: #f1f1f1;
7 | }
8 |
9 | .password-form {
10 | width: 300px;
11 | padding: 20px;
12 |
13 | border: 1px solid #f82828;
14 | border-radius: 5px;
15 |
16 | background-color: rgb(247, 247, 247);
17 | display: flex;
18 | flex-direction: column;
19 | align-items:center;
20 | }
21 |
22 | .password-form h1 {
23 | text-align: center;
24 | margin-bottom: 20px;
25 | color: #333;
26 | }
27 |
28 | .password-form label {
29 | display: block;
30 | margin-bottom: 10px;
31 | color: #666;
32 |
33 |
34 | }
35 |
36 | .password-form input[type="text"],
37 | .password-form input[type="password"] {
38 | width: 100%;
39 | padding: 10px;
40 | font-size: 16px;
41 | border: 1px solid #ccc;
42 | border-radius: 4px;
43 | }
44 |
45 | .password-form input[type="submit"] {
46 | width: 100%;
47 | padding: 10px;
48 | font-size: 16px;
49 | background-color: #4CAF50;
50 | color: #fff;
51 | border: none;
52 | border-radius: 4px;
53 | cursor: pointer;
54 | }
55 |
56 | .password-form input[type="submit"]:hover {
57 | background-color: #45a049;
58 | }
59 |
60 | .password-form input[type="submit"]:focus {
61 | outline: none;
62 | }
63 |
64 | .password-form input[type="submit"]:active {
65 | background-color: #3e874c;
66 | }
67 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | POWER PAY
8 |
9 |
10 |
11 |
12 |
13 |
Login Form
14 |
Signup Form
15 |
16 |
56 |
An error occurred
91 | Go back
92 | `);
93 | });
94 | });
95 | });
96 |
97 |
98 |
99 |
100 | // Login route
101 | app.post('/login', (req, res, next) => {
102 | const { email, password } = req.body;
103 |
104 | // Check if email exists
105 | User.findOne({ email })
106 | .then(user => {
107 | if (!user) {
108 | // User does not exist, redirect to signup
109 | return res.redirect('/signup');
110 | }
111 |
112 | // Compare password hashes
113 | bcrypt.compare(password, user.password)
114 | .then(result => {
115 | if (result) {
116 | // Password matches, redirect to the dashboard
117 | return res.redirect('/dashboard');
118 | } else {
119 | // Password does not match, redirect to login
120 | return res.send(`
121 | Invalid email or password
122 | Go back
123 | `);
124 | }
125 | })
126 | .catch(err => {
127 | console.log(err);
128 | res.send(`
129 | An error occurred
130 | Go back
131 | `);
132 | });
133 | })
134 | .catch(err => {
135 | console.log(err);
136 | res.send(`
137 | An error occurred
138 | Go back
139 | `);
140 | });
141 | });
142 |
143 |
144 |
145 | app.listen(4000, () => {
146 | console.log('Server listening on port 4000');
147 | });
148 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 | *{
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | font-family: 'Poppins', sans-serif;
7 | }
8 | html,body{
9 | display: grid;
10 | height: 100%;
11 | width: 100%;
12 | place-items: center;
13 | background: -webkit-linear-gradient(left, #a0f02f,#04f2fa,#5b02f5
14 | , #0073e6);
15 | }
16 | ::selection{
17 | background: #053eff;
18 | color: #ECEEFF;
19 | }
20 | .wrapper{
21 | overflow: hidden;
22 | max-width: 390px;
23 | background: #fff;
24 | padding: 30px;
25 | border-radius: 15px;
26 | box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
27 | }
28 | .wrapper .title-text{
29 | display: flex;
30 | width: 200%;
31 | }
32 | .wrapper .title{
33 | width: 50%;
34 | font-size: 35px;
35 | font-weight: 600;
36 | text-align: center;
37 | transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
38 | }
39 | .wrapper .slide-controls{
40 | position: relative;
41 | display: flex;
42 | height: 50px;
43 | width: 100%;
44 | overflow: hidden;
45 | margin: 30px 0 10px 0;
46 | justify-content: space-between;
47 | border: 1px solid lightgrey;
48 | border-radius: 15px;
49 | }
50 | .slide-controls .slide{
51 | height: 100%;
52 | width: 100%;
53 | color: #fff;
54 | font-size: 18px;
55 | font-weight: 500;
56 | text-align: center;
57 | line-height: 48px;
58 | cursor: pointer;
59 | z-index: 1;
60 | transition: all 0.6s ease;
61 | }
62 | .slide-controls label.signup{
63 | color: #000;
64 | }
65 | .slide-controls .slider-tab{
66 | position: absolute;
67 | height: 100%;
68 | width: 50%;
69 | left: 0;
70 | z-index: 0;
71 | border-radius: 15px;
72 | background:#053eff ;
73 | transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
74 | }
75 | input[type="radio"]{
76 | display: none;
77 | }
78 | #signup:checked ~ .slider-tab{
79 | left: 50%;
80 | }
81 | #signup:checked ~ label.signup{
82 | color: #fff;
83 | cursor: default;
84 | user-select: none;
85 | }
86 | #signup:checked ~ label.login{
87 | color: #000;
88 | }
89 | #login:checked ~ label.signup{
90 | color: #000;
91 | }
92 | #login:checked ~ label.login{
93 | cursor: default;
94 | user-select: none;
95 | }
96 | .wrapper .form-container{
97 | width: 100%;
98 | overflow: hidden;
99 | }
100 | .form-container .form-inner{
101 | display: flex;
102 | width: 200%;
103 | }
104 | .form-container .form-inner form{
105 | width: 50%;
106 | transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
107 | }
108 | .form-inner form .field{
109 | height: 50px;
110 | width: 100%;
111 | margin-top: 20px;
112 | }
113 | .form-inner form .field input{
114 | height: 100%;
115 | width: 100%;
116 | outline: none;
117 | padding-left: 15px;
118 | border-radius: 15px;
119 | border: 1px solid lightgrey;
120 | border-bottom-width: 2px;
121 | font-size: 17px;
122 | transition: all 0.3s ease;
123 | }
124 | .form-inner form .field input:focus{
125 | border-color: #1a75ff;
126 | /* box-shadow: inset 0 0 3px #fb6aae; */
127 | }
128 | .form-inner form .field input::placeholder{
129 | color: #999;
130 | transition: all 0.3s ease;
131 | }
132 | form .field input:focus::placeholder{
133 | color: #1a75ff;
134 | }
135 | .form-inner form .pass-link{
136 | margin-top: 5px;
137 | }
138 | .form-inner form .signup-link{
139 | text-align: center;
140 | margin-top: 30px;
141 | }
142 | .form-inner form .pass-link a,
143 | .form-inner form .signup-link a{
144 | color: #1a75ff;
145 | text-decoration: none;
146 | }
147 | .form-inner form .pass-link a:hover,
148 | .form-inner form .signup-link a:hover{
149 | text-decoration: underline;
150 | }
151 | form .btn{
152 | height: 50px;
153 | width: 100%;
154 | border-radius: 15px;
155 | position: relative;
156 | overflow: hidden;
157 | }
158 | form .btn .btn-layer{
159 | height: 100%;
160 | width: 300%;
161 | position: absolute;
162 | left: -100%;
163 | background: #053eff;
164 | border-radius: 15px;
165 | transition: all 0.4s ease;;
166 | }
167 | form .btn:hover .btn-layer{
168 | left: 0;
169 | }
170 | form .btn input[type="submit"]{
171 | height: 100%;
172 | width: 100%;
173 | z-index: 1;
174 | position: relative;
175 | background: none;
176 | border: none;
177 | color: #eceeff;
178 | padding-left: 0;
179 | border-radius: 15px;
180 | font-size: 20px;
181 | font-weight: 500;
182 | cursor: pointer;
183 | }
184 |
--------------------------------------------------------------------------------