Merge pull request #59 from gelic-idealab/release/v1.2.2

Release/v1.2.2

.github/pull_request_template.md

@@ -0,0 +1,46 @@
+
+# _REPLACE ME: Pull Request Description_
+
+_REPLACE ME: summary of the change(s)_
+
+_REPLACE ME: motivation and context_
+
+_REPLACE ME: Fixes #9999999_
+
+## Type of change
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] Testing 
+- [ ] Change that requires a documentation update
+
+# How Has This Been Tested?
+
+_REPLACE ME: Page: Action to take -> Expected result. Example: user account page: press edit button -> should route you to account/edit_ 
+
+_REPLACE ME: any relevant details for your test configuration_
+
+- [ ] Manual Test
+- [ ] Unit Test
+- [ ] Integration / End-to-End Test
+
+**Test Configuration**:
+
+* _REPLACE ME: Browser vendor and version: e.g., Chrome Version 91.0.4472.164 (Official Build) (64-bit)_
+
+# Checklist:
+
+- [ ] My code follows the style guidelines of this project
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas that are not self-documenting
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings 
+- [ ] My changes have no unnecessary logging
+- [ ] I have added tests that prove my fix is effective or that my feature works, for sufficiently complex features
+- [ ] New and existing unit tests pass locally with my changes
+- [ ] Any dependent changes have been merged and published in downstream modules
+- [ ] Sensitive info like tokens, secrets, and passwords have been removed before submitting
+
+Modified from this article:
+Phillip Johnston, “A GitHub Pull Request Template for Your Projects - Embedded Artistry,” Embedded Artistry, Aug. 04, 2017. https://embeddedartistry.com/blog/2017/08/04/a-github-pull-request-template-for-your-projects/ (accessed Jul. 22, 2021).

backend/controller/turn.js

@@ -9,7 +9,7 @@ const authToken = config.TWILIO_AUTH_TOKEN;
 
 turnController.get("/", 
   async (req, res) => {
-    console.log(accountSid, authToken)
+    //console.log(accountSid, authToken)
     const client = twilio(accountSid, authToken);
     client.tokens.create().then(token => {
         res.send(token.iceServers);

backend/openapi.json

@@ -3,7 +3,7 @@
   "info" : {
     "title" : "Komodo Portal",
     "description" : "Komodo Portal API",
-    "version" : "1.0.0-oas3"
+    "version" : "1.2.2-oas3"
   },
   "servers" : [ {
     "url" : "https://api.komodo-dev.library.illinois.edu/",

backend/package.json

@@ -1,7 +1,8 @@
 {
-  "name": "api",
-  "version": "1.0.0",
-  "description": "",
+  "name": "komodo-portal-backend",
+  "version": "1.2.2",
+  "description": "Back end for Project Komodo web portal",
+  "private": true,
   "main": "index.js",
   "scripts": {
     "dev": "node index.js",

backend/service/user.js

@@ -35,10 +35,11 @@ const resetUser = async (user_id, firstName, lastName, email, password) => {
   const success = results[0];
   if (!success.changedRows) {
     return {
-      code: 401,
-      data: { success: false, message: "Error updating password." }
+      code: 400,
+      data: { success: false, message: "Possible error updating password. This message also appears if you have not changed any of your information, so you can safely ignore it." }
     }
   }
+
   return {
     code: 200,
     data: { success: true }
@@ -58,6 +59,7 @@ const findUser = async(user_id) => {
       data: { message: "User doesn't exist." }
     }
   }
+
   return {
     code: 200,
     data: { user: users[0] }
@@ -102,6 +104,7 @@ const createUser = async ({ lastName, firstName, email, roleId, password, course
     for (const courseId of courseList) {
       values += `(${userId}, ${courseId}),`
     }
+
     await pool.execute(
       courseQuery.registerCourse + values.slice(0, values.length - 1)
     );
@@ -148,7 +151,7 @@ const getUserDetail = async userId => {
  * @param {string} firstName
  * @param {string} email
  * @param {integer} roleId
- * @param {string} password
+ * @param {string} password -- pass empty string to keep existing password
  * @param {Array} courseList
  * @param {integer} userId   
  */
@@ -158,11 +161,12 @@ const editUser = async ({ lastName, firstName, email, password, roleId, courseLi
     userQuery.editUserQuery, [lastName, firstName, email, roleId, userId]
   );
   // If the password was updated, updated the current password
-  if(password !== "********"){
+  if(password !== ""){
     await pool.execute(
       userQuery.updatePassword, [password, userId]
     );
   }
+
   // Remove previous registered courses for the user
   await pool.execute(
     courseQuery.unregisterCourse,
@@ -174,10 +178,12 @@ const editUser = async ({ lastName, firstName, email, password, roleId, courseLi
     for (const courseId of courseList) {
       values += `(${userId}, ${courseId}),`
     }
+
     await pool.execute(
       courseQuery.registerCourse + values.slice(0, values.length - 1)
     );
   }
+
   return {
     data: true
   };
@@ -200,6 +206,7 @@ const editMultipleUsers = async({users, password, roleId, courseList}) => {
         userQuery.updatePassword, [password, userId]
       );
     }
+
     // Remove the previous registered course for the user
     await pool.execute(
       courseQuery.unregisterCourse,[userId]
@@ -213,10 +220,12 @@ const editMultipleUsers = async({users, password, roleId, courseList}) => {
         values += `(${userId}, ${courseId}),`
       }
     }
+
     await pool.execute(
       courseQuery.registerCourse + values.slice(0, values.length - 1)
     );
   }
+
   return {
     data: true
   }
@@ -252,6 +261,7 @@ const deleteUser = async({userId}) => {
     data: true
   }
 }
+
 module.exports = {
   login,
   resetUser,

frontend/package.json

@@ -1,6 +1,7 @@
 {
-  "name": "komodo",
-  "version": "0.1.8",
+  "name": "komodo-portal-frontend",
+  "version": "1.2.2",
+  "description": "Front end for Project Komodo web portal",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode production",

frontend/src/components/Chat/TextChat.vue

@@ -40,7 +40,6 @@
 
 <script>
 import io from "socket.io-client";
-import moment from "moment";
 // import {Howl, Howler} from 'howler';
 
 export default {
@@ -86,7 +85,7 @@ export default {
       this.socket.disconnect();
     },
     formatTime(ts) {
-      return moment(ts).format('h:mm a');
+      return "not implemented";
     },
     handleMicText(record) {
       this.appendRecord(record).then( () => { this.updateScroll(); });

frontend/src/components/Layout/SideBar.vue

@@ -3,20 +3,21 @@
     class="side-bar"
     width="230"
     permanent
-    fixed
     expand-on-hover
+    fixed
     dark
   >
     <v-list>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title class="title" :tabindex="8" @focus.native="focusProfileLink" @click="goToProfilePage" style="cursor: pointer; margin-bottom: 10px;">
-            {{ `${user.firstName} ${user.lastName}` }}
+      <v-list-item @click="goToProfilePage">
+        <v-list-item-content :tabindex="8" @focus.native="focusProfileLink"  style="cursor: pointer; margin-bottom: 10px;">
+          <v-list-item-title class="title" >
+            {{ `${user.firstName} ${user.lastName.substr(0,1)}.` }}
           </v-list-item-title>
-          <v-list-item-subtitle>{{ user.email }}</v-list-item-subtitle>
-
+          <v-list-item-subtitle>{{ getAbbreviatedEmail(user.email) }}</v-list-item-subtitle>
+          <v-list-item-subtitle>Go to Account</v-list-item-subtitle>
         </v-list-item-content>
       </v-list-item>
+      <SideBarMenuItem title="Log Out" icon-name="mdi-logout-variant" to="/logout"/>
     </v-list>
 
     <v-divider></v-divider>
@@ -44,7 +45,9 @@
     </v-list>
 
     <v-list class="side-bar-bottom-wrapper" nav dense>
-      <SideBarMenuItem title="Logout" icon-name="mdi-logout-variant" to="/logout"/>
+      <v-list-item>
+        1.2.2 <!-- TODO -- update this manually with every version -->
+      </v-list-item>
     </v-list>
   </v-navigation-drawer>
 </template>
@@ -75,6 +78,27 @@ export default {
       this.$router.push({
         name: "UserProfilePage"
       });
+    },
+    getAbbreviatedEmail(email) {
+      let splitEmail = email.split('@');
+
+      if (splitEmail.length != 2) {
+        return "Invalid email format.";
+      }
+
+      let beforeAt = splitEmail[0];
+
+      let afterAt = splitEmail[1].split('.');
+
+      if (afterAt.length != 2) {
+        return "Invalid email format.";
+      }
+
+      let betweenAtAndDot = afterAt[0];
+
+      let afterDot = afterAt[1];
+
+      return `${beforeAt.substr(0,1)}...@${betweenAtAndDot.substr(0,1)}....${afterDot}`
     }
   }
 }

frontend/src/main.js

@@ -30,6 +30,53 @@ const router = new VueRouter({
   linkExactActiveClass: "nav-item active"
 });
 
+function setTitle (to, from, next) {
+  // J. Bemenderfer, “How To Update Page Title and Metadata with Vue.js and vue-router,” 
+  //  Digitalocean.com, 2018. 
+  //  https://www.digitalocean.com/community/tutorials/vuejs-vue-router-modify-head (accessed Apr. 01, 2022).
+
+  // This goes through the matched routes from last to first, finding the closest route with a title.
+  // e.g., if we have `/some/deep/nested/route` and `/some`, `/deep`, and `/nested` have titles,
+  // `/nested`'s will be chosen.
+  const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
+
+  // Find the nearest route element with meta tags.
+  const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+
+  const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+
+  // If a route with a title was found, set the document (page) title to that value.
+  if(nearestWithTitle) {
+    document.title = nearestWithTitle.meta.title;
+  } else if(previousNearestWithMeta) {
+    document.title = previousNearestWithMeta.meta.title;
+  }
+
+  // Remove any stale meta tags from the document using the key attribute we set below.
+  Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));
+
+  // Skip rendering meta tags if there are none.
+  if(!nearestWithMeta) return next();
+
+  // Turn the meta tag definitions into actual elements in the head.
+  nearestWithMeta.meta.metaTags.map(tagDef => {
+    const tag = document.createElement('meta');
+
+    Object.keys(tagDef).forEach(key => {
+      tag.setAttribute(key, tagDef[key]);
+    });
+
+    // We use this to track which meta tags we create so we don't interfere with other ones.
+    tag.setAttribute('data-vue-router-controlled', '');
+
+    return tag;
+  })
+  // Add the meta tags to the document head.
+  .forEach(tag => document.head.appendChild(tag));
+
+  next();
+}
+
 // Configure navigation guard to determine the routes
 router.beforeEach((to, from, next) => {
   // If the target url required login, we need to check whether there is valid cookie
@@ -59,6 +106,8 @@ router.beforeEach((to, from, next) => {
   } else {
     next();
   }
+
+  setTitle(to, from, next);
 });
 
 Vue.prototype.moment = moment;

frontend/src/pages/About.vue

@@ -35,11 +35,14 @@
       <v-col :cols="6" class="">
         <div class="deep-purple lighten-5 pa-2 rounded d-flex justify-center align-baseline">
           <span class="ma-1 text-body-1">Already have access?</span>
-          <v-btn 
-            small 
-            color="primary" 
-            class="ma-1" 
-            href="https://komodo-dev.library.illinois.edu/login">Log in →</v-btn> 
+          <router-link :to="{ name: 'Login' }">
+            <v-btn 
+              small 
+              color="primary" 
+              class="ma-1">
+              Log in →
+              </v-btn> 
+          </router-link>
         </div>
       </v-col>
     </v-row>

frontend/src/pages/Account/ResetUser.vue

@@ -58,8 +58,10 @@
                       v-model="Password"
                       label="New Password"
                       :error-messages="errors"
-                      type="password"
-                      append-icon="mdi-eye-off"
+                      :type="showPasswords ? 'text' : 'password'"
+                      @click:append="() => showPasswords = !showPasswords"
+                      :append-icon="showPasswords ? 'mdi-eye-off' : 'mdi-eye'"
+                      v-on:keyup.enter="login"
                     />
                   </validation-provider>
                   <validation-provider
@@ -71,8 +73,10 @@
                       v-model="PasswordConfirm"
                       label="Confirm New Password"
                       :error-messages="errors"
-                      type="password"
-                      append-icon="mdi-eye-off"
+                      :type="showPasswords ? 'text' : 'password'"
+                      @click:append="() => showPasswords = !showPasswords"
+                      :append-icon="showPasswords ? 'mdi-eye-off' : 'mdi-eye'"
+                      v-on:keyup.enter="login"
                     />
                   </validation-provider>
                   <v-alert
@@ -125,7 +129,8 @@ export default {
     PasswordConfirm: "",
     showDialog: false,
     message: "",
-    messageType: "info"
+    messageType: "info",
+    showPasswords: false
   }),
   mounted() {
     this.user = this.$store.getters.user;