Logout functionality

Author: StanleyMasinde

backend/app/controllers/authController.js

@@ -53,6 +53,24 @@ class AuthController extends Controller {
       res.status(500).json(error)
     }
   }
+
+  /**
+   * End a user's session
+   * @param {*} req
+   * @param {*} res
+   */
+  logout(req, res) {
+    const userId = req.session
+    if (!userId) {
+      return res.json({
+        message: 'You are not athenticated',
+      })
+    }
+    req.session = null
+    return res.json({
+      message: "You've been logged out",
+    })
+  }
 }
 
 module.exports = new AuthController()

backend/routes/auth.js

@@ -21,7 +21,7 @@ router.get('/user', (req, res) => {
  * Logout a user from the system
  */
 router.post('/logout', (req, res) => {
-  res.json('You have been logged ot')
+  authController.logout(req, res)
 })
 
 module.exports = router

layouts/default.vue

@@ -1,6 +1,61 @@
 <template>
   <v-app>
-    <v-app-bar app flat> </v-app-bar>
+    <v-app-bar flat app hide-on-scroll>
+      <v-toolbar-items>
+        <nuxt-link to="/">
+          <v-img height="70" width="70" src="/icon.png" />
+        </nuxt-link>
+      </v-toolbar-items>
+      <v-spacer />
+      <v-toolbar-items>
+        <v-menu
+          v-if="$auth.loggedIn"
+          bottom
+          nudge-top
+          min-width="200px"
+          rounded
+          offset-y
+        >
+          <template #activator="{ on }">
+            <v-btn data-profile-menu icon x-large v-on="on">
+              <v-avatar color="brown" size="48">
+                <span class="white--text headline">JD</span>
+              </v-avatar>
+            </v-btn>
+          </template>
+          <v-card>
+            <v-list-item-content class="justify-center">
+              <div class="mx-auto text-center">
+                <v-avatar color="brown">
+                  <span class="white--text headline">JD</span>
+                </v-avatar>
+                <h3>{{ $auth.user.name }}</h3>
+                <p class="caption mt-1">
+                  {{ $auth.user.email }}
+                </p>
+                <v-divider class="my-3" />
+                <v-btn to="/" depressed rounded text> Home </v-btn>
+                <v-divider class="my-3" />
+                <v-btn to="/home" depressed rounded text> My account </v-btn>
+                <v-divider class="my-3" />
+                <v-btn
+                  color="error"
+                  depressed
+                  rounded
+                  text
+                  @click="$auth.logout()"
+                >
+                  Logout
+                </v-btn>
+              </div>
+            </v-list-item-content>
+          </v-card>
+        </v-menu>
+        <template v-else>
+          <v-btn text link to="/login"> Login </v-btn>
+        </template>
+      </v-toolbar-items>
+    </v-app-bar>
     <v-main>
       <v-container>
         <nuxt />

package-lock.json

@@ -26,7 +26,7 @@
     "mysql2": "^2.2.5",
     "nuxt": "^2.15.3",
     "redis": "^3.1.2",
-    "sessionstore": "^1.3.7",
+    "sessionstore": "^0.4.8",
     "vee-validate": "^3.4.5"
   },
   "devDependencies": {