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='fadeUp')
v-card.elevation-5(v-show='isShown', light)
v-toolbar(color='primary', 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.primary--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='teal'
dark
@click='login'
rounded
:loading='isLoading'
) {{ $t('auth:actions.login') }}
v-btn(
width='100%'
max-width='250px'
v-else-if='screen === "tfa"'
large
color='teal'
dark
@click='verifySecurityCode'
rounded
:loading='isLoading'
) {{ $t('auth:tfa.verifyToken') }}
v-btn(
width='100%'
max-width='250px'
v-else-if='screen === "changePwd"'
large
color='teal'
dark
@click='changePassword'
rounded
:loading='isLoading'
) {{ $t('auth:changePwd.proceed') }}
v-btn(
width='100%'
max-width='250px'
v-else-if='screen === "forgot"'
large
color='teal'
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
template(v-if='screen === "login" && isSocialShown')
v-divider
v-card-text.grey.lighten-4.text-center
.pb-2.body-2.text-xs-center.grey--text.text--darken-2 {{ $t('auth:orLoginUsingStrategy') }}
v-btn.mx-1.social-login-btn(
v-for='strategy in strategies', :key='strategy.key'
large
@click='selectStrategy(strategy)'
dark
:color='strategy.color'
:depressed='strategy.key === selectedStrategy.key'
)
v-avatar.mr-3(tile, :class='strategy.color', size='24', v-html='strategy.icon')
span(style='text-transform: none;') {{ strategy.title }}
template(v-if='screen === "login" && selectedStrategy.selfRegistration')
v-divider
v-card-actions.py-3(:class='isSocialShown ? "" : "grey lighten-4"')
v-spacer
i18next.caption(path='auth:switchToRegister.text', tag='div')
a.caption(href='/register', place='link') {{ $t('auth:switchToRegister.link') }}
v-spacer
loader(v-model='isLoading', :color='loaderColor', :title='loaderTitle', :subtitle='$t(`auth:pleaseWait`)')
nav-footer(color='grey darken-4')
notify