feat: OpenIdAuth script setup

src/views/user/OpenIdAuth.vue

@@ -11,29 +11,31 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
-import {mapState} from 'vuex'
+export default defineComponent({ name: 'Auth' })
+
+</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 {LOADING} from '@/store/mutation-types'
 import {getErrorText} from '@/message'
-import Message from '@/components/misc/message'
+import Message from '@/components/misc/message.vue'
-import {clearLastVisited, getLastVisited} from '../../helpers/saveLastVisited'
+import {clearLastVisited, getLastVisited} from '@/helpers/saveLastVisited'
 
-export default defineComponent({
+const {t} = useI18n()
-	name: 'Auth',
+
-	components: {Message},
+const router = useRouter()
-	data() {
+const route = useRoute()
-		return {
+
-			errorMessage: '',
+const store = useStore()
-		}
+
-	},
+const loading = computed(() => store.state.loading)
-	computed: mapState({
+const errorMessage = ref('')
-		loading: LOADING,
+
-	}),
+async function authenticateWithCode() {
-	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
@@ -47,45 +49,45 @@ export default defineComponent({
 	}
 	localStorage.setItem('authenticating', true)
 
-			this.errorMessage = ''
+	errorMessage.value = ''
 
-			if (typeof this.$route.query.error !== 'undefined') {
+	if (typeof route.query.error !== 'undefined') {
 		localStorage.removeItem('authenticating')
-				this.errorMessage = typeof this.$route.query.message !== 'undefined'
+		errorMessage.value = typeof route.query.message !== 'undefined'
-					? this.$route.query.message
+			? route.query.message
-					: this.$t('user.auth.openIdGeneralError')
+			: t('user.auth.openIdGeneralError')
 		return
 	}
 
 	const state = localStorage.getItem('state')
-			if (typeof this.$route.query.state === 'undefined' || this.$route.query.state !== state) {
+	if (typeof route.query.state === 'undefined' || route.query.state !== state) {
 		localStorage.removeItem('authenticating')
-				this.errorMessage = this.$t('user.auth.openIdStateError')
+		errorMessage.value = t('user.auth.openIdStateError')
 		return
 	}
 
 	try {
-				await this.$store.dispatch('auth/openIdAuth', {
+		await store.dispatch('auth/openIdAuth', {
-					provider: this.$route.params.provider,
+			provider: route.params.provider,
-					code: this.$route.query.code,
+			code: route.query.code,
 		})
 		const last = getLastVisited()
 		if (last !== null) {
-					this.$router.push({
+			router.push({
 				name: last.name,
 				params: last.params,
 			})
 			clearLastVisited()
 		} else {
-					this.$router.push({name: 'home'})
+			router.push({name: 'home'})
 		}
 	} catch(e) {
 		const err = getErrorText(e)
-				this.errorMessage = typeof err[1] !== 'undefined' ? err[1] : err[0]
+		errorMessage.value = typeof err[1] !== 'undefined' ? err[1] : err[0]
 	} finally {
 		localStorage.removeItem('authenticating')
 	}
-		},
+}
-	},
+
-})
+onMounted(() => authenticateWithCode())
 </script>