Merge pull request #5957 from edx/adam/disable-purchase-button-on-click

disable "go to payment button" on click (ECOM-643)

lms/djangoapps/verify_student/tests/test_views.py

@@ -141,6 +141,20 @@ class TestCreateOrderView(ModuleStoreTestCase):
         self.assertIn('This course doesn\'t support verified certificates', response.content)
 
     @patch.dict(settings.FEATURES, {'AUTOMATIC_VERIFY_STUDENT_IDENTITY_FOR_TESTING': True})
+    def test_create_order_fail_with_get(self):
+        """
+        Test that create_order will not work if wrong http method used
+        """
+        create_order_post_data = {
+            'contribution': 50,
+            'course_id': self.course_id,
+            'face_image': ',',
+            'photo_id_image': ','
+        }
+        response = self.client.get(reverse('verify_student_create_order'), create_order_post_data)
+        self.assertEqual(response.status_code, 405)
+
+    @patch.dict(settings.FEATURES, {'AUTOMATIC_VERIFY_STUDENT_IDENTITY_FOR_TESTING': True})
     def test_create_order_success(self):
         """
         Test that the order is created successfully when given valid data

lms/djangoapps/verify_student/views.py

@@ -167,6 +167,7 @@ class VerifiedView(View):
         return render_to_response('verify_student/verified.html', context)
 
 
+@require_POST
 @login_required
 def create_order(request):
     """

lms/static/js/spec/photocapture_spec.js

@@ -4,7 +4,7 @@ define(['backbone', 'jquery', 'js/verify_student/photocapture'],
         describe("Photo Verification", function () {
 
             beforeEach(function () {
-                setFixtures('<div id="order-error" style="display: none;"></div><input type="radio" name="contribution" value="35" id="contribution-35" checked="checked"><input type="radio" id="contribution-other" name="contribution" value=""><input type="text" size="9" name="contribution-other-amt" id="contribution-other-amt" value="30"><img id="face_image" src="src="data:image/png;base64,dummy"><img id="photo_id_image" src="src="data:image/png;base64,dummy">');
+                setFixtures('<div id="order-error" style="display: none;"></div><input type="radio" name="contribution" value="35" id="contribution-35" checked="checked"><input type="radio" id="contribution-other" name="contribution" value=""><input type="text" size="9" name="contribution-other-amt" id="contribution-other-amt" value="30"><img id="face_image" src="src="data:image/png;base64,dummy"><img id="photo_id_image" src="src="data:image/png;base64,dummy"><button id="pay_button">pay button</button>');
             });
 
             it('retake photo', function () {
@@ -27,6 +27,7 @@ define(['backbone', 'jquery', 'js/verify_student/photocapture'],
                 });
                 submitToPaymentProcessing();
                 expect(window.submitForm).toHaveBeenCalled();
+                expect($("#pay_button")).toHaveClass("is-disabled");
             });
 
             it('Error during process', function () {
@@ -36,8 +37,18 @@ define(['backbone', 'jquery', 'js/verify_student/photocapture'],
                 spyOn($, "ajax").andCallFake(function (e) {
                     e.error({});
                 });
+                spyOn($.fn, "addClass").andCallThrough();
+                spyOn($.fn, "removeClass").andCallThrough();
+
                 submitToPaymentProcessing();
                 expect(window.showSubmissionError).toHaveBeenCalled();
+
+                // make sure the button isn't disabled
+                expect($("#pay_button")).not.toHaveClass("is-disabled");
+
+                // but also make sure that it was disabled during the ajax call
+                expect($.fn.addClass).toHaveBeenCalledWith("is-disabled");
+                expect($.fn.removeClass).toHaveBeenCalledWith("is-disabled");
             });
 
         });

lms/static/js/verify_student/photocapture.js

@@ -69,6 +69,7 @@ function refereshPageMessage() {
 }
 
 var submitToPaymentProcessing = function() {
+  $("#pay_button").addClass('is-disabled');
   var contribution_input = $("input[name='contribution']:checked")
   var contribution = 0;
   if(contribution_input.attr('id') == 'contribution-other') {
@@ -95,6 +96,7 @@ var submitToPaymentProcessing = function() {
       }
     },
     error:function(xhr,status,error) {
+      $("#pay_button").removeClass('is-disabled');
       showSubmissionError()
     }
   });

lms/templates/verify_student/verified.html

@@ -12,6 +12,7 @@
 <script type="text/javascript">
 var submitToPaymentProcessing = function(event) {
     event.preventDefault();
+    $("#pay_button").addClass("is-disabled");
     var xhr = $.post(
       "${create_order_url}",
       {
@@ -30,7 +31,9 @@ var submitToPaymentProcessing = function(event) {
     .done(function(data) {
       $("#pay_form").submit();
     })
-    .fail(function(jqXhr,text_status, error_thrown) { alert(jqXhr.responseText); });
+    .fail(function(jqXhr,text_status, error_thrown) {
+      $("#pay_button").removeClass("is-disabled");
+      alert(jqXhr.responseText); });
 }
 $(document).ready(function() {
     $("#pay_button").click(submitToPaymentProcessing);