87 lines
2 KiB
Mako
87 lines
2 KiB
Mako
## -*- coding: utf-8; -*-
|
|
<%inherit file="/form.mako" />
|
|
<%namespace name="base_meta" file="/base_meta.mako" />
|
|
|
|
<%def name="title()">Login</%def>
|
|
|
|
<%def name="extra_styles()">
|
|
${parent.extra_styles()}
|
|
<style type="text/css">
|
|
.logo img {
|
|
display: block;
|
|
margin: 3rem auto;
|
|
max-height: 350px;
|
|
max-width: 800px;
|
|
}
|
|
|
|
/* must force a particular label with, in order to make sure */
|
|
/* the username and password inputs are the same size */
|
|
.field.is-horizontal .field-label .label {
|
|
text-align: left;
|
|
width: 6rem;
|
|
}
|
|
|
|
.buttons {
|
|
justify-content: right;
|
|
}
|
|
</style>
|
|
</%def>
|
|
|
|
<%def name="logo()">
|
|
${h.image(image_url, "{} logo".format(capture(base_meta.app_title)))}
|
|
</%def>
|
|
|
|
<%def name="login_form()">
|
|
<div class="form">
|
|
${form.render_deform(form_kwargs={'data-ajax': 'false'})|n}
|
|
</div>
|
|
</%def>
|
|
|
|
<%def name="render_this_page()">
|
|
${self.page_content()}
|
|
</%def>
|
|
|
|
<%def name="page_content()">
|
|
<div class="logo">
|
|
${self.logo()}
|
|
</div>
|
|
|
|
<div class="columns is-centered">
|
|
<div class="column is-narrow">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<tailbone-form></tailbone-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</%def>
|
|
|
|
<%def name="modify_this_page_vars()">
|
|
<script type="text/javascript">
|
|
|
|
${form.component_studly}Data.usernameInput = null
|
|
|
|
${form.component_studly}.mounted = function() {
|
|
this.$refs.username.focus()
|
|
this.usernameInput = this.$refs.username.$el.querySelector('input')
|
|
this.usernameInput.addEventListener('keydown', this.usernameKeydown)
|
|
}
|
|
|
|
${form.component_studly}.beforeDestroy = function() {
|
|
this.usernameInput.removeEventListener('keydown', this.usernameKeydown)
|
|
}
|
|
|
|
${form.component_studly}.methods.usernameKeydown = function(event) {
|
|
if (event.which == 13) {
|
|
event.preventDefault()
|
|
this.$refs.password.focus()
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</%def>
|
|
|
|
|
|
${parent.body()}
|
|
|