Commenting

app.js

@@ -1,3 +1,4 @@
+// Import required libraries
 const express = require('express');
 const expressLayouts = require('express-ejs-layouts');
 const mongoose = require('mongoose');
@@ -63,4 +64,5 @@ app.use('/users', require('./routes/users.js'));
 
 const PORT = process.env.PORT || 5000;
 
+// Start Server
 app.listen(PORT, console.log(`Server started on port ${PORT}`));

routes/users.js

@@ -1,11 +1,14 @@
+// Imports libraries
 const express = require('express');
 const router = express.Router();
 const bcrypt = require('bcryptjs');
 const passport = require('passport');
+const ObjectID = require('mongodb').ObjectID;
 // Load User model
 const User = require('../models/User');
 const { forwardAuthenticated } = require('../config/auth');
 
+// Loads libraries for uploading img functions
 const fs = require('fs');
 const path = require('path');
 const multer = require('multer');
@@ -30,24 +33,80 @@ router.get('/register', forwardAuthenticated, (req, res) => res.render('register
 // Edit page
 router.get('/edit', (req, res) => res.render('edit'));
 
+// Edit
+router.post('/edit', upload.single('image'), (req, res, next) => {
+  // Gets inputs
+  const { _id, name, currPassword, newPassword, newPassword2 } = req.body;
+  let errors = [];
+
+  // Get specified user from db
+  let currUser = User.findOne({ _id });
+
+  // Checks if blank
+  // if (!name || !email || !currPassword || !newPassword || !newPassword2) {
+  //   errors.push({ msg: 'Please enter all fields' });
+  // }
+
+  // Checks if new password & new password confirm match
+  if (newPassword != newPassword2) {
+    errors.push({ msg: 'New Passwords do not match' });
+  }
+
+  // Validates new password is required lenght
+  if (newPassword.length < 6) {
+    errors.push({ msg: 'Password must be at least 6 characters' });
+  }
+
+  // Error Handling
+  if (errors.length > 0) {
+    // Redirects to edit page with errors
+    res.render('edit', {
+      errors,
+      name,
+      currPassword,
+      newPassword,
+      newPassword2
+    });
+  } else {
+      //creates updated user object
+      let obj = {
+        name: name,
+        image: {
+          data: fs.readFileSync(path.join(__dirname + '/uploads/' + req.file.filename)),
+          contentType: 'image/png'
+        },
+        password: newPassword
+      }
+      //Updates user and redirects to dashboard
+      User.updateOne({ _id }, { $set: obj});
+      res.redirect('/dashboard');
+  }
+});
+
 // Register
 router.post('/register', upload.single('image'), (req, res, next) => {
+  // Collects input
   const { name, email, password, password2 } = req.body;
   let errors = [];
 
+  // Check for blanks
   if (!name || !email || !password || !password2) {
     errors.push({ msg: 'Please enter all fields' });
   }
 
+  // Check if password is confirmed
   if (password != password2) {
     errors.push({ msg: 'Passwords do not match' });
   }
 
+  // Validates password is to required length
   if (password.length < 6) {
     errors.push({ msg: 'Password must be at least 6 characters' });
   }
 
+  // Error handling
   if (errors.length > 0) {
+    // Redirects to register page with errors
     res.render('register', {
       errors,
       name,
@@ -56,9 +115,11 @@ router.post('/register', upload.single('image'), (req, res, next) => {
       password2
     });
   } else {
+    // Verifies Email isnt taken
     User.findOne({ email: email }).then(user => {
       if (user) {
         errors.push({ msg: 'Email already exists' });
+        // Redirect to register page with errors
         res.render('register', {
           errors,
           name,
@@ -67,6 +128,7 @@ router.post('/register', upload.single('image'), (req, res, next) => {
           password2
         });
       } else {
+        // Creates new User Object
         const newUser = new User({
           name,
           image: {
@@ -77,6 +139,7 @@ router.post('/register', upload.single('image'), (req, res, next) => {
           password,
         });
 
+        // Encrypts password
         bcrypt.genSalt(10, (err, salt) => {
           bcrypt.hash(newUser.password, salt, (err, hash) => {
             if (err) throw err;
@@ -88,6 +151,7 @@ router.post('/register', upload.single('image'), (req, res, next) => {
                   'success_msg',
                   'You are now registered and can log in'
                 );
+                // Takes to login page on success
                 res.redirect('/users/login');
               })
               .catch(err => console.log(err));

views/dashboard.ejs

@@ -1,3 +1,4 @@
+<!-- Shows user specific Dashboard -->
 <% if (user.role == "Teacher") { %>
   <% include teacherDashboard %>
 <% } %>

views/edit.ejs

@@ -0,0 +1,78 @@
+<div class="row mt-5">
+  <div class="col-md-6 m-auto">
+    <div class="card card-body">
+      <h1 class="text-center mb-3">
+        <i class="fas fa-user-plus"></i> Edit Account
+      </h1>
+      <% include ./partials/messages %>
+      <form action="/users/edit" method="POST">
+
+        <!-- Catching _id -->
+        <script>
+          window.onload = function () {
+            var url = document.location.href,
+            params = url.split('?')[1].split('&'),
+            data = {}, tmp;
+            for (var i = 0, l = params.length; i < l; i++) {
+              tmp = params[i].split('=');
+              data[tmp[0]] = tmp[1];
+            }
+            document.getElementById('_id').value = data.name;
+          }
+        </script>
+        <input id='_id' type='text' name='_id' value='' style='display: none'></input>
+        <div class="form-group">
+          <label for="name">Name</label>
+          <input
+            type="name"
+            id="name"
+            name="name"
+            class="form-control"
+            placeholder="Enter Name"
+            value="<%= typeof name != 'undefined' ? name : '' %>"
+          />
+        </div>
+        <div class='form-group'>
+          <label for='image'>Upload Profile Picture</label>
+          <input class='form-control' type="file" id="image" name="image" value="" required>
+        </div>
+        <div class="form-group">
+          <label for="password">Current Password</label>
+          <input
+            type="password"
+            id="oldPassword"
+            name="oldPassword"
+            class="form-control"
+            placeholder="Current Password"
+            value="<%= typeof password != 'undefined' ? password : '' %>"
+          />
+        </div>
+        <div class="form-group">
+          <label for="password2">New Password</label>
+          <input
+            type="password"
+            id="newPassword"
+            name="newPassword"
+            class="form-control"
+            placeholder="New Password"
+            value="<%= typeof password2 != 'undefined' ? password2 : '' %>"
+          />
+        </div>
+        <div class="form-group">
+          <label for="password2">Confirm New Password</label>
+          <input
+            type="password"
+            id="newPassword2"
+            name="newPassword2"
+            class="form-control"
+            placeholder="Confirm New Password"
+            value="<%= typeof password2 != 'undefined' ? password2 : '' %>"
+          />
+        </div>
+        <button type="submit" class="btn btn-primary btn-block">
+          Save Changes
+        </button>
+      </form>
+    </div>
+  </div>
+</div>

views/studentDashboard.ejs

@@ -1,3 +1,4 @@
+<!-- Simple Syling for layout -->
 <style>
   #myProgress {
     position: relative;
@@ -26,27 +27,43 @@
     border-radius: 50px;
   }
 </style>
+
+<!-- Welcome message & Profile Picture/Progress bar -->
 <h1 class="mt-4">Student Dashboard</h1>
 <p class="lead mb-3">Welcome <%= user.name %></p>
+<div>
+  <div id="myProgress">
+    <div id="myBar"></div>
+    <img id='pro-pic' src='data:image/<%=user.image.contentType%>;base64,
+                     <%=user.image.data.toString('base64')%>'>
+  </div>
+  <p stlye='text-align: right;' id='percent'></p>
+</div>
 <br>
+
+<!-- User Data -->
 <div>
   <h1 id='userRank'></h1>
   <h1>XP: <%= user.xp %></h1>
   <p id='XP-Till'></p>
 </div>
 <br>
-<div>
-</div>
-<div>
-  <p stlye='text-align: right;' id='percent'></p>
-  <div id="myProgress">
-    <div id="myBar"></div>
-    <img id='pro-pic' src='data:image/<%=user.image.contentType%>;base64,
-                     <%=user.image.data.toString('base64')%>'>
-  </div>
-</div>
 <br>
+
+<!-- Action Buttons -->
 <a href="/users/logout" class="btn btn-secondary">Logout</a>
+<button onClick='passData()' class='btn btn-secondary'>Edit</button>
+
+<!-- Passing user _id to edit page script -->
+<script>
+  function passData() {
+    let url = '/users/edit?name=' + encodeURIComponent('<%= user._id %>');
+
+    document.location.href = url;
+  }
+</script>
+
+<!-- Calculate Rank Data Script -->
 <script>
   let xp = <%= user.xp %>;
   let currRank;
@@ -101,12 +118,14 @@
       }
     }
   } else {
+    // Display data for max level
+    document.getElementById('percent').innerHTML = '800|800';
     currRank = "Master Digital Crafter";
     remain = 0;
     rankUp = 'No higher Rank, Good Job!';
   }
 
-  //Show Data
+  // Display Data
   document.getElementById('userRank').innerHTML = currRank;
   document.getElementById('XP-Till').innerHTML = remain + 'XP till your next Rank: ' + rankUp;
 

views/teacherDashboard.ejs

@@ -1,9 +1,51 @@
+<!-- Simple Styling for layout -->
 <style>
   .members {
     width: 230px;
     display: inline-block;
   }
 
+  .head {
+    margin-bottom: 100px;
+  }
+
+  #teacher-container {
+      position: relative;
+  }
+
+  #pro-pic {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100px;
+    display: block;
+    border-radius: 50px;
+    border: 1px solid black;
+    margin:5px;
+  }
+
+  #user-pro-pic {
+    position: absolute;
+    top: 0px;
+    left: 150px;
+    width: 50px;
+    display: block;
+    border-radius: 50px;
+    border: 1px solid black;
+    margin:5px;
+  }
+
+  #logout-btn {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+  }
+  #welcome {
+    position: absolute;
+    left: 115px;
+    top: 60px;
+  }
+
   h2 {
     font: 350 35px/1.5 Helvetica, Verdana, sans-serif;
     margin: 0;
@@ -43,11 +85,25 @@
     background: #f6f6f6;
   }
 </style>
+
+<!-- Welcome Message & Profile Picture -->
 <h1 class="mt-4">Teacher Dashboard</h1>
-<p class="lead mb-3">Welcome <%= user.name %></p>
+<div class='head'>
+  <div id='teacher-container'>
+    <div>
+      <p id='welcome' class="lead mb-3">Welcome <%= user.name %></p>
+      <img id='pro-pic' src='data:image/<%=user.image.contentType%>;base64,
+        <%=user.image.data.toString('base64')%>'>
+    </div>
     <br>
-<a href="/users/logout" class="btn btn-secondary">Logout</a>
+
+    <!-- Action Buttons -->
+    <a id='logout-btn' href="/users/logout" class="btn btn-secondary">Logout</a>
+  </div>
+</div>
 <br>
+
+<!-- Sets Variables for calculating users data -->
 <div>
   <script>
     let xp;
@@ -68,16 +124,26 @@
       {"Master Digital Crafter": 800} // index 12
     ]
     let indexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 12]
+
+    // Students should't be on this page sooooo...
     console.log("Students Shouldnt be here");
   </script>
+
+  <!-- List of all site students (not teachers) -->
   <h2>Site Members</h2>
   <div class='members'>
     <ul>
+      <!-- Loops through all members -->
       <% members.forEach(function (member) { %>
+        <!-- Identifies students -->
         <% if (member.role == "Student") { %>
+          <!-- Creates User Button link -->
           <li><button class='btn btn-link mt-2' onclick='openProfile("<%= member.id %>")'><%= member.name %></button></li>
-          <div style='display: none;' data-role='page' id='<%= member._id %>'>
+
-            <p class="lead mb-3"><%= member.name %></p>
+          <!-- Creates hidden Div with user specific Data -->
+          <div style='display: none; position: relative;' data-role='page' id='<%= member._id %>'>
+            <img id='user-pro-pic' src='data:image/<%=member.image.contentType%>;base64,<%=member.image.data.toString('base64')%>'>
+            <p id='memberName' class='lead mb-3'><%= member.name %></p>
             <p class='lead mb-3'><%= member.email %></p>
             <br>
             <div>
@@ -86,6 +152,8 @@
               <p><%= member.role %></p>
             </div>
             <br>
+
+            <!-- Calculates user specific Rank -->
             <script>
               xp = <%= member.xp %>;
 
@@ -111,7 +179,7 @@
                 }
               }
 
-              //Show Data
+              // Display Rank
               document.getElementById('userRank-<%= member.id %>').innerHTML = currRank;
 
             </script>
@@ -121,6 +189,8 @@
     </ul>
   </div>
 </div>
+
+<!-- Script for show/hide user profile data -->
 <script>
   function openProfile(id) {
     let state = document.getElementById(id).style.display;