feat: save and restore the user language on the server (#1181)
Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1181 Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de> Co-authored-by: konrad <k@knt.li> Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad
parent
0befa58908
commit
4a7d2d8414
2 changed files with 67 additions and 39 deletions
|
|
@ -1,7 +1,12 @@
|
|||
import {HTTPFactory} from '@/http-common'
|
||||
import {getCurrentLanguage, saveLanguage} from '@/i18n'
|
||||
import {LOADING} from '../mutation-types'
|
||||
import UserModel from '../../models/user'
|
||||
import UserModel from '@/models/user'
|
||||
import UserSettingsService from '@/services/userSettings'
|
||||
import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
|
||||
import {setLoading} from '@/store/helper'
|
||||
import {i18n} from '@/i18n'
|
||||
import {success} from '@/message'
|
||||
|
||||
const AUTH_TYPES = {
|
||||
'UNKNOWN': 0,
|
||||
|
|
@ -98,10 +103,10 @@ export default {
|
|||
const response = await HTTP.post('login', data)
|
||||
// Save the token to local storage for later use
|
||||
saveToken(response.data.token, true)
|
||||
|
||||
|
||||
// Tell others the user is autheticated
|
||||
ctx.dispatch('checkAuth')
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
if (
|
||||
e.response &&
|
||||
e.response.data.code === 1017 &&
|
||||
|
|
@ -124,7 +129,7 @@ export default {
|
|||
try {
|
||||
await HTTP.post('register', credentials)
|
||||
return ctx.dispatch('login', credentials)
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
if (e.response?.data?.message) {
|
||||
throw e.response.data
|
||||
}
|
||||
|
|
@ -149,7 +154,7 @@ export default {
|
|||
const response = await HTTP.post(`/auth/openid/${provider}/callback`, data)
|
||||
// Save the token to local storage for later use
|
||||
saveToken(response.data.token, true)
|
||||
|
||||
|
||||
// Tell others the user is autheticated
|
||||
ctx.dispatch('checkAuth')
|
||||
} finally {
|
||||
|
|
@ -200,7 +205,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
async refreshUserInfo(ctx) {
|
||||
async refreshUserInfo({state, commit, dispatch}) {
|
||||
const jwt = getToken()
|
||||
if (!jwt) {
|
||||
return
|
||||
|
|
@ -208,22 +213,53 @@ export default {
|
|||
|
||||
const HTTP = HTTPFactory()
|
||||
try {
|
||||
|
||||
const response = await HTTP.get('user', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${jwt}`,
|
||||
},
|
||||
})
|
||||
const info = new UserModel(response.data)
|
||||
info.type = ctx.state.info.type
|
||||
info.email = ctx.state.info.email
|
||||
info.exp = ctx.state.info.exp
|
||||
|
||||
ctx.commit('info', info)
|
||||
ctx.commit('lastUserRefresh')
|
||||
info.type = state.info.type
|
||||
info.email = state.info.email
|
||||
info.exp = state.info.exp
|
||||
|
||||
commit('info', info)
|
||||
commit('lastUserRefresh')
|
||||
|
||||
if (typeof info.settings.language !== 'undefined') {
|
||||
// save current language
|
||||
await dispatch('saveUserSettings', {
|
||||
settings: {
|
||||
...state.settings,
|
||||
language: getCurrentLanguage(),
|
||||
},
|
||||
showMessage: false,
|
||||
})
|
||||
}
|
||||
|
||||
return info
|
||||
} catch(e) {
|
||||
throw new Error('Error while refreshing user info:', { cause: e })
|
||||
} catch (e) {
|
||||
throw new Error('Error while refreshing user info:', {cause: e})
|
||||
}
|
||||
},
|
||||
|
||||
async saveUserSettings(ctx, payload) {
|
||||
const {settings} = payload
|
||||
const showMessage = payload.showMessage ?? true
|
||||
const userSettingsService = new UserSettingsService()
|
||||
|
||||
const cancel = setLoading(ctx, 'general-settings')
|
||||
try {
|
||||
saveLanguage(settings.language)
|
||||
await userSettingsService.update(settings)
|
||||
ctx.commit('setUserSettings', {...settings})
|
||||
if (showMessage) {
|
||||
success({message: i18n.global.t('user.settings.general.savedSuccess')})
|
||||
}
|
||||
} catch (e) {
|
||||
throw new Error('Error while saving user settings:', {cause: e})
|
||||
} finally {
|
||||
cancel()
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -240,7 +276,7 @@ export default {
|
|||
try {
|
||||
await refreshToken(!ctx.state.isLinkShareAuth)
|
||||
ctx.dispatch('checkAuth')
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
// Don't logout on network errors as the user would then get logged out if they don't have
|
||||
// internet for a short period of time - such as when the laptop is still reconnecting
|
||||
if (e?.request?.status) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<card :title="$t('user.settings.general.title')" class="general-settings" :loading="userSettingsService.loading">
|
||||
<card :title="$t('user.settings.general.title')" class="general-settings" :loading="loading">
|
||||
<div class="field">
|
||||
<label class="label" :for="`newName${id}`">{{ $t('user.settings.general.name') }}</label>
|
||||
<div class="control">
|
||||
|
|
@ -67,8 +67,8 @@
|
|||
{{ $t('user.settings.general.language') }}
|
||||
</span>
|
||||
<div class="select ml-2">
|
||||
<select v-model="language">
|
||||
<option :value="lang.code" v-for="lang in availableLanguages" :key="lang.code">{{
|
||||
<select v-model="settings.language">
|
||||
<option :value="lang.code" v-for="lang in availableLanguageOptions" :key="lang.code">{{
|
||||
lang.title
|
||||
}}
|
||||
</option>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
</div>
|
||||
|
||||
<x-button
|
||||
:loading="userSettingsService.loading"
|
||||
:loading="loading"
|
||||
@click="updateSettings()"
|
||||
class="is-fullwidth mt-4"
|
||||
>
|
||||
|
|
@ -120,14 +120,12 @@
|
|||
import {computed, watch} from 'vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
import {playSoundWhenDoneKey} from '@/helpers/playPop'
|
||||
import {availableLanguages, saveLanguage, getCurrentLanguage} from '@/i18n'
|
||||
import {playSoundWhenDoneKey, playPop} from '@/helpers/playPop'
|
||||
import {availableLanguages} from '@/i18n'
|
||||
import {getQuickAddMagicMode, setQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
|
||||
import UserSettingsService from '@/services/userSettings'
|
||||
import {PrefixMode} from '@/modules/parseTaskText'
|
||||
import ListSearch from '@/components/tasks/partials/listSearch'
|
||||
import {createRandomID} from '@/helpers/randomId'
|
||||
import {playPop} from '@/helpers/playPop'
|
||||
import {useColorScheme} from '@/composables/useColorScheme'
|
||||
import {success} from '@/message'
|
||||
|
||||
|
|
@ -165,23 +163,19 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
playSoundWhenDone: getPlaySoundWhenDoneSetting(),
|
||||
language: getCurrentLanguage(),
|
||||
quickAddMagicMode: getQuickAddMagicMode(),
|
||||
quickAddMagicPrefixes: PrefixMode,
|
||||
userSettingsService: new UserSettingsService(),
|
||||
settings: {...this.$store.state.auth.settings},
|
||||
id: createRandomID(),
|
||||
availableLanguageOptions: Object.entries(availableLanguages)
|
||||
.map(l => ({code: l[0], title: l[1]}))
|
||||
.sort((a, b) => a.title.localeCompare(b.title)),
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ListSearch,
|
||||
},
|
||||
computed: {
|
||||
availableLanguages() {
|
||||
return Object.entries(availableLanguages)
|
||||
.map(l => ({code: l[0], title: l[1]}))
|
||||
.sort((a, b) => a.title.localeCompare(b.title))
|
||||
},
|
||||
defaultList: {
|
||||
get() {
|
||||
return this.$store.getters['lists/getListById'](this.settings.defaultListId)
|
||||
|
|
@ -190,6 +184,9 @@ export default {
|
|||
this.settings.defaultListId = l ? l.id : DEFAULT_LIST_ID
|
||||
},
|
||||
},
|
||||
loading() {
|
||||
return this.$store.state.loading && this.$store.state.loadingModule === 'general-settings'
|
||||
},
|
||||
},
|
||||
|
||||
setup() {
|
||||
|
|
@ -211,16 +208,11 @@ export default {
|
|||
methods: {
|
||||
async updateSettings() {
|
||||
localStorage.setItem(playSoundWhenDoneKey, this.playSoundWhenDone)
|
||||
saveLanguage(this.language)
|
||||
setQuickAddMagicMode(this.quickAddMagicMode)
|
||||
|
||||
const settings = {
|
||||
...this.settings,
|
||||
}
|
||||
|
||||
await this.userSettingsService.update(settings)
|
||||
this.$store.commit('auth/setUserSettings', settings)
|
||||
this.$message.success({message: this.$t('user.settings.general.savedSuccess')})
|
||||
await this.$store.dispatch('auth/saveUserSettings', {
|
||||
settings: {...this.settings},
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue