[FIX] website: new class to disable button after first click

Before this commit, if you had a simple link (just a href, not handled
in JS), you couldn't simply make it clickable only once.
This could be a problem in some cases. (eg: a btn creating a record, it would
create as many record as many times you clicked on it)
The same behavior could occur for link/button redirecting to a route creating a
record. There is a window of time between the click on the btn and the moment
the page is getting redirected.
You have time to click  multiple time on it and it would call the URL multiple
time.

Now, there is a class 'js_disable_on_click' that will be handled in
website_root.js and will disabled the button after the first click.

The fix was originally aimed to fix multiple click on "Create Page" btn on 404
This commit is contained in:
rde
2017-10-18 10:58:53 +02:00
parent 3285a0384c
commit 4618cbd513
2 changed files with 12 additions and 1 deletions
@@ -39,6 +39,7 @@ var WebsiteRoot = BodyManager.extend({
'click .js_change_lang': '_onLangChangeClick',
'click .js_publish_management .js_publish_btn': '_onPublishBtnClick',
'submit .js_website_submit_form': '_onWebsiteFormSubmit',
'click .js_disable_on_click': '_onDisableOnClick',
}),
custom_events: _.extend({}, BodyManager.prototype.custom_events || {}, {
animation_start_demand: '_onAnimationStartDemand',
@@ -224,6 +225,16 @@ var WebsiteRoot = BodyManager.extend({
$btn.button('loading');
});
},
/**
* Called when the root is notified that the button should be
* disabled after the first click.
*
* @private
* @param {Event} ev
*/
_onDisableOnClick: function (ev) {
$(ev.currentTarget).addClass('disabled');
},
});
return {
+1 -1
View File
@@ -571,7 +571,7 @@
<div class="container">
<div class="well mt32">
<p>This page does not exists, but you can create it as you are administrator of this site.</p>
<a class="btn btn-primary" t-attf-href="/website/add/#{ path }#{ from_template and '?template=%s' % from_template }">Create Page</a>
<a class="btn btn-primary js_disable_on_click" t-attf-href="/website/add/#{ path }#{ from_template and '?template=%s' % from_template }">Create Page</a>
</div>
<div class="text-center text-muted">Edit the content below this line to adapt the default "page not found" page.</div>
</div>