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/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
+			}
 		},
 	},
 }