Client - add logout

fittrackee_client/src/components/NavBar.vue

@@ -43,7 +43,9 @@
               </div>
             </div>
             <div class="nav-item">{{ authUser.username }}</div>
-            <div class="nav-item">{{ t('user.LOGOUT') }}</div>
+            <div class="nav-item nav-link" @click="logout">
+              {{ t('user.LOGOUT') }}
+            </div>
           </div>
           <div class="nav-items-group" v-else>
             <span class="nav-item">{{ t('user.REGISTER') }}</span>
@@ -117,6 +119,9 @@
         locale.value = option.value.toString()
         store.commit(ROOT_STORE.MUTATIONS.UPDATE_LANG, option.value)
       }
+      function logout() {
+        store.dispatch(USER_STORE.ACTIONS.LOGOUT)
+      }
 
       return {
         availableLanguages,
@@ -129,6 +134,7 @@
         openMenu,
         closeMenu,
         updateLanguage,
+        logout,
       }
     },
   })
@@ -218,6 +224,11 @@
         }
       }
 
+      .nav-link {
+        color: var(--app-a-color);
+        cursor: pointer;
+      }
+
       .nav-profile-img {
         border-radius: 50%;
         height: 32px;

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

@@ -52,4 +52,12 @@ export const actions: ActionTree<IUserState, IRootState> & IUserActions = {
       })
       .catch((error) => handleError(context, error))
   },
+  [USER_STORE.ACTIONS.LOGOUT](
+    context: ActionContext<IUserState, IRootState>
+  ): void {
+    localStorage.removeItem('authToken')
+    context.commit(USER_STORE.MUTATIONS.CLEAR_AUTH_USER_TOKEN)
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE)
+    router.push('/login')
+  },
 }

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

@@ -1,6 +1,7 @@
 export enum UserActions {
   GET_USER_PROFILE = 'GET_USER_PROFILE',
   LOGIN_OR_REGISTER = 'LOGIN_OR_REGISTER',
+  LOGOUT = 'LOGOUT',
 }
 
 export enum UserGetters {
@@ -10,6 +11,7 @@ export enum UserGetters {
 }
 
 export enum UserMutations {
+  CLEAR_AUTH_USER_TOKEN = 'CLEAR_AUTH_USER_TOKEN',
   UPDATE_AUTH_TOKEN = 'UPDATE_AUTH_TOKEN',
   UPDATE_AUTH_USER_PROFILE = 'UPDATE_AUTH_USER_PROFILE',
 }

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

@@ -38,10 +38,16 @@ export interface IUserState {
 }
 
 export interface IUserActions {
+  [USER_STORE.ACTIONS.GET_USER_PROFILE](
+    context: ActionContext<IUserState, IRootState>
+  ): void
   [USER_STORE.ACTIONS.LOGIN_OR_REGISTER](
     context: ActionContext<IUserState, IRootState>,
     data: ILoginOrRegisterData
   ): void
+  [USER_STORE.ACTIONS.LOGOUT](
+    context: ActionContext<IUserState, IRootState>
+  ): void
 }
 
 export interface IUserGetters {

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

@@ -5,6 +5,10 @@ import { IAuthUserProfile, IUserState } from '@/store/modules/user/interfaces'
 import { TUserMutations } from '@/store/modules/user/types'
 
 export const mutations: MutationTree<IUserState> & TUserMutations = {
+  [USER_STORE.MUTATIONS.CLEAR_AUTH_USER_TOKEN](state: IUserState) {
+    state.authToken = null
+    state.authUserProfile = <IAuthUserProfile>{}
+  },
   [USER_STORE.MUTATIONS.UPDATE_AUTH_TOKEN](
     state: IUserState,
     authToken: string

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

@@ -2,13 +2,19 @@ import { Store as VuexStore, CommitOptions, DispatchOptions } from 'vuex'
 
 import { USER_STORE } from '@/store/constants'
 import {
+  IAuthUserProfile,
   IUserActions,
   IUserGetters,
   IUserState,
 } from '@/store/modules/user/interfaces'
 
 export type TUserMutations<S = IUserState> = {
+  [USER_STORE.MUTATIONS.CLEAR_AUTH_USER_TOKEN](state: S): void
   [USER_STORE.MUTATIONS.UPDATE_AUTH_TOKEN](state: S, authToken: string): void
+  [USER_STORE.MUTATIONS.UPDATE_AUTH_USER_PROFILE](
+    state: S,
+    authUserProfile: IAuthUserProfile
+  ): void
 }
 
 export type TUserStoreModule<S = IUserState> = Omit<