Client - init user state
This commit is contained in:
parent
146750c155
commit
ef6649a5dc
@ -17,19 +17,25 @@
|
|||||||
></i>
|
></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-items-app-menu" @click="closeMenu()">
|
<div class="nav-items-app-menu" @click="closeMenu()">
|
||||||
<router-link class="nav-item" to="/">{{
|
<div class="nav-items-group" v-if="isAuthenticated">
|
||||||
t('dashboard.DASHBOARD')
|
<router-link class="nav-item" to="/">{{
|
||||||
}}</router-link>
|
t('dashboard.DASHBOARD')
|
||||||
<div class="nav-item">{{ t('workouts.WORKOUTS') }}</div>
|
}}</router-link>
|
||||||
<div class="nav-item">{{ t('statistics.STATISTICS') }}</div>
|
<div class="nav-item">{{ t('workouts.WORKOUTS') }}</div>
|
||||||
<div class="nav-item">{{ t('administration.ADMIN') }}</div>
|
<div class="nav-item">{{ t('statistics.STATISTICS') }}</div>
|
||||||
<div class="nav-item">{{ t('workouts.ADD_WORKOUT') }}</div>
|
<div class="nav-item">{{ t('administration.ADMIN') }}</div>
|
||||||
|
<div class="nav-item">{{ t('workouts.ADD_WORKOUT') }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-items-user-menu">
|
<div class="nav-items-user-menu">
|
||||||
<div class="nav-item">User</div>
|
<div class="nav-items-group" v-if="isAuthenticated">
|
||||||
<div class="nav-item">{{ t('user.LOGOUT') }}</div>
|
<div class="nav-item">User</div>
|
||||||
<!-- <span class="nav-item">{{ t('user.REGISTER') }}</span>-->
|
<div class="nav-item">{{ t('user.LOGOUT') }}</div>
|
||||||
<!-- <span class="nav-item">{{ t('user.LOGIN') }}</span>-->
|
</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
|
<Dropdown
|
||||||
v-if="availableLanguages && language"
|
v-if="availableLanguages && language"
|
||||||
class="nav-item"
|
class="nav-item"
|
||||||
@ -78,6 +84,7 @@
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
availableLanguages,
|
availableLanguages,
|
||||||
|
isAuthenticated: computed(() => store.getters.isAuthenticated),
|
||||||
isMenuOpen,
|
isMenuOpen,
|
||||||
language: computed(() => store.state.language),
|
language: computed(() => store.state.language),
|
||||||
t,
|
t,
|
||||||
@ -139,6 +146,9 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-items-group {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
.nav-item {
|
.nav-item {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
|
||||||
@ -208,6 +218,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-items-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
padding: 7px 25px;
|
padding: 7px 25px;
|
||||||
}
|
}
|
||||||
|
@ -1,14 +1,18 @@
|
|||||||
import { createStore } from 'vuex'
|
import { createStore } from 'vuex'
|
||||||
|
import { DefaultStateTypes } from '@/types/state'
|
||||||
|
import user from './modules/user'
|
||||||
|
|
||||||
export default createStore({
|
export default createStore({
|
||||||
state: {
|
state: {
|
||||||
language: 'en',
|
language: 'en',
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
setLanguage(state, language: string) {
|
setLanguage(state: DefaultStateTypes, language: string) {
|
||||||
state.language = language
|
state.language = language
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
actions: {},
|
actions: {},
|
||||||
modules: {},
|
modules: {
|
||||||
|
user,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
19
fittrackee_client/src/store/modules/user.ts
Normal file
19
fittrackee_client/src/store/modules/user.ts
Normal file
@ -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,
|
||||||
|
}
|
7
fittrackee_client/src/types/state.ts
Normal file
7
fittrackee_client/src/types/state.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export interface DefaultStateTypes {
|
||||||
|
language: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserStateTypes {
|
||||||
|
authToken: string
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user