cleaning up front-end page layouts

added logo and background image

routes/api/auth.js

@@ -11,7 +11,8 @@ module.exports = (req, res, next) => {
   }
 
   User.findById(req.session.userId)
-    .select('-_id -password')
+    .select('-password')
+    .populate('communities')
     .then(user => {
 
       if(!user) {

routes/api/join.js

@@ -4,6 +4,10 @@ const { Community, User } = require('../../db/models')
 module.exports = (req, res, next) => {
   const { userId } = req.session
 
+  if(req.body.users.indexOf(userId) !== -1) {
+    return res.json('You already belong to this community')
+  }
+
   req.body.users.push(userId)
 
   Community

src/App.vue

@@ -2,7 +2,11 @@
   <div id="app">
     <header>
       <nav class="navbar navbar-expand-lg navbar-light bg-light">
-        <a class="navbar-brand" href="#">Logo Here</a>
+        <a class="navbar-brand" href="#">
+          <div class="logo">
+            <img src="./assets/images/logo.png" alt="logo">
+          </div>
+        </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import './assets/images/home-bg.jpg'
 
 Vue.config.productionTip = false
 

src/mixins/auth.js

@@ -4,7 +4,8 @@ export default {
 
   beforeCreate() {
     axios.get('/api/auth')
-      .then(({ data }) => {
+      .then(res => {
+        const { data } = res
         this.$store.commit('setUser', data.user)
         this.$store.commit('setLoginStatus', data.authenticated)
       })

src/styles/main.scss

@@ -2,6 +2,32 @@
 
 $link__color: blue;
 
+html {
+  height: auto;
+  width: 100%;
+  background-image: url('assets/images/home-bg.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+.logo {
+  img {
+    max-width: 60px;
+  }
+}
+
+#wrapper > .container {
+  background: rgba(255,255,255,.9);
+  border-radius: 6px;
+  padding: 20px;
+}
+
+body {
+  background: transparent;
+}
+
 a {
   color: $link__color;
 }

src/views/Dashboard.vue

@@ -1,21 +1,48 @@
 <template>
   <div class="dashboard">
-    <!-- <div class="container">
+    <div class="container">
       <div v-if="user" class="text-center">
         <h2>Welcome, {{ user.firstname }}</h2>
       </div>
-      <div class="row">
-        <div class="col-md-6">
-          <publication :manuscripts="manuscripts"></publication>
+      <div class="row text-center">
+        <div class="col-md-4">
+          <div class="card">
+            <div class="card-body">
+              <div class="card-title">
+                <h3>Publications</h3>
+                  <div v-for="(manuscript, key) in manuscripts" :key="key">
+                    <publication :manuscript="manuscript"></publication>
+                  </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="col-md-6">
-          <review></review>
+        <div class="col-md-4">
+          <div class="card">
+            <div class="card-body">
+              <div class="card-title">
+                <h3>Communities</h3>
+                <div v-for="(community, key) in communities" :key="key">
+                  <community :community="community"></community>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="col-md-6">
-          <community></community>
+        <div class="col-md-4">
+          <div class="card">
+            <div class="card-body">
+              <div class="card-title">
+                <h3>Reviews</h3>
+                <div v-for="(review, key) in reviews" :key="key">
+                  <review :review="review"></review>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -35,6 +62,12 @@ export default {
     },
     manuscripts() {
       return this.$store.state.manuscript
+    },
+    communities() {
+      return this.$store.state.community
+    },
+    reviews() {
+      return this.$store.state.reviews
     }
   },
   

src/views/Home.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="home">
     <div v-show="error" class="error"></div>
-    <h1>Landing Page</h1>
   </div>
 </template>
 

src/views/Profile.vue

@@ -22,11 +22,14 @@
             </div>
 
             <hr>
-
             <!-- communities -->
             <div class="active-panel" v-show="activePanel === 'communities'">
               <div v-if="user.communities && user.communities.length > 0">
-                communities go here
+                <div class="communities">
+                  <div v-for="(community, key) in user.communties" :key="key">
+                    <community :community="community"></community>
+                  </div>
+                </div>
               </div>
               <div v-else>
                 <p>
@@ -96,6 +99,11 @@ export default {
     user() {
       return this.$store.state.user
     },
+    userCommunities() {
+      return this.$store.state.community.filter(community => {
+        return community._id === this.$store.state.user._id
+      })
+    },
     manuscripts() {
       return this.$store.state.manuscript
     },

src/views/Submit.vue

@@ -86,7 +86,8 @@ const config = {
             message: 'Your manuscript was submitted!'
           })
         })
-        .catch(() => {
+        .catch(err => {
+          this.handleError(err)
           this.$store.dispatch('updateAlert', {
             type: 'error',
             message: 'Unable to submit a manuscript at this time, please try again later.'