Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - display authenticated user username in NavBar

Browse Source
This commit is contained in:
Sam 2021-08-11 21:24:23 +02:00
parent 7df5ea9870
commit a20a646687
4 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
fittrackee_client/src/components/NavBar.vue
View File

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

3
fittrackee_client/src/store/modules/user/enums.ts
View File

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

3
fittrackee_client/src/store/modules/user/getters.ts
View File

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

1
fittrackee_client/src/store/modules/user/interfaces.ts
View File

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