From a6f1fc7e7919e3848920235ff4fcff568cf25ce5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Warnon?= <awa@odoo.com>
Date: Mon, 26 Dec 2022 14:53:46 +0000
Subject: [PATCH] [FIX] survey: disable submit button during javascript loading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit disables the submit button on the survey main form during loading.

This is done to avoid the user clicking on the submit button *before* the
JavaScript code is loaded, which will by default trigger a page reload.

That situation can happen on slow connections, and as it reloads the page, the
user keeps clicking on "start" and it keeps reloading, creating frustration.

Task-3111551

closes odoo/odoo#108802

X-original-commit: cb12745329177812bd48ac5520044069ed6ecb9e
Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
---
 addons/survey/static/src/js/survey_form.js | 5 +++++
 addons/survey/views/survey_templates.xml   | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/addons/survey/static/src/js/survey_form.js b/addons/survey/static/src/js/survey_form.js
index 0f7d710fad8..564f8c0d0f1 100644
--- a/addons/survey/static/src/js/survey_form.js
+++ b/addons/survey/static/src/js/survey_form.js
@@ -78,6 +78,8 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend(SurveyPreloa
             self.$surveyProgress = $('.o_survey_progress_wrapper');
             self.$surveyNavigation = $('.o_survey_navigation_wrapper');
             self.$surveyNavigation.find('.o_survey_navigation_submit').on('click', self._onSubmit.bind(self));
+
+            self.$('button[type="submit"]').removeClass('disabled');
         });
     },
 
@@ -599,6 +601,9 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend(SurveyPreloa
             }
             this.$('.o_survey_form_content').fadeIn(this.fadeInOutDelay);
             $("html, body").animate({ scrollTop: 0 }, this.fadeInOutDelay);
+
+            this.$('button[type="submit"]').removeClass('disabled');
+
             self._focusOnFirstInput();
         } else if (result && result.fields && result.error === 'validation') {
             this.$('.o_survey_form_content').fadeIn(0);
diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml
index 10dea4e152f..c5221d2b33c 100644
--- a/addons/survey/views/survey_templates.xml
+++ b/addons/survey/views/survey_templates.xml
@@ -156,7 +156,7 @@
                             <span class="fw-bold text-danger" t-field="survey.time_limit" t-options="{'widget': 'duration', 'unit': 'minute'}"></span>
                         </p>
                     </div>
-                    <button type="submit" value="start" class="btn btn-primary btn-lg">
+                    <button type="submit" value="start" class="btn btn-primary btn-lg disabled">
                         <t t-if="survey.certification">
                             Start Certification
                         </t>
@@ -186,7 +186,7 @@
             </t>
 
             <div class="text-center mt16 mb256">
-                <button type="submit" value="finish" class="btn btn-primary">Submit</button>
+                <button type="submit" value="finish" class="btn btn-primary disabled">Submit</button>
                     <span class="fw-bold text-muted ms-2 d-none d-md-inline">
                         <span id="enter-tooltip">or press Enter</span>
                     </span>
@@ -204,7 +204,7 @@
 
             <div class="row">
                 <div class="col-12 text-center mt16">
-                    <button type="submit" t-att-value="'next' if not survey_last else 'finish'" class="btn btn-primary">
+                    <button type="submit" t-att-value="'next' if not survey_last else 'finish'" class="btn btn-primary disabled">
                         <t t-if="not survey_last">Continue</t>
                         <t t-else="">Submit</t>
                     </button>
@@ -242,7 +242,7 @@
 
                 <div class="row">
                     <div class="col-12 text-center mt16">
-                        <button type="submit" t-att-value="'next' if not survey_last else 'finish'" class="btn btn-primary">
+                        <button type="submit" t-att-value="'next' if not survey_last else 'finish'" class="btn btn-primary disabled">
                             <t t-if="answer.is_session_answer or survey_last">Submit</t>
                             <t t-else="">Continue</t>
                         </button>