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

feat: new login complete UI (wip)

Browse Source
This commit is contained in:
NGPixel
2020-07-19 21:42:20 -04:00
parent 4cd6fe8a56
commit e9044698c9
2 changed files with 122 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
client/components/login.vue
View File

@@ -58,14 +58,13 @@
) )
v-btn.mt-2.text-none( v-btn.mt-2.text-none(
width='100%' width='100%'
v-if='screen === "login"'
large large
color='primary' color='primary'
dark dark
@click='login' @click='login'
:loading='isLoading' :loading='isLoading'
) {{ $t('auth:actions.login') }} ) {{ $t('auth:actions.login') }}
.text-center.mt-5(v-if='screen === "login"') .text-center.mt-5
v-btn.text-none( v-btn.text-none(
text text
rounded rounded
@@ -74,153 +73,111 @@
href='#forgot' href='#forgot'
): .caption {{ $t('auth:forgotPasswordLink') }} ): .caption {{ $t('auth:forgotPasswordLink') }}
v-btn.text-none( v-btn.text-none(
v-if='screen === "login" && selectedStrategyKey === `local` && selectedStrategy.selfRegistration' v-if='selectedStrategyKey === `local` && selectedStrategy.selfRegistration'
color='indigo darken-2' color='indigo darken-2'
text text
rounded rounded
href='/register' href='/register'
): .caption {{ $t('auth:switchToRegister.link') }} ): .caption {{ $t('auth:switchToRegister.link') }}
//- .login-main //-------------------------------------------------
//- v-container(grid-list-lg, fluid) //- FORGOT PASSWORD FORM
//- v-row(no-gutters) //-------------------------------------------------
//- v-col(cols='12', xl='4') template(v-if='screen === `forgot`')
//- transition(name='fadeUp') .login-subtitle
//- v-card.elevation-5(v-show='isShown', light) .text-subtitle-1 Forgot your password
//- v-toolbar(color='indigo', flat, dense, dark) .login-info {{ $t('auth:forgotPasswordSubtitle') }}
//- v-spacer .login-form
//- .subheading(v-if='screen === "tfa"') {{ $t('auth:tfa.subtitle') }} v-text-field(
//- .subheading(v-if='screen === "changePwd"') {{ $t('auth:changePwd.subtitle') }} solo
//- .subheading(v-else-if='selectedStrategy.key !== "local"') {{ $t('auth:loginUsingStrategy', { strategy: selectedStrategy.title, interpolation: { escapeValue: false } }) }} flat
//- .subheading(v-else) {{ $t('auth:loginRequired') }} prepend-inner-icon='mdi-clipboard-account'
//- v-spacer background-color='white'
//- v-card-text.text-center hide-details
//- h1.display-1.indigo--text.py-2 {{ siteTitle }} ref='iptForgotPwdEmail'
//- template(v-if='screen === "login"') v-model='username'
//- v-text-field.mt-3( :placeholder='$t(selectedStrategy.strategy.usernameLabel)'
//- solo )
//- flat v-btn.mt-2.text-none(
//- prepend-icon='mdi-clipboard-account' width='100%'
//- background-color='grey lighten-4' large
//- hide-details color='primary'
//- ref='iptEmail' dark
//- v-model='username' @click='forgotPasswordSubmit'
//- :placeholder='$t("auth:fields.emailUser")' :loading='isLoading'
//- ) ) {{ $t('auth:sendResetPassword') }}
//- v-text-field.mt-2( .text-center.mt-5
//- solo v-btn.text-none(
//- flat text
//- prepend-icon='mdi-textbox-password' rounded
//- background-color='grey lighten-4' color='grey darken-3'
//- hide-details @click.stop.prevent='screen = `login`'
//- ref='iptPassword' href='#forgot'
//- v-model='password' ): .caption {{ $t('auth:forgotPasswordCancel') }}
//- :append-icon='hidePassword ? "mdi-eye-off" : "mdi-eye"' //-------------------------------------------------
//- @click:append='() => (hidePassword = !hidePassword)' //- CHANGE PASSWORD FORM
//- :type='hidePassword ? "password" : "text"' //-------------------------------------------------
//- :placeholder='$t("auth:fields.password")' template(v-if='screen === `changePwd`')
//- @keyup.enter='login' .login-subtitle
//- ) .text-subtitle-1 {{ $t('auth:changePwd.subtitle') }}
//- template(v-else-if='screen === "tfa"') .login-form
//- .body-2 Enter the security code generated from your trusted device: v-text-field.mt-2(
//- v-text-field.centered.mt-2( type='password'
//- solo solo
//- flat flat
//- background-color='grey lighten-4' prepend-inner-icon='mdi-form-textbox-password'
//- hide-details background-color='white'
//- ref='iptTFA' hide-details
//- v-model='securityCode' ref='iptNewPassword'
//- :placeholder='$t("auth:tfa.placeholder")' v-model='newPassword'
//- @keyup.enter='verifySecurityCode' :placeholder='$t(`auth:changePwd.newPasswordPlaceholder`)'
//- ) )
//- template(v-else-if='screen === "changePwd"') password-strength(slot='progress', v-model='newPassword')
//- .body-2 {{$t('auth:changePwd.instructions')}} v-text-field.mt-2(
//- v-text-field.mt-2( type='password'
//- type='password' solo
//- solo flat
//- flat prepend-inner-icon='mdi-form-textbox-password'
//- background-color='grey lighten-4' background-color='white'
//- hide-details hide-details
//- ref='iptNewPassword' v-model='newPasswordVerify'
//- v-model='newPassword' :placeholder='$t(`auth:changePwd.newPasswordVerifyPlaceholder`)'
//- :placeholder='$t(`auth:changePwd.newPasswordPlaceholder`)' @keyup.enter='changePassword'
//- ) )
//- v-text-field.mt-2( v-btn.mt-2.text-none(
//- type='password' width='100%'
//- solo large
//- flat color='primary'
//- background-color='grey lighten-4' dark
//- hide-details @click='changePassword'
//- v-model='newPasswordVerify' :loading='isLoading'
//- :placeholder='$t(`auth:changePwd.newPasswordVerifyPlaceholder`)' ) {{ $t('auth:changePwd.proceed') }}
//- @keyup.enter='changePassword'
//- ) //-------------------------------------------------
//- template(v-else-if='screen === "forgot"') //- TFA FORM
//- .body-2 {{ $t('auth:forgotPasswordSubtitle') }} //-------------------------------------------------
//- v-text-field.mt-3( v-dialog(v-model='isTFAShown', max-width='500', persistent)
//- solo v-card
//- flat .login-tfa.text-center.pa-5
//- prepend-icon='mdi-email' img(src='_assets/svg/icon-pin-pad.svg')
//- background-color='grey lighten-4' .subtitle-2 Enter the security code generated from your trusted device:
//- hide-details v-text-field.login-tfa-field.mt-2(
//- ref='iptEmailForgot' solo
//- v-model='username' flat
//- :placeholder='$t("auth:fields.email")' background-color='white'
//- ) hide-details
//- v-card-actions.pb-4 ref='iptTFA'
//- v-spacer v-model='securityCode'
//- v-btn( :placeholder='$t("auth:tfa.placeholder")'
//- width='100%' @keyup.enter='verifySecurityCode'
//- max-width='250px' )
//- v-if='screen === "login"' v-btn.mt-2.text-none(
//- large width='100%'
//- color='primary' large
//- dark color='primary'
//- @click='login' dark
//- rounded @click='verifySecurityCode'
//- :loading='isLoading' :loading='isLoading'
//- ) {{ $t('auth:actions.login') }} ) {{ $t('auth:tfa.verifyToken') }}
//- v-btn(
//- width='100%'
//- max-width='250px'
//- v-else-if='screen === "tfa"'
//- large
//- color='primary'
//- dark
//- @click='verifySecurityCode'
//- rounded
//- :loading='isLoading'
//- ) {{ $t('auth:tfa.verifyToken') }}
//- v-btn(
//- width='100%'
//- max-width='250px'
//- v-else-if='screen === "changePwd"'
//- large
//- color='primary'
//- dark
//- @click='changePassword'
//- rounded
//- :loading='isLoading'
//- ) {{ $t('auth:changePwd.proceed') }}
//- v-btn(
//- width='100%'
//- max-width='250px'
//- v-else-if='screen === "forgot"'
//- large
//- color='primary'
//- dark
//- @click='forgotPasswordSubmit'
//- rounded
//- :loading='isLoading'
//- ) {{ $t('auth:sendResetPassword') }}
//- v-spacer
//- v-card-actions.pb-3(v-if='screen === "login" && selectedStrategy.key === "local"')
//- v-spacer
//- a.caption(@click.stop.prevent='forgotPassword', href='#forgot') {{ $t('auth:forgotPasswordLink') }}
//- v-spacer
//- v-card-actions.pb-3(v-else-if='screen === "forgot"')
//- v-spacer
//- a.caption(@click.stop.prevent='screen = `login`', href='#cancelforgot') {{ $t('auth:forgotPasswordCancel') }}
//- v-spacer
loader(v-model='isLoading', :color='loaderColor', :title='loaderTitle', :subtitle='$t(`auth:pleaseWait`)') loader(v-model='isLoading', :color='loaderColor', :title='loaderTitle', :subtitle='$t(`auth:pleaseWait`)')
notify notify
@@ -265,7 +222,8 @@ export default {
loaderTitle: 'Working...', loaderTitle: 'Working...',
isShown: false, isShown: false,
newPassword: '', newPassword: '',
newPasswordVerify: '' newPasswordVerify: '',
isTFAShown: false
} }
}, },
computed: { computed: {
@@ -307,9 +265,6 @@ export default {
}, },
mounted () { mounted () {
this.isShown = true this.isShown = true
this.$nextTick(() => {
// this.$refs.iptEmail.focus()
})
}, },
methods: { methods: {
/** /**
@@ -614,6 +569,15 @@ export default {
border-bottom: 1px solid rgba(0,0,0,.3); border-bottom: 1px solid rgba(0,0,0,.3);
} }
&-info {
border-top: 1px solid rgba(255,255,255,.85);
background-color: rgba(255,255,255,.15);
border-bottom: 1px solid rgba(0,0,0,.15);
padding: 12px;
font-size: 13px;
text-align: center;
}
&-list { &-list {
border-top: 1px solid rgba(255,255,255,.85); border-top: 1px solid rgba(255,255,255,.85);
padding: 12px; padding: 12px;
@@ -628,5 +592,14 @@ export default {
flex: 1 0 100vw; flex: 1 0 100vw;
height: 100vh; height: 100vh;
} }
&-tfa {
background-color: #EEE;
border: 7px solid #FFF;
&-field input {
text-align: center;
}
}
} }
</style> </style>

1
client/static/svg/icon-pin-pad.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="96px" height="96px"><path fill="#616161" d="M28.667,29H8.333C7.045,29,6,27.955,6,26.667V6.333C6,5.045,7.045,4,8.333,4h20.333C29.955,4,31,5.045,31,6.333v20.333C31,27.955,29.955,29,28.667,29z"/><path fill="#424242" d="M25,29V13c-2.2,0-4,1.8-4,4v12H25z"/><path fill="#e0e0e0" d="M13 12h-3c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3C14 11.55 13.55 12 13 12zM20 12h-3c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3C21 11.55 20.55 12 20 12zM27 12h-3c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3C28 11.55 27.55 12 27 12zM13 19h-3c-.55 0-1-.45-1-1v-3c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3C14 18.55 13.55 19 13 19zM20 19h-3c-.55 0-1-.45-1-1v-3c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3C21 18.55 20.55 19 20 19zM13 26h-3c-.55 0-1-.45-1-1v-3c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3C14 25.55 13.55 26 13 26zM20 26h-3c-.55 0-1-.45-1-1v-3c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3C21 25.55 20.55 26 20 26z"/><path fill="#ffcc80" d="M37,28v-2H26l-3,2c0,0-2.268,1.422-3.286,2.67c-0.906,1.021-1.021,2.303,0,3.666C19.714,34.336,24,44,29,44h7.128c3.743,0,6.862-3.035,6.862-6.775c0,0,0.01-4.811,0.01-9.225H37z"/><path fill="#ffcc80" d="M23 31.75c0 1.336 1.127 2.43 2.5 2.43 1.378 0 2.5-1.094 2.5-2.43l-.01-16.324c0-1.332-1.112-2.426-2.49-2.426-1.373 0-2.5 1.094-2.5 2.426V31.75zM28 33.93c0 1.336 1.127 2.43 2.5 2.43 1.378 0 2.5-1.094 2.5-2.43v-8.324c0-1.332-1.122-2.426-2.5-2.426-1.373 0-2.5 1.094-2.5 2.426V33.93zM33 33.93c0 1.336 1.127 2.43 2.5 2.43 1.378 0 2.5-1.094 2.5-2.43v-8.324c0-1.332-1.122-2.426-2.5-2.426-1.373 0-2.5 1.094-2.5 2.426V33.93z"/><path fill="#ffcc80" d="M37.99,34.93c0,1.336,1.127,2.43,2.5,2.43c1.378,0,2.5-1.094,2.5-2.43v-8.324c0-1.332-1.122-2.426-2.5-2.426c-1.373,0-2.5,1.094-2.5,2.426V34.93z"/><path fill="#ffebee" d="M24,15.578c0.01-0.781,0.685-1.408,1.516-1.398c0.827,0.008,1.492,0.65,1.484,1.428C26.988,16.391,23.991,16.359,24,15.578"/><path fill="#f2a25a" d="M20.976,29.463C21.963,28.654,23,28,23,28v6.18L20.976,29.463z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB