Client - display authenticated user username in NavBar

fittrackee_client/src/components/NavBar.vue

@@ -31,7 +31,7 @@
         </div>
         <div class="nav-items-user-menu">
           <div class="nav-items-group" v-if="isAuthenticated">
-            <div class="nav-item">User</div>
+            <div class="nav-item">{{ authUser.username }}</div>
             <div class="nav-item">{{ t('user.LOGOUT') }}</div>
           </div>
           <div class="nav-items-group" v-else>
@@ -61,6 +61,7 @@
   import { useStore } from 'vuex'
 
   import { IDropdownOption } from '@/interfaces'
+  import { USER_STORE } from '@/store/constants'
   import Dropdown from '@/components/Common/Dropdown.vue'
 
   export default defineComponent({
@@ -88,7 +89,12 @@
 
       return {
         availableLanguages,
-        isAuthenticated: computed(() => store.getters.isAuthenticated),
+        authUser: computed(
+          () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
+        ),
+        isAuthenticated: computed(
+          () => store.getters[USER_STORE.GETTERS.IS_AUTHENTICATED]
+        ),
         isMenuOpen,
         language: computed(() => store.state.language),
         t,

fittrackee_client/src/store/modules/user/enums.ts

@@ -3,8 +3,9 @@ export enum UserActions {
   LOGIN_OR_REGISTER = 'LOGIN_OR_REGISTER',
 }
 export enum UserGetters {
-  IS_AUTHENTICATED = 'IS_AUTHENTICATED',
   AUTH_TOKEN = 'AUTH_TOKEN',
+  AUTH_USER_PROFILE = 'AUTH_USER_PROFILE',
+  IS_AUTHENTICATED = 'IS_AUTHENTICATED',
 }
 export enum UserMutations {
   UPDATE_AUTH_TOKEN = 'UPDATE_AUTH_TOKEN',

fittrackee_client/src/store/modules/user/getters.ts

@@ -7,6 +7,9 @@ export const getters: GetterTree<IUserState, IRootState> & IUserGetters = {
   [USER_STORE.GETTERS.AUTH_TOKEN]: (state: IUserState) => {
     return state.authToken
   },
+  [USER_STORE.GETTERS.AUTH_USER_PROFILE]: (state: IUserState) => {
+    return state.authUserProfile
+  },
   [USER_STORE.GETTERS.IS_AUTHENTICATED]: (state: IUserState) => {
     return state.authToken !== null
   },

fittrackee_client/src/store/modules/user/interfaces.ts

@@ -38,6 +38,7 @@ export interface IUserState {
 
 export interface IUserGetters {
   [USER_STORE.GETTERS.AUTH_TOKEN](state: IUserState): string | null
+  [USER_STORE.GETTERS.AUTH_USER_PROFILE](state: IUserState): IAuthUserProfile
   [USER_STORE.GETTERS.IS_AUTHENTICATED](state: IUserState): boolean
 }