Create reset verification sent page and reset verification completed

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;
+    }
+}

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;
+    }
+}

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) {

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") { %>

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>

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>