From 7b76445d9065f8f27f202109b7d3489e16677138 Mon Sep 17 00:00:00 2001
From: tusharmakkar08 <tusharmakkar08@gmail.com>
Date: Thu, 2 Apr 2020 18:30:45 +0530
Subject: [PATCH 1/2] Added username at top

---
 docker-compose.dev.yml                             |  1 +
 frontend/components/organisms/layout/TheHeader.vue | 12 +++++-------
 frontend/store/auth.js                             |  2 ++
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index b25eb97c..3295c98e 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -13,6 +13,7 @@ services:
       ADMIN_EMAIL: "admin@example.com"
       DATABASE_URL: "postgres://doccano:doccano@postgres:5432/doccano?sslmode=disable"
       ALLOW_SIGNUP: "False"
+      DEBUG: "True"
     ports:
       - 8000:8000
     depends_on:
diff --git a/frontend/components/organisms/layout/TheHeader.vue b/frontend/components/organisms/layout/TheHeader.vue
index b815b341..774c95c6 100644
--- a/frontend/components/organisms/layout/TheHeader.vue
+++ b/frontend/components/organisms/layout/TheHeader.vue
@@ -62,15 +62,12 @@
       bottom
     >
       <template v-slot:activator="{ on }">
-        <v-btn
-          v-on="on"
-          icon
-        >
-          <v-icon>mdi-dots-vertical</v-icon>
+        <v-btn v-on="on" outlined>
+          {{ username }}
         </v-btn>
       </template>
 
-      <v-list>
+      <v-list dense>
         <v-list-item @click="signout">
           <v-list-item-icon>
             <v-icon>mdi-logout</v-icon>
@@ -102,7 +99,8 @@ export default {
         { title: 'Sentiment Analysis', link: 'sentiment-analysis' },
         { title: 'Translation', link: 'translation' },
         { title: 'Text to SQL', link: 'text-to-sql' }
-      ]
+      ],
+      username: localStorage.getItem('name')
     }
   },
 
diff --git a/frontend/store/auth.js b/frontend/store/auth.js
index cd579e31..af0d8af5 100644
--- a/frontend/store/auth.js
+++ b/frontend/store/auth.js
@@ -27,6 +27,7 @@ export const actions = {
       .then((result) => {
         commit('setToken', result.data.token)
         localStorage.setItem('token', result.data.token)
+        localStorage.setItem('name', authData.username)
         Cookie.set('jwt', result.data.token)
         ApiService.setHeader(result.data.token)
       })
@@ -55,6 +56,7 @@ export const actions = {
     Cookie.remove('jwt')
     if (process.client) {
       localStorage.removeItem('token')
+      localStorage.removeItem('name')
     }
   }
 }

From 13b717a5cd57edde65db8e87cfd063204c6ad749 Mon Sep 17 00:00:00 2001
From: tusharmakkar08 <tusharmakkar08@gmail.com>
Date: Fri, 3 Apr 2020 11:52:02 +0530
Subject: [PATCH 2/2] Used vuex and added username in list

---
 .../components/organisms/layout/TheHeader.vue  | 18 +++++++++---------
 frontend/store/auth.js                         | 13 ++++++++++---
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/components/organisms/layout/TheHeader.vue b/frontend/components/organisms/layout/TheHeader.vue
index 774c95c6..2aaf87fd 100644
--- a/frontend/components/organisms/layout/TheHeader.vue
+++ b/frontend/components/organisms/layout/TheHeader.vue
@@ -59,15 +59,15 @@
     </v-btn>
     <v-menu
       v-if="isAuthenticated"
-      bottom
+      offset-y
     >
       <template v-slot:activator="{ on }">
-        <v-btn v-on="on" outlined>
-          {{ username }}
+        <v-btn v-on="on" on icon>
+          <v-icon>mdi-dots-vertical</v-icon>
         </v-btn>
       </template>
-
-      <v-list dense>
+      <v-list>
+        <v-subheader>{{ username }}</v-subheader>
         <v-list-item @click="signout">
           <v-list-item-icon>
             <v-icon>mdi-logout</v-icon>
@@ -84,7 +84,7 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, mapState } from 'vuex'
 import TheColorModeSwitcher from '@/components/organisms/layout/TheColorModeSwitcher'
 
 export default {
@@ -99,13 +99,13 @@ export default {
         { title: 'Sentiment Analysis', link: 'sentiment-analysis' },
         { title: 'Translation', link: 'translation' },
         { title: 'Text to SQL', link: 'text-to-sql' }
-      ],
-      username: localStorage.getItem('name')
+      ]
     }
   },
 
   computed: {
-    ...mapGetters('auth', ['isAuthenticated'])
+    ...mapGetters('auth', ['isAuthenticated']),
+    ...mapState('auth', ['username'])
   },
 
   methods: {
diff --git a/frontend/store/auth.js b/frontend/store/auth.js
index af0d8af5..b5371fd4 100644
--- a/frontend/store/auth.js
+++ b/frontend/store/auth.js
@@ -3,7 +3,8 @@ import ApiService from '@/services/api.service'
 import AuthService from '@/services/auth.service'
 
 export const state = () => ({
-  token: null
+  token: null,
+  username: null
 })
 
 export const mutations = {
@@ -12,6 +13,12 @@ export const mutations = {
   },
   clearToken(state) {
     state.token = null
+  },
+  setUsername(state, username) {
+    state.username = username
+  },
+  clearUsername(state) {
+    state.username = null
   }
 }
 
@@ -26,8 +33,8 @@ export const actions = {
     return AuthService.postCredential(authData)
       .then((result) => {
         commit('setToken', result.data.token)
+        commit('setUsername', authData.username)
         localStorage.setItem('token', result.data.token)
-        localStorage.setItem('name', authData.username)
         Cookie.set('jwt', result.data.token)
         ApiService.setHeader(result.data.token)
       })
@@ -53,10 +60,10 @@ export const actions = {
   },
   logout({ commit }) {
     commit('clearToken')
+    commit('clearUsername')
     Cookie.remove('jwt')
     if (process.client) {
       localStorage.removeItem('token')
-      localStorage.removeItem('name')
     }
   }
 }