migrate user 2fa setting page to composition API and typescript

src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue

@@ -3,20 +3,20 @@
         <v-col cols="12">
             <v-card :class="{ 'disabled': loading }">
                 <template #title>
-                    <span>{{ $t('Two-Factor Authentication') }}</span>
+                    <span>{{ tt('Two-Factor Authentication') }}</span>
                     <v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
                 </template>
 
                 <v-card-text class="pb-0">
                     <v-skeleton-loader class="skeleton-no-margin pt-2 pb-5" type="text" style="width: 150px" :loading="true" v-if="loading"></v-skeleton-loader>
                     <p class="text-body-1 font-weight-semibold" v-if="!loading && !new2FAQRCode">
-                        {{ status === true ? $t('Two-factor authentication is already enabled.') : $t('Two-factor authentication is not enabled yet.') }}
+                        {{ status === true ? tt('Two-factor authentication is already enabled.') : tt('Two-factor authentication is not enabled yet.') }}
                     </p>
                     <p class="text-body-1" v-if="!loading && new2FAQRCode">
-                        {{ $t('Please use a two-factor authentication app to scan the qrcode below and enter the current passcode.') }}
+                        {{ tt('Please use a two-factor authentication app to scan the qrcode below and enter the current passcode.') }}
                     </p>
                     <p class="text-body-1" v-if="!loading && status === true">
-                        {{ $t('Your current password is required to disable two-factor authentication or regenerate backup codes for two-factor authentication. If you regenerate backup codes, the previous ones will become invalid.') }}
+                        {{ tt('Your current password is required to disable two-factor authentication or regenerate backup codes for two-factor authentication. If you regenerate backup codes, the previous ones will become invalid.') }}
                     </p>
                 </v-card-text>
 
@@ -29,7 +29,7 @@
                                 autocomplete="one-time-code"
                                 variant="underlined"
                                 :disabled="loading || enabling || enableConfirming || disabling"
-                                :placeholder="$t('Passcode')"
+                                :placeholder="tt('Passcode')"
                                 v-model="currentPasscode"
                                 @keyup.enter="enableConfirm"
                             />
@@ -45,7 +45,7 @@
                                 type="password"
                                 variant="underlined"
                                 :disabled="loading || enabling || enableConfirming || disabling"
-                                :placeholder="$t('Current Password')"
+                                :placeholder="tt('Current Password')"
                                 v-model="currentPassword"
                             />
                         </v-col>
@@ -56,19 +56,19 @@
                     <v-row>
                         <v-col cols="12" class="d-flex flex-wrap gap-4">
                             <v-btn :disabled="!currentPassword || loading || disabling " v-if="status === true" @click="disable">
-                                {{ $t('Disable Two-Factor Authentication') }}
+                                {{ tt('Disable Two-Factor Authentication') }}
                                 <v-progress-circular indeterminate size="22" class="ml-2" v-if="disabling"></v-progress-circular>
                             </v-btn>
                             <v-btn :disabled="!currentPassword || loading || regenerating" v-if="status === true" @click="regenerateBackupCode()">
-                                {{ $t('Regenerate Backup Codes') }}
+                                {{ tt('Regenerate Backup Codes') }}
                                 <v-progress-circular indeterminate size="22" class="ml-2" v-if="regenerating"></v-progress-circular>
                             </v-btn>
                             <v-btn :disabled="loading || enabling" v-if="status === false && !new2FAQRCode" @click="enable">
-                                {{ $t('Enable Two-Factor Authentication') }}
+                                {{ tt('Enable Two-Factor Authentication') }}
                                 <v-progress-circular indeterminate size="22" class="ml-2" v-if="enabling"></v-progress-circular>
                             </v-btn>
                             <v-btn :disabled="!currentPasscode || loading || enableConfirming" v-if="status === false && new2FAQRCode" @click="enableConfirm">
-                                {{ $t('Continue') }}
+                                {{ tt('Continue') }}
                                 <v-progress-circular indeterminate size="22" class="ml-2" v-if="enableConfirming"></v-progress-circular>
                             </v-btn>
                         </v-col>
@@ -80,18 +80,18 @@
         <v-col cols="12">
             <v-card v-if="currentBackupCode">
                 <template #title>
-                    <span>{{ $t('Backup Code') }}</span>
+                    <span>{{ tt('Backup Code') }}</span>
                     <v-btn id="copy-to-clipboard-icon" ref="copyToClipboardIcon"
                            density="compact" color="default" variant="text" size="24"
                            class="ml-2" :icon="true">
                         <v-icon :icon="icons.copy" size="20" />
-                        <v-tooltip activator="parent">{{ $t('Copy') }}</v-tooltip>
+                        <v-tooltip activator="parent">{{ tt('Copy') }}</v-tooltip>
                     </v-btn>
                 </template>
 
                 <v-card-text>
                     <p class="text-body-1" v-if="status === true">
-                        {{ $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.') }}
+                        {{ 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.') }}
                     </p>
                     <v-textarea class="backup-code" readonly="readonly" :rows="10" :value="currentBackupCode"/>
                 </v-card-text>
@@ -102,8 +102,13 @@
     <snack-bar ref="snackbar" />
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, useTemplateRef, watch, nextTick } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
 import { useTwoFactorAuthStore } from '@/stores/twoFactorAuth.ts';
 
 import { ClipboardHolder } from '@/lib/clipboard.ts';
@@ -112,224 +117,221 @@ import {
     mdiContentCopy
 } from '@mdi/js';
 
-export default {
+type SnackBarType = InstanceType<typeof SnackBar>;
-    expose: [
-        'reset'
-    ],
-    data() {
-        return {
-            status: null,
-            loading: true,
-            new2FASecret: '',
-            new2FAQRCode: '',
-            currentPassword: '',
-            currentPasscode: '',
-            currentBackupCode: '',
-            enabling: false,
-            enableConfirming: false,
-            disabling: false,
-            regenerating: false,
-            clipboardHolder: null,
-            icons: {
-                copy: mdiContentCopy
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useTwoFactorAuthStore),
-    },
-    created() {
-        const self = this;
 
-        self.loading = true;
+const { tt } = useI18n();
 
-        self.twoFactorAuthStore.get2FAStatus().then(response => {
+const twoFactorAuthStore = useTwoFactorAuthStore();
-            self.status = response.enable;
-            self.loading = false;
-        }).catch(error => {
-            self.loading = false;
 
-            if (!error.processed) {
+const icons = {
-                self.$refs.snackbar.showError(error);
+    copy: mdiContentCopy
+};
+
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+const iconCopyToClipboard = useTemplateRef<unknown>('copyToClipboardIcon');
+
+const status = ref<boolean | null>(null);
+const loading = ref<boolean>(true);
+const new2FASecret = ref<string>('');
+const new2FAQRCode = ref<string>('');
+const currentPassword = ref<string>('');
+const currentPasscode = 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);
+
+let clipboardHolder: ClipboardHolder | null = null;
+
+function makeCopyToClipboardClickable(): void {
+    if (clipboardHolder) {
+        return;
+    }
+
+    if (iconCopyToClipboard.value) {
+        clipboardHolder = ClipboardHolder.create({
+            el: '#copy-to-clipboard-icon',
+            text: currentBackupCode.value,
+            successCallback: function () {
+                snackbar.value?.showMessage('Backup codes copied');
             }
         });
-    },
-    watch: {
-        'currentBackupCode': function (newValue) {
-            if (this.clipboardHolder) {
-                this.clipboardHolder.setClipboardText(newValue);
-            }
-        }
-    },
-    methods: {
-        reset() {
-            this.new2FASecret = '';
-            this.new2FAQRCode = '';
-            this.currentPassword = '';
-            this.currentPasscode = '';
-            this.currentBackupCode = '';
-            this.enabling = false;
-            this.enableConfirming = false;
-            this.disabling = false;
-            this.regenerating = false;
-        },
-        enable() {
-            const self = this;
-
-            self.new2FAQRCode = '';
-            self.new2FASecret = '';
-            self.currentBackupCode = '';
-
-            self.enabling = true;
-
-            self.twoFactorAuthStore.enable2FA().then(response => {
-                self.enabling = false;
-
-                self.new2FAQRCode = response.qrcode;
-                self.new2FASecret = response.secret;
-            }).catch(error => {
-                self.enabling = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        enableConfirm() {
-            const self = this;
-
-            if (!self.currentPasscode) {
-                self.$refs.snackbar.showMessage('Passcode cannot be blank');
-                return;
-            }
-
-            if (self.enableConfirming) {
-                return;
-            }
-
-            const password = self.currentPasscode;
-
-            self.currentBackupCode = '';
-            self.currentPasscode = '';
-
-            self.enableConfirming = true;
-
-            self.twoFactorAuthStore.confirmEnable2FA({
-                secret: self.new2FASecret,
-                passcode: password
-            }).then(response => {
-                self.enableConfirming = false;
-
-                self.new2FAQRCode = '';
-                self.new2FASecret = '';
-
-                self.status = true;
-
-                if (response.recoveryCodes && response.recoveryCodes.length) {
-                    self.currentBackupCode = response.recoveryCodes.join('\n');
-                }
-
-                self.$nextTick(() => {
-                    self.makeCopyToClipboardClickable();
-                });
-            }).catch(error => {
-                self.enableConfirming = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        disable() {
-            const self = this;
-
-            if (!self.currentPassword) {
-                self.$refs.snackbar.showMessage('Current password cannot be blank');
-                return;
-            }
-
-            if (self.disabling) {
-                return;
-            }
-
-            const password = self.currentPassword;
-
-            self.currentBackupCode = '';
-            self.currentPassword = '';
-
-            self.disabling = true;
-
-            self.twoFactorAuthStore.disable2FA({
-                password: password
-            }).then(() => {
-                self.disabling = false;
-
-                self.status = false;
-                self.$refs.snackbar.showMessage('Two-factor authentication has been disabled');
-            }).catch(error => {
-                self.disabling = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        regenerateBackupCode() {
-            const self = this;
-
-            if (!self.currentPassword) {
-                self.$refs.snackbar.showMessage('Current password cannot be blank');
-                return;
-            }
-
-            if (self.regenerating) {
-                return;
-            }
-
-            const password = self.currentPassword;
-
-            self.currentBackupCode = '';
-            self.currentPassword = '';
-
-            self.regenerating = true;
-
-            self.twoFactorAuthStore.regenerate2FARecoveryCode({
-                password: password
-            }).then(response => {
-                self.regenerating = false;
-
-                self.currentBackupCode = response.recoveryCodes.join('\n');
-
-                self.$nextTick(() => {
-                    self.makeCopyToClipboardClickable();
-                });
-            }).catch(error => {
-                self.regenerating = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        makeCopyToClipboardClickable() {
-            const self = this;
-
-            if (self.clipboardHolder) {
-                return;
-            }
-
-            if (self.$refs.copyToClipboardIcon) {
-                self.clipboardHolder = ClipboardHolder.create({
-                    el: '#copy-to-clipboard-icon',
-                    text: self.currentBackupCode,
-                    successCallback: function () {
-                        self.$refs.snackbar.showMessage('Backup codes copied');
-                    }
-                });
-            }
-        }
     }
-};
+}
+
+function init(): void {
+    loading.value = true;
+
+    twoFactorAuthStore.get2FAStatus().then(response => {
+        status.value = response.enable;
+        loading.value = false;
+    }).catch(error => {
+        loading.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function enable(): void {
+    new2FAQRCode.value = '';
+    new2FASecret.value = '';
+    currentBackupCode.value = '';
+
+    enabling.value = true;
+
+    twoFactorAuthStore.enable2FA().then(response => {
+        enabling.value = false;
+
+        new2FAQRCode.value = response.qrcode;
+        new2FASecret.value = response.secret;
+    }).catch(error => {
+        enabling.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function enableConfirm(): void {
+    if (!currentPasscode.value) {
+        snackbar.value?.showMessage('Passcode cannot be blank');
+        return;
+    }
+
+    if (enableConfirming.value) {
+        return;
+    }
+
+    const password = currentPasscode.value;
+
+    currentBackupCode.value = '';
+    currentPasscode.value = '';
+
+    enableConfirming.value = true;
+
+    twoFactorAuthStore.confirmEnable2FA({
+        secret: new2FASecret.value,
+        passcode: password
+    }).then(response => {
+        enableConfirming.value = false;
+
+        new2FAQRCode.value = '';
+        new2FASecret.value = '';
+
+        status.value = true;
+
+        if (response.recoveryCodes && response.recoveryCodes.length) {
+            currentBackupCode.value = response.recoveryCodes.join('\n');
+        }
+
+        nextTick(() => {
+            makeCopyToClipboardClickable();
+        });
+    }).catch(error => {
+        enableConfirming.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function disable(): void {
+    if (!currentPassword.value) {
+        snackbar.value?.showMessage('Current password cannot be blank');
+        return;
+    }
+
+    if (disabling.value) {
+        return;
+    }
+
+    const password = currentPassword.value;
+
+    currentBackupCode.value = '';
+    currentPassword.value = '';
+
+    disabling.value = true;
+
+    twoFactorAuthStore.disable2FA({
+        password: password
+    }).then(() => {
+        disabling.value = false;
+
+        status.value = false;
+        snackbar.value?.showMessage('Two-factor authentication has been disabled');
+    }).catch(error => {
+        disabling.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function regenerateBackupCode(): void {
+    if (!currentPassword.value) {
+        snackbar.value?.showMessage('Current password cannot be blank');
+        return;
+    }
+
+    if (regenerating.value) {
+        return;
+    }
+
+    const password = currentPassword.value;
+
+    currentBackupCode.value = '';
+    currentPassword.value = '';
+
+    regenerating.value = true;
+
+    twoFactorAuthStore.regenerate2FARecoveryCode({
+        password: password
+    }).then(response => {
+        regenerating.value = false;
+
+        currentBackupCode.value = response.recoveryCodes.join('\n');
+
+        nextTick(() => {
+            makeCopyToClipboardClickable();
+        });
+    }).catch(error => {
+        regenerating.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function reset(): void {
+    new2FASecret.value = '';
+    new2FAQRCode.value = '';
+    currentPassword.value = '';
+    currentPasscode.value = '';
+    currentBackupCode.value = '';
+    enabling.value = false;
+    enableConfirming.value = false;
+    disabling.value = false;
+    regenerating.value = false;
+}
+
+watch(currentBackupCode, (newValue) => {
+    if (clipboardHolder) {
+        clipboardHolder.setClipboardText(newValue);
+    }
+});
+
+defineExpose({
+    reset
+});
+
+init();
 </script>
 
 <style>

src/views/mobile/users/TwoFactorAuthPage.vue

@@ -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-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)">{{ $t('Regenerate Backup Codes') }}</f7-list-button>
+            <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)">{{ $t('Disable') }}</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">{{ $t('Enable') }}</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')"
+        <passcode-input-sheet :title="tt('Enable Two-Factor Authentication')"
-                              :hint="$t('Please use a two-factor authentication app to scan the qrcode below and enter the current passcode.')"
+                              :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')"
+        <password-input-sheet :title="tt('Disable Two-Factor Authentication')"
-                              :hint="$t('Your current password is required to 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')"
+        <password-input-sheet :title="tt('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.')"
+                              :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')"
+                           :title="tt('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.')"
+                           :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>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+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 {
+const props = defineProps<{
-    props: [
+    f7router: Router.Router;
-        '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;
 
-        self.loading = true;
+const { tt } = useI18n();
+const { showToast, routeBackOnError } = useI18nUIComponents();
 
-        self.twoFactorAuthStore.get2FAStatus().then(response => {
+const twoFactorAuthStore = useTwoFactorAuthStore();
-            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;
 
-            self.new2FAQRCode = '';
+const status = ref<boolean | null>(null);
-            self.new2FASecret = '';
+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;
+function init(): void {
-            self.$showLoading(() => self.enabling);
+    loading.value = true;
 
-            self.twoFactorAuthStore.enable2FA().then(response => {
+    twoFactorAuthStore.get2FAStatus().then(response => {
-                self.enabling = false;
+        status.value = response.enable;
-                self.$hideLoading();
+        loading.value = false;
-
+    }).catch(error => {
-                self.new2FAQRCode = response.qrcode;
+        if (error.processed) {
-                self.new2FASecret = response.secret;
+            loading.value = false;
-
+        } else {
-                self.showInputPasscodeSheetForEnable = true;
+            loadingError.value = error;
-            }).catch(error => {
+            showToast(error.message || 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');
         }
+    });
+}
+
+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>