feat: OpenIdAuth script setup

src/views/user/OpenIdAuth.vue

@@ -11,81 +11,83 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
-import {mapState} from 'vuex'
+export default defineComponent({ name: 'Auth' })
 
-import {LOADING} from '@/store/mutation-types'
+</script>
-import {getErrorText} from '@/message'
+
-import Message from '@/components/misc/message'
+<script setup lang="ts">
-import {clearLastVisited, getLastVisited} from '../../helpers/saveLastVisited'
+import {ref, computed, onMounted} from 'vue'
-
+import {useStore} from 'vuex'
-export default defineComponent({
+import {useRoute, useRouter} from 'vue-router'
-	name: 'Auth',
+import {useI18n} from 'vue-i18n'
-	components: {Message},
+
-	data() {
+import {getErrorText} from '@/message'
-		return {
+import Message from '@/components/misc/message.vue'
-			errorMessage: '',
+import {clearLastVisited, getLastVisited} from '@/helpers/saveLastVisited'
-		}
+
-	},
+const {t} = useI18n()
-	computed: mapState({
+
-		loading: LOADING,
+const router = useRouter()
-	}),
+const route = useRoute()
-	mounted() {
+
-		this.authenticateWithCode()
+const store = useStore()
-	},
+
-	methods: {
+const loading = computed(() => store.state.loading)
-		async authenticateWithCode() {
+const errorMessage = ref('')
-			// This component gets mounted twice: The first time when the actual auth request hits the frontend,
+
-			// the second time after that auth request succeeded and the outer component "content-no-auth" isn't used
+async function authenticateWithCode() {
-			// but instead the "content-auth" component is used. Because this component is just a route and thus
+	// This component gets mounted twice: The first time when the actual auth request hits the frontend,
-			// gets mounted as part of a <router-view/> which both the content-auth and content-no-auth components have,
+	// the second time after that auth request succeeded and the outer component "content-no-auth" isn't used
-			// this re-mounts the component, even if the user is already authenticated.
+	// but instead the "content-auth" component is used. Because this component is just a route and thus
-			// To make sure we only try to authenticate the user once, we set this "authenticating" lock in localStorage
+	// gets mounted as part of a <router-view/> which both the content-auth and content-no-auth components have,
-			// which ensures only one auth request is done at a time. We don't simply check if the user is already
+	// this re-mounts the component, even if the user is already authenticated.
-			// authenticated to not prevent the whole authentication if some user is already logged in.
+	// To make sure we only try to authenticate the user once, we set this "authenticating" lock in localStorage
-			if (localStorage.getItem('authenticating')) {
+	// which ensures only one auth request is done at a time. We don't simply check if the user is already
-				return
+	// authenticated to not prevent the whole authentication if some user is already logged in.
-			}
+	if (localStorage.getItem('authenticating')) {
-			localStorage.setItem('authenticating', true)
+		return
-
+	}
-			this.errorMessage = ''
+	localStorage.setItem('authenticating', true)
-
+
-			if (typeof this.$route.query.error !== 'undefined') {
+	errorMessage.value = ''
-				localStorage.removeItem('authenticating')
+
-				this.errorMessage = typeof this.$route.query.message !== 'undefined'
+	if (typeof route.query.error !== 'undefined') {
-					? this.$route.query.message
+		localStorage.removeItem('authenticating')
-					: this.$t('user.auth.openIdGeneralError')
+		errorMessage.value = typeof route.query.message !== 'undefined'
-				return
+			? route.query.message
-			}
+			: 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')
+	const state = localStorage.getItem('state')
-				this.errorMessage = this.$t('user.auth.openIdStateError')
+	if (typeof route.query.state === 'undefined' || route.query.state !== state) {
-				return
+		localStorage.removeItem('authenticating')
-			}
+		errorMessage.value = t('user.auth.openIdStateError')
-
+		return
-			try {
+	}
-				await this.$store.dispatch('auth/openIdAuth', {
+
-					provider: this.$route.params.provider,
+	try {
-					code: this.$route.query.code,
+		await store.dispatch('auth/openIdAuth', {
-				})
+			provider: route.params.provider,
-				const last = getLastVisited()
+			code: route.query.code,
-				if (last !== null) {
+		})
-					this.$router.push({
+		const last = getLastVisited()
-						name: last.name,
+		if (last !== null) {
-						params: last.params,
+			router.push({
-					})
+				name: last.name,
-					clearLastVisited()
+				params: last.params,
-				} else {
+			})
-					this.$router.push({name: 'home'})
+			clearLastVisited()
-				}
+		} else {
-			} catch(e) {
+			router.push({name: 'home'})
-				const err = getErrorText(e)
+		}
-				this.errorMessage = typeof err[1] !== 'undefined' ? err[1] : err[0]
+	} catch(e) {
-			} finally {
+		const err = getErrorText(e)
-				localStorage.removeItem('authenticating')
+		errorMessage.value = typeof err[1] !== 'undefined' ? err[1] : err[0]
-			}
+	} finally {
-		},
+		localStorage.removeItem('authenticating')
-	},
+	}
-})
+}
+
+onMounted(() => authenticateWithCode())
 </script>