phil/ezidam
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

disable button and delay form submit: refactor in tera macro

Browse source
This commit is contained in:
Philippe Loctaux 2023-05-01 11:43:17 +02:00
parent f9ce7cd775
commit e70d035c86
2 changed files with 28 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

28
crates/ezidam/templates/pages/oauth/authorize.html.tera
View file

@ -1,6 +1,7 @@
{% extends "base" %} {% extends "base" %}
{% import "utils/user" as user %} {% import "utils/user" as user %}
{% import "utils/form" as form %}
{% block page %} {% block page %}
<body class=" d-flex flex-column"> <body class=" d-flex flex-column">
@ -38,14 +39,16 @@
</div> </div>
{% else %} {% else %}
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Login</label> <label class="form-label" for="login">Login</label>
<input name="login" type="text" class="form-control" placeholder="Email or username" <input id="login" name="login" type="text" class="form-control"
placeholder="Email or username"
autocomplete="off"> autocomplete="off">
</div> </div>
<div class="mb-2"> <div class="mb-2">
<label class="form-label">Password</label> <label class="form-label" for="password">Password</label>
<div class="input-group input-group-flat"> <div class="input-group input-group-flat">
<input name="password" type="password" class="form-control" placeholder="Your password" <input id="password" name="password" type="password" class="form-control"
placeholder="Your password"
autocomplete="off"> autocomplete="off">
</div> </div>
</div> </div>
@ -72,22 +75,7 @@
<script src="/js/tabler.min.js" defer></script> <script src="/js/tabler.min.js" defer></script>
<script src="/js/demo.min.js" defer></script> <script src="/js/demo.min.js" defer></script>
<script> {{ form::disable_button_delay_submit(form_id="authorize_form") }}
/**
* @param {string} formId
*/
function disableSubmitButtonForm(formId) {
const form = document.getElementById(formId);
form.addEventListener("submit", (event => {
event.preventDefault();
event.submitter.classList.add("btn-loading");
setTimeout(() => form.submit(), 800)
}));
}
disableSubmitButtonForm("authorize_form");
</script>
</body> </body>
{% endblock page %} {% endblock page %}

20
crates/ezidam/templates/utils/form.html.tera Normal file
View file

@ -0,0 +1,20 @@
{% macro disable_button_delay_submit(form_id) %}
<script>
/**
* @param {string} formId
*/
function disableSubmitButtonForm(formId) {
const form = document.getElementById(formId);
form.addEventListener("submit", (event => {
event.preventDefault();
event.submitter.classList.add("btn-loading");
// Delay form submission by 800ms
setTimeout(() => form.submit(), 800)
}));
}
disableSubmitButtonForm("{{ form_id }}");
</script>
{% endmacro disable_button_delay_submit %}