diff --git a/public/css/change-password.css b/public/css/change-password.css
new file mode 100644
index 0000000..aaaa271
--- /dev/null
+++ b/public/css/change-password.css
@@ -0,0 +1,189 @@
+body {
+ font-family: 'Poppins', sans-serif;
+ background-color: #1b1c1e;
+}
+
+.nav-color {
+ background-color: #212226;
+}
+
+.form-control {
+ background-color: #212226;
+ color: white;
+}
+
+.form-control:valid {
+ background-color: #212226;
+ color: white;
+}
+
+.form-control:invalid {
+ background-color: #2f0001;
+ color: white;
+}
+
+button[type="submit"] {
+ margin-bottom: 4%;
+}
+
+.btn-forgot {
+ width: 100%;
+}
+
+.hoverforgot-1 a {
+ color: white;
+ background-color: transparent;
+ position: center;
+ margin: auto;
+ text-align: center;
+}
+
+.hoverforgot-1 a:hover {
+ background-color: transparent;
+ color: white;
+ text-decoration: underline;
+}
+
+.card {
+ position: center;
+ margin: auto;
+ margin-top: 3%;
+ text-align: center;
+ border-bottom-left-radius: 20px;
+ border-bottom-right-radius: 20px;
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ background-color: #212226;
+}
+
+.icon {
+ position: center;
+ margin: auto;
+ width: 100%;
+ height: 100%;
+ padding-bottom: 0%;
+}
+
+.form-check {
+ float: left;
+}
+
+.form .options-01 {
+ margin-bottom: 50px;
+}
+
+.form .options-01 input {
+ width: 15px;
+ height: 15px;
+ margin-right: 5px;
+}
+
+.form .options-01 .remember-me {
+ color: #bbb;
+ font-size: 6pt;
+ display: flex;
+ align-items: center;
+ float: left;
+ cursor: pointer;
+ word-break: keep-all;
+
+}
+
+.form .options-01 a {
+ color: #888;
+ font-size: 14px;
+ font-style: italic;
+ float: right;
+ text-align: right;
+ text-decoration: underline;
+}
+
+.text {
+ margin-bottom: -6%;
+}
+
+@media screen and (max-width: 425px) {
+
+ .card a,
+ input {
+ font-size: 3vw;
+ }
+
+ .card-header {
+ font-size: 6vw;
+ }
+}
+
+@media screen and (min-width: 426px) {
+
+ .card a,
+ input {
+ font-size: 2vw;
+ }
+
+ .card-header {
+ font-size: 5vw;
+ }
+}
+
+@media screen and (min-width: 767px) {
+
+ .card a,
+ input {
+ font-size: 2vw;
+ }
+
+ .card-header {
+ font-size: 4vw;
+ }
+}
+
+@media screen and (min-width: 993px) {
+
+ .card a,
+ input {
+ font-size: 1vw;
+ }
+
+ .card-header {
+ font-size: 2.5vw;
+ }
+}
+
+@media screen and (min-width: 1400px) {
+
+ .card a,
+ input {
+ font-size: 1vw;
+ }
+
+ .card-header {
+ font-size: 2.5vw;
+ }
+}
+
+@media screen and (max-width: 500px) {
+ .form {
+ width: 95%;
+ }
+
+ .form .user-input {
+ width: 100%
+ }
+
+ .form .btn {
+ width: 100%;
+ }
+}
+
+.btn-resetpassword {
+ width: 100%;
+ background-color: darkred;
+ border-color: darkred;
+ border-radius: 100px;
+}
+
+.btn-resetpassword:hover {
+ background-color: red;
+ border-color: red;
+}
\ No newline at end of file
diff --git a/public/css/login-error.css b/public/css/login-error.css
new file mode 100644
index 0000000..da2f622
--- /dev/null
+++ b/public/css/login-error.css
@@ -0,0 +1,110 @@
+body {
+ font-family: 'Poppins', sans-serif;
+ background-color: #1b1c1e;
+}
+
+.nav-color {
+ background-color: #212226;
+}
+
+.nav-radius {
+ border-bottom-left-radius: 20px;
+ border-bottom-right-radius: 20px;
+}
+
+.card {
+ position: center;
+ margin: auto;
+ text-align: center;
+ border-radius: 20px;
+ background-color: #212226;
+}
+
+.icon {
+ position: center;
+ margin: auto;
+ width: 65%;
+ height: 65%;
+ padding-bottom: 0%;
+ padding-top: -5%;
+}
+
+.btn {
+ background-color: darkred;
+ border-color: darkred;
+ border-radius: 100px;
+ width: 50%;
+}
+
+.btn:hover {
+ background-color: red;
+ border-color: red;
+}
+
+@media screen and (max-width: 766px) {
+ .card h2 {
+ font-size: 7vw;
+ }
+
+ .card h5 {
+ font-size: 5vw;
+ }
+
+ .navbar-brand {
+ width: 11vw;
+ height: 11vw;
+ }
+
+}
+
+@media screen and (min-width: 767px) {
+ .card h2 {
+ font-size: 4vw;
+ }
+
+ .card h5 {
+ font-size: 2vw;
+ }
+
+ .navbar-brand {
+ width: 8vw;
+ height: 8vw;
+ }
+
+}
+
+@media screen and (min-width: 993px) {
+ .card h2 {
+ font-size: 3vw;
+ }
+
+ .card h5 {
+ font-size: 1.3vw;
+ }
+
+ .navbar-brand {
+ width: 6vw;
+ height: 6vw;
+ }
+
+}
+
+@media screen and (min-width: 1400px) {
+ .card h2 {
+ font-size: 4vw;
+ }
+
+ .card h5 {
+ font-size: 2vw;
+ }
+
+ .navbar-brand {
+ width: 6vw;
+ height: 6vw;
+ }
+
+ :focus {
+ outline: 0 !important;
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
+ }
+}
\ No newline at end of file
diff --git a/public/js/change-password.js b/public/js/change-password.js
new file mode 100644
index 0000000..879c541
--- /dev/null
+++ b/public/js/change-password.js
@@ -0,0 +1,17 @@
+function revealhidePassword1() {
+ const x = document.getElementById("password");
+ if (x.type === "password") {
+ x.type = "text";
+ } else {
+ x.type = "password";
+ }
+}
+
+function revealhidePassword2() {
+ const x = document.getElementById("verifypassword");
+ if (x.type === "verifypassword") {
+ x.type = "text";
+ } else {
+ x.type = "verifypassword";
+ }
+}
\ No newline at end of file
diff --git a/public/js/login.js b/public/js/login.js
index 4055726..c20699d 100644
--- a/public/js/login.js
+++ b/public/js/login.js
@@ -1,5 +1,5 @@
function revealhidePassword() {
- const x = document.getElementById("exampleDropdownFormPassword1");
+ const x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
diff --git a/routes/index.js b/routes/index.js
index 88f7d1a..585095a 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -24,6 +24,10 @@ router.get('/otp', (_req, res) => {
res.render('pages/otp');
})
+router.get('/change-password', (_req, res) => {
+ res.render('pages/change-password');
+})
+
router.get('/products', (_req, res) => {
product_controller.getProducts().then(data => {
res.render('pages/products', {data: data});
diff --git a/routes/registerlogin.js b/routes/registerlogin.js
index e6ce8b4..c9956ca 100644
--- a/routes/registerlogin.js
+++ b/routes/registerlogin.js
@@ -126,31 +126,28 @@ exports.register = async function (req, res) {
};
exports.login = async function (req, res) {
- var email = req.body.email;
- var password = req.body.password;
+ if (
+ !req.body.email ||
+ !req.body.password
+ ) {
+ // Empty Fields
+ res.render("pages/login-error");
+ } else {
db_connect.query(
"SELECT * FROM users WHERE email = ?",
[email],
async function (error, response, fields) {
const passCheck = await bcrypt.compare(password, response[0].password);
if (error) {
- res.send({
- code: 400,
- failed: "An error has occured...",
- });
+ // Error
+ res.render("pages/login-error");
} else {
if (response.length > 0) {
if (passCheck) {
if (response[0].verify == 0) {
- res.send({
- code: 204,
- success: "Sorry You havent verified your email",
- });
+ res.render("pages/login-error");
} else {
- res.send({
- code: 200,
- success: "Login Successful!!",
- });
+ res.render("pages/index");
}
} else {
res.send({
@@ -168,6 +165,7 @@ exports.login = async function (req, res) {
}
);
};
+};
/* verification email link */
exports.verifyemail = function (req, res, next) {
diff --git a/views/layouts/footer.ejs b/views/layouts/footer.ejs
index a7d7867..9863429 100644
--- a/views/layouts/footer.ejs
+++ b/views/layouts/footer.ejs
@@ -33,6 +33,8 @@
<% } else if(state == "login") { %>
+<% } else if(state == "change-password") { %>
+
<% } else if(state == "register") { %>
<% } else if(state == "otp") { %>
diff --git a/views/layouts/header.ejs b/views/layouts/header.ejs
index 5e4357f..3933a7b 100644
--- a/views/layouts/header.ejs
+++ b/views/layouts/header.ejs
@@ -35,6 +35,8 @@
+
+
+
+
+
+
+
An error has occured... Make sure to check if you have empty fields, or if your email has been login before. Click the button below to get back to the login page.
+
+
Login
+
+
+
+
+