Profile page done. Attempt to make a profile module

githubalexliu · Mar 4, 2018 · a865888 · a865888
1 parent 1f3fc57
commit a865888
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 57 deletions.
diff --git a/app/profile.js b/app/profile.js
@@ -0,0 +1,18 @@
+module.exports = function(req, res) {
+  changeName = function(id, firstname, lastname) {
+    connection.query("UPDATE users SET firstname = ?, lastname = ? WHERE id = ?", [firstname, lastname, id], function(err, rows) {
+      if (err) throw err;
+    });
+  }
+
+  changeEmail = function(id, email) {
+    connection.query("UPDATE users SET email = ? WHERE id = ?", [email, id], function(err, rows) {
+      if (err) throw err;
+    });
+  }
+};
+var mysql = require('mysql');
+var dbconfig = require('../config/database');
+var bcrypt = require('bcrypt-nodejs');
+var connection = mysql.createConnection(dbconfig.connection);
+connection.query('USE ' + dbconfig.database);
diff --git a/app/routes.js b/app/routes.js
@@ -48,14 +48,14 @@ module.exports = function(app, passport) {
   });
 
   app.get('/profile', function(req, res) {
-    if (req.isAuthenticated()){
+    if (req.isAuthenticated()) {
       res.render('profile', {
         title: 'Profile',
-        message: req.flash('message'),
+        messageSuccess: req.flash('messageSuccess'),
+        messageFail: req.flash('messageFail'),
         user: req.user
       });
-    }
-    else {
+    } else {
       res.redirect('/');
     }
   });
@@ -70,24 +70,33 @@ module.exports = function(app, passport) {
     res.redirect('profile');
   });
 
-  app.post('/changepw', function(req, res, next) {
+  app.post('/changepw', function(req, res) {
+    // Is there a way to move this into profile.js?
+    // If I move the redirect out of connection.query, the messages are not flashed
+    // I can't move redirect into the module
     connection.query("SELECT * FROM users WHERE id = ?", [req.user.id], function(err, rows) {
       if (err) throw err;
-      if (req.body.oldpw !== rows[0].password) {
-        console.log("dd");
-        req.flash('message', 'Sorry. Your old password is incorrect.');
-        res.redirect('profile');
+      else if (!bcrypt.compareSync(req.body.oldpw, rows[0].password)) {
+        req.flash('messageFail', 'Your old password is incorrect.');
+      } else if (req.body.newpw !== req.body.newpw2) {
+        req.flash('messageFail', 'Your new passwords do not match.');
+      } else {
+        connection.query("UPDATE users SET password = ? WHERE id = ?", [bcrypt.hashSync(req.body.newpw, null, null), req.user.id], function(err, rows) {
+          if (err) throw err;
+        });
+        req.flash('messageSuccess', 'Your password has been changed. Please \
+        logout for your new password to take effect.');
       }
+      res.redirect('profile');
     });
-    // res.redirect('profile');
   });
 
   app.get('/word-list', function(req, res) {
     // if (req.isAuthenticated()){
-      res.render('word-list', {
-        title: 'Word List',
-        user: req.user
-      });
+    res.render('word-list', {
+      title: 'Word List',
+      user: req.user
+    });
     // }
     // else {
     //   res.redirect('/');
@@ -104,28 +113,11 @@ var mysql = require('mysql');
 var dbconfig = require('../config/database');
 var bcrypt = require('bcrypt-nodejs');
 var connection = mysql.createConnection(dbconfig.connection);
+require('./profile.js')();
 connection.query('USE ' + dbconfig.database);
 
 function isLoggedIn(req, res, next) {
   if (req.isAuthenticated())
     return next();
   res.redirect('/');
 }
-
-function changeName(id, firstname, lastname) {
-  connection.query("UPDATE users SET firstname = ?, lastname = ? WHERE id = ?",
-    [firstname,lastname,id], function(err, rows){
-    if (err) throw err;
-  });
-}
-
-function changeEmail(id, email) {
-  connection.query("UPDATE users SET email = ? WHERE id = ?",
-    [email,id], function(err, rows){
-    if (err) throw err;
-  });
-}
-
-function changePW(id, oldpw, newpw, newpw2, done, req) {
-
-}
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -16,3 +16,20 @@
 .form-inline * {
   margin-bottom: 10px;
 }
+.navbar-custom {
+    background-color: #5B9BD5;
+}
+/* change the brand and text color */
+.navbar-custom .navbar-brand,
+.navbar-custom .navbar-text {
+    color: rgba(255,255,255,.8);
+}
+/* change the link color */
+.navbar-custom .navbar-nav .nav-link {
+    color: rgba(255,255,255,.5);
+}
+/* change the color of active or hovered links */
+.navbar-custom .nav-item.active .nav-link,
+.navbar-custom .nav-item:hover .nav-link {
+    color: #ffffff;
+}
diff --git a/views/partials/nav.ejs b/views/partials/nav.ejs
@@ -1,34 +1,40 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-dark">
+<nav class="navbar navbar-expand-md navbar-custom">
   <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
-      <ul class="navbar-nav mr-auto">
-          <li class="nav-item">
-              <a class="nav-link" href="word-list">Word List</a>
-          </li>
-          <li class="nav-item">
-              <a class="nav-link" href="#">Dictionary</a>
-          </li>
-          <li class="nav-item">
-              <a class="nav-link" href="#">Review</a>
-          </li>
-          <li class="nav-item">
-              <a class="nav-link" href="#">Statistics</a>
-          </li>
-      </ul>
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="word-list">Word List</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Dictionary</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Review</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Statistics</a>
+      </li>
+    </ul>
   </div>
   <div class="mx-auto order-0">
-      <a class="navbar-brand" href="/home">Vocabulary Builder</a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
+    <a class="navbar-brand" href="/home">Vocabulary Builder</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
           <span class="navbar-toggler-icon"></span>
       </button>
   </div>
   <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
-      <ul class="navbar-nav ml-auto">
+    <ul class="navbar-nav ml-auto">
+      <% if (title === 'Profile') { %>
+        <li class="nav-item active">
+          <a class="nav-link" href="/profile">Profile</a>
+        </li>
+        <% } else { %>
           <li class="nav-item">
-            <a class="nav-link" href="/profile"><%= user.firstname %></a>
+            <a class="nav-link" href="/profile">Profile</a>
           </li>
-          <li class="nav-item">
+          <% } %>
+            <li class="nav-item">
               <a class="nav-link" href="/logout">Logout</a>
-          </li>
-      </ul>
+            </li>
+    </ul>
   </div>
-</nav>
+</nav>
diff --git a/views/profile.ejs b/views/profile.ejs
@@ -10,11 +10,16 @@
     <div class="container">
       <div class="row">
         <div class="col-md-8 offset-md-2">
-          <% if (message.length > 0) { %>
+          <% if (messageFail.length > 0) { %>
             <div class="alert alert-danger top-buffer-20" role="alert">
-              <%= message %>
+              <%= messageFail %>
             </div>
             <% } %>
+            <% if (messageSuccess.length > 0) { %>
+              <div class="alert alert-success top-buffer-20" role="alert">
+                <%= messageSuccess %>
+              </div>
+              <% } %>
           <table class="table table-borderless top-buffer-50">
             <tbody>
               <tr>