v-app
.login
.login-sd
.d-flex
.login-logo
v-avatar(tile, size='34')
v-img(:src='logoUrl')
.login-title
.text-h6 {{ siteTitle }}
//-------------------------------------------------
//- PROVIDERS LIST
//-------------------------------------------------
template(v-if='screen === `login` && strategies.length > 1')
.login-subtitle.mt-5
.text-subtitle-1 Select Authentication Provider
.login-list
v-list.elevation-1.radius-7(nav)
v-list-item-group(v-model='selectedStrategyKey')
v-list-item(
v-for='(stg, idx) of strategies'
:key='stg.key'
:value='stg.key'
:color='stg.strategy.color'
)
v-avatar.mr-3(tile, size='24', v-html='stg.strategy.icon')
span.text-none {{stg.displayName}}
//-------------------------------------------------
//- LOGIN FORM
//-------------------------------------------------
template(v-if='screen === `login` && selectedStrategy.strategy.useForm')
.login-subtitle
.text-subtitle-1 Enter your credentials
.login-form
v-text-field(
solo
flat
prepend-inner-icon='mdi-clipboard-account'
background-color='white'
hide-details
ref='iptEmail'
v-model='username'
:placeholder='$t("auth:fields.emailUser")'
)
v-text-field.mt-2(
solo
flat
prepend-inner-icon='mdi-form-textbox-password'
background-color='white'
hide-details
ref='iptPassword'
v-model='password'
:append-icon='hidePassword ? "mdi-eye-off" : "mdi-eye"'
@click:append='() => (hidePassword = !hidePassword)'
:type='hidePassword ? "password" : "text"'
:placeholder='$t("auth:fields.password")'
@keyup.enter='login'
)
v-btn.mt-2.text-none(
width='100%'
v-if='screen === "login"'
large
color='primary'
dark
@click='login'
:loading='isLoading'
) {{ $t('auth:actions.login') }}
.text-center.mt-5(v-if='screen === "login"')
v-btn.text-none(
text
rounded
color='grey darken-3'
@click.stop.prevent='forgotPassword'
href='#forgot'
): .caption {{ $t('auth:forgotPasswordLink') }}
v-btn.text-none(
v-if='screen === "login" && selectedStrategyKey === `local` && selectedStrategy.selfRegistration'
color='indigo darken-2'
text
rounded
href='/register'
): .caption {{ $t('auth:switchToRegister.link') }}
//- .login-main
//- v-container(grid-list-lg, fluid)
//- v-row(no-gutters)
//- v-col(cols='12', xl='4')
//- transition(name='fadeUp')
//- v-card.elevation-5(v-show='isShown', light)
//- v-toolbar(color='indigo', flat, dense, dark)
//- v-spacer
//- .subheading(v-if='screen === "tfa"') {{ $t('auth:tfa.subtitle') }}
//- .subheading(v-if='screen === "changePwd"') {{ $t('auth:changePwd.subtitle') }}
//- .subheading(v-else-if='selectedStrategy.key !== "local"') {{ $t('auth:loginUsingStrategy', { strategy: selectedStrategy.title, interpolation: { escapeValue: false } }) }}
//- .subheading(v-else) {{ $t('auth:loginRequired') }}
//- v-spacer
//- v-card-text.text-center
//- h1.display-1.indigo--text.py-2 {{ siteTitle }}
//- template(v-if='screen === "login"')
//- v-text-field.mt-3(
//- solo
//- flat
//- prepend-icon='mdi-clipboard-account'
//- background-color='grey lighten-4'
//- hide-details
//- ref='iptEmail'
//- v-model='username'
//- :placeholder='$t("auth:fields.emailUser")'
//- )
//- v-text-field.mt-2(
//- solo
//- flat
//- prepend-icon='mdi-textbox-password'
//- background-color='grey lighten-4'
//- hide-details
//- ref='iptPassword'
//- v-model='password'
//- :append-icon='hidePassword ? "mdi-eye-off" : "mdi-eye"'
//- @click:append='() => (hidePassword = !hidePassword)'
//- :type='hidePassword ? "password" : "text"'
//- :placeholder='$t("auth:fields.password")'
//- @keyup.enter='login'
//- )
//- template(v-else-if='screen === "tfa"')
//- .body-2 Enter the security code generated from your trusted device:
//- v-text-field.centered.mt-2(
//- solo
//- flat
//- background-color='grey lighten-4'
//- hide-details
//- ref='iptTFA'
//- v-model='securityCode'
//- :placeholder='$t("auth:tfa.placeholder")'
//- @keyup.enter='verifySecurityCode'
//- )
//- template(v-else-if='screen === "changePwd"')
//- .body-2 {{$t('auth:changePwd.instructions')}}
//- v-text-field.mt-2(
//- type='password'
//- solo
//- flat
//- background-color='grey lighten-4'
//- hide-details
//- ref='iptNewPassword'
//- v-model='newPassword'
//- :placeholder='$t(`auth:changePwd.newPasswordPlaceholder`)'
//- )
//- v-text-field.mt-2(
//- type='password'
//- solo
//- flat
//- background-color='grey lighten-4'
//- hide-details
//- v-model='newPasswordVerify'
//- :placeholder='$t(`auth:changePwd.newPasswordVerifyPlaceholder`)'
//- @keyup.enter='changePassword'
//- )
//- template(v-else-if='screen === "forgot"')
//- .body-2 {{ $t('auth:forgotPasswordSubtitle') }}
//- v-text-field.mt-3(
//- solo
//- flat
//- prepend-icon='mdi-email'
//- background-color='grey lighten-4'
//- hide-details
//- ref='iptEmailForgot'
//- v-model='username'
//- :placeholder='$t("auth:fields.email")'
//- )
//- v-card-actions.pb-4
//- v-spacer
//- v-btn(
//- width='100%'
//- max-width='250px'
//- v-if='screen === "login"'
//- large
//- color='primary'
//- dark
//- @click='login'
//- rounded
//- :loading='isLoading'
//- ) {{ $t('auth:actions.login') }}
//- 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`)')
notify