From 353134d76f4e50c2dd13adee00ade4cd02fdd4a0 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Mon, 13 Apr 2020 18:07:21 +0200
Subject: [PATCH] Store user in VueX, dynamic navbar

---
 web/src/components/Navbar.vue     | 24 +++++++++++++++++++-----
 web/src/components/SigninForm.vue |  4 ++--
 web/src/store/mutations.js        | 10 ++++++++--
 web/src/store/state.js            |  3 ++-
 web/src/user/index.js             | 19 +++++++++++++++++++
 5 files changed, 50 insertions(+), 10 deletions(-)
 create mode 100644 web/src/user/index.js

diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
index 8d3e16d..c45209e 100644
--- a/web/src/components/Navbar.vue
+++ b/web/src/components/Navbar.vue
@@ -7,7 +7,7 @@
         <b-collapse id="nav-collapse" is-nav>
 
             <b-navbar-nav>
-                <b-nav-item to="#">Example</b-nav-item>
+                <b-nav-item to="">About</b-nav-item>
             </b-navbar-nav>
 
             <!-- Right aligned nav items -->
@@ -16,10 +16,18 @@
                 <b-nav-item-dropdown right>
                     <!-- Using 'button-content' slot -->
                     <template v-slot:button-content>
-                        <em>User</em>
+                        <em v-if="user">{{ user.username }}</em>
+                        <em v-else>Account</em>
                     </template>
-                    <b-dropdown-item href="#">Profile</b-dropdown-item>
-                    <b-dropdown-item href="#">Sign Out</b-dropdown-item>
+                    <div v-if="isLoggedIn">
+                        <b-dropdown-item to="/profile">Profile</b-dropdown-item>
+                        <b-dropdown-item to="/signout">Sign Out</b-dropdown-item>
+                    </div>
+                    <div v-else>
+                        <b-dropdown-item to="/signup">Sign Up</b-dropdown-item>
+                        <b-dropdown-item to="/signin">Sign In</b-dropdown-item>
+                    </div>
+
                 </b-nav-item-dropdown>
 
             </b-navbar-nav>
@@ -29,7 +37,13 @@
 </template>
 
 <script>
+    import {mapState, mapGetters} from 'vuex'
+
     export default {
-        name: "Navbar"
+        name: "Navbar",
+        computed: {
+            ...mapState(['user']),
+            ...mapGetters(['isLoggedIn'])
+        }
     }
 </script>
\ No newline at end of file
diff --git a/web/src/components/SigninForm.vue b/web/src/components/SigninForm.vue
index bcbcb23..2cacbc9 100644
--- a/web/src/components/SigninForm.vue
+++ b/web/src/components/SigninForm.vue
@@ -53,7 +53,7 @@
             }
         },
         methods: {
-            ...mapMutations(['setToken', 'setUsername']),
+            ...mapMutations(['setToken', 'setUser']),
 
             signin() {
                 this.error = false
@@ -65,7 +65,7 @@
                 })
                     .then(response => {
                         this.setToken({token: response.data.token})
-                        this.setUsername({username: this.form.username})
+                        this.setUser({username: this.form.username})
                     })
                     .catch(error => {
                         console.log(error)
diff --git a/web/src/store/mutations.js b/web/src/store/mutations.js
index 166d7d7..e9c38e7 100644
--- a/web/src/store/mutations.js
+++ b/web/src/store/mutations.js
@@ -1,4 +1,5 @@
 import {setToken, clearToken} from '@/jwt'
+import {setUser, clearUser} from '@/user'
 
 export default {
     setToken: (state, {token}) => {
@@ -9,7 +10,12 @@ export default {
         state.token = null
         clearToken()
     },
-    setUsername: (state, {username}) => {
-        state.username = username
+    setUser: (state, {username}) => {
+        state.user = {username}
+        setUser(username)
+    },
+    clearUser: state => {
+        state.user = null
+        clearUser()
     }
 }
\ No newline at end of file
diff --git a/web/src/store/state.js b/web/src/store/state.js
index 462e926..373079c 100644
--- a/web/src/store/state.js
+++ b/web/src/store/state.js
@@ -1,6 +1,7 @@
 import {getToken} from '@/jwt'
+import {getUser} from '@/user'
 
 export default {
     token: getToken(),
-    username: null
+    user: getUser()
 }
\ No newline at end of file
diff --git a/web/src/user/index.js b/web/src/user/index.js
new file mode 100644
index 0000000..7ed58f2
--- /dev/null
+++ b/web/src/user/index.js
@@ -0,0 +1,19 @@
+export function setUser(username) {
+    const user = JSON.stringify({
+        username
+    })
+    localStorage.setItem('user', user)
+}
+
+// should only be run at initialization, use VueX store after
+export function getUser() {
+    const userJson = localStorage.getItem('user')
+    if(!userJson) return null
+    return JSON.parse(userJson)
+}
+
+export function clearUser() {
+    localStorage.removeItem('user')
+}
+
+export default {setUser, getUser, clearUser}
\ No newline at end of file