Commenting

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>
-<br>
-<a href="/users/logout" class="btn btn-secondary">Logout</a>
+<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>
+
+    <!-- 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;