✨ Add navbar links to login, upload & logout

surfriderfoundationeurope · May 16, 2021 · 308860f · 308860f
1 parent bb9c933
commit 308860f
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 10 deletions.
diff --git a/src/components/global/Navbar.vue b/src/components/global/Navbar.vue
@@ -1,19 +1,30 @@
 <template>
-    <b-navbar toggleable="sm" type="dark" class="navbar">
+    <b-navbar toggleable="sm" type="dark" class="navbar w-100">
         <b-navbar-brand class="navbar-brand">
             <img src="images/surfrider.svg" alt="surfrider-logo" class="logo" />
         </b-navbar-brand>
 
         <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
-        <b-collapse id="nav-collapse" is-nav>
-            <b-navbar-nav>
+        <b-collapse id="nav-collapse" class="w-100" is-nav>
+            <b-navbar-nav class="d-flex align-items-center w-100">
                 <b-nav-item href="/">
                     <router-link to="/">Annotate</router-link>
                 </b-nav-item>
                 <b-nav-item>
                     <router-link to="/tutorial">Tutorial</router-link>
                 </b-nav-item>
+                <b-nav-item v-if="isLoggedIn">
+                    <router-link to="/upload">Upload</router-link>
+                </b-nav-item>
+                <b-nav-item v-if="isLoggedIn" class="ml-auto">
+                    <b-button variant="outline-primary" @click="logout">
+                        Logout
+                    </b-button>
+                </b-nav-item>
+                <b-nav-item v-if="!isLoggedIn" class="ml-auto">
+                    <router-link to="/login">Login</router-link>
+                </b-nav-item>
             </b-navbar-nav>
         </b-collapse>
     </b-navbar>
@@ -22,8 +33,16 @@
 <script lang="ts">
 import Vue from "vue";
 import Component from "vue-class-component";
+import { mapGetters, mapMutations } from "vuex";
 
-@Component({})
+@Component({
+    computed: {
+        ...mapGetters(["isLoggedIn"])
+    },
+    methods: {
+        ...mapMutations(["logout"])
+    }
+})
 export default class NavBar extends Vue {}
 </script>
 

diff --git a/src/components/login/LoginForm.vue b/src/components/login/LoginForm.vue
@@ -112,7 +112,9 @@ export default class LoginForm extends Vue {
             })
             .catch(prodError => {
                 this.$data.status = "error";
-                this.console.error(prodError);
+                this.$router.push("/");
+
+                console.error(prodError);
             });
     }
 }

diff --git a/src/store/store.ts b/src/store/store.ts
@@ -25,6 +25,7 @@ const developmentAnnotationLabels: AnnotationLabel[] = [
     { id: 2, name: "paper" },
     { id: 3, name: "some super long trash name" }
 ]; // TODO : Should be fetch from API
+const savedAuth = localStorage.getItem("auth");
 
 type ContextSelections = {
     quality: QualityValue | null;
@@ -33,9 +34,9 @@ type ContextSelections = {
 };
 export type State = {
     axiosRequestConfig?: AxiosRequestConfig;
-    auth?: {
-        token: string;
-        expires: string;
+    auth: {
+        token?: string;
+        expires?: string;
     };
     useAxios: boolean;
     contextSelections?: ContextSelections;
@@ -61,6 +62,7 @@ export type State = {
 };
 export const initialState: State = {
     useAxios: false,
+    auth: savedAuth ? JSON.parse(savedAuth) : {},
     image: {
         loader: undefined,
         loaded: false,
@@ -84,7 +86,10 @@ const mutations = {
             baseURL: url,
             headers: {
                 "Content-Type": "application/json;charset=utf-8",
-                "Access-Control-Allow-Origin": "*"
+                "Access-Control-Allow-Origin": "*",
+                Authorization: state.auth.token
+                    ? `Bearer ${state.auth.token}`
+                    : undefined
             }
         };
     },
@@ -224,11 +229,22 @@ const mutations = {
 
     login(state: State, payload: { token: string; expires: string }): void {
         state.auth = payload;
+        localStorage.setItem("auth", JSON.stringify(payload));
         if (state.axiosRequestConfig) {
-            state.axiosRequestConfig.headers[
+            state.axiosRequestConfig.headers.common[
                 "Authorization"
             ] = `Bearer ${payload.token}`;
         }
+    },
+
+    logout(state: State): void {
+        state.auth = {};
+        localStorage.removeItem("auth");
+        if (state.axiosRequestConfig) {
+            state.axiosRequestConfig.headers.common[
+                "Authorization"
+            ] = undefined;
+        }
     }
 };
 
@@ -241,6 +257,7 @@ const store = new Vuex.Store({
     mutations: mutations,
     getters: {
         getAxiosRequestConfig: state => state.axiosRequestConfig,
+        isLoggedIn: state => !!(state.auth && state.auth.token),
         getAnnotationsWithLabel: state => {
             return state.annotations.filter(
                 annotation => !!annotation.annotationLabel