v-app
.login
v-container(grid-list-lg)
v-layout(row, wrap)
v-flex(
xs12
offset-sm1, sm10
offset-md2, md8
offset-lg3, lg6
offset-xl4, xl4
)
transition(name='zoom')
v-card.elevation-5.md2(v-show='isShown')
v-toolbar(color='primary', flat, dense, dark)
v-spacer
.subheading(v-if='screen === "tfa"') {{ $t('auth:tfa.subtitle') }}
.subheading(v-else-if='selectedStrategy.key !== "local"') Login using {{ selectedStrategy.title }}
.subheading(v-else) {{ $t('auth:loginRequired') }}
v-spacer
v-card-text.text-xs-center
h1.display-1.primary--text.py-2 {{ siteTitle }}
template(v-if='screen === "login"')
v-text-field.md2.mt-3(
solo
flat
prepend-icon='email'
background-color='grey lighten-4'
hide-details
ref='iptEmail'
v-model='username'
:placeholder='$t("auth:fields.emailUser")'
)
v-text-field.md2.mt-2(
solo
flat
prepend-icon='vpn_key'
background-color='grey lighten-4'
hide-details
ref='iptPassword'
v-model='password'
:append-icon='hidePassword ? "visibility" : "visibility_off"'
@click:append='() => (hidePassword = !hidePassword)'
:type='hidePassword ? "password" : "text"'
:placeholder='$t("auth:fields.password")'
@keyup.enter='login'
)
template(v-if='screen === "tfa"')
.body-2 Enter the security code generated from your trusted device:
v-text-field.md2.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'
)
v-card-actions.pb-4
v-spacer
v-btn.md2(
v-if='screen === "login"'
block
large
color='primary'
@click='login'
round
:loading='isLoading'
) {{ $t('auth:actions.login') }}
v-btn.md2(
v-if='screen === "tfa"'
block
large
color='primary'
@click='verifySecurityCode'
round
:loading='isLoading'
) {{ $t('auth:tfa.verifyToken') }}
v-spacer
v-card-actions.pb-3(v-if='selectedStrategy.key === "local"')
v-spacer
a.caption(href='') Forgot your password?
v-spacer
template(v-if='isSocialShown')
v-divider
v-card-text.grey.lighten-4.text-xs-center
.pb-2.body-2.text-xs-center.grey--text.text--darken-2 or login using...
v-tooltip(top, v-for='strategy in strategies', :key='strategy.key')
.social-login-btn.mr-2(
slot='activator'
v-ripple
v-html='strategy.icon'
:class='strategy.color + " elevation-" + (strategy.key === selectedStrategy.key ? "0" : "4")'
@click='selectStrategy(strategy)'
)
span {{ strategy.title }}
template(v-if='selectedStrategy.selfRegistration')
v-divider
v-card-actions.py-3(:class='isSocialShown ? "" : "grey lighten-4"')
v-spacer
.caption Don't have an account yet? #[a.caption(href='') Create an account]
v-spacer
nav-footer(color='grey darken-4')