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