v-app
.register
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.md2(v-show='isShown')
v-toolbar(color='indigo', flat, dense, dark)
v-spacer
.subheading {{ $t('auth:registerTitle') }}
v-spacer
v-card-text.text-center
h1.display-1.indigo--text.py-2 {{ siteTitle }}
.body-2 {{ $t('auth:registerSubTitle') }}
v-text-field.md2.mt-3(
solo
flat
prepend-icon='mdi-email'
background-color='grey lighten-4'
hide-details
ref='iptEmail'
v-model='email'
:placeholder='$t("auth:fields.email")'
color='indigo'
)
v-text-field.md2.mt-2(
solo
flat
prepend-icon='mdi-textbox-password'
background-color='grey lighten-4'
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")'
color='indigo'
loading
counter='255'
)
password-strength(slot='progress', v-model='password')
v-text-field.md2.mt-2(
solo
flat
prepend-icon='mdi-textbox-password'
background-color='grey lighten-4'
hide-details
ref='iptVerifyPassword'
v-model='verifyPassword'
@click:append='() => (hidePassword = !hidePassword)'
type='password'
:placeholder='$t("auth:fields.verifyPassword")'
color='indigo'
)
v-text-field.md2.mt-2(
solo
flat
prepend-icon='mdi-account'
background-color='grey lighten-4'
ref='iptName'
v-model='name'
:placeholder='$t("auth:fields.name")'
@keyup.enter='register'
color='indigo'
counter='255'
)
v-card-actions.pb-4
v-spacer
v-btn.md2(
width='100%'
max-width='250px'
large
dark
color='indigo'
@click='register'
rounded
:loading='isLoading'
) {{ $t('auth:actions.register') }}
v-spacer
v-divider
v-card-actions.py-3.grey.lighten-4
v-spacer
i18next.caption(path='auth:switchToLogin.text', tag='div')
a.caption(href='/login', place='link') {{ $t('auth:switchToLogin.link') }}
v-spacer
loader(v-model='isLoading', :mode='loaderMode', :icon='loaderIcon', :color='loaderColor', :title='loaderTitle', :subtitle='loaderSubtitle')
nav-footer(color='grey darken-4', dark-color='grey darken-4')
notify