mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-18 00:34:28 +08:00
code refactor
This commit is contained in:
MaysWind
@@ -27,51 +27,19 @@
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
|
||||
<f7-sheet
|
||||
style="height:auto;"
|
||||
:opened="showInputPinCodeSheetForEnable" @sheet:closed="showInputPinCodeSheetForEnable = false; currentPinCodeForEnable = ''"
|
||||
>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ $t('PIN Code') }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half">{{ $t('Please input a new PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.') }}</p>
|
||||
<f7-list form no-hairlines class="no-margin-top margin-bottom">
|
||||
<f7-list-item class="list-item-pincode-input">
|
||||
<PincodeInput secure :length="6" v-model="currentPinCodeForEnable" />
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
<f7-button large fill :class="{ 'disabled': !currentPinCodeForEnableValid }" :text="$t('Continue')" @click="enable(currentPinCodeForEnable)"></f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="showInputPinCodeSheetForEnable = false" :text="$t('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
<PinCodeInputSheet :title="$t('PIN Code')"
|
||||
:hint="$t('Please input a new PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.')"
|
||||
:show.sync="showInputPinCodeSheetForEnable"
|
||||
v-model="currentPinCodeForEnable"
|
||||
@pincode:confirm="enable">
|
||||
</PinCodeInputSheet>
|
||||
|
||||
<f7-sheet
|
||||
style="height:auto;"
|
||||
:opened="showInputPinCodeSheetForDisable" @sheet:closed="showInputPinCodeSheetForDisable = false; currentPinCodeForDisable = ''"
|
||||
>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ $t('PIN Code') }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half">{{ $t('Please enter your current PIN code when disable application lock') }}</p>
|
||||
<f7-list form no-hairlines class="no-margin-top margin-bottom">
|
||||
<f7-list-item class="list-item-pincode-input">
|
||||
<PincodeInput secure :length="6" v-model="currentPinCodeForDisable" />
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
<f7-button large fill :class="{ 'disabled': !currentPinCodeForDisableValid }" :text="$t('Continue')" @click="disable(currentPinCodeForDisable)"></f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="showInputPinCodeSheetForDisable = false" :text="$t('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
<PinCodeInputSheet :title="$t('PIN Code')"
|
||||
:hint="$t('Please enter your current PIN code when disable application lock')"
|
||||
:show.sync="showInputPinCodeSheetForDisable"
|
||||
v-model="currentPinCodeForDisable"
|
||||
@pincode:confirm="disable">
|
||||
</PinCodeInputSheet>
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
@@ -88,14 +56,6 @@ export default {
|
||||
showInputPinCodeSheetForDisable: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentPinCodeForEnableValid() {
|
||||
return this.currentPinCodeForEnable && this.currentPinCodeForEnable.length === 6;
|
||||
},
|
||||
currentPinCodeForDisableValid() {
|
||||
return this.currentPinCodeForDisable && this.currentPinCodeForDisable.length === 6;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isEnableApplicationLockWebAuthn: function (newValue) {
|
||||
const self = this;
|
||||
@@ -155,7 +115,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.currentPinCodeForEnableValid) {
|
||||
if (!this.currentPinCodeForEnable || this.currentPinCodeForEnable.length !== 6) {
|
||||
this.$alert('PIN code is invalid');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -30,119 +30,47 @@
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
|
||||
<f7-sheet
|
||||
style="height:auto;"
|
||||
:opened="showInputPasscodeSheetForEnable" @sheet:closed="showInputPasscodeSheetForEnable = false; currentPasscodeForEnable = ''"
|
||||
>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ $t('Passcode') }}</b></div>
|
||||
<PasscodeInputSheet :title="$t('Passcode')"
|
||||
:hint="$t('Please use two factor authentication app scan the below qrcode and input current passcode')"
|
||||
:show.sync="showInputPasscodeSheetForEnable"
|
||||
:confirm-disabled="enableConfirming"
|
||||
:cancel-disabled="enableConfirming"
|
||||
v-model="currentPasscodeForEnable"
|
||||
@passcode:confirm="enableConfirm">
|
||||
<div class="row">
|
||||
<div class="col-100 text-align-center">
|
||||
<img alt="qrcode" width="240px" height="240px" :src="new2FAQRCode" />
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half">{{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}</p>
|
||||
<div class="row">
|
||||
<div class="col-100 text-align-center">
|
||||
<img alt="qrcode" width="240px" height="240px" :src="new2FAQRCode" />
|
||||
</div>
|
||||
</div>
|
||||
<f7-list form no-hairlines class="no-margin-top margin-bottom">
|
||||
<f7-list-input
|
||||
type="number"
|
||||
autocomplete="one-time-code"
|
||||
outline
|
||||
clear-button
|
||||
:placeholder="$t('Passcode')"
|
||||
:value="currentPasscodeForEnable"
|
||||
@input="currentPasscodeForEnable = $event.target.value"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
<f7-button large fill :class="{ 'disabled': !currentPasscodeForEnable }" :text="$t('Continue')" @click="enableConfirm"></f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link :class="{ 'disabled': enableConfirming }" @click="showInputPasscodeSheetForEnable = false" :text="$t('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
</div>
|
||||
</PasscodeInputSheet>
|
||||
|
||||
<f7-sheet
|
||||
style="height:auto"
|
||||
:opened="showInputPasswordSheetForDisable" @sheet:closed="showInputPasswordSheetForDisable = false; currentPasswordForDisable = ''"
|
||||
>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ $t('Current Password') }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half">{{ $t('Please enter your current password when disable two factor authentication') }}</p>
|
||||
<f7-list form no-hairlines class="no-margin-top margin-bottom">
|
||||
<f7-list-input
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
outline
|
||||
clear-button
|
||||
:placeholder="$t('Password')"
|
||||
:value="currentPasswordForDisable"
|
||||
@input="currentPasswordForDisable = $event.target.value"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
<f7-button large fill :class="{ 'disabled': !currentPasswordForDisable }" :text="$t('Continue')" @click="disable(currentPasswordForDisable)"></f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link :class="{ 'disabled': disabling }" @click="showInputPasswordSheetForDisable = false" :text="$t('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
<PasswordInputSheet :title="$t('Current Password')"
|
||||
:hint="$t('Please enter your current password when disable two factor authentication')"
|
||||
:show.sync="showInputPasswordSheetForDisable"
|
||||
:confirm-disabled="disabling"
|
||||
:cancel-disabled="disabling"
|
||||
v-model="currentPasswordForDisable"
|
||||
@password:confirm="disable">
|
||||
</PasswordInputSheet>
|
||||
|
||||
<f7-sheet
|
||||
style="height:auto"
|
||||
:opened="showInputPasswordSheetForRegenerate" @sheet:closed="showInputPasswordSheetForRegenerate = false; currentPasswordForRegenerate= ''"
|
||||
>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ $t('Current Password') }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half">{{ $t('Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.') }}</p>
|
||||
<f7-list form no-hairlines class="no-margin-top margin-bottom">
|
||||
<f7-list-input
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
outline
|
||||
clear-button
|
||||
:placeholder="$t('Password')"
|
||||
:value="currentPasswordForRegenerate"
|
||||
@input="currentPasswordForRegenerate = $event.target.value"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
<f7-button large fill :class="{ 'disabled': !currentPasswordForRegenerate }" :text="$t('Continue')" @click="regenerateBackupCode(currentPasswordForRegenerate)"></f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link :class="{ 'disabled': regenerating }" @click="showInputPasswordSheetForRegenerate = false" :text="$t('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
<PasswordInputSheet :title="$t('Current Password')"
|
||||
:hint="$t('Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.')"
|
||||
:show.sync="showInputPasswordSheetForRegenerate"
|
||||
:confirm-disabled="regenerating"
|
||||
:cancel-disabled="regenerating"
|
||||
v-model="currentPasswordForRegenerate"
|
||||
@password:confirm="regenerateBackupCode">
|
||||
</PasswordInputSheet>
|
||||
|
||||
<f7-sheet
|
||||
style="height:auto"
|
||||
:opened="showBackupCodeSheet" @sheet:closed="showBackupCodeSheet = false; currentBackupCode = ''"
|
||||
>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ $t('Backup Code') }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top margin-bottom-half">
|
||||
<span>{{ $t('Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.') }}</span>
|
||||
<f7-link icon-only icon-f7="doc_on_doc" icon-size="16px" class="icon-after-text"
|
||||
v-clipboard:copy="currentBackupCode" v-clipboard:success="onBackupCodeCopied"></f7-link>
|
||||
</p>
|
||||
<textarea class="full-line" rows="10" readonly="readonly" v-model="currentBackupCode"></textarea>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="showBackupCodeSheet = false" :text="$t('Close')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
<InformationSheet class="backup-code-sheet"
|
||||
:title="$t('Backup Code')"
|
||||
:hint="$t('Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.')"
|
||||
:information="currentBackupCode"
|
||||
:row-count="10"
|
||||
:enable-copy="true"
|
||||
:show.sync="showBackupCodeSheet"
|
||||
@info:copied="onBackupCodeCopied">
|
||||
</InformationSheet>
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
@@ -365,3 +293,9 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.backup-code-sheet .information-content {
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -78,31 +78,14 @@
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
|
||||
<f7-sheet
|
||||
style="height:auto"
|
||||
:opened="showInputPasswordSheet" @sheet:closed="showInputPasswordSheet = false"
|
||||
>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div style="font-size: 18px"><b>{{ $t('Current Password') }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top">{{ $t('Please enter your current password when modifying your password') }}</p>
|
||||
<f7-list form no-hairlines class="no-margin-top margin-bottom">
|
||||
<f7-list-input
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
outline
|
||||
clear-button
|
||||
:placeholder="$t('Password')"
|
||||
:value="currentPassword"
|
||||
@input="currentPassword = $event.target.value"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
<f7-button large fill :class="{ 'disabled': !currentPassword || saving }" :text="$t('Continue')" @click="save"></f7-button>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
<PasswordInputSheet :title="$t('Current Password')"
|
||||
:hint="$t('Please enter your current password when modifying your password')"
|
||||
:show.sync="showInputPasswordSheet"
|
||||
:confirm-disabled="saving"
|
||||
:cancel-disabled="saving"
|
||||
v-model="currentPassword"
|
||||
@password:confirm="save()">
|
||||
</PasswordInputSheet>
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user