Merge branch 'ui-february' into '122-test-amqp'

Persist token in localStorage

See merge request !38

Former-commit-id: 876c62a7

fda-ui/layouts/default.vue

@@ -42,6 +42,7 @@
         to="/signup">
         <v-icon left>mdi-account-plus</v-icon> Signup
       </v-btn>
+      {{ username }}
       <v-menu bottom offset-y left>
         <template v-slot:activator="{ on, attrs }">
           <v-btn
@@ -62,6 +63,10 @@
             @click="switchTheme()">
             {{ nextTheme }} Theme
           </v-list-item>
+          <v-list-item
+            @click="logout">
+            Logout
+          </v-list-item>
         </v-list>
       </v-menu>
     </v-app-bar>
@@ -150,6 +155,9 @@ export default {
     token () {
       return this.$store.state.token
     },
+    username () {
+      return this.$store.state.user && this.$store.state.user.username
+    },
     nextTheme () {
       return this.$vuetify.theme.dark ? 'Light' : 'Dark'
     },
@@ -178,6 +186,12 @@ export default {
     switchTheme () {
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark
     },
+    logout () {
+      this.$store.commit('SET_TOKEN', null)
+      this.$store.commit('SET_USER', null)
+      this.$toast.success('Logged out')
+      this.$router.push('/container')
+    },
     async loadDB () {
       if (this.$route.params.db_id && !this.db) {
         try {

fda-ui/nuxt.config.js

@@ -55,7 +55,8 @@ export default {
   plugins: [
     { src: '~/plugins/toast', ssr: false },
     { src: '~/plugins/vendors', ssr: false },
-    { src: '~/plugins/axios' }
+    { src: '~/plugins/axios' },
+    { src: '~/plugins/vuex-persist.js', mode: 'client' }
   ],
 
   // Auto import components (https://go.nuxtjs.dev/config-components)

fda-ui/pages/login.vue

@@ -86,6 +86,9 @@ export default {
         const res = await this.$axios.post(url, this.loginAccount)
         console.debug('login user', res.data)
         this.$store.commit('SET_TOKEN', res.data.token)
+        const user = { ...res.data }
+        delete user.token
+        this.$store.commit('SET_USER', user)
         this.$toast.success('Welcome back!')
         this.$router.push('/container')
       } catch (err) {

fda-ui/plugins/vuex-persist.js

+import VuexPersistence from 'vuex-persist'
+
+export default ({ store }) => {
+  new VuexPersistence({
+    storage: window.localStorage,
+    reducer: state => ({
+      token: state.token,
+      user: state.user
+    })
+  }).plugin(store)
+}

fda-ui/store/index.js

 export const state = () => ({
   db: null,
-  token: null
+  token: null,
+  user: null
 })
 
 export const mutations = {
@@ -9,5 +10,8 @@ export const mutations = {
   },
   SET_TOKEN (state, token) {
     state.token = token
+  },
+  SET_USER (state, user) {
+    state.user = user
   }
 }