Home Explore Help
Register Sign In
lee
/
subline
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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

Lee Morgan 5 years ago
parent
44272978b2
commit
9893b38620
9 changed files with 112 additions and 12 deletions
Unified View Show Diff Stats
  1. 5 0
      controllers/passwordReset.js
  2. 17 0
      emails/passwordReset.js
  3. 1 1
      emails/verifyEmail.js
  4. 4 0
      routes.js
  5. 2 2
      views/landingPage/landing.ejs
  6. 2 0
      views/landingPage/login.js
  7. 31 0
      views/passwordResetPages/email.ejs
  8. 43 0
      views/passwordResetPages/passwordReset.css
  9. 7 9
      workspace.html

+ 5 - 0
controllers/passwordReset.js
View File 

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

+ 17 - 0
emails/passwordReset.js
View File 

@@ -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
View File 

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

+ 4 - 0
routes.js
View File 

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

+ 2 - 2
views/landingPage/landing.ejs
View File 

@@ -109,9 +109,9 @@
 
 
 
                 <a class="button buttonWithBorder" href="/squarelogin">Sign In with Square</a> -->
 
                 <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>
 
             </form>
 
         </div>
 
         </div>

+ 2 - 0
views/landingPage/login.js
View File 

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

+ 31 - 0
views/passwordResetPages/email.ejs
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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>
 
     </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>
 
 </div>