Bladeren bron

Create page for entering email in order to reset password.
Route link from sign in to this page.

Lee Morgan 5 jaren geleden
bovenliggende
commit
9893b38620

+ 5 - 0
controllers/passwordReset.js

@@ -0,0 +1,5 @@
+module.exports = {
+    enterEmail: function(req, res){
+        return res.render("passwordResetPages/email");
+    }
+}

+ 17 - 0
emails/passwordReset.js

@@ -0,0 +1,17 @@
+module.exports = (data)=>{
+    return `
+    <div id="passwordReset">
+        <header style="width:100%;height:75px;background:rgb(0,27,45);">
+            <img src="https://i.postimg.cc/dQky3vPX/logo.png" alt="Subline Logo" style="height:50px;padding:12px 12px;float:left;">
+
+            <h3 style="color:rgb(255,99,107);font-size:30px;margin:15px 0 0 0;float:left;">THE SUBLINE</h3>
+        </header>
+
+        <h1 style="text-align:center;">Password Resest for ${data.name}</h1>
+
+        <p>Follow the link below to go to reset your password.</p>
+
+        <p>${data.link}</p>
+    </div>
+    `;
+}

+ 1 - 1
emails/verifyEmail.js

@@ -1,6 +1,6 @@
 module.exports = (data)=>{
     return `
-        <div id="verifyemail">
+        <div id="verifyEmail">
             <header style="width:100%;height:75px;background:rgb(0,27,45);">
                 <img src="https://i.postimg.cc/dQky3vPX/logo.png" alt="Subline Logo" style="height:50px;padding:12px 12px;float:left;">
 

+ 4 - 0
routes.js

@@ -7,6 +7,7 @@ const recipeData = require("./controllers/recipeData");
 const orderData = require("./controllers/orderData.js");
 const informationPages = require("./controllers/informationPages.js");
 const emailVerification = require("./controllers/emailVerification.js");
+const passwordReset = require("./controllers/passwordReset.js");
 
 module.exports = function(app){
     //Render page
@@ -66,4 +67,7 @@ module.exports = function(app){
     app.get("/verify/email/:id", emailVerification.sendVerifyEmail);
     app.get("/verify/:id", emailVerification.verifyPage);
     app.post("/verify", emailVerification.verify);
+
+    //Password reset
+    app.get("/reset/email", passwordReset.enterEmail);
 }

+ 2 - 2
views/landingPage/landing.ejs

@@ -109,9 +109,9 @@
 
                 <a class="button buttonWithBorder" href="/squarelogin">Sign In with Square</a> -->
                 
-                <h3 class="link">Forgot your password?</h3>
+                <a href="/reset/email" class="link">Forgot your password?</a>
 
-                <h3 class="link" onclick="registerObj.display()">Need to register?</h3>
+                <h3 id="goToRegister" class="link">Need to register?</h3>
             </form>
         </div>
 

+ 2 - 0
views/landingPage/login.js

@@ -2,6 +2,8 @@ let loginObj = {
     display: function(username){
         controller.clearScreen();
         controller.loginStrand.style.display = "flex";
+
+        document.getElementById("goToRegister").addEventListener("click", ()=>{registerObj.display()});
     },
 
     cancel: function(){

+ 31 - 0
views/passwordResetPages/email.ejs

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta content="width=device-width, initial-scale=1" name="viewport"/>
+        <title>The Subline</title>
+        <link rel="icon" type="img/png" href="/shared/images/logo.png">
+        <link rel="stylesheet" href="/shared/shared.css">
+        <link rel="stylesheet" href="/passwordResetPages/passwordReset.css">
+        <link href="https://fonts.googleapis.com/css?family=Saira&display=swap" rel="stylesheet"> 
+    </head>
+    <body>
+        <% include ../shared/header %>
+
+        <h1 class="title">Enter your email to reset your password</h1>
+
+        <form class="form" action="#" method="post">
+            <input class="email" name="email" type="email" placeholder="email">
+
+            <input class="button" type="submit" value="SEND EMAIL">
+        </form>
+
+        <p class="text">An email will be sent to you shortly with instructions on reseting your password.  If you don't recieve an email within one minute, then try again.</p>
+
+        <script>
+            document.getElementById("helpLink").style.display = "block";
+            document.getElementById("privacyPolicyLink").style.display = "block";
+            document.getElementById("termsLink").style.display = "block";
+        </script>
+    </body>
+</html>

+ 43 - 0
views/passwordResetPages/passwordReset.css

@@ -0,0 +1,43 @@
+body{
+    align-items: center;
+}
+
+.title{
+    margin-top: 30px;
+    font-size: 40px;
+}
+
+.form{
+    border: none;
+    background: none;
+}
+
+    .email{
+       font-size: 30px;
+       margin-bottom: 15px;
+       text-align: center; 
+    }
+
+    .button{
+        font-size: 25px;
+        padding: 5px;
+    }
+
+.text{
+    font-size: 20px;
+    text-align: center;
+}
+
+@media screen and (max-width: 600px){
+    .form{
+        width: 350px;
+    }
+
+        .email{
+            font-size: 25px;
+        }
+
+        .button{
+            font-size: 20px;
+        }
+}

+ 7 - 9
workspace.html

@@ -1,15 +1,13 @@
-<div id="welcomeEmail">
-    <header style="width:100%;height:75px;background:rgb(0,27,45);text-align:center;display:inline;">
-            <img src="./views/shared/images/logo.png" alt="Subline Logo" style="height:75%">
+<div id="passwordReset">
+    <header style="width:100%;height:75px;background:rgb(0,27,45);">
+        <img src="https://i.postimg.cc/dQky3vPX/logo.png" alt="Subline Logo" style="height:50px;padding:12px 12px;float:left;">
 
-            <h3 style="color:rgb(255,99,107)">THE SUBLINE</h3>
+        <h3 style="color:rgb(255,99,107);font-size:30px;margin:15px 0 0 0;float:left;">THE SUBLINE</h3>
     </header>
 
-    <h1>Welcome to The Subline ${data.name}!</h1>
+    <h1 style="text-align:center;">Password Resest for ${data.name}</h1>
 
-    <p>We are glad to have you aboard and look forward to helping your business improve efficiency and cut costs.</p>
+    <p>Follow the link below to go to reset your password.</p>
 
-    <p>Please click the link below to verify your email address.</p>
-
-    <a href="${data.link}">VERIFY EMAIL</a>
+    <p>${data.link}</p>
 </div>