zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modify style

Browse Source
This commit is contained in:
MaysWind
2023-07-08 16:16:04 +08:00
parent 8550c8fde9
commit e6001d83a4
4 changed files with 43 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/PinCodeInput.vue
+2
View File
@@ -7,6 +7,7 @@
:ref="`pin-code-input-${index}`" :ref="`pin-code-input-${index}`"
:value="codes[index].value" :value="codes[index].value"
:type="codes[index].inputType" :type="codes[index].inputType"
:disabled="disabled ? 'disabled' : undefined"
:autofocus="autofocus && index === 0 ? 'autofocus' : undefined" :autofocus="autofocus && index === 0 ? 'autofocus' : undefined"
@focus="codes[index].focused = true" @focus="codes[index].focused = true"
@blur="codes[index].focused = false" @blur="codes[index].focused = false"
@@ -22,6 +23,7 @@
export default { export default {
props: [ props: [
'modelValue', 'modelValue',
'disabled',
'autofocus', 'autofocus',
'secure', 'secure',
'length' 'length'
src/views/desktop/LoginPage.vue
+11 -13
View File
@@ -34,7 +34,7 @@
autocomplete="username" autocomplete="username"
autofocus="autofocus" autofocus="autofocus"
clearable clearable
:disabled="show2faInput" :disabled="show2faInput || logining || verifying"
:label="$t('Username')" :label="$t('Username')"
:placeholder="$t('Your username or email')" :placeholder="$t('Your username or email')"
v-model="username" v-model="username"
@@ -49,7 +49,7 @@
clearable clearable
ref="passwordInput" ref="passwordInput"
:type="isPasswordVisible ? 'text' : 'password'" :type="isPasswordVisible ? 'text' : 'password'"
:disabled="show2faInput" :disabled="show2faInput || logining || verifying"
:label="$t('Password')" :label="$t('Password')"
:placeholder="$t('Your password')" :placeholder="$t('Your password')"
:append-inner-icon="isPasswordVisible ? icons.eyeSlash : icons.eye" :append-inner-icon="isPasswordVisible ? icons.eyeSlash : icons.eye"
@@ -66,6 +66,7 @@
autocomplete="one-time-code" autocomplete="one-time-code"
clearable clearable
ref="passcodeInput" ref="passcodeInput"
:disabled="logining || verifying"
:label="$t('Passcode')" :label="$t('Passcode')"
:placeholder="$t('Passcode')" :placeholder="$t('Passcode')"
:append-inner-icon="icons.backupCode" :append-inner-icon="icons.backupCode"
@@ -77,6 +78,7 @@
<v-text-field <v-text-field
type="text" type="text"
clearable clearable
:disabled="logining || verifying"
:label="$t('Backup Code')" :label="$t('Backup Code')"
:placeholder="$t('Backup Code')" :placeholder="$t('Backup Code')"
:append-inner-icon="icons.passcode" :append-inner-icon="icons.passcode"
@@ -88,13 +90,15 @@
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-btn block :class="{ 'disabled': inputIsEmpty || logining }" <v-btn block :disabled="inputIsEmpty || logining || verifying"
@click="login" v-if="!show2faInput"> @click="login" v-if="!show2faInput">
{{ $t('Log In') }} {{ $t('Log In') }}
<v-progress-circular indeterminate size="24" class="ml-2" v-if="logining"></v-progress-circular>
</v-btn> </v-btn>
<v-btn block :class="{ 'disabled': twoFAInputIsEmpty || verifying }" <v-btn block :disabled="twoFAInputIsEmpty || logining || verifying"
@click="verify" v-else-if="show2faInput"> @click="verify" v-else-if="show2faInput">
{{ $t('Continue') }} {{ $t('Continue') }}
<v-progress-circular indeterminate size="24" class="ml-2" v-if="verifying"></v-progress-circular>
</v-btn> </v-btn>
</v-col> </v-col>
@@ -108,7 +112,9 @@
<v-col cols="12" class="text-center"> <v-col cols="12" class="text-center">
<v-menu location="bottom"> <v-menu location="bottom">
<template #activator="{ props }"> <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> </template>
<v-list> <v-list>
<v-list-item v-for="(lang, locale) in allLanguages" :key="locale"> <v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
@@ -138,14 +144,6 @@
</v-row> </v-row>
<snack-bar ref="snackbar" /> <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> </div>
</template> </template>
src/views/desktop/SignupPage.vue
+18 -11
View File
@@ -153,13 +153,17 @@
<v-row class="mb-5"> <v-row class="mb-5">
<v-col cols="12" sm="6"> <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-model="usePresetCategories"/>
</v-col> </v-col>
<v-col cols="12" sm="6" class="text-right-sm"> <v-col cols="12" sm="6" class="text-right-sm">
<v-menu location="bottom"> <v-menu location="bottom">
<template #activator="{ props }"> <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> </template>
<v-list> <v-list>
<v-list-item v-for="lang in allLanguages" :key="lang.code"> <v-list-item v-for="lang in allLanguages" :key="lang.code">
@@ -174,7 +178,7 @@
</v-col> </v-col>
</v-row> </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-row :key="categoryType" v-for="(categories, categoryType) in presetCategories">
<v-col cols="12" md="12"> <v-col cols="12" md="12">
<h4 class="mb-3">{{ getCategoryTypeName(categoryType) }}</h4> <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"> <div class="d-flex justify-sm-space-between gap-4 flex-wrap justify-center mt-5">
<v-btn :color="currentStep === 'basicSetting' ? 'default' : 'primary'" <v-btn :color="currentStep === 'basicSetting' ? 'default' : 'primary'"
:disabled="currentStep === 'basicSetting'" :disabled="currentStep === 'basicSetting' || submitting"
:prepend-icon="icons.previous" :prepend-icon="icons.previous"
@click="switchToPreviousTab">{{ $t('Previous') }}</v-btn> @click="switchToPreviousTab">{{ $t('Previous') }}</v-btn>
<v-btn :color="currentStep === 'presetCategories' ? 'secondary' : 'primary'" <v-btn :color="currentStep === 'presetCategories' ? 'secondary' : 'primary'"
:disabled="currentStep === 'presetCategories'" :disabled="currentStep === 'presetCategories' || submitting"
:append-icon="icons.next" :append-icon="icons.next"
@click="switchToNextTab" @click="switchToNextTab"
v-if="currentStep !== 'presetCategories'">{{ $t('Next') }}</v-btn> v-if="currentStep !== 'presetCategories'">{{ $t('Next') }}</v-btn>
<v-btn color="expense" <v-btn color="expense"
:disabled="submitting" :disabled="submitting"
:append-icon="icons.submit" :append-icon="!submitting ? icons.submit : null"
@click="submit" @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> </div>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
<snack-bar ref="snackbar" /> <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> </div>
</template> </template>
@@ -381,6 +384,10 @@ export default {
}, },
methods: { methods: {
switchToTab(tabName) { switchToTab(tabName) {
if (this.submitting) {
return;
}
if (tabName === 'basicSetting') { if (tabName === 'basicSetting') {
this.currentStep = 'basicSetting'; this.currentStep = 'basicSetting';
} else if (tabName === 'presetCategories') { } else if (tabName === 'presetCategories') {
src/views/desktop/UnlockPage.vue
+12 -12
View File
@@ -30,21 +30,23 @@
<v-form> <v-form>
<v-row> <v-row>
<v-col cols="12"> <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-model="pinCode" @pincode:confirm="unlockByPin" />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-btn block :class="{ 'disabled': !isPinCodeValid(pinCode) }" <v-btn block :disabled="!isPinCodeValid(pinCode) || verifyingByWebAuthn"
@click="unlockByPin(pinCode)"> @click="unlockByPin(pinCode)">
{{ $t('Unlock By PIN Code') }} {{ $t('Unlock By PIN Code') }}
</v-btn> </v-btn>
</v-col> </v-col>
<v-col cols="12" v-if="isWebAuthnAvailable"> <v-col cols="12" v-if="isWebAuthnAvailable">
<v-btn block variant="tonal" <v-btn block variant="tonal" :disabled="verifyingByWebAuthn"
@click="unlockByWebAuthn"> @click="unlockByWebAuthn">
{{ $t('Unlock By WebAuthn') }} {{ $t('Unlock By WebAuthn') }}
<v-progress-circular indeterminate size="24" class="ml-2" v-if="verifyingByWebAuthn"></v-progress-circular>
</v-btn> </v-btn>
</v-col> </v-col>
@@ -58,7 +60,9 @@
<v-col cols="12" class="text-center"> <v-col cols="12" class="text-center">
<v-menu location="bottom"> <v-menu location="bottom">
<template #activator="{ props }"> <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> </template>
<v-list> <v-list>
<v-list-item v-for="(lang, locale) in allLanguages" :key="locale"> <v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
@@ -89,10 +93,6 @@
<confirm-dialog ref="confirmDialog"/> <confirm-dialog ref="confirmDialog"/>
<snack-bar ref="snackbar" /> <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> </div>
</template> </template>
@@ -113,7 +113,7 @@ export default {
data() { data() {
return { return {
pinCode: '', pinCode: '',
verifying: false verifyingByWebAuthn: false
}; };
}, },
computed: { computed: {
@@ -166,13 +166,13 @@ export default {
return; return;
} }
this.verifying = true; this.verifyingByWebAuthn = true;
webauthn.verifyCredential( webauthn.verifyCredential(
self.userStore.currentUserInfo, self.userStore.currentUserInfo,
self.$user.getWebAuthnCredentialId() self.$user.getWebAuthnCredentialId()
).then(({ id, userName, userSecret }) => { ).then(({ id, userName, userSecret }) => {
this.verifying = false; this.verifyingByWebAuthn = false;
self.$user.unlockTokenByWebAuthn(id, userName, userSecret); self.$user.unlockTokenByWebAuthn(id, userName, userSecret);
self.tokensStore.refreshTokenAndRevokeOldToken().then(response => { self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
@@ -188,7 +188,7 @@ export default {
self.$router.replace('/'); self.$router.replace('/');
}).catch(error => { }).catch(error => {
this.verifying = false; this.verifyingByWebAuthn = false;
logger.error('failed to use webauthn to verify', error); logger.error('failed to use webauthn to verify', error);
if (error.notSupported) { if (error.notSupported) {