modify style
This commit is contained in:
MaysWind
@@ -7,6 +7,7 @@
|
||||
:ref="`pin-code-input-${index}`"
|
||||
:value="codes[index].value"
|
||||
:type="codes[index].inputType"
|
||||
:disabled="disabled ? 'disabled' : undefined"
|
||||
:autofocus="autofocus && index === 0 ? 'autofocus' : undefined"
|
||||
@focus="codes[index].focused = true"
|
||||
@blur="codes[index].focused = false"
|
||||
@@ -22,6 +23,7 @@
|
||||
export default {
|
||||
props: [
|
||||
'modelValue',
|
||||
'disabled',
|
||||
'autofocus',
|
||||
'secure',
|
||||
'length'
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
autocomplete="username"
|
||||
autofocus="autofocus"
|
||||
clearable
|
||||
:disabled="show2faInput"
|
||||
:disabled="show2faInput || logining || verifying"
|
||||
:label="$t('Username')"
|
||||
:placeholder="$t('Your username or email')"
|
||||
v-model="username"
|
||||
@@ -49,7 +49,7 @@
|
||||
clearable
|
||||
ref="passwordInput"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:disabled="show2faInput"
|
||||
:disabled="show2faInput || logining || verifying"
|
||||
:label="$t('Password')"
|
||||
:placeholder="$t('Your password')"
|
||||
:append-inner-icon="isPasswordVisible ? icons.eyeSlash : icons.eye"
|
||||
@@ -66,6 +66,7 @@
|
||||
autocomplete="one-time-code"
|
||||
clearable
|
||||
ref="passcodeInput"
|
||||
:disabled="logining || verifying"
|
||||
:label="$t('Passcode')"
|
||||
:placeholder="$t('Passcode')"
|
||||
:append-inner-icon="icons.backupCode"
|
||||
@@ -77,6 +78,7 @@
|
||||
<v-text-field
|
||||
type="text"
|
||||
clearable
|
||||
:disabled="logining || verifying"
|
||||
:label="$t('Backup Code')"
|
||||
:placeholder="$t('Backup Code')"
|
||||
:append-inner-icon="icons.passcode"
|
||||
@@ -88,13 +90,15 @@
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-btn block :class="{ 'disabled': inputIsEmpty || logining }"
|
||||
<v-btn block :disabled="inputIsEmpty || logining || verifying"
|
||||
@click="login" v-if="!show2faInput">
|
||||
{{ $t('Log In') }}
|
||||
<v-progress-circular indeterminate size="24" class="ml-2" v-if="logining"></v-progress-circular>
|
||||
</v-btn>
|
||||
<v-btn block :class="{ 'disabled': twoFAInputIsEmpty || verifying }"
|
||||
<v-btn block :disabled="twoFAInputIsEmpty || logining || verifying"
|
||||
@click="verify" v-else-if="show2faInput">
|
||||
{{ $t('Continue') }}
|
||||
<v-progress-circular indeterminate size="24" class="ml-2" v-if="verifying"></v-progress-circular>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
@@ -108,7 +112,9 @@
|
||||
<v-col cols="12" class="text-center">
|
||||
<v-menu location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<v-btn variant="text" v-bind="props">{{ currentLanguageName }}</v-btn>
|
||||
<v-btn variant="text"
|
||||
:disabled="logining || verifying"
|
||||
v-bind="props">{{ currentLanguageName }}</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
|
||||
@@ -138,14 +144,6 @@
|
||||
</v-row>
|
||||
|
||||
<snack-bar ref="snackbar" />
|
||||
|
||||
<v-overlay class="justify-center align-center" :persistent="true" v-model="logining">
|
||||
<v-progress-circular indeterminate></v-progress-circular>
|
||||
</v-overlay>
|
||||
|
||||
<v-overlay class="justify-center align-center" :persistent="true" v-model="verifying">
|
||||
<v-progress-circular indeterminate></v-progress-circular>
|
||||
</v-overlay>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -153,13 +153,17 @@
|
||||
|
||||
<v-row class="mb-5">
|
||||
<v-col cols="12" sm="6">
|
||||
<v-switch inset :label="$t('Use Preset Transaction Categories')"
|
||||
<v-switch inset
|
||||
:disabled="submitting"
|
||||
:label="$t('Use Preset Transaction Categories')"
|
||||
v-model="usePresetCategories"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" class="text-right-sm">
|
||||
<v-menu location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<v-btn variant="text" v-bind="props">{{ currentLanguageName }}</v-btn>
|
||||
<v-btn variant="text"
|
||||
:disabled="submitting"
|
||||
v-bind="props">{{ currentLanguageName }}</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="lang in allLanguages" :key="lang.code">
|
||||
@@ -174,7 +178,7 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="overflow-y-auto px-3" :class="{ 'disabled': !usePresetCategories }" style="max-height: 323px">
|
||||
<div class="overflow-y-auto px-3" :class="{ 'disabled': !usePresetCategories || submitting }" style="max-height: 323px">
|
||||
<v-row :key="categoryType" v-for="(categories, categoryType) in presetCategories">
|
||||
<v-col cols="12" md="12">
|
||||
<h4 class="mb-3">{{ getCategoryTypeName(categoryType) }}</h4>
|
||||
@@ -210,29 +214,28 @@
|
||||
|
||||
<div class="d-flex justify-sm-space-between gap-4 flex-wrap justify-center mt-5">
|
||||
<v-btn :color="currentStep === 'basicSetting' ? 'default' : 'primary'"
|
||||
:disabled="currentStep === 'basicSetting'"
|
||||
:disabled="currentStep === 'basicSetting' || submitting"
|
||||
:prepend-icon="icons.previous"
|
||||
@click="switchToPreviousTab">{{ $t('Previous') }}</v-btn>
|
||||
<v-btn :color="currentStep === 'presetCategories' ? 'secondary' : 'primary'"
|
||||
:disabled="currentStep === 'presetCategories'"
|
||||
:disabled="currentStep === 'presetCategories' || submitting"
|
||||
:append-icon="icons.next"
|
||||
@click="switchToNextTab"
|
||||
v-if="currentStep !== 'presetCategories'">{{ $t('Next') }}</v-btn>
|
||||
<v-btn color="expense"
|
||||
:disabled="submitting"
|
||||
:append-icon="icons.submit"
|
||||
:append-icon="!submitting ? icons.submit : null"
|
||||
@click="submit"
|
||||
v-if="currentStep === 'presetCategories'">{{ $t('Submit') }}</v-btn>
|
||||
v-if="currentStep === 'presetCategories'">
|
||||
{{ $t('Submit') }}
|
||||
<v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<snack-bar ref="snackbar" />
|
||||
|
||||
<v-overlay class="justify-center align-center" :persistent="true" v-model="submitting">
|
||||
<v-progress-circular indeterminate></v-progress-circular>
|
||||
</v-overlay>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -381,6 +384,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
switchToTab(tabName) {
|
||||
if (this.submitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (tabName === 'basicSetting') {
|
||||
this.currentStep = 'basicSetting';
|
||||
} else if (tabName === 'presetCategories') {
|
||||
|
||||
@@ -30,21 +30,23 @@
|
||||
<v-form>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<pin-code-input :autofocus="true" :secure="true" :length="6"
|
||||
<pin-code-input :disabled="verifyingByWebAuthn" :autofocus="true"
|
||||
:secure="true" :length="6"
|
||||
v-model="pinCode" @pincode:confirm="unlockByPin" />
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-btn block :class="{ 'disabled': !isPinCodeValid(pinCode) }"
|
||||
<v-btn block :disabled="!isPinCodeValid(pinCode) || verifyingByWebAuthn"
|
||||
@click="unlockByPin(pinCode)">
|
||||
{{ $t('Unlock By PIN Code') }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" v-if="isWebAuthnAvailable">
|
||||
<v-btn block variant="tonal"
|
||||
<v-btn block variant="tonal" :disabled="verifyingByWebAuthn"
|
||||
@click="unlockByWebAuthn">
|
||||
{{ $t('Unlock By WebAuthn') }}
|
||||
<v-progress-circular indeterminate size="24" class="ml-2" v-if="verifyingByWebAuthn"></v-progress-circular>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
@@ -58,7 +60,9 @@
|
||||
<v-col cols="12" class="text-center">
|
||||
<v-menu location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<v-btn variant="text" v-bind="props">{{ currentLanguageName }}</v-btn>
|
||||
<v-btn variant="text"
|
||||
:disabled="verifyingByWebAuthn"
|
||||
v-bind="props">{{ currentLanguageName }}</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
|
||||
@@ -89,10 +93,6 @@
|
||||
|
||||
<confirm-dialog ref="confirmDialog"/>
|
||||
<snack-bar ref="snackbar" />
|
||||
|
||||
<v-overlay class="justify-center align-center" :persistent="true" v-model="verifying">
|
||||
<v-progress-circular indeterminate></v-progress-circular>
|
||||
</v-overlay>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -113,7 +113,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
pinCode: '',
|
||||
verifying: false
|
||||
verifyingByWebAuthn: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -166,13 +166,13 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
this.verifying = true;
|
||||
this.verifyingByWebAuthn = true;
|
||||
|
||||
webauthn.verifyCredential(
|
||||
self.userStore.currentUserInfo,
|
||||
self.$user.getWebAuthnCredentialId()
|
||||
).then(({ id, userName, userSecret }) => {
|
||||
this.verifying = false;
|
||||
this.verifyingByWebAuthn = false;
|
||||
|
||||
self.$user.unlockTokenByWebAuthn(id, userName, userSecret);
|
||||
self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
|
||||
@@ -188,7 +188,7 @@ export default {
|
||||
|
||||
self.$router.replace('/');
|
||||
}).catch(error => {
|
||||
this.verifying = false;
|
||||
this.verifyingByWebAuthn = false;
|
||||
logger.error('failed to use webauthn to verify', error);
|
||||
|
||||
if (error.notSupported) {
|
||||
|
||||
Reference in New Issue
Block a user