[IMP] survey: improve UX of survey session code page

This commit improves the UX of the page responsible for joining live
quiz session. Few of the improvements are

  - Increase size of the input tag related to code
  - Display proper error message based on type of error
  - Move the error message below the code input
  - Improve few strings

Along with that, this commit also interchanges the position of
'Add a question' and 'Add a section' options question tabs
of the survey form view.

Task ID-2345907
closes #59060

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

addons/survey/controllers/survey_session_manage.py

@@ -21,13 +21,14 @@ class UserInputSession(http.Controller):
 
     def _fetch_from_session_code(self, session_code):
         """ Matches a survey against a passed session_code.
-        We force the session_state to be reachable (ready / in_progress) to avoid people
-        using this route to access other (private) surveys.
+        We don't limit the session_state to be reachable (ready / in_progress) here because
+        in some cases, we want closed session as well (where session_state = False).
+        Instead, when necessary, the reachability is forced in routes calling this method to
+        avoid people using those routes to access other (private) surveys.
         We limit to sessions opened within the last 7 days to avoid potential abuses. """
         if session_code:
             matching_survey = request.env['survey.survey'].sudo().search([
                 ('state', '=', 'open'),
-                ('session_state', 'in', ['ready', 'in_progress']),
                 ('session_start_time', '>', fields.Datetime.now() - relativedelta(days=7)),
                 ('session_code', '=', session_code),
             ], limit=1)
@@ -169,7 +170,7 @@ class UserInputSession(http.Controller):
         This route is used in survey sessions where we need short links for people to type. """
 
         survey = self._fetch_from_session_code(session_code)
-        if survey:
+        if survey and survey.session_state in ['ready', 'in_progress']:
             return werkzeug.utils.redirect("/survey/start/%s" % survey.access_token)
 
         return werkzeug.utils.redirect("/s")
@@ -181,7 +182,10 @@ class UserInputSession(http.Controller):
         If not, return error. The user is invited to type again the code. """
         survey = self._fetch_from_session_code(session_code)
         if survey:
-            return {"survey_url": "/survey/start/%s" % survey.access_token}
+            if survey.session_state in ['ready', 'in_progress']:
+                return {"survey_url": "/survey/start/%s" % survey.access_token}
+            else:
+                return {"error": "survey_session_closed"}
 
         return {"error": "survey_wrong"}
 

addons/survey/static/src/js/survey_quick_access.js

@@ -7,6 +7,7 @@ publicWidget.registry.SurveyQuickAccessWidget = publicWidget.Widget.extend({
     selector: '.o_survey_quick_access',
     events: {
         'click button[type="submit"]': '_onSubmit',
+        'input #session_code': '_onSessionCodeInput',
     },
 
         //--------------------------------------------------------------------------
@@ -35,6 +36,10 @@ publicWidget.registry.SurveyQuickAccessWidget = publicWidget.Widget.extend({
     // Handlers
     // -------------------------------------------------------------------------
 
+    _onSessionCodeInput: function () {
+        this.el.querySelectorAll('.o_survey_error > span').forEach((elem) => elem.classList.add('d-none'));
+    },
+
     _onKeyPress: function (event) {
         if (event.keyCode === 13) {  // Enter
             event.preventDefault();
@@ -49,15 +54,23 @@ publicWidget.registry.SurveyQuickAccessWidget = publicWidget.Widget.extend({
 
     _submitCode: function () {
         var self = this;
-        this.$('.o_survey_error').addClass("d-none");
-        var $sessionCodeInput = this.$('input#session_code');
+        this.$('.o_survey_error > span').addClass("d-none");
+        const sessionCodeInputVal = this.$('input#session_code').val().trim();
+        if (!sessionCodeInputVal) {
+            self.$('.o_survey_session_error_invalid_code').removeClass("d-none");
+            return;
+        }
         this._rpc({
-            route: `/survey/check_session_code/${$sessionCodeInput.val()}`,
+            route: `/survey/check_session_code/${sessionCodeInputVal}`,
         }).then(function (response) {
             if (response.survey_url) {
                 window.location = response.survey_url;
             } else {
-                self.$('.o_survey_error').removeClass("d-none");
+                if (response.error && response.error === 'survey_session_closed') {
+                    self.$('.o_survey_session_error_closed').removeClass("d-none");
+                } else {
+                    self.$('.o_survey_session_error_invalid_code').removeClass("d-none");
+                }
             }
         });
     },

addons/survey/static/src/scss/survey_form.scss

@@ -18,6 +18,12 @@ nav#oe_main_menu_navbar {
     min-height: 100%;
 }
 
+// Safari(v 7.1+) specific fix (min-height given above doesn't work with safari)
+// see https://stackoverflow.com/a/25975282 for info on safari specific css
+_::-webkit-full-page-media, _:future, :root .o_survey_wrap {
+    min-height: 90vh;
+}
+
 .o_survey_progress_wrapper {
     min-width: 11rem;
     max-width: 15rem;
@@ -169,6 +175,15 @@ nav#oe_main_menu_navbar {
     }
 }
 
+.o_survey_quick_access {
+    .o_survey_error {
+        min-height: 2rem;
+    }
+    #session_code {
+        font-size: 4rem;
+    }
+}
+
 .o_survey_form, .o_survey_session_manage {
     .o_survey_question_matrix {
         th {

addons/survey/views/survey_survey_views.xml

@@ -75,8 +75,8 @@
                                     <button icon="fa-code-fork" attrs="{'invisible': [('triggering_question_id', '=', False)]}"
                                         title="This question depends on another question's answer." class="icon_rotates"/>
                                     <control>
-                                        <create name="add_section_control" string="Add a section" context="{'default_is_page': True, 'default_questions_selection': 'all'}"/>
                                         <create name="add_question_control" string="Add a question"/>
+                                        <create name="add_section_control" string="Add a section" context="{'default_is_page': True, 'default_questions_selection': 'all'}"/>
                                     </control>
                                 </tree>
                             </field>

addons/survey/views/survey_templates_management.xml

@@ -108,24 +108,22 @@
             <div class="wrap o_survey_wrap pb16 d-flex">
                 <div class="container o_survey_quick_access d-flex flex-column">
                     <div class="d-flex flex-grow-1 align-items-center">
-                        <div class="col-lg-12">
+                        <div class="w-100 px-4 px-md-0">
                             <div class="text-center mb32">
-                                <h3>Please enter the code</h3>
+                                <h3>Enter Session Code</h3>
                             </div>
                             <div class="row">
-                            <div class="offset-md-4 col-md-4 text-center">
-                                <input id="session_code" type="text" placeholder="4812"
-                                       class="form-control o_survey_question_text_box font-weight-bold bg-transparent text-primary text-center rounded-0 p-2 w-100"/>
-                            </div>
-                            <div class="col-3 text-center o_survey_error text-danger d-none pt-2" role="alert">
-                                <span>Code is incorrect. Please try again.</span>
-                            </div>
+                                <div class="col-12 col-md-4 offset-md-4 text-center">
+                                    <input id="session_code" type="text" placeholder="4812"
+                                           class="form-control o_survey_question_text_box font-weight-bold bg-transparent text-primary text-center rounded-0 p-2 w-100"/>
+                                </div>
+                                <div class="col-12 col-md-4 offset-md-4 text-center o_survey_error text-danger pt-2" role="alert">
+                                    <span class="o_survey_session_error_invalid_code d-none">Code is incorrect.</span>
+                                    <span class="o_survey_session_error_closed d-none">Session is finished.</span>
+                                </div>
                             </div>
                             <div class="text-center mt32 p-2">
-                                <button type="submit" class="btn btn-primary">Submit</button>
-                            </div>
-                            <div class="text-center p-2">
-                                <span class="text-muted">The code is found on the screen in front of you</span>
+                                <button type="submit" class="btn btn-primary">Join Session</button>
                             </div>
                         </div>
                     </div>