Merge pull request #38 from gelic-idealab/dev

Add user profile page and reset user information page

.gitignore

@@ -1,2 +1,3 @@
 .idea/
-.DS_Store
+.DS_Store
+package-lock.json

backend/controller/user.js

@@ -1,5 +1,5 @@
 const express = require("express");
-const { login, resetPassword, findUser, getUserList, createUser, getUserDetail, editUser, editMultipleUsers, getUserListByCourse, deleteUser } = require("../service/user");
+const { login, resetUser, findUser, getUserList, createUser, getUserDetail, getUserDetailWithAssets, editUser, editMultipleUsers, getUserListByCourse, deleteUser } = require("../service/user");
 const jwt = require('jsonwebtoken');
 const {promisify} = require('util');
 const userController = express.Router();
@@ -61,10 +61,10 @@ userController.post("/login",
   }
   );
 
-// Reset the password by user id and new password
+// Reset user information by user id and new password
 userController.post("/password",
   async (req, res) => {
-    const {user_id, password} = req.body;
+    const {user_id,firstName,lastName,email, password} = req.body;
     if (!user_id || !password.length) {
       res.status(400).send({message: "Invalid user or password."});
       return;
@@ -73,7 +73,7 @@ userController.post("/password",
     if(req.cookies.jwt) {
       res.clearCookie('jwt');
     }
-    const results = await resetPassword(user_id, password);
+    const results = await resetUser(user_id, firstName, lastName, email, password);
     res.status(results.code || 200).json(results.data);
   })
 
@@ -127,6 +127,15 @@ userController.get("/detail/:userId",
   }
 )
 
+// Query user detailed information and asset list by user id
+userController.get("/account/:userId",
+  async (req, res) => {
+    const {userId} = req.params;
+    const results = await getUserDetailWithAssets(userId);
+    res.status(results.code || 200).json(results.data);
+  }
+)
+
 // Edit user information by user id
 userController.put("/edit", 
   async (req, res) => {

backend/package.json

@@ -21,7 +21,7 @@
     "jsonfile": "^5.0.0",
     "jsonwebtoken": "^8.5.1",
     "moment": "^2.29.1",
-    "mysql2": "^1.7.0",
+    "mysql2": "^2.3.0",
     "swagger-ui-express": "^4.1.4",
     "twilio": "^3.57.0",
     "util": "^0.12.3",

backend/query/asset.js

@@ -11,6 +11,12 @@ FROM KP_Asset
 WHERE creator_id = ? OR is_public = TRUE
 `;
 
+const getUserAssetList = `
+SELECT *
+FROM KP_Asset
+WHERE creator_id = ?
+`;
+
 const getAssetDetail = `
 SELECT
   a.asset_id, a.uuid, a.asset_name, a.description, a.creator_id,
@@ -62,6 +68,7 @@ module.exports = {
   createSessionAsset,
   deleteSessionAssetBySessionId,
   deleteSessionAssetByAssetId,
-  deleteAssetQuery
+  deleteAssetQuery,
+  getUserAssetList
 };
 

backend/query/user.js

@@ -8,10 +8,10 @@ WHERE email = ?
   AND password = ?;
 `;
 
-const resetPassword = `
+const resetUser = `
 UPDATE KP_User
 SET
-    password = ?
+    first_name = ?, last_name = ?, email = ?, password = ?
 WHERE
     user_id = ?;
 `;
@@ -92,7 +92,7 @@ WHERE user_id = ?;
 `;
 module.exports = {
   login,
-  resetPassword,
+  resetUser,
   findUser,
   getUserList,
   createUser,

backend/service/user.js

@@ -1,6 +1,7 @@
 const pool = require("./index");
 const userQuery = require("../query/user");
 const courseQuery = require("../query/course");
+const assetQuery = require("../query/asset");
 
 /**
  * User Login
@@ -29,8 +30,8 @@ const login = async (email, password) => {
  * @param {integer} user_id
  * @param {string} password
  */
-const resetPassword = async (user_id, password) => {
-  const results = await pool.execute(userQuery.resetPassword, [password, user_id]);
+const resetUser = async (user_id, firstName, lastName, email, password) => {
+  const results = await pool.execute(userQuery.resetUser, [firstName, lastName, email, password, user_id]);
   const success = results[0];
   if (!success.changedRows) {
     return {
@@ -126,6 +127,21 @@ const getUserDetail = async userId => {
   }
 }
 
+/**
+ * Get user detailed information and assets by user id
+ * @param {integer} userId 
+ */
+ const getUserDetailWithAssets = async userId => {
+  const results = await pool.execute(userQuery.getUserDetail, [userId]);
+  const user = results[0][0];
+  const assetResults = await pool.execute(assetQuery.getUserAssetList, [userId]);
+  const assetList = assetResults[0];
+
+  return {
+    data: {...user, assetList}
+  }
+}
+
 /**
  * Edit user by user id
  * @param {string} lastName
@@ -238,11 +254,12 @@ const deleteUser = async({userId}) => {
 }
 module.exports = {
   login,
-  resetPassword,
+  resetUser,
   findUser,
   getUserList,
   createUser,
   getUserDetail,
+  getUserDetailWithAssets,
   editUser,
   editMultipleUsers,
   getUserListByCourse,

frontend/package.json

@@ -24,6 +24,7 @@
     "socket.io-client": "^2.3.0",
     "three": "^0.116.1",
     "uuid": "^7.0.2",
+    "vee-validate": "^3.4.13",
     "vue": "2.6.10",
     "vue-apexcharts": "^1.5.2",
     "vue-clickaway": "2.2.2",

frontend/src/components/Layout/SideBar.vue

@@ -10,14 +10,8 @@
     <v-list>
       <v-list-item>
         <v-list-item-content>
-          <v-list-item-title class="title">
+          <v-list-item-title class="title" :tabindex="8" @focus.native="focusProfileLink" @click="goToProfilePage" style="cursor: pointer; margin-bottom: 10px;">
             {{ `${user.firstName} ${user.lastName}` }}
-          <v-btn 
-            icon
-            @click="goToAccountPage"
-          >
-            <v-icon>mdi-account-edit-outline</v-icon>
-          </v-btn>
           </v-list-item-title>
           <v-list-item-subtitle>{{ user.email }}</v-list-item-subtitle>
 
@@ -77,9 +71,9 @@ export default {
       this.showCourses = !this.showCourses;
       this.showSideBarCourseList = !this.showSideBarCourseList;
     },
-    goToAccountPage() {
+    goToProfilePage() {
       this.$router.push({
-        name: "Account"
+        name: "UserProfilePage"
       });
     }
   }