From ef6649a5dc6a0b49f34447833cb2a4d09d1d5eb2 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 4 Aug 2021 20:22:08 +0200
Subject: [PATCH] Client - init user state

---
 fittrackee_client/src/components/NavBar.vue | 37 +++++++++++++++------
 fittrackee_client/src/store/index.ts        |  8 +++--
 fittrackee_client/src/store/modules/user.ts | 19 +++++++++++
 fittrackee_client/src/types/state.ts        |  7 ++++
 4 files changed, 58 insertions(+), 13 deletions(-)
 create mode 100644 fittrackee_client/src/store/modules/user.ts
 create mode 100644 fittrackee_client/src/types/state.ts

diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue
index 0bc2172e..14b5786f 100644
--- a/fittrackee_client/src/components/NavBar.vue
+++ b/fittrackee_client/src/components/NavBar.vue
@@ -17,19 +17,25 @@
           ></i>
         </div>
         <div class="nav-items-app-menu" @click="closeMenu()">
-          <router-link class="nav-item" to="/">{{
-            t('dashboard.DASHBOARD')
-          }}</router-link>
-          <div class="nav-item">{{ t('workouts.WORKOUTS') }}</div>
-          <div class="nav-item">{{ t('statistics.STATISTICS') }}</div>
-          <div class="nav-item">{{ t('administration.ADMIN') }}</div>
-          <div class="nav-item">{{ t('workouts.ADD_WORKOUT') }}</div>
+          <div class="nav-items-group" v-if="isAuthenticated">
+            <router-link class="nav-item" to="/">{{
+              t('dashboard.DASHBOARD')
+            }}</router-link>
+            <div class="nav-item">{{ t('workouts.WORKOUTS') }}</div>
+            <div class="nav-item">{{ t('statistics.STATISTICS') }}</div>
+            <div class="nav-item">{{ t('administration.ADMIN') }}</div>
+            <div class="nav-item">{{ t('workouts.ADD_WORKOUT') }}</div>
+          </div>
         </div>
         <div class="nav-items-user-menu">
-          <div class="nav-item">User</div>
-          <div class="nav-item">{{ t('user.LOGOUT') }}</div>
-          <!--          <span class="nav-item">{{ t('user.REGISTER') }}</span>-->
-          <!--          <span class="nav-item">{{ t('user.LOGIN') }}</span>-->
+          <div class="nav-items-group" v-if="isAuthenticated">
+            <div class="nav-item">User</div>
+            <div class="nav-item">{{ t('user.LOGOUT') }}</div>
+          </div>
+          <div class="nav-items-group" v-else>
+            <span class="nav-item">{{ t('user.REGISTER') }}</span>
+            <span class="nav-item">{{ t('user.LOGIN') }}</span>
+          </div>
           <Dropdown
             v-if="availableLanguages && language"
             class="nav-item"
@@ -78,6 +84,7 @@
 
       return {
         availableLanguages,
+        isAuthenticated: computed(() => store.getters.isAuthenticated),
         isMenuOpen,
         language: computed(() => store.state.language),
         t,
@@ -139,6 +146,9 @@
         padding: 0;
       }
 
+      .nav-items-group {
+        display: flex;
+      }
       .nav-item {
         padding: 0 10px;
 
@@ -208,6 +218,11 @@
           }
         }
 
+        .nav-items-group {
+          display: flex;
+          flex-direction: column;
+        }
+
         .nav-item {
           padding: 7px 25px;
         }
diff --git a/fittrackee_client/src/store/index.ts b/fittrackee_client/src/store/index.ts
index d59f769b..8abbdb96 100644
--- a/fittrackee_client/src/store/index.ts
+++ b/fittrackee_client/src/store/index.ts
@@ -1,14 +1,18 @@
 import { createStore } from 'vuex'
+import { DefaultStateTypes } from '@/types/state'
+import user from './modules/user'
 
 export default createStore({
   state: {
     language: 'en',
   },
   mutations: {
-    setLanguage(state, language: string) {
+    setLanguage(state: DefaultStateTypes, language: string) {
       state.language = language
     },
   },
   actions: {},
-  modules: {},
+  modules: {
+    user,
+  },
 })
diff --git a/fittrackee_client/src/store/modules/user.ts b/fittrackee_client/src/store/modules/user.ts
new file mode 100644
index 00000000..05a5d300
--- /dev/null
+++ b/fittrackee_client/src/store/modules/user.ts
@@ -0,0 +1,19 @@
+import { UserStateTypes } from '@/types/state'
+
+const userState = {
+  authToken: null,
+}
+
+export type Getters = {
+  isAuthenticated(state: UserStateTypes): boolean
+}
+
+const getters: Getters = {
+  isAuthenticated(state: UserStateTypes) {
+    return state.authToken !== null
+  },
+}
+export default {
+  state: userState,
+  getters,
+}
diff --git a/fittrackee_client/src/types/state.ts b/fittrackee_client/src/types/state.ts
new file mode 100644
index 00000000..791cb90d
--- /dev/null
+++ b/fittrackee_client/src/types/state.ts
@@ -0,0 +1,7 @@
+export interface DefaultStateTypes {
+  language: string
+}
+
+export interface UserStateTypes {
+  authToken: string
+}