Add error modals for error states for JS desktop application

openedx · Dec 14, 2018 · 8bc8165 · 8bc8165
1 parent 3bad208
commit 8bc8165
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 54 deletions.
diff --git a/edx_proctoring/static/proctoring/js/exam_action_handler.js b/edx_proctoring/static/proctoring/js/exam_action_handler.js
@@ -24,6 +24,32 @@ var edx = edx || {};
     }
   };
 
+  /**
+   * Launch modals, handling a11y focus behavior
+   *
+   * Note: don't try to leverage this for the heartbeat; the DOM
+   * structure this depends on doesn't live everywhere that handler
+   * needs to live
+   */
+   function accessibleError(title, message) {
+     accessible_modal(
+       "#accessible-error-modal #confirm_open_button",
+       "#accessible-error-modal .close-modal",
+       "#accessible-error-modal",
+       ".content-wrapper"
+     );
+     $("#accessible-error-modal #confirm_open_button").click();
+     $("#accessible-error-modal .message-title").html(message);
+     $('#accessible-error-modal #acessible-error-title').html(title);
+     $("#accessible-error-modal .ok-button")
+       .html(gettext("OK"))
+       .off('click.closeModal')
+       .on('click.closeModal', function(){
+         $("#accessible-error-modal .close-modal").click();
+       });
+  };
+
+
   function workerPromiseForEventNames(eventNames) {
     return function() {
       var proctoringBackendWorker = new Worker(edx.courseware.proctored_exam.configuredWorkerURL);
@@ -66,6 +92,23 @@ var edx = edx || {};
     location.reload();
   }
 
+  function setActionButtonLoadingState($button) {
+    $button.prop('disabled', true);
+    $button.html($button.data('loading-text'));
+  }
+
+  function setActionButtonSteadyState($button) {
+    $button.prop('disabled', false);
+    $button.html($button.data('cta-text'));
+  }
+
+  function errorHandlerGivenMessage($button, title, message) {
+    setActionButtonSteadyState($button);
+    return function() {
+      accessibleError(title, message);
+    };
+  }
+
 
   edx.courseware = edx.courseware || {};
   edx.courseware.proctored_exam = edx.courseware.proctored_exam || {};
@@ -77,14 +120,33 @@ var edx = edx || {};
     var actionUrl = $this.data('change-state-url');
     var action = $this.data('action');
 
+    setActionButtonLoadingState($this);
+
     var shouldUseWorker = window.Worker && edx.courseware.proctored_exam.configuredWorkerURL;
     if(shouldUseWorker) {
       workerPromiseForEventNames(actionToMessageTypesMap[action])()
         .then(updateExamAttemptStatusPromise(actionUrl, action))
-        .then(reloadPage);
+        .then(reloadPage)
+        .catch(errorHandlerGivenMessage(
+          $this,
+          gettext('Error Starting Exam'),
+          gettext(
+            'Something has gone wrong starting your exam. ' +
+            'Please double-check that the application is running.'
+          ),
+        ));
     } else {
       updateExamAttemptStatusPromise(actionUrl, action)()
-        .then(reloadPage);
+        .then(reloadPage)
+        .catch(errorHandlerGivenMessage(
+          $this,
+          gettext('Error Starting Exam'),
+          gettext(
+            'Something has gone wrong starting your exam. ' +
+            'Please reload the page and start again.'
+          ),
+        ));
+
     }
   };
   edx.courseware.proctored_exam.examEndHandler = function() {
@@ -95,17 +157,35 @@ var edx = edx || {};
     var actionUrl = $this.data('change-state-url');
     var action = $this.data('action');
 
+    setActionButtonLoadingState($this);
+
     var shouldUseWorker = window.Worker &&
                           edx.courseware.proctored_exam.configuredWorkerURL &&
                           action === "submit";
     if(shouldUseWorker) {
 
       updateExamAttemptStatusPromise(actionUrl, action)()
         .then(workerPromiseForEventNames(actionToMessageTypesMap[action]))
-        .then(reloadPage);
+        .then(reloadPage)
+        .catch(errorHandlerGivenMessage(
+          $this,
+          gettext('Error Ending Exam'),
+          gettext(
+            'Something has gone wrong ending your exam. ' +
+            'Please double-check that the application is running.'
+          )
+        ));
     } else {
       updateExamAttemptStatusPromise(actionUrl, action)()
-        .then(reloadPage);
+        .then(reloadPage)
+        .catch(errorHandlerGivenMessage(
+          $this,
+          gettext('Error Ending Exam'),
+          gettext(
+            'Something has gone wrong ending your exam. ' +
+            'Please reload the page and start again.'
+          )
+        ));
     }
   }
   edx.courseware.proctored_exam.pingApplication = function() {
@@ -114,6 +194,5 @@ var edx = edx || {};
       timeoutPromise(ONE_MINUTE_MS)
     ]);
   }
-
-
+  edx.courseware.proctored_exam.accessibleError = accessibleError;
 }).call(this, $);
diff --git a/edx_proctoring/templates/proctored_exam/error_modal.html b/edx_proctoring/templates/proctored_exam/error_modal.html
@@ -0,0 +1,26 @@
+{% load i18n %}
+<div id="accessible-error-modal" class="modal" aria-hidden="true">
+  <div class="inner-wrapper" role="dialog" aria-labelledby="accessible-error-title">
+    <button class="close-modal">
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
+      <span class="sr">
+          {% trans "Close" %}
+      </span>
+    </button>
+
+    <header>
+        <h2 id="acessible-error-title"></h2>
+        <span class="sr">,
+            {% trans "modal open"}
+        </span>
+    <hr aria-hidden="true" />
+    </header>
+    <div role="alertdialog" class="status message" tabindex="-1">
+        <p class="message-title" style="text-align: center; font-size: 16px;"></p>
+    </div>
+    <div class="actions" style="text-align: center;">
+        <button class="dismiss ok-button"></button>
+    </div>
+  </div>
+  <a href="#accessible-error-modal" rel="leanModal" id="confirm_open_button" style="display:none">{% trans "open"}</a>
+</div>
diff --git a/edx_proctoring/templates/proctored_exam/instructions.html b/edx_proctoring/templates/proctored_exam/instructions.html
@@ -62,31 +62,8 @@ <h3>
     </div>
   </div>
 </div>
-<div id="accessible-error-modal" class="modal" aria-hidden="true">
-  <div class="inner-wrapper" role="dialog" aria-labelledby="accessible-error-title">
-    <button class="close-modal">
-      <span class="icon fa fa-remove" aria-hidden="true"></span>
-      <span class="sr">
-          {% trans "Close" %}
-      </span>
-    </button>
+{% include 'proctored_exam/error_modal.html' %}
 
-    <header>
-        <h2 id="acessible-error-title">{% trans "Cannot Start Proctored Exam" %}</h2>
-        <span class="sr">,
-            {% trans "modal open"}
-        </span>
-    <hr aria-hidden="true" />
-    </header>
-    <div role="alertdialog" class="status message" tabindex="-1">
-        <p class="message-title" style="text-align: center; font-size: 16px;"></p>
-    </div>
-    <div class="actions" style="text-align: center;">
-        <button class="dismiss ok-button"></button>
-    </div>
-  </div>
-  <a href="#accessible-error-modal" rel="leanModal" id="confirm_open_button" style="display:none">{% trans "open"}</a>
-</div>
 
 <div class="footer-sequence border-b-0 padding-b-0">
   {% if not is_sample_attempt and allow_proctoring_opt_out %}
@@ -101,15 +78,6 @@ <h2 id="acessible-error-title">{% trans "Cannot Start Proctored Exam" %}</h2>
 
 <script type="text/javascript">
 
-  var accessible_error = function(message) {
-
-      accessible_modal("#accessible-error-modal #confirm_open_button",
-              "#accessible-error-modal .close-modal", "#accessible-error-modal", ".content-wrapper");
-      $("#accessible-error-modal #confirm_open_button").click();
-      $("#accessible-error-modal .message-title").html(message);
-      $("#accessible-error-modal .ok-button").html(gettext("OK"));
-  };
-
   $('.proctored-decline-exam').click(
     function(e) {
       e.preventDefault();
@@ -152,7 +120,10 @@ <h2 id="acessible-error-title">{% trans "Cannot Start Proctored Exam" %}</h2>
       } else {
           // The proctoring setup is not yet complete.
           // Show a modal indicating that the user is not done yet.
-          accessible_error(gettext("You must complete the proctoring setup before you can start the exam."));
+          edx.courseware.proctored_exam.accessibleError(
+              gettext("Cannot Start Proctored Exam"),
+              gettext("You must complete the proctoring setup before you can start the exam."),
+          );
       }
     });
   }
@@ -170,12 +141,6 @@ <h2 id="acessible-error-title">{% trans "Cannot Start Proctored Exam" %}</h2>
     });
   }
 
-  $("#accessible-error-modal .cancel-button").click(function(){
-      $("#accessible-error-modal .close-modal").click();
-  });
-  $("#accessible-error-modal .ok-button").click(function(){
-      $("#accessible-error-modal .close-modal").click();
-  });
   $('.start-proctored-exam').click(check_exam_started);
 
   $("#software_download_link").click(function (e) {

diff --git a/edx_proctoring/templates/proctored_exam/ready_to_start.html b/edx_proctoring/templates/proctored_exam/ready_to_start.html
@@ -45,14 +45,14 @@ <h3>
     </p>
     {% endif %}
     <div>
-      <button type="button" class="exam-action-button proctored-enter-exam btn btn-pl-primary btn-base" data-action="start" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}">
-        {% blocktrans %}
-          Start my exam
-        {% endblocktrans %}
+      {% trans "Start my exam" as start_exam %}
+      <button type="button" class="exam-action-button proctored-enter-exam btn btn-pl-primary btn-base" data-action="start" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}" data-loading-text="<span class='fa fa-circle-o-notch fa-spin'></span> {% trans 'Starting Exam' %}" data-cta-text="{{ start_exam }}">
+        {{ start_exam }}
       </button>
     </div>
   </div>
 </div>
+{% include 'proctored_exam/error_modal.html' %}
 {% include 'proctored_exam/footer.html' %}
 
 <script type="text/javascript">

diff --git a/edx_proctoring/templates/proctored_exam/ready_to_submit.html b/edx_proctoring/templates/proctored_exam/ready_to_submit.html
@@ -15,10 +15,9 @@ <h3>
       After you submit your exam, your responses are graded and your proctoring session is reviewed.
     {% endblocktrans %}
   </p>
-  <button type="button" name="submit-proctored-exam" class="exam-action-button btn btn-pl-primary btn-base" data-action="submit" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}">
-    {% blocktrans %}
-      Yes, end my proctored exam
-    {% endblocktrans %}
+      {% trans "Yes, end my proctored exam" as end_exam %}
+  <button type="button" name="submit-proctored-exam" class="exam-action-button btn btn-pl-primary btn-base" data-action="submit" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}" data-loading-text="<span class='fa fa-circle-o-notch fa-spin'></span> {% trans 'Ending Exam' %}" data-cta-text="{{ end_exam }}">
+    {{ end_exam }}
   </button>
   {% if does_time_remain %}
     <button type="button" name="goback-proctored-exam" class="exam-action-button btn btn-secondary btn-base" data-action="start" data-exam-id="{{exam_id}}" data-change-state-url="{{change_state_url}}" style="box-shadow: none">
@@ -28,6 +27,9 @@ <h3>
     </button>
   {% endif %}
 </div>
+{% include 'proctored_exam/error_modal.html' %}
+
+
 <script type="text/javascript">
   var edx = edx || {};
   edx.courseware = edx.courseware || {};