feat: TOTP script setup

src/views/user/settings/TOTP.vue

@@ -65,70 +65,77 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
+export default defineComponent({ name: 'user-settings-totp' })
+</script>
+
+<script lang="ts" setup>
+import {computed, ref, shallowReactive} from 'vue'
+import {useStore} from 'vuex'
+import {useI18n} from 'vue-i18n'
+
 import TotpService from '@/services/totp'
 import TotpModel from '@/models/totp'
-import {mapState} from 'vuex'
 
-export default defineComponent({
+import {success} from '@/message'
-	name: 'user-settings-totp',
+
-	data() {
+import { useTitle } from '@/composables/useTitle'
-		return {
+
-			totpService: new TotpService(),
+const {t} = useI18n()
-			totp: new TotpModel(),
+useTitle(() => `${t('user.settings.totp.title')} - ${t('user.settings.title')}`)
-			totpQR: '',
+
-			totpEnrolled: false,
+
-			totpConfirmPasscode: '',
+const totpService = shallowReactive(new TotpService())
-			totpDisableForm: false,
+const totp = ref(new TotpModel())
-			totpDisablePassword: '',
+const totpQR = ref('')
-		}
+const totpEnrolled = ref(false)
-	},
+const totpConfirmPasscode = ref('')
-	created() {
+const totpDisableForm = ref(false)
-		this.totpStatus()
+const totpDisablePassword = ref('')
-	},
+
-	computed: mapState({
+const store = useStore()
-		totpEnabled: state => state.config.totpEnabled,
+const totpEnabled = computed(() => store.state.config.totpEnabled)
-	}),
+
-	mounted() {
+totpStatus()
-		this.setTitle(`${this.$t('user.settings.totp.title')} - ${this.$t('user.settings.title')}`)
+
-	},
+async function totpStatus() {
-	methods: {
+	if (!totpEnabled.value) {
-		async totpStatus() {
-			if (!this.totpEnabled) {
 		return
 	}
 	try {
-				this.totp = await this.totpService.get()
+		totp.value = await totpService.get()
-				this.totpSetQrCode()
+		totpSetQrCode()
 	} catch(e) {
 		// Error code 1016 means totp is not enabled, we don't need an error in that case.
-				if (e.response && e.response.data && e.response.data.code && e.response.data.code === 1016) {
+		if (e.response?.data?.code === 1016) {
-					this.totpEnrolled = false
+			totpEnrolled.value = false
 			return
 		}
 
 		throw e
 	}
-		},
+}
-		async totpSetQrCode() {
+
-			const qr = await this.totpService.qrcode()
+async function totpSetQrCode() {
-			this.totpQR = window.URL.createObjectURL(qr)
+	const qr = await totpService.qrcode()
-		},
+	totpQR.value = window.URL.createObjectURL(qr)
-		async totpEnroll() {
+}
-			this.totp = await this.totpService.enroll()
+
-			this.totpEnrolled = true
+async function totpEnroll() {
-			this.totpSetQrCode()
+	totp.value = await totpService.enroll()
-		},
+	totpEnrolled.value = true
-		async totpConfirm() {
+	totpSetQrCode()
-			await this.totpService.enable({passcode: this.totpConfirmPasscode})
+}
-			this.totp.enabled = true
+
-			this.$message.success({message: this.$t('user.settings.totp.confirmSuccess')})
+async function totpConfirm() {
-		},
+	await totpService.enable({passcode: totpConfirmPasscode.value})
-		async totpDisable() {
+	totp.value.enabled = true
-			await this.totpService.disable({password: this.totpDisablePassword})
+	success({message: t('user.settings.totp.confirmSuccess')})
-			this.totpEnrolled = false
+}
-			this.totp = new TotpModel()
+
-			this.$message.success({message: this.$t('user.settings.totp.disableSuccess')})
+async function totpDisable() {
-		},
+	await totpService.disable({password: totpDisablePassword.value})
-	},
+	totpEnrolled.value = false
-})
+	totp.value = new TotpModel()
+	success({message: t('user.settings.totp.disableSuccess')})
+}
 </script>