mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-19 17:24:26 +08:00
modify style
This commit is contained in:
MaysWind
+112
-102
@@ -18,106 +18,116 @@
|
|||||||
<v-img max-width="600px" src="img/desktop/people1.svg"/>
|
<v-img max-width="600px" src="img/desktop/people1.svg"/>
|
||||||
</div>
|
</div>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" md="4" class="auth-card d-flex align-center justify-center">
|
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
|
||||||
<v-card variant="flat" class="mt-0 pa-4" max-width="500">
|
<div class="d-flex align-center justify-center h-100">
|
||||||
<v-card-text>
|
<v-card variant="flat" class="mt-0 px-4 pt-12" max-width="500">
|
||||||
<h5 class="text-h5 mb-3">{{ $t('Welcome to ezBookkeeping') }}</h5>
|
<v-card-text>
|
||||||
<p class="mb-0">{{ $t('Please log in with your ezBookkeeping account') }}</p>
|
<h5 class="text-h5 mb-3">{{ $t('Welcome to ezBookkeeping') }}</h5>
|
||||||
</v-card-text>
|
<p class="mb-0">{{ $t('Please log in with your ezBookkeeping account') }}</p>
|
||||||
|
</v-card-text>
|
||||||
|
|
||||||
<v-card-text>
|
<v-card-text class="pb-0 mb-6">
|
||||||
<v-form>
|
<v-form>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-text-field
|
||||||
|
type="text"
|
||||||
|
autocomplete="username"
|
||||||
|
autofocus="autofocus"
|
||||||
|
clearable
|
||||||
|
:disabled="show2faInput || logining || verifying"
|
||||||
|
:label="$t('Username')"
|
||||||
|
:placeholder="$t('Your username or email')"
|
||||||
|
v-model="username"
|
||||||
|
@input="tempToken = ''"
|
||||||
|
@keyup.enter="$refs.passwordInput.focus()"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-text-field
|
||||||
|
autocomplete="current-password"
|
||||||
|
clearable
|
||||||
|
ref="passwordInput"
|
||||||
|
:type="isPasswordVisible ? 'text' : 'password'"
|
||||||
|
:disabled="show2faInput || logining || verifying"
|
||||||
|
:label="$t('Password')"
|
||||||
|
:placeholder="$t('Your password')"
|
||||||
|
:append-inner-icon="isPasswordVisible ? icons.eyeSlash : icons.eye"
|
||||||
|
v-model="password"
|
||||||
|
@input="tempToken = ''"
|
||||||
|
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||||
|
@keyup.enter="login"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="12" v-show="show2faInput">
|
||||||
|
<v-text-field
|
||||||
|
type="number"
|
||||||
|
autocomplete="one-time-code"
|
||||||
|
clearable
|
||||||
|
ref="passcodeInput"
|
||||||
|
:disabled="logining || verifying"
|
||||||
|
:label="$t('Passcode')"
|
||||||
|
:placeholder="$t('Passcode')"
|
||||||
|
:append-inner-icon="icons.backupCode"
|
||||||
|
v-model="passcode"
|
||||||
|
@click:append-inner="twoFAVerifyType = 'backupcode'"
|
||||||
|
@keyup.enter="verify"
|
||||||
|
v-if="twoFAVerifyType === 'passcode'"
|
||||||
|
/>
|
||||||
|
<v-text-field
|
||||||
|
type="text"
|
||||||
|
clearable
|
||||||
|
:disabled="logining || verifying"
|
||||||
|
:label="$t('Backup Code')"
|
||||||
|
:placeholder="$t('Backup Code')"
|
||||||
|
:append-inner-icon="icons.passcode"
|
||||||
|
v-model="backupCode"
|
||||||
|
@click:append-inner="twoFAVerifyType = 'passcode'"
|
||||||
|
@keyup.enter="verify"
|
||||||
|
v-if="twoFAVerifyType === 'backupcode'"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="12" class="py-0 mt-1 mb-4">
|
||||||
|
<div class="d-flex align-center justify-space-between flex-wrap">
|
||||||
|
<a href="javascript:void(0);" @click="showMobileQrCode = true">
|
||||||
|
<span class="nav-item-title">{{ $t('Use on Mobile Device') }}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="12">
|
||||||
|
<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 :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>
|
||||||
|
|
||||||
|
<v-col cols="12" class="text-center text-base">
|
||||||
|
<span class="me-1">{{ $t('Don\'t have an account?') }}</span>
|
||||||
|
<router-link class="text-primary" to="/signup"
|
||||||
|
:class="{'disabled': !isUserRegistrationEnabled}">
|
||||||
|
{{ $t('Create an account') }}
|
||||||
|
</router-link>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-form>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</div>
|
||||||
|
<v-spacer/>
|
||||||
|
<div class="d-flex align-center justify-center">
|
||||||
|
<v-card variant="flat" class="px-4 pb-4" max-width="500">
|
||||||
|
<v-card-text class="pt-0">
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12">
|
|
||||||
<v-text-field
|
|
||||||
type="text"
|
|
||||||
autocomplete="username"
|
|
||||||
autofocus="autofocus"
|
|
||||||
clearable
|
|
||||||
:disabled="show2faInput || logining || verifying"
|
|
||||||
:label="$t('Username')"
|
|
||||||
:placeholder="$t('Your username or email')"
|
|
||||||
v-model="username"
|
|
||||||
@input="tempToken = ''"
|
|
||||||
@keyup.enter="$refs.passwordInput.focus()"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-text-field
|
|
||||||
autocomplete="current-password"
|
|
||||||
clearable
|
|
||||||
ref="passwordInput"
|
|
||||||
:type="isPasswordVisible ? 'text' : 'password'"
|
|
||||||
:disabled="show2faInput || logining || verifying"
|
|
||||||
:label="$t('Password')"
|
|
||||||
:placeholder="$t('Your password')"
|
|
||||||
:append-inner-icon="isPasswordVisible ? icons.eyeSlash : icons.eye"
|
|
||||||
v-model="password"
|
|
||||||
@input="tempToken = ''"
|
|
||||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
|
||||||
@keyup.enter="login"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" v-show="show2faInput">
|
|
||||||
<v-text-field
|
|
||||||
type="number"
|
|
||||||
autocomplete="one-time-code"
|
|
||||||
clearable
|
|
||||||
ref="passcodeInput"
|
|
||||||
:disabled="logining || verifying"
|
|
||||||
:label="$t('Passcode')"
|
|
||||||
:placeholder="$t('Passcode')"
|
|
||||||
:append-inner-icon="icons.backupCode"
|
|
||||||
v-model="passcode"
|
|
||||||
@click:append-inner="twoFAVerifyType = 'backupcode'"
|
|
||||||
@keyup.enter="verify"
|
|
||||||
v-if="twoFAVerifyType === 'passcode'"
|
|
||||||
/>
|
|
||||||
<v-text-field
|
|
||||||
type="text"
|
|
||||||
clearable
|
|
||||||
:disabled="logining || verifying"
|
|
||||||
:label="$t('Backup Code')"
|
|
||||||
:placeholder="$t('Backup Code')"
|
|
||||||
:append-inner-icon="icons.passcode"
|
|
||||||
v-model="backupCode"
|
|
||||||
@click:append-inner="twoFAVerifyType = 'passcode'"
|
|
||||||
@keyup.enter="verify"
|
|
||||||
v-if="twoFAVerifyType === 'backupcode'"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" class="py-0 mt-1 mb-4">
|
|
||||||
<div class="d-flex align-center justify-space-between flex-wrap">
|
|
||||||
<a href="javascript:void(0);" @click="showMobileQrCode = true">
|
|
||||||
<span class="nav-item-title">{{ $t('Use on Mobile Device') }}</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12">
|
|
||||||
<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 :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>
|
|
||||||
|
|
||||||
<v-col cols="12" class="text-center text-base">
|
|
||||||
<span class="me-1">{{ $t('Don\'t have an account?') }}</span>
|
|
||||||
<router-link class="text-primary" to="/signup"
|
|
||||||
:class="{'disabled': !isUserRegistrationEnabled}">
|
|
||||||
{{ $t('Create an account') }}
|
|
||||||
</router-link>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<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 }">
|
||||||
@@ -137,7 +147,7 @@
|
|||||||
</v-menu>
|
</v-menu>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" class="d-flex align-center">
|
<v-col cols="12" class="d-flex align-center pt-0">
|
||||||
<v-divider />
|
<v-divider />
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
@@ -146,9 +156,9 @@
|
|||||||
<a href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</a> <span>{{ version }}</span>
|
<a href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</a> <span>{{ version }}</span>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-form>
|
</v-card-text>
|
||||||
</v-card-text>
|
</v-card>
|
||||||
</v-card>
|
</div>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
|
|||||||
@@ -18,45 +18,55 @@
|
|||||||
<v-img max-width="600px" src="img/desktop/people3.svg"/>
|
<v-img max-width="600px" src="img/desktop/people3.svg"/>
|
||||||
</div>
|
</div>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" md="4" class="auth-card d-flex align-center justify-center">
|
<v-col cols="12" md="4" class="auth-card d-flex flex-column">
|
||||||
<v-card variant="flat" class="mt-12 mt-sm-0 pa-4" max-width="500">
|
<div class="d-flex align-center justify-center h-100">
|
||||||
<v-card-text>
|
<v-card variant="flat" class="mt-0 px-4 pt-12" max-width="500">
|
||||||
<h5 class="text-h5 mb-3">{{ $t('Unlock Application') }}</h5>
|
<v-card-text>
|
||||||
<p class="mb-0" v-if="isWebAuthnAvailable">{{ $t('Please input your PIN code or use WebAuthn to unlock application') }}</p>
|
<h5 class="text-h5 mb-3">{{ $t('Unlock Application') }}</h5>
|
||||||
<p class="mb-0" v-else-if="!isWebAuthnAvailable">{{ $t('Please input your PIN code to unlock application') }}</p>
|
<p class="mb-0" v-if="isWebAuthnAvailable">{{ $t('Please input your PIN code or use WebAuthn to unlock application') }}</p>
|
||||||
</v-card-text>
|
<p class="mb-0" v-else-if="!isWebAuthnAvailable">{{ $t('Please input your PIN code to unlock application') }}</p>
|
||||||
|
</v-card-text>
|
||||||
|
|
||||||
<v-card-text>
|
<v-card-text class="pb-0 mb-6">
|
||||||
<v-form>
|
<v-form>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<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 :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" :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>
|
||||||
|
|
||||||
|
<v-col cols="12" class="text-center">
|
||||||
|
<span class="me-1">{{ $t('Can\'t Unlock?') }}</span>
|
||||||
|
<a class="text-primary" href="javascript:void(0);" @click="relogin">
|
||||||
|
{{ $t('Re-login') }}
|
||||||
|
</a>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-form>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</div>
|
||||||
|
<v-spacer/>
|
||||||
|
<div class="d-flex align-center justify-center">
|
||||||
|
<v-card variant="flat" class="px-4 pb-4" max-width="500">
|
||||||
|
<v-card-text class="pt-0">
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12">
|
|
||||||
<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 :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" :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>
|
|
||||||
|
|
||||||
<v-col cols="12" class="text-center">
|
|
||||||
<span class="me-1">{{ $t('Can\'t Unlock?') }}</span>
|
|
||||||
<a class="text-primary" href="javascript:void(0);" @click="relogin">
|
|
||||||
{{ $t('Re-login') }}
|
|
||||||
</a>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<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 }">
|
||||||
@@ -76,7 +86,7 @@
|
|||||||
</v-menu>
|
</v-menu>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" class="d-flex align-center">
|
<v-col cols="12" class="d-flex align-center pt-0">
|
||||||
<v-divider />
|
<v-divider />
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
@@ -85,9 +95,9 @@
|
|||||||
<a href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</a> <span>{{ version }}</span>
|
<a href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</a> <span>{{ version }}</span>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-form>
|
</v-card-text>
|
||||||
</v-card-text>
|
</v-card>
|
||||||
</v-card>
|
</div>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user