liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: login screen UI on dark mode

Browse Source
This commit is contained in:
NGPixel 2020-09-05 15:31:10 -04:00
parent 17f8071abe
commit 715364de1d
1 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/components/login.vue
View File

@ -7,7 +7,7 @@
v-avatar(tile, size='34') v-avatar(tile, size='34')
v-img(:src='logoUrl') v-img(:src='logoUrl')
.login-title .login-title
.text-h6 {{ siteTitle }} .text-h6.grey--text.text--darken-4 {{ siteTitle }}
v-alert.mb-0( v-alert.mb-0(
v-model='errorShown' v-model='errorShown'
transition='slide-y-reverse-transition' transition='slide-y-reverse-transition'
@ -25,7 +25,7 @@
.login-subtitle .login-subtitle
.text-subtitle-1 Select Authentication Provider .text-subtitle-1 Select Authentication Provider
.login-list .login-list
v-list.elevation-1.radius-7(nav) v-list.elevation-1.radius-7(nav, light)
v-list-item-group(v-model='selectedStrategyKey') v-list-item-group(v-model='selectedStrategyKey')
v-list-item( v-list-item(
v-for='(stg, idx) of filteredStrategies' v-for='(stg, idx) of filteredStrategies'
@ -47,18 +47,21 @@
flat flat
prepend-inner-icon='mdi-clipboard-account' prepend-inner-icon='mdi-clipboard-account'
background-color='white' background-color='white'
color='blue darken-2'
hide-details hide-details
ref='iptEmail' ref='iptEmail'
v-model='username' v-model='username'
:placeholder='isUsernameEmail ? $t(`auth:fields.email`) : $t(`auth:fields.username`)' :placeholder='isUsernameEmail ? $t(`auth:fields.email`) : $t(`auth:fields.username`)'
:type='isUsernameEmail ? `email` : `text`' :type='isUsernameEmail ? `email` : `text`'
:autocomplete='isUsernameEmail ? `email` : `username`' :autocomplete='isUsernameEmail ? `email` : `username`'
light
) )
v-text-field.mt-2( v-text-field.mt-2(
solo solo
flat flat
prepend-inner-icon='mdi-form-textbox-password' prepend-inner-icon='mdi-form-textbox-password'
background-color='white' background-color='white'
color='blue darken-2'
hide-details hide-details
ref='iptPassword' ref='iptPassword'
v-model='password' v-model='password'
@ -68,11 +71,12 @@
:placeholder='$t("auth:fields.password")' :placeholder='$t("auth:fields.password")'
autocomplete='current-password' autocomplete='current-password'
@keyup.enter='login' @keyup.enter='login'
light
) )
v-btn.mt-2.text-none( v-btn.mt-2.text-none(
width='100%' width='100%'
large large
color='primary' color='blue darken-2'
dark dark
@click='login' @click='login'
:loading='isLoading' :loading='isLoading'
@ -105,17 +109,19 @@
flat flat
prepend-inner-icon='mdi-clipboard-account' prepend-inner-icon='mdi-clipboard-account'
background-color='white' background-color='white'
color='blue darken-2'
hide-details hide-details
ref='iptForgotPwdEmail' ref='iptForgotPwdEmail'
v-model='username' v-model='username'
:placeholder='$t(`auth:fields.email`)' :placeholder='$t(`auth:fields.email`)'
type='email' type='email'
autocomplete='email' autocomplete='email'
light
) )
v-btn.mt-2.text-none( v-btn.mt-2.text-none(
width='100%' width='100%'
large large
color='primary' color='blue darken-2'
dark dark
@click='forgotPasswordSubmit' @click='forgotPasswordSubmit'
:loading='isLoading' :loading='isLoading'
@ -141,11 +147,13 @@
flat flat
prepend-inner-icon='mdi-form-textbox-password' prepend-inner-icon='mdi-form-textbox-password'
background-color='white' background-color='white'
color='blue darken-2'
hide-details hide-details
ref='iptNewPassword' ref='iptNewPassword'
v-model='newPassword' v-model='newPassword'
:placeholder='$t(`auth:changePwd.newPasswordPlaceholder`)' :placeholder='$t(`auth:changePwd.newPasswordPlaceholder`)'
autocomplete='new-password' autocomplete='new-password'
light
) )
password-strength(slot='progress', v-model='newPassword') password-strength(slot='progress', v-model='newPassword')
v-text-field.mt-2( v-text-field.mt-2(
@ -154,16 +162,18 @@
flat flat
prepend-inner-icon='mdi-form-textbox-password' prepend-inner-icon='mdi-form-textbox-password'
background-color='white' background-color='white'
color='blue darken-2'
hide-details hide-details
v-model='newPasswordVerify' v-model='newPasswordVerify'
:placeholder='$t(`auth:changePwd.newPasswordVerifyPlaceholder`)' :placeholder='$t(`auth:changePwd.newPasswordVerifyPlaceholder`)'
autocomplete='new-password' autocomplete='new-password'
@keyup.enter='changePassword' @keyup.enter='changePassword'
light
) )
v-btn.mt-2.text-none( v-btn.mt-2.text-none(
width='100%' width='100%'
large large
color='primary' color='blue darken-2'
dark dark
@click='changePassword' @click='changePassword'
:loading='isLoading' :loading='isLoading'
@ -174,24 +184,26 @@
//------------------------------------------------- //-------------------------------------------------
v-dialog(v-model='isTFAShown', max-width='500', persistent) v-dialog(v-model='isTFAShown', max-width='500', persistent)
v-card v-card
.login-tfa.text-center.pa-5 .login-tfa.text-center.pa-5.grey--text.text--darken-3
img(src='_assets/svg/icon-pin-pad.svg') img(src='_assets/svg/icon-pin-pad.svg')
.subtitle-2 Enter the security code generated from your trusted device: .subtitle-2 Enter the security code generated from your trusted device:
v-text-field.login-tfa-field.mt-2( v-text-field.login-tfa-field.mt-2(
solo solo
flat flat
background-color='white' background-color='white'
color='blue darken-2'
hide-details hide-details
ref='iptTFA' ref='iptTFA'
v-model='securityCode' v-model='securityCode'
:placeholder='$t("auth:tfa.placeholder")' :placeholder='$t("auth:tfa.placeholder")'
autocomplete='one-time-code' autocomplete='one-time-code'
@keyup.enter='verifySecurityCode(false)' @keyup.enter='verifySecurityCode(false)'
light
) )
v-btn.mt-2.text-none( v-btn.mt-2.text-none(
width='100%' width='100%'
large large
color='primary' color='blue darken-2'
dark dark
@click='verifySecurityCode(false)' @click='verifySecurityCode(false)'
:loading='isLoading' :loading='isLoading'
@ -202,7 +214,7 @@
//------------------------------------------------- //-------------------------------------------------
v-dialog(v-model='isTFASetupShown', max-width='600', persistent) v-dialog(v-model='isTFASetupShown', max-width='600', persistent)
v-card v-card
.login-tfa.text-center.pa-5 .login-tfa.text-center.pa-5.grey--text.text--darken-3
.subtitle-1.primary--text Your administrator has required Two-Factor Authentication (2FA) to be enabled on your account. .subtitle-1.primary--text Your administrator has required Two-Factor Authentication (2FA) to be enabled on your account.
v-divider.my-5 v-divider.my-5
.subtitle-2 1) Scan the QR code below from your mobile 2FA application: .subtitle-2 1) Scan the QR code below from your mobile 2FA application:
@ -213,17 +225,19 @@
solo solo
flat flat
background-color='white' background-color='white'
color='blue darken-2'
hide-details hide-details
ref='iptTFASetup' ref='iptTFASetup'
v-model='securityCode' v-model='securityCode'
:placeholder='$t("auth:tfa.placeholder")' :placeholder='$t("auth:tfa.placeholder")'
autocomplete='one-time-code' autocomplete='one-time-code'
@keyup.enter='verifySecurityCode(true)' @keyup.enter='verifySecurityCode(true)'
light
) )
v-btn.mt-2.text-none( v-btn.mt-2.text-none(
width='100%' width='100%'
large large
color='primary' color='blue darken-2'
dark dark
@click='verifySecurityCode(true)' @click='verifySecurityCode(true)'
:loading='isLoading' :loading='isLoading'
@ -737,6 +751,7 @@ export default {
padding: 12px; padding: 12px;
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: mc('grey', '900');
} }
&-list { &-list {