mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-19 17:24:26 +08:00
modify login page style
This commit is contained in:
MaysWind
@@ -765,6 +765,8 @@ export default {
|
|||||||
'Zoom out': 'Zoom out',
|
'Zoom out': 'Zoom out',
|
||||||
'Change Language': 'Change Language',
|
'Change Language': 'Change Language',
|
||||||
'Date is too early': 'Date is too early',
|
'Date is too early': 'Date is too early',
|
||||||
|
'Welcome to ezBookkeeping': 'Welcome to ezBookkeeping',
|
||||||
|
'Please log in with your ezBookkeeping account': 'Please log in with your ezBookkeeping account',
|
||||||
'Unlock Application': 'Unlock Application',
|
'Unlock Application': 'Unlock Application',
|
||||||
'Re-login': 'Re-login',
|
'Re-login': 'Re-login',
|
||||||
'Username': 'Username',
|
'Username': 'Username',
|
||||||
|
|||||||
@@ -765,6 +765,8 @@ export default {
|
|||||||
'Zoom out': '缩小',
|
'Zoom out': '缩小',
|
||||||
'Change Language': '修改语言',
|
'Change Language': '修改语言',
|
||||||
'Date is too early': '日期过早',
|
'Date is too early': '日期过早',
|
||||||
|
'Welcome to ezBookkeeping': '欢迎使用 ezBookkeeping',
|
||||||
|
'Please log in with your ezBookkeeping account': '请使用您的 ezBookkeeping 账号登录',
|
||||||
'Unlock Application': '解锁应用',
|
'Unlock Application': '解锁应用',
|
||||||
'Re-login': '重新登陆',
|
'Re-login': '重新登陆',
|
||||||
'Username': '用户名',
|
'Username': '用户名',
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
/** Common class **/
|
||||||
.disabled {
|
.disabled {
|
||||||
opacity: 0.55 !important;
|
opacity: 0.55 !important;
|
||||||
pointer-events: none !important;
|
pointer-events: none !important;
|
||||||
@@ -10,6 +11,28 @@
|
|||||||
pointer-events: none !important;
|
pointer-events: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** custom class **/
|
||||||
|
.auth-logo {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
inset-block-start: 2rem;
|
||||||
|
inset-inline-start: 2.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-logo img {
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-wrapper {
|
||||||
|
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card {
|
||||||
|
background-color: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Common class for replacing the default style of vuetify **/
|
||||||
.v-table {
|
.v-table {
|
||||||
th {
|
th {
|
||||||
background: rgb(var(--v-table-header-background)) !important;
|
background: rgb(var(--v-table-header-background)) !important;
|
||||||
|
|||||||
+119
-123
@@ -1,121 +1,131 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
<div class="layout-wrapper">
|
||||||
<v-card class="auth-card pa-4 pt-7" max-width="448">
|
<div class="auth-logo d-flex align-start gap-x-3">
|
||||||
<v-card-item class="justify-center">
|
<v-img alt="logo" class="login-page-logo" src="/img/ezbookkeeping-192.png" />
|
||||||
<v-card-title class="d-grid font-weight-semibold text-2xl">
|
<h1 class="font-weight-medium leading-normal text-2xl">{{ $t('global.app.title') }}</h1>
|
||||||
<v-img alt="logo" class="login-page-logo" src="/img/ezbookkeeping-192.png" :width="96" />
|
</div>
|
||||||
<p class="mt-4 font-weight-bold">{{ $t('global.app.title') }}</p>
|
<v-row no-gutters class="auth-wrapper">
|
||||||
</v-card-title>
|
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
|
||||||
</v-card-item>
|
|
||||||
|
|
||||||
<v-card-text>
|
</v-col>
|
||||||
<v-form>
|
<v-col cols="12" md="4" class="auth-card d-flex align-center justify-center">
|
||||||
<v-row>
|
<v-card variant="flat" class="mt-12 mt-sm-0 pa-4" max-width="500">
|
||||||
<v-col cols="12">
|
<v-card-text>
|
||||||
<v-text-field
|
<h5 class="text-h5 mb-1">{{ $t('Welcome to ezBookkeeping') }}</h5>
|
||||||
type="text"
|
<p class="mb-0">{{ $t('Please log in with your ezBookkeeping account') }}</p>
|
||||||
autocomplete="username"
|
</v-card-text>
|
||||||
clearable
|
|
||||||
:disabled="show2faInput"
|
|
||||||
: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-card-text>
|
||||||
<v-text-field
|
<v-form>
|
||||||
autocomplete="current-password"
|
<v-row>
|
||||||
clearable
|
<v-col cols="12">
|
||||||
ref="passwordInput"
|
<v-text-field
|
||||||
:type="isPasswordVisible ? 'text' : 'password'"
|
type="text"
|
||||||
:disabled="show2faInput"
|
autocomplete="username"
|
||||||
:label="$t('Password')"
|
autofocus="autofocus"
|
||||||
:placeholder="$t('Your password')"
|
clearable
|
||||||
:append-inner-icon="isPasswordVisible ? icons.eyeSlash : icons.eye"
|
:disabled="show2faInput"
|
||||||
v-model="password"
|
:label="$t('Username')"
|
||||||
@input="tempToken = ''"
|
:placeholder="$t('Your username or email')"
|
||||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
v-model="username"
|
||||||
@keyup.enter="login"
|
@input="tempToken = ''"
|
||||||
/>
|
@keyup.enter="$refs.passwordInput.focus()"
|
||||||
</v-col>
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" v-show="show2faInput">
|
<v-col cols="12">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
type="number"
|
autocomplete="current-password"
|
||||||
autocomplete="one-time-code"
|
clearable
|
||||||
clearable
|
ref="passwordInput"
|
||||||
ref="passcodeInput"
|
:type="isPasswordVisible ? 'text' : 'password'"
|
||||||
:label="$t('Passcode')"
|
:disabled="show2faInput"
|
||||||
:placeholder="$t('Passcode')"
|
:label="$t('Password')"
|
||||||
:append-inner-icon="icons.backupCode"
|
:placeholder="$t('Your password')"
|
||||||
v-model="passcode"
|
:append-inner-icon="isPasswordVisible ? icons.eyeSlash : icons.eye"
|
||||||
@click:append-inner="twoFAVerifyType = 'backupcode'"
|
v-model="password"
|
||||||
@keyup.enter="verify"
|
@input="tempToken = ''"
|
||||||
v-if="twoFAVerifyType === 'passcode'"
|
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||||
/>
|
@keyup.enter="login"
|
||||||
<v-text-field
|
/>
|
||||||
type="text"
|
</v-col>
|
||||||
clearable
|
|
||||||
: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">
|
<v-col cols="12" v-show="show2faInput">
|
||||||
<v-btn block :class="{ 'disabled': inputIsEmpty || logining }"
|
<v-text-field
|
||||||
@click="login" v-if="!show2faInput">
|
type="number"
|
||||||
{{ $t('Log In') }}
|
autocomplete="one-time-code"
|
||||||
</v-btn>
|
clearable
|
||||||
<v-btn block :class="{ 'disabled': twoFAInputIsEmpty || verifying }"
|
ref="passcodeInput"
|
||||||
@click="verify" v-else-if="show2faInput">
|
:label="$t('Passcode')"
|
||||||
{{ $t('Continue') }}
|
:placeholder="$t('Passcode')"
|
||||||
</v-btn>
|
:append-inner-icon="icons.backupCode"
|
||||||
</v-col>
|
v-model="passcode"
|
||||||
|
@click:append-inner="twoFAVerifyType = 'backupcode'"
|
||||||
|
@keyup.enter="verify"
|
||||||
|
v-if="twoFAVerifyType === 'passcode'"
|
||||||
|
/>
|
||||||
|
<v-text-field
|
||||||
|
type="text"
|
||||||
|
clearable
|
||||||
|
: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="text-center text-base" v-if="isUserRegistrationEnabled">
|
<v-col cols="12">
|
||||||
<span>{{ $t('Don\'t have an account?') }}</span>
|
<v-btn block :class="{ 'disabled': inputIsEmpty || logining }"
|
||||||
<router-link class="text-primary ms-2" to="/signup">
|
@click="login" v-if="!show2faInput">
|
||||||
{{ $t('Create an account') }}
|
{{ $t('Log In') }}
|
||||||
</router-link>
|
</v-btn>
|
||||||
</v-col>
|
<v-btn block :class="{ 'disabled': twoFAInputIsEmpty || verifying }"
|
||||||
|
@click="verify" v-else-if="show2faInput">
|
||||||
|
{{ $t('Continue') }}
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" class="text-center">
|
<v-col cols="12" class="text-center text-base" v-if="isUserRegistrationEnabled">
|
||||||
<v-menu location="bottom">
|
<span>{{ $t('Don\'t have an account?') }}</span>
|
||||||
<template #activator="{ props }">
|
<router-link class="text-primary ms-2" to="/signup">
|
||||||
<v-btn variant="text" v-bind="props">{{ currentLanguageName }}</v-btn>
|
{{ $t('Create an account') }}
|
||||||
</template>
|
</router-link>
|
||||||
<v-list>
|
</v-col>
|
||||||
<v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
|
|
||||||
<v-list-item-title
|
|
||||||
class="cursor-pointer"
|
|
||||||
@click="changeLanguage(locale)">
|
|
||||||
{{ lang.displayName }}
|
|
||||||
</v-list-item-title>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" class="d-flex align-center">
|
<v-col cols="12" class="text-center">
|
||||||
<v-divider />
|
<v-menu location="bottom">
|
||||||
</v-col>
|
<template #activator="{ props }">
|
||||||
|
<v-btn variant="text" v-bind="props">{{ currentLanguageName }}</v-btn>
|
||||||
|
</template>
|
||||||
|
<v-list>
|
||||||
|
<v-list-item v-for="(lang, locale) in allLanguages" :key="locale">
|
||||||
|
<v-list-item-title
|
||||||
|
class="cursor-pointer"
|
||||||
|
@click="changeLanguage(locale)">
|
||||||
|
{{ lang.displayName }}
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" class="text-center text-sm">
|
<v-col cols="12" class="d-flex align-center">
|
||||||
<span>Powered by </span>
|
<v-divider />
|
||||||
<a href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</a> <span>{{ version }}</span>
|
</v-col>
|
||||||
</v-col>
|
|
||||||
</v-row>
|
<v-col cols="12" class="text-center text-sm">
|
||||||
</v-form>
|
<span>Powered by </span>
|
||||||
</v-card-text>
|
<a href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</a> <span>{{ version }}</span>
|
||||||
</v-card>
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-form>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
<snack-bar ref="snackbar" />
|
<snack-bar ref="snackbar" />
|
||||||
|
|
||||||
@@ -318,17 +328,3 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.auth-wrapper {
|
|
||||||
min-block-size: calc(var(--vh, 1vh) * 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card {
|
|
||||||
z-index: 1 !important
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-page-logo {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user