feat: keep errorMessage local (#865)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Co-authored-by: konrad <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/865
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>

src/store/index.js

@@ -2,7 +2,6 @@ import {createStore} from 'vuex'
 import {
 	BACKGROUND,
 	CURRENT_LIST,
-	ERROR_MESSAGE,
 	HAS_TASKS,
 	KEYBOARD_SHORTCUTS_ACTIVE,
 	LOADING,
@@ -36,7 +35,6 @@ export const store = createStore({
 	state: {
 		loading: false,
 		loadingModule: null,
-		errorMessage: '',
 		online: true,
 		// This is used to highlight the current list in menu for all list related views
 		currentList: {id: 0},
@@ -53,9 +51,6 @@ export const store = createStore({
 		[LOADING_MODULE](state, module) {
 			state.loadingModule = module
 		},
-		[ERROR_MESSAGE](state, error) {
-			state.errorMessage = error
-		},
 		[ONLINE](state, online) {
 			if (import.meta.env.VITE_IS_ONLINE) {
 				console.log('Setting fake online state', import.meta.env.VITE_IS_ONLINE)

src/store/modules/auth.js

@@ -1,5 +1,5 @@
 import {HTTPFactory} from '@/http-common'
-import {ERROR_MESSAGE, LOADING} from '../mutation-types'
+import {LOADING} from '../mutation-types'
 import UserModel from '../../models/user'
 import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
 
@@ -128,8 +128,8 @@ export default {
 				})
 				return ctx.dispatch('login', credentials)
 			} catch(e) {
-				if (e.response && e.response.data && e.response.data.message) {
-					ctx.commit(ERROR_MESSAGE, e.response.data.message, {root: true})
+				if (e.response?.data?.message) {
+					throw e.response.data
 				}
 
 				throw e

src/store/mutation-types.js

@@ -1,6 +1,5 @@
 export const LOADING = 'loading'
 export const LOADING_MODULE = 'loadingModule'
-export const ERROR_MESSAGE = 'errorMessage'
 export const ONLINE = 'online'
 export const CURRENT_LIST = 'currentList'
 export const HAS_TASKS = 'hasTasks'

src/views/user/Login.vue

@@ -105,7 +105,7 @@
 import {mapState} from 'vuex'
 
 import {HTTPFactory} from '@/http-common'
-import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
+import {LOADING} from '@/store/mutation-types'
 import legal from '../../components/misc/legal'
 import ApiConfig from '@/components/misc/api-config.vue'
 import {getErrorText} from '@/message'
@@ -121,6 +121,7 @@ export default {
 		return {
 			confirmedEmailSuccess: false,
 			hasApiUrl: false,
+			errorMessage: '',
 		}
 	},
 	beforeMount() {
@@ -138,7 +139,7 @@ export default {
 				})
 				.catch(e => {
 					cancel()
-					this.$store.commit(ERROR_MESSAGE, e.response.data.message)
+					this.errorMessage = e.response.data.message
 				})
 		}
 
@@ -170,7 +171,6 @@ export default {
 		...mapState({
 			registrationEnabled: state => state.config.registrationEnabled,
 			loading: LOADING,
-			errorMessage: ERROR_MESSAGE,
 			needsTotpPasscode: state => state.auth.needsTotpPasscode,
 			authenticated: state => state.auth.authenticated,
 			localAuthEnabled: state => state.config.auth.local.enabled,
@@ -189,7 +189,7 @@ export default {
 		},
 
 		async submit() {
-			this.$store.commit(ERROR_MESSAGE, '')
+			this.errorMessage = ''
 			// Some browsers prevent Vue bindings from working with autofilled values.
 			// To work around this, we're manually getting the values here instead of relying on vue bindings.
 			// For more info, see https://kolaente.dev/vikunja/frontend/issues/78
@@ -211,12 +211,7 @@ export default {
 				}
 
 				const err = getErrorText(e)
-				if (typeof err[1] !== 'undefined') {
-					this.$store.commit(ERROR_MESSAGE, err[1])
-					return
-				}
-
-				this.$store.commit(ERROR_MESSAGE, err[0])
+				this.errorMessage = typeof err[1] !== 'undefined' ? err[1] : err[0]
 			}
 		},
 

src/views/user/OpenIdAuth.vue

@@ -12,14 +12,18 @@
 <script>
 import {mapState} from 'vuex'
 
-import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
+import {LOADING} from '@/store/mutation-types'
 import {getErrorText} from '@/message'
 import {clearLastVisited, getLastVisited} from '../../helpers/saveLastVisited'
 
 export default {
 	name: 'Auth',
+	data() {
+		return {
+			errorMessage: '',
+		}
+	},
 	computed: mapState({
-		errorMessage: ERROR_MESSAGE,
 		loading: LOADING,
 	}),
 	mounted() {
@@ -40,25 +44,23 @@ export default {
 			}
 			localStorage.setItem('authenticating', true)
 
+			this.errorMessage = ''
+
 			if (typeof this.$route.query.error !== 'undefined') {
-				let error = this.$t('user.auth.openIdGeneralError')
-				if (typeof this.$route.query.message !== 'undefined') {
-					error = this.$route.query.message
-				}
 				localStorage.removeItem('authenticating')
-				this.$store.commit(ERROR_MESSAGE, error)
+				this.errorMessage = typeof this.$route.query.message !== 'undefined'
+					? this.$route.query.message
+					: this.$t('user.auth.openIdGeneralError')
 				return
 			}
 
 			const state = localStorage.getItem('state')
 			if (typeof this.$route.query.state === 'undefined' || this.$route.query.state !== state) {
 				localStorage.removeItem('authenticating')
-				this.$store.commit(ERROR_MESSAGE, this.$t('user.auth.openIdStateError'))
+				this.errorMessage = this.$t('user.auth.openIdStateError')
 				return
 			}
 
-			this.$store.commit(ERROR_MESSAGE, '')
-
 			try {
 				await this.$store.dispatch('auth/openIdAuth', {
 					provider: this.$route.params.provider,
@@ -76,12 +78,7 @@ export default {
 				}
 			} catch(e) {
 				const err = getErrorText(e)
-				if (typeof err[1] !== 'undefined') {
-					this.$store.commit(ERROR_MESSAGE, err[1])
-					return
-				}
-
-				this.$store.commit(ERROR_MESSAGE, err[0])
+				this.errorMessage = typeof err[1] !== 'undefined' ? err[1] : err[0]
 			} finally {
 				localStorage.removeItem('authenticating')
 			}

src/views/user/Register.vue

@@ -98,7 +98,7 @@
 <script>
 import router from '../../router'
 import {mapState} from 'vuex'
-import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
+import {LOADING} from '@/store/mutation-types'
 import Legal from '../../components/misc/legal'
 
 export default {
@@ -113,6 +113,7 @@ export default {
 				password: '',
 				password2: '',
 			},
+			errorMessage: '',
 		}
 	},
 	beforeMount() {
@@ -127,15 +128,14 @@ export default {
 	computed: mapState({
 		authenticated: state => state.auth.authenticated,
 		loading: LOADING,
-		errorMessage: ERROR_MESSAGE,
 	}),
 	methods: {
-		submit() {
+		async submit() {
 			this.$store.commit(LOADING, true)
-			this.$store.commit(ERROR_MESSAGE, '')
+			this.errorMessage = ''
 
 			if (this.credentials.password2 !== this.credentials.password) {
-				this.$store.commit(ERROR_MESSAGE, this.$t('user.auth.passwordsDontMatch'))
+				this.errorMessage = this.$t('user.auth.passwordsDontMatch')
 				this.$store.commit(LOADING, false)
 				return
 			}
@@ -146,7 +146,11 @@ export default {
 				password: this.credentials.password,
 			}
 
-			this.$store.dispatch('auth/register', credentials)
+			try {
+				await this.$store.dispatch('auth/register', credentials)
+			} catch(e) {
+				this.errorMessage = e.message
+			}
 		},
 	},
 }