migrate user 2fa setting page to composition API and typescript

2026-05-16 07:57:33 +08:00 · 2025-01-22 21:47:00 +08:00
parent e7612f6f0c
commit 84fc6b2ffb
2 changed files with 409 additions and 408 deletions
@@ -1,6 +1,6 @@
 <template>
    <f7-page @page:afterin="onPageAfterIn">
-        <f7-navbar :title="$t('Two-Factor Authentication')" :back-link="$t('Back')"></f7-navbar>
+        <f7-navbar :title="tt('Two-Factor Authentication')" :back-link="tt('Back')"></f7-navbar>

        <f7-list strong inset dividers class="margin-top skeleton-text" v-if="loading">
            <f7-list-item title="Status" after="Unknown"></f7-list-item>
@@ -8,14 +8,14 @@
        </f7-list>

        <f7-list strong inset dividers class="margin-top" v-else-if="!loading">
-            <f7-list-item :title="$t('Status')" :after="$t(status ? 'Enabled' : 'Disabled')"></f7-list-item>
-            <f7-list-button :class="{ 'disabled': regenerating }" v-if="status === true" @click="regenerateBackupCode(null)">{{ $t('Regenerate Backup Codes') }}</f7-list-button>
-            <f7-list-button :class="{ 'disabled': disabling }" v-if="status === true" @click="disable(null)">{{ $t('Disable') }}</f7-list-button>
-            <f7-list-button :class="{ 'disabled': enabling }" v-if="status === false" @click="enable">{{ $t('Enable') }}</f7-list-button>
+            <f7-list-item :title="tt('Status')" :after="tt(status ? 'Enabled' : 'Disabled')"></f7-list-item>
+            <f7-list-button :class="{ 'disabled': regenerating }" v-if="status === true" @click="regenerateBackupCode(null)">{{ tt('Regenerate Backup Codes') }}</f7-list-button>
+            <f7-list-button :class="{ 'disabled': disabling }" v-if="status === true" @click="disable(null)">{{ tt('Disable') }}</f7-list-button>
+            <f7-list-button :class="{ 'disabled': enabling }" v-if="status === false" @click="enable">{{ tt('Enable') }}</f7-list-button>
        </f7-list>

-        <passcode-input-sheet :title="$t('Enable Two-Factor Authentication')"
-                              :hint="$t('Please use a two-factor authentication app to scan the qrcode below and enter the current passcode.')"
+        <passcode-input-sheet :title="tt('Enable Two-Factor Authentication')"
+                              :hint="tt('Please use a two-factor authentication app to scan the qrcode below and enter the current passcode.')"
                              :confirm-disabled="enableConfirming"
                              :cancel-disabled="enableConfirming"
                              v-model:show="showInputPasscodeSheetForEnable"
@@ -26,8 +26,8 @@
            </div>
        </passcode-input-sheet>

-        <password-input-sheet :title="$t('Disable Two-Factor Authentication')"
-                              :hint="$t('Your current password is required to disable two-factor authentication.')"
+        <password-input-sheet :title="tt('Disable Two-Factor Authentication')"
+                              :hint="tt('Your current password is required to disable two-factor authentication.')"
                              :confirm-disabled="disabling"
                              :cancel-disabled="disabling"
                              v-model:show="showInputPasswordSheetForDisable"
@@ -35,8 +35,8 @@
                              @password:confirm="disable">
        </password-input-sheet>

-        <password-input-sheet :title="$t('Regenerate Backup Codes')"
-                              :hint="$t('Your current password is required to regenerate backup codes for two-factor authentication. If you regenerate backup codes, the previous ones will become invalid.')"
+        <password-input-sheet :title="tt('Regenerate Backup Codes')"
+                              :hint="tt('Your current password is required to regenerate backup codes for two-factor authentication. If you regenerate backup codes, the previous ones will become invalid.')"
                              :confirm-disabled="regenerating"
                              :cancel-disabled="regenerating"
                              v-model:show="showInputPasswordSheetForRegenerate"
@@ -45,8 +45,8 @@
        </password-input-sheet>

        <information-sheet class="backup-code-sheet"
-                           :title="$t('Backup Code')"
-                           :hint="$t('Please copy these backup codes to safe place, the following backup codes will be displayed only once. If these codes were lost, you can regenerate them at any time.')"
+                           :title="tt('Backup Code')"
+                           :hint="tt('Please copy these backup codes to safe place, the following backup codes will be displayed only once. If these codes were lost, you can regenerate them at any time.')"
                           :information="currentBackupCode"
                           :row-count="10"
                           :enable-copy="true"
@@ -56,183 +56,182 @@
    </f7-page>
 </template>

-<script>
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Router } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
+
 import { useTwoFactorAuthStore } from '@/stores/twoFactorAuth.ts';

-export default {
-    props: [
-        'f7router'
-    ],
-    data() {
-        return {
-            status: null,
-            loading: true,
-            loadingError: null,
-            new2FASecret: '',
-            new2FAQRCode: '',
-            currentPasscodeForEnable: '',
-            currentPasswordForDisable: '',
-            currentPasswordForRegenerate: '',
-            currentBackupCode: '',
-            enabling: false,
-            enableConfirming: false,
-            disabling: false,
-            regenerating: false,
-            showInputPasscodeSheetForEnable: false,
-            showInputPasswordSheetForDisable: false,
-            showInputPasswordSheetForRegenerate: false,
-            showBackupCodeSheet: false
-        };
-    },
-    computed: {
-        ...mapStores(useTwoFactorAuthStore),
-    },
-    created() {
-        const self = this;
+const props = defineProps<{
+    f7router: Router.Router;
+}>();

-        self.loading = true;
+const { tt } = useI18n();
+const { showToast, routeBackOnError } = useI18nUIComponents();

-        self.twoFactorAuthStore.get2FAStatus().then(response => {
-            self.status = response.enable;
-            self.loading = false;
-        }).catch(error => {
-            if (error.processed) {
-                self.loading = false;
-            } else {
-                self.loadingError = error;
-                self.$toast(error.message || error);
-            }
-        });
-    },
-    methods: {
-        onPageAfterIn() {
-            this.$routeBackOnError(this.f7router, 'loadingError');
-        },
-        enable() {
-            const self = this;
+const twoFactorAuthStore = useTwoFactorAuthStore();

-            self.new2FAQRCode = '';
-            self.new2FASecret = '';
+const status = ref<boolean | null>(null);
+const loading = ref<boolean>(true);
+const loadingError = ref<unknown | null>(null);
+const new2FASecret = ref<string>('');
+const new2FAQRCode = ref<string>('');
+const currentPasscodeForEnable = ref<string>('');
+const currentPasswordForDisable = ref<string>('');
+const currentPasswordForRegenerate = ref<string>('');
+const currentBackupCode = ref<string>('');
+const enabling = ref<boolean>(false);
+const enableConfirming = ref<boolean>(false);
+const disabling = ref<boolean>(false);
+const regenerating = ref<boolean>(false);
+const showInputPasscodeSheetForEnable = ref<boolean>(false);
+const showInputPasswordSheetForDisable = ref<boolean>(false);
+const showInputPasswordSheetForRegenerate = ref<boolean>(false);
+const showBackupCodeSheet = ref<boolean>(false);

-            self.enabling = true;
-            self.$showLoading(() => self.enabling);
+function init(): void {
+    loading.value = true;

-            self.twoFactorAuthStore.enable2FA().then(response => {
-                self.enabling = false;
-                self.$hideLoading();
-
-                self.new2FAQRCode = response.qrcode;
-                self.new2FASecret = response.secret;
-
-                self.showInputPasscodeSheetForEnable = true;
-            }).catch(error => {
-                self.enabling = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        enableConfirm() {
-            const self = this;
-
-            self.enableConfirming = true;
-            self.$showLoading(() => self.enableConfirming);
-
-            self.twoFactorAuthStore.confirmEnable2FA({
-                secret: self.new2FASecret,
-                passcode: self.currentPasscodeForEnable
-            }).then(response => {
-                self.enableConfirming = false;
-                self.$hideLoading();
-
-                self.new2FAQRCode = '';
-                self.new2FASecret = '';
-
-                self.status = true;
-                self.showInputPasscodeSheetForEnable = false;
-
-                if (response.recoveryCodes && response.recoveryCodes.length) {
-                    self.currentBackupCode = response.recoveryCodes.join('\n');
-                    self.showBackupCodeSheet = true;
-                }
-            }).catch(error => {
-                self.enableConfirming = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        disable(password) {
-            const self = this;
-
-            if (!password) {
-                self.currentPasswordForDisable = '';
-                self.showInputPasswordSheetForDisable = true;
-                return;
-            }
-
-            self.disabling = true;
-            self.$showLoading(() => self.disabling);
-
-            self.twoFactorAuthStore.disable2FA({
-                password: password
-            }).then(() => {
-                self.disabling = false;
-                self.$hideLoading();
-
-                self.status = false;
-                self.showInputPasswordSheetForDisable = false;
-                self.$toast('Two-factor authentication has been disabled');
-            }).catch(error => {
-                self.disabling = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        regenerateBackupCode(password) {
-            const self = this;
-
-            if (!password) {
-                self.currentPasswordForRegenerate = '';
-                self.showInputPasswordSheetForRegenerate = true;
-                return;
-            }
-
-            self.regenerating = true;
-            self.$showLoading(() => self.regenerating);
-
-            self.twoFactorAuthStore.regenerate2FARecoveryCode({
-                password: password
-            }).then(response => {
-                self.regenerating = false;
-                self.$hideLoading();
-
-                self.showInputPasswordSheetForRegenerate = false;
-
-                self.currentBackupCode = response.recoveryCodes.join('\n');
-                self.showBackupCodeSheet = true;
-            }).catch(error => {
-                self.regenerating = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        onBackupCodeCopied() {
-            this.$toast('Backup codes copied');
+    twoFactorAuthStore.get2FAStatus().then(response => {
+        status.value = response.enable;
+        loading.value = false;
+    }).catch(error => {
+        if (error.processed) {
+            loading.value = false;
+        } else {
+            loadingError.value = error;
+            showToast(error.message || error);
        }
+    });
+}
+
+function enable(): void {
+    new2FAQRCode.value = '';
+    new2FASecret.value = '';
+
+    enabling.value = true;
+    showLoading(() => enabling.value);
+
+    twoFactorAuthStore.enable2FA().then(response => {
+        enabling.value = false;
+        hideLoading();
+
+        new2FAQRCode.value = response.qrcode;
+        new2FASecret.value = response.secret;
+
+        showInputPasscodeSheetForEnable.value = true;
+    }).catch(error => {
+        enabling.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function enableConfirm(): void {
+    enableConfirming.value = true;
+    showLoading(() => enableConfirming.value);
+
+    twoFactorAuthStore.confirmEnable2FA({
+        secret: new2FASecret.value,
+        passcode: currentPasscodeForEnable.value
+    }).then(response => {
+        enableConfirming.value = false;
+        hideLoading();
+
+        new2FAQRCode.value = '';
+        new2FASecret.value = '';
+
+        status.value = true;
+        showInputPasscodeSheetForEnable.value = false;
+
+        if (response.recoveryCodes && response.recoveryCodes.length) {
+            currentBackupCode.value = response.recoveryCodes.join('\n');
+            showBackupCodeSheet.value = true;
+        }
+    }).catch(error => {
+        enableConfirming.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function disable(password: string | null): void {
+    if (!password) {
+        currentPasswordForDisable.value = '';
+        showInputPasswordSheetForDisable.value = true;
+        return;
    }
-};
+
+    disabling.value = true;
+    showLoading(() => disabling.value);
+
+    twoFactorAuthStore.disable2FA({
+        password: password
+    }).then(() => {
+        disabling.value = false;
+        hideLoading();
+
+        status.value = false;
+        showInputPasswordSheetForDisable.value = false;
+        showToast('Two-factor authentication has been disabled');
+    }).catch(error => {
+        disabling.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function regenerateBackupCode(password: string | null): void {
+    if (!password) {
+        currentPasswordForRegenerate.value = '';
+        showInputPasswordSheetForRegenerate.value = true;
+        return;
+    }
+
+    regenerating.value = true;
+    showLoading(() => regenerating.value);
+
+    twoFactorAuthStore.regenerate2FARecoveryCode({
+        password: password
+    }).then(response => {
+        regenerating.value = false;
+        hideLoading();
+
+        showInputPasswordSheetForRegenerate.value = false;
+
+        currentBackupCode.value = response.recoveryCodes.join('\n');
+        showBackupCodeSheet.value = true;
+    }).catch(error => {
+        regenerating.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function onPageAfterIn(): void {
+    routeBackOnError(props.f7router, loadingError);
+}
+
+function onBackupCodeCopied(): void {
+    showToast('Backup codes copied');
+}
+
+init();
 </script>

 <style>