S8 signup flow basic profile

backend/src/controllers/user.js

@@ -3,29 +3,26 @@ const userModel = require('../models/user')()
 const { responseHandler } = require('../utils/helpers')
 
 /* Get data for a specific user */
-exports.getUser = function(_, res) {
-    return res.json({
-        userID: 1,
-        firstName: 'Walker',
-        lastName: 'Francis',
-        email: '[email protected]'
-    })
+exports.getUser = function({id}, res) {
+    return responseHandler(userModel.getPublicProfile(id), res)
+        .catch(errorHandler(res))
 }
 
 /**
  * user must be auth'd,
  * provide frontend with any user specific data
  */
 exports.getSelf = function(req, res) {
-    const errorResponse = errorHandler(res)
-    if (!req.user) {
-        return errorResponse({ message: 'Invalid Credentials' })
-    }
-    // fine for now, should include profile data
-    return res.json(req.user)
+    return responseHandler(userModel.getProfile(req.user.id), res)
+        .catch(errorHandler(res))
+}
+
+exports.createUser = function({ authorized: { email, uid }, body: { displayName } }, res) {
+    return responseHandler(userModel.createUser({ email, uid, displayName }), res)
+        .catch(errorHandler(res))
 }
 
-exports.createUser = function({ authorized }, res) {
-    return responseHandler(userModel.createUser(authorized), res)
+exports.updateUser = function({ user: { id }, body: { degree, gradYear, description, picture } }, res) {
+    return responseHandler(userModel.updateUser(id, { degree, gradYear, description, picture }), res)
         .catch(errorHandler(res))
 }

backend/src/models/db/tables.js

@@ -6,14 +6,15 @@ function createUserTable (db) {
     return new Promise((resolve, reject) => {
         db.run(`CREATE TABLE user (
             id INTEGER PRIMARY KEY AUTOINCREMENT,
-            uid TEXT NOT NULL,
-            displayName TEXT DEFAULT 'ANON',
+            uid TEXT UNIQUE NOT NULL,
+            displayName TEXT UNIQUE NOT NULL,
             email TEXT UNIQUE NOT NULL,
             joined TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
             reputation INTEGER DEFAULT '0',
             degree TEXT,
-            gradYear TIMESTAMP DEFAULT '2018',
-            description TEXT
+            gradYear TIMESTAMP,
+            description TEXT,
+            picture TEXT
             )`,
         (err) => err ? reject(err) : resolve('Created User Table'))
     })

backend/src/models/user.js

@@ -6,12 +6,12 @@ class User {
     }
 
     /**
-     * TODO Return specialsed information for auth'd user
+     * TODO Return specialised information for auth'd user
      * @param {string} id The id of the auth'd user
      */
     getProfile(id) {
         return this.db
-            .query('SELECT * FROM user WHERE id=?', [id])
+            .query('SELECT id, email, displayName, degree, gradYear, description, picture, joined FROM user WHERE id=?', [id])
     }
 
     /**
@@ -20,13 +20,13 @@ class User {
      * @param   {number}  id   Required id param.
      * @returns {object}
      */
-    getUser(id) {
+    getPublicProfile(id) {
         return this.db
-            .query('SELECT * FROM user WHERE id=?', [id])
+            .query('SELECT id, displayName, degree, gradYear, description, picture, joined FROM user WHERE id=?', [id])
     }
 
     /**
-     * Alternative getter to get the relevant user's details
+     * Get all users details by UID. Used by authentication system
      * @param {uid} uid uid string
      * @returns {object} user object
      */
@@ -43,6 +43,19 @@ class User {
         return this.db
             .insert('user', { displayName, email, uid })
             .then(id => this.getProfile(id))
+            .catch(error => {
+                // kinda hacky
+                if (error.errno === 19 && error.message.includes("displayName")) {
+                    throw(Error("That display name is taken! Sorry!"))
+                }
+                throw(error)
+            })
+    }
+
+    updateUser(id, data) {
+        return this.db
+            .update('user', data, { id })
+            .then(() => this.getProfile(id))
     }
 }
 

backend/src/routes/user.js

@@ -1,20 +1,21 @@
 const express = require('express')
 const router = express.Router()
-const { isAuthorized } = require('../utils/helpers')
-const { getSelf, getUser, createUser } = require('../controllers/user')
+const { isAuthorized, isFirebaseAuthorized } = require('../utils/helpers')
+const { getSelf, getUser, createUser, updateUser } = require('../controllers/user')
 
-/* Get data for a specific user */
+/* Get public data for a specific user */
 router.get('/:id', getUser)
 
 /* no valid jwt then don't allow user to be created */
+router.use(isFirebaseAuthorized)
+router.post('/', createUser)
+
+/* full auth check */
 router.use(isAuthorized)
 
-/**
- * Both of these require an authorization header
- * provide frontend with any user specific data
- */
+/* provide frontend with any user specific data */
 router.get('/', getSelf)
+router.put('/', updateUser)
 
-router.post('/', createUser)
 
 module.exports = router

backend/src/utils/helpers.js

@@ -11,12 +11,19 @@ exports.responseHandler = function(fn, response) {
 
 exports.toLowerCase = str => str.toLowerCase()
 
-exports.isAuthorized = function(req, res, next) {
+exports.isFirebaseAuthorized = function(req, res, next) {
     if (!req.authorized) {
         return res.status(401).json({ code: 401, message: 'Unauthorized' })
     }
     next()
 }
+exports.isAuthorized = function(req, res, next) {
+    if (!req.user) {
+        return res.status(403).json({ code: 403, message: 'No user profile' })
+    }
+    next()
+}
+
 
 /**
  * Convert a string to utf8

backend/tests/models/user.js

@@ -0,0 +1,45 @@
+const { expect } = require('chai')
+// use an actual database
+const userModel = require('../../src/models/user')(require('../../src/models/db'))
+
+describe('User Model', () => {
+
+    it('compiles', function () {
+        expect(userModel)
+    })
+
+    describe('User creation and retrieval', () => {
+        const addUserObj = { displayName: 'mickey', email: '[email protected]', uid: '1234' }
+        const retrieveUserObj = { email: addUserObj.email, displayName: addUserObj.displayName, degree:null, gradYear:null, description:null, picture:null }
+        it('it creates a user and retrieves the profile', () => {
+            return userModel
+                .createUser(addUserObj)
+                .then(({ displayName, email, id }) => {
+                      expect(displayName).to.equal(addUserObj.displayName)
+                      expect(email).to.equal(addUserObj.email)
+                      return userModel.getProfile(id)
+                    })
+                .then(({ email, displayName, degree, gradYear, description, picture }) => {
+                    const profile = { email, displayName, degree, gradYear, description, picture }
+                    expect(profile).to.deep.equal(retrieveUserObj)
+                })
+        })
+    })
+
+    describe('User update', () => {
+        const credsObj = { displayName: 'mickeyMoo', email: '[email protected]' }
+        const addUserObj = { ...credsObj, uid: '4321' }
+        const updateObj = { degree: "BS in CS", gradYear: 2026, description: "testu", picture: "baaaaaa" }
+        it('it updates the profile correctly', () => {
+            return userModel
+                .createUser(addUserObj)
+                .then(({ id, description }) => {
+                    return userModel.updateUser(id, updateObj)
+                })
+                .then(({ email, displayName, degree, gradYear, description, picture }) => {
+                    const profile = { email, displayName, degree, gradYear, description, picture }
+                    expect(profile).to.deep.equal({ ...credsObj, ...updateObj })
+                })
+        })
+    })
+})

frontend/src/App.vue

@@ -131,4 +131,21 @@ input, textarea {
   border: none;
 }
 
+textarea {
+  border: var(--border);
+  border-radius: 2px;
+  font: inherit;
+  resize: none;
+  padding: 10px;
+  outline: none;
+  margin: 10px 0px;
+  width: calc(100% - 20px);
+  height: 100px;
+  transition: 0.2s border ease-in-out;
+}
+
+textarea:focus, textarea:active {
+  border: 1px solid #acc;
+}
+
 </style>

frontend/src/components/AppNavBar.vue

@@ -9,20 +9,21 @@
         <div v-else/>
         <h3 v-if="!isLoggedIn"><router-link class="link-item" to="/login">Login</router-link></h3>
         <h3 v-if="!isLoggedIn"><router-link class="link-item" to="/signup">Sign Up</router-link></h3>
-        <h3 v-else @click="$store.dispatch('auth/logout')" class="link-item">Logout</h3>
+        <h3 v-if="isLoggedIn && !hasProfile"><router-link class="link-item" to="/signup">Profile</router-link></h3>
+        <h3 v-if="hasProfile"><router-link class="link-item" to="/profile">Profile</router-link></h3>
+        <h3 v-if="isLoggedIn" @click="$store.dispatch('auth/logout')" class="link-item">Logout</h3>
       </div>
     </div>
 </template>
 
 <script>
 import Search from '@/components/AppSearch'
+import { mapGetters } from 'vuex'
 
 export default {
   components: { Search },
   computed: {
-    isLoggedIn() {
-      return this.$store.getters.isLoggedIn
-    }
+    ...mapGetters([ 'isLoggedIn', 'hasProfile' ])
   }
 }
 </script>

frontend/src/components/questions-answers/QuestionForm.vue

@@ -44,21 +44,4 @@ export default {
 .content {
   padding: 20px;
 }
-
-textarea {
-  border: var(--border);
-  border-radius: 2px;
-  font: inherit;
-  resize: none;
-  padding: 10px;
-  outline: none;
-  margin: 10px 0px;
-  width: calc(100% - 20px);
-  height: 100px;
-  transition: 0.2s border ease-in-out;
-}
-
-textarea:focus, textarea:active {
-  border: 1px solid #acc;
-}
 </style>

frontend/src/components/reviews-replies/ReviewForm.vue

@@ -84,23 +84,6 @@ export default {
   padding: 20px;
 }
 
-textarea {
-  border: var(--border);
-  border-radius: 2px;
-  font: inherit;
-  resize: none;
-  padding: 10px;
-  outline: none;
-  margin: 10px 0px;
-  width: calc(100% - 20px);
-  height: 100px;
-  transition: 0.2s border ease-in-out;
-}
-
-textarea:focus, textarea:active {
-  border: 1px solid #acc;
-}
-
 .submit {
   background-color: var(--black);
   width: 50%;

frontend/src/router.js

@@ -115,6 +115,11 @@ export default new Router({
       name: 'Login',
       component: () => import('./views/Login')
     },
+    {
+      path: '/profile',
+      name: 'Profile',
+      component: () => import('./views/Profile')
+    },
     {
       path: '/password-reset',
       name: 'Forgot Password',