consistent block structure for login form overrides

- `{name}_input` for overriding full input
- `{name}_input_attrs` for overriding input element attributes (not including id).
  Use `super()` to extend.
- For all `name` in username, password, otp
This commit is contained in:
Min RK
2025-02-19 13:07:45 +01:00
parent 0521270862
commit 681a7ae840

View File

@@ -35,82 +35,86 @@
{% if login_error %}<p class="login_error">{{ login_error }}</p>{% endif %} {% if login_error %}<p class="login_error">{{ login_error }}</p>{% endif %}
<input type="hidden" name="_xsrf" value="{{ xsrf }}" /> <input type="hidden" name="_xsrf" value="{{ xsrf }}" />
{# Allow full override of the "label" and "input" elements of the username and password fields. #} {# Allow full override of the "label" and "input" elements of the username and password fields. #}
{% block username_password_input_override %} {% block username_input %}
<label for="username_input">Username:</label> <label for="username_input">Username:</label>
<input id="username_input" <input id="username_input"
type="text" {% block username_input_attrs %}
autocapitalize="off" type="text"
autocorrect="off" autocapitalize="off"
autocomplete="username" autocorrect="off"
class="form-control" autocomplete="username"
name="username" class="form-control"
val="{{ username }}" name="username"
autofocus="autofocus" val="{{ username }}"
{# allow adding extra HTML Input Attributes (pattern, placeholder, title, minlenght, maxlenght, ...) #} autofocus="autofocus"
{% block username_input_attribs %}{% endblock username_input_attribs %} {% endblock username_input_attrs %} />
/> {% endblock username_input %}
<label for='password_input'>Password:</label> {% block password_input %}
<input type="password" <label for='password_input'>Password:</label>
class="form-control" <input id="password_input"
autocomplete="current-password" {% block password_input_attrs %}
name="password" type="password"
id="password_input" class="form-control"
{# allow adding extra HTML Input Attributes (pattern, placeholder, title, minlenght, maxlenght, ...) #} autocomplete="current-password"
{% block password_input_attribs %}{% endblock password_input_attribs %} name="password"
/> {% endblock password_input_attrs %} />
{% endblock username_password_input_override %} {% endblock password_input %}
{% if authenticator.request_otp %} {% if authenticator.request_otp %}
<label for='otp_input'>{{ authenticator.otp_prompt }}</label> {% block otp_input %}
<input class="form-control" <label for="otp_input">{{ authenticator.otp_prompt }}</label>
autocomplete="one-time-password" <input id="otp_input"
name="otp" {% block otp_input_attrs %}
id="otp_input" /> class="form-control"
{% endif %} autocomplete="one-time-password"
<div class="feedback-container"> name="otp"
<input id="login_submit" {% endblock otp_input_attrs %} />
type="submit" {% endblock otp_input %}
class='btn btn-jupyter form-control' {% endif %}
value='Sign in' <div class="feedback-container">
tabindex="3" /> <input id="login_submit"
<div class="feedback-widget hidden"> type="submit"
<i class="fa fa-spinner"></i> class='btn btn-jupyter form-control'
</div> value='Sign in'
</div> tabindex="3" />
{% block login_terms %} <div class="feedback-widget hidden">
{% if login_term_url %} <i class="fa fa-spinner"></i>
<div id="login_terms" class="login_terms">
<input type="checkbox"
id="login_terms_checkbox"
name="login_terms_checkbox"
required />
{% block login_terms_text %}
{# allow overriding the text #}
By logging into the platform you accept the <a href="{{ login_term_url }}">terms and conditions</a>.
{% endblock login_terms_text %}
</div>
{% endif %}
{% endblock login_terms %}
</div> </div>
</form> </div>
{% endif %} {% block login_terms %}
{% endblock login_container %} {% if login_term_url %}
</div> <div id="login_terms" class="login_terms">
{% endblock login %} <input type="checkbox"
{% endblock main %} id="login_terms_checkbox"
{% block script %} name="login_terms_checkbox"
{{ super() }} required />
<script> {% block login_terms_text %}
if (!window.isSecureContext) { {# allow overriding the text #}
// unhide http warning By logging into the platform you accept the <a href="{{ login_term_url }}">terms and conditions</a>.
var warning = document.getElementById('insecure-login-warning'); {% endblock login_terms_text %}
warning.className = warning.className.replace(/\bhidden\b/, ''); </div>
} {% endif %}
// setup onSubmit feedback {% endblock login_terms %}
$('form').submit((e) => { </div>
var form = $(e.target); </form>
form.find('.feedback-container>input').attr('disabled', true); {% endif %}
form.find('.feedback-container>*').toggleClass('hidden'); {% endblock login_container %}
form.find('.feedback-widget>*').toggleClass('fa-pulse'); </div>
}); {% endblock login %}
</script> {% endblock main %}
{% endblock script %} {% block script %}
{{ super() }}
<script>
if (!window.isSecureContext) {
// unhide http warning
var warning = document.getElementById('insecure-login-warning');
warning.className = warning.className.replace(/\bhidden\b/, '');
}
// setup onSubmit feedback
$('form').submit((e) => {
var form = $(e.target);
form.find('.feedback-container>input').attr('disabled', true);
form.find('.feedback-container>*').toggleClass('hidden');
form.find('.feedback-widget>*').toggleClass('fa-pulse');
});
</script>
{% endblock script %}