mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-14 15:07:33 +08:00
migrate user 2fa setting page to composition API and typescript
This commit is contained in:
MaysWind
@@ -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>
|
||||
import { mapStores } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
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 {
|
||||
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;
|
||||
type SnackBarType = InstanceType<typeof SnackBar>;
|
||||
|
||||
self.loading = true;
|
||||
const { tt } = useI18n();
|
||||
|
||||
self.twoFactorAuthStore.get2FAStatus().then(response => {
|
||||
self.status = response.enable;
|
||||
self.loading = false;
|
||||
}).catch(error => {
|
||||
self.loading = false;
|
||||
const twoFactorAuthStore = useTwoFactorAuthStore();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
const icons = {
|
||||
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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user