Client - init user state

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;
         }

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,
+  },
 })

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,
+}

fittrackee_client/src/types/state.ts

@@ -0,0 +1,7 @@
+export interface DefaultStateTypes {
+  language: string
+}
+
+export interface UserStateTypes {
+  authToken: string
+}