Client - init user state

This commit is contained in:
Sam 2021-08-04 20:22:08 +02:00
parent 146750c155
commit ef6649a5dc
4 changed files with 58 additions and 13 deletions

View File

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

View File

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

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

View File

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