From 20d51e7bed7d87c90d0e2b779ad01b75d6ef70e8 Mon Sep 17 00:00:00 2001
From: Kelvin Samuel <kelvinbalkes@gmail.com>
Date: Sun, 21 Nov 2021 15:50:53 +0700
Subject: [PATCH] Create reset verification sent page and reset verification
 completed

---
 public/css/forgot-verification-sent.css      |  86 +++++++++++++++
 public/css/reset-verification-completed.css  | 110 +++++++++++++++++++
 routes/index.js                              |   8 +-
 views/layouts/header.ejs                     |   4 +
 views/pages/forgot-verification-sent.ejs     |  32 ++++++
 views/pages/reset-verification-completed.ejs |  35 ++++++
 6 files changed, 269 insertions(+), 6 deletions(-)
 create mode 100644 public/css/forgot-verification-sent.css
 create mode 100644 public/css/reset-verification-completed.css
 create mode 100644 views/pages/forgot-verification-sent.ejs
 create mode 100644 views/pages/reset-verification-completed.ejs

diff --git a/public/css/forgot-verification-sent.css b/public/css/forgot-verification-sent.css
new file mode 100644
index 0000000..a265c60
--- /dev/null
+++ b/public/css/forgot-verification-sent.css
@@ -0,0 +1,86 @@
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: #1b1c1e;
+}
+
+.nav-color {
+    background-color: #212226;
+}
+
+.card {
+    position: center;
+    margin: auto;
+    text-align: center;
+    border-radius: 20px;
+    background-color: #212226;
+}
+
+.icon {
+    position: center;
+    margin: auto;
+    width: 70%;
+    height: 70%;
+}
+
+@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: 3vw;
+    }
+
+    .card h5 {
+        font-size: 1.5vw;
+    }
+
+    .navbar-brand {
+        width: 6vw;
+        height: 6vw;
+    }
+}
\ No newline at end of file
diff --git a/public/css/reset-verification-completed.css b/public/css/reset-verification-completed.css
new file mode 100644
index 0000000..5bde65e
--- /dev/null
+++ b/public/css/reset-verification-completed.css
@@ -0,0 +1,110 @@
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: #1b1c1e;
+}
+
+.nav-color {
+    background-color: #212226;
+}
+
+.card {
+    position: center;
+    margin: auto;
+    text-align: center;
+    border-radius: 20px;
+    background-color: #212226;
+}
+
+.btn {
+    background-color: darkred;
+    border-color: darkred;
+    border-radius: 100px;
+}
+
+.btn:hover {
+    background-color: red;
+    border-color: red;
+}
+
+.icon {
+    position: center;
+    margin: auto;
+    width: 70%;
+    height: 70%;
+}
+
+@media screen and (max-width: 766px) {
+    .card h2 {
+        font-size: 7vw;
+    }
+
+    .card h6 {
+        font-size: 5vw;
+    }
+
+    .card a {
+        font-size: 5vw;
+    }
+
+    .navbar-brand {
+        width: 11vw;
+        height: 11vw;
+    }
+}
+
+@media screen and (min-width: 767px) {
+    .card h2 {
+        font-size: 4vw;
+    }
+
+    .card h6 {
+        font-size: 2vw;
+    }
+
+    .card a {
+        font-size: 2.5vw;
+    }
+
+    .navbar-brand {
+        width: 8vw;
+        height: 8vw;
+    }
+}
+
+@media screen and (min-width: 993px) {
+    .card h2 {
+        font-size: 3vw;
+    }
+
+    .card h6 {
+        font-size: 1.3vw;
+    }
+
+    .card a {
+        font-size: 1.5vw;
+    }
+
+    .navbar-brand {
+        width: 6vw;
+        height: 6vw;
+    }
+}
+
+@media screen and (min-width: 1400px) {
+    .card h2 {
+        font-size: 3vw;
+    }
+
+    .card h6 {
+        font-size: 1.7vw;
+    }
+
+    .card a {
+        font-size: 2.5vw;
+    }
+
+    .navbar-brand {
+        width: 6vw;
+        height: 6vw;
+    }
+}
\ No newline at end of file
diff --git a/routes/index.js b/routes/index.js
index 24b1db5..746c23f 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -175,7 +175,7 @@ router.route("/reset-password")
     .post((req, res) => {
         controller.reset_password(req.query.token, req.body.password).then((data) => {
             if (data[0] == 200) {
-                res.render("pages/register-verification-completed");
+                res.render("pages/reset-verification-completed");
             } else {
                 res.redirect("/");
             }
@@ -195,17 +195,13 @@ router.route("/forgot-password")
     .post((req, res) => {
         controller.request_reset_password(req.body.email).then((data) => {
             if (data[0] == 200) {
-                res.render("pages/register-verification-sent");
+                res.render("pages/forgot-verification-sent");
             } else {
                 res.redirect("/forgot-password");
             }
         });
     });
 
-router.get("/otp", (_req, res) => {
-    res.render("pages/otp");
-});
-
 router.get("/products", (req, res) => {
     auth.session_converter(req.cookies.session_token).then((key) => {
         if (key != null) {
diff --git a/views/layouts/header.ejs b/views/layouts/header.ejs
index 0475f04..b34c4cd 100644
--- a/views/layouts/header.ejs
+++ b/views/layouts/header.ejs
@@ -50,6 +50,8 @@
   <link href="/css/product.css" rel="stylesheet" />
   <% } else if(state == "login") { %>
   <link href="/css/login.css" rel="stylesheet" />
+  <% } else if(state == "forgot-verification-sent") { %>
+  <link href="/css/forgot-verification-sent.css" rel="stylesheet" />
   <% } else if(state == "register") { %>
   <link href="/css/register.css" rel="stylesheet" />
   <% } else if(state == "register-verification-completed") { %>
@@ -60,6 +62,8 @@
   <link href="/css/forgot-password.css" rel="stylesheet" />
   <% } else if(state == "reset-password") { %>
   <link href="/css/reset-password.css" rel="stylesheet" />
+  <% } else if(state == "reset-verification-completed") { %>
+  <link href="/css/reset-verification-completed.css" rel="stylesheet" />
   <% } else if(state == "otp") { %>
   <link href="/css/otp.css" rel="stylesheet" />
   <% } else if(state == "register-error") { %>
diff --git a/views/pages/forgot-verification-sent.ejs b/views/pages/forgot-verification-sent.ejs
new file mode 100644
index 0000000..2d4500b
--- /dev/null
+++ b/views/pages/forgot-verification-sent.ejs
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+
+<%- include('../layouts/header.ejs', {title: 'Verify Forgot Password', state: 'forgot-verification-sent'}); %>
+
+<body>
+    <%- include('../layouts/navbar.ejs', {types: 'v2', title: 'Verify Forgot Password'}); %>
+    <br>
+
+    <div data-aos="fade-in" data-aos-delay="500" class="container">
+        <div class="row">
+            <div class="col">
+                <div class="card col-md-6 col-lg-6 col-xl-8">
+                    <div class="card-header" style="color: white;">
+                        <h2>Verify Your Email Address</h2>
+                    </div>
+                    <lottie-player style="display: -webkit-box;-webkit-box-pack: center;" autoplay background="transparent" class="icon" loop speed="1"
+                        src="https://assets5.lottiefiles.com/packages/lf20_gMQp3a.json"></lottie-player>
+                    <div class="card-body">
+                        <h5 class="card-text" style="color: #dedede;">Before proceeding, please check your email for a
+                            verification link
+                            to verify your email address.</h5>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <%- include('../layouts/footer.ejs', {state: 'login-verification-sent'}); %>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/pages/reset-verification-completed.ejs b/views/pages/reset-verification-completed.ejs
new file mode 100644
index 0000000..391a0db
--- /dev/null
+++ b/views/pages/reset-verification-completed.ejs
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+
+<%- include('../layouts/header.ejs', {title: '', state: 'reset-verification-completed'}); %>
+
+<body>
+    <%- include('../layouts/navbar.ejs', {types: 'v2', title: 'Verify Reset Password'}); %>
+    <br>
+
+
+    <div data-aos="fade-in" data-aos-delay="500" class="container">
+        <div class="row">
+            <div class="col">
+                <div class="card col-md-6 col-lg-6 col-xl-8">
+                    <div class="card-header" style="color: white;">
+                        <h2>Verification Completed !!</h2>
+                    </div>
+                    <lottie-player style="display: -webkit-box;-webkit-box-pack: center;" autoplay background="transparent" class="icon" loop speed="1"
+                        src="https://assets9.lottiefiles.com/temporary_files/7bLmTw.json"></lottie-player>
+                    <div class="card-body">
+                        <h6 class="card-text" style="color: #dedede;">Your Email Has Been Verified !! Please Sign in
+                            Using the button
+                            below..</h6>
+                        <br style="display: block;content: ' ';margin: 1vw 0;line-height: 1vw;">
+                        <a class="btn btn-primary" href="login">Login</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <%- include('../layouts/footer.ejs', {state: 'reset-verification-completed'}); %>
+</body>
+
+</html>
\ No newline at end of file