modify login page style
This commit is contained in:
MaysWind
@@ -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': 'Welcome to ezBookkeeping',
|
||||
'Please log in with your ezBookkeeping account': 'Please log in with your ezBookkeeping account',
|
||||
'Unlock Application': 'Unlock Application',
|
||||
'Re-login': 'Re-login',
|
||||
'Username': 'Username',
|
||||
|
||||
@@ -765,6 +765,8 @@ export default {
|
||||
'Zoom out': '缩小',
|
||||
'Change Language': '修改语言',
|
||||
'Date is too early': '日期过早',
|
||||
'Welcome to ezBookkeeping': '欢迎使用 ezBookkeeping',
|
||||
'Please log in with your ezBookkeeping account': '请使用您的 ezBookkeeping 账号登录',
|
||||
'Unlock Application': '解锁应用',
|
||||
'Re-login': '重新登陆',
|
||||
'Username': '用户名',
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/** Common class **/
|
||||
.disabled {
|
||||
opacity: 0.55 !important;
|
||||
pointer-events: none !important;
|
||||
@@ -10,6 +11,28 @@
|
||||
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 {
|
||||
th {
|
||||
background: rgb(var(--v-table-header-background)) !important;
|
||||
|
||||
+119
-123
@@ -1,121 +1,131 @@
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<v-card class="auth-card pa-4 pt-7" max-width="448">
|
||||
<v-card-item class="justify-center">
|
||||
<v-card-title class="d-grid font-weight-semibold text-2xl">
|
||||
<v-img alt="logo" class="login-page-logo" src="/img/ezbookkeeping-192.png" :width="96" />
|
||||
<p class="mt-4 font-weight-bold">{{ $t('global.app.title') }}</p>
|
||||
</v-card-title>
|
||||
</v-card-item>
|
||||
<div class="layout-wrapper">
|
||||
<div class="auth-logo d-flex align-start gap-x-3">
|
||||
<v-img alt="logo" class="login-page-logo" src="/img/ezbookkeeping-192.png" />
|
||||
<h1 class="font-weight-medium leading-normal text-2xl">{{ $t('global.app.title') }}</h1>
|
||||
</div>
|
||||
<v-row no-gutters class="auth-wrapper">
|
||||
<v-col cols="12" md="8" class="d-none d-md-flex align-center justify-center position-relative">
|
||||
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
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>
|
||||
<v-col cols="12" md="4" class="auth-card d-flex align-center justify-center">
|
||||
<v-card variant="flat" class="mt-12 mt-sm-0 pa-4" max-width="500">
|
||||
<v-card-text>
|
||||
<h5 class="text-h5 mb-1">{{ $t('Welcome to ezBookkeeping') }}</h5>
|
||||
<p class="mb-0">{{ $t('Please log in with your ezBookkeeping account') }}</p>
|
||||
</v-card-text>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
autocomplete="current-password"
|
||||
clearable
|
||||
ref="passwordInput"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:disabled="show2faInput"
|
||||
: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-card-text>
|
||||
<v-form>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
autofocus="autofocus"
|
||||
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-show="show2faInput">
|
||||
<v-text-field
|
||||
type="number"
|
||||
autocomplete="one-time-code"
|
||||
clearable
|
||||
ref="passcodeInput"
|
||||
: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
|
||||
: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-text-field
|
||||
autocomplete="current-password"
|
||||
clearable
|
||||
ref="passwordInput"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:disabled="show2faInput"
|
||||
: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-btn block :class="{ 'disabled': inputIsEmpty || logining }"
|
||||
@click="login" v-if="!show2faInput">
|
||||
{{ $t('Log In') }}
|
||||
</v-btn>
|
||||
<v-btn block :class="{ 'disabled': twoFAInputIsEmpty || verifying }"
|
||||
@click="verify" v-else-if="show2faInput">
|
||||
{{ $t('Continue') }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" v-show="show2faInput">
|
||||
<v-text-field
|
||||
type="number"
|
||||
autocomplete="one-time-code"
|
||||
clearable
|
||||
ref="passcodeInput"
|
||||
: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
|
||||
: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">
|
||||
<span>{{ $t('Don\'t have an account?') }}</span>
|
||||
<router-link class="text-primary ms-2" to="/signup">
|
||||
{{ $t('Create an account') }}
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-btn block :class="{ 'disabled': inputIsEmpty || logining }"
|
||||
@click="login" v-if="!show2faInput">
|
||||
{{ $t('Log In') }}
|
||||
</v-btn>
|
||||
<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-menu location="bottom">
|
||||
<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-base" v-if="isUserRegistrationEnabled">
|
||||
<span>{{ $t('Don\'t have an account?') }}</span>
|
||||
<router-link class="text-primary ms-2" to="/signup">
|
||||
{{ $t('Create an account') }}
|
||||
</router-link>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" class="d-flex align-center">
|
||||
<v-divider />
|
||||
</v-col>
|
||||
<v-col cols="12" class="text-center">
|
||||
<v-menu location="bottom">
|
||||
<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">
|
||||
<span>Powered by </span>
|
||||
<a href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</a> <span>{{ version }}</span>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-col cols="12" class="d-flex align-center">
|
||||
<v-divider />
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" class="text-center text-sm">
|
||||
<span>Powered by </span>
|
||||
<a href="https://github.com/mayswind/ezbookkeeping" target="_blank">ezBookkeeping</a> <span>{{ version }}</span>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<snack-bar ref="snackbar" />
|
||||
|
||||
@@ -318,17 +328,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</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