diff --git a/lms/static/js/spec/verify_student/make_payment_step_view_spec.js b/lms/static/js/spec/verify_student/make_payment_step_view_spec.js index 543f5213f3..01abb15433 100644 --- a/lms/static/js/spec/verify_student/make_payment_step_view_spec.js +++ b/lms/static/js/spec/verify_student/make_payment_step_view_spec.js @@ -78,7 +78,10 @@ define([ }; var expectPaymentButtonEnabled = function( isEnabled ) { - var isDisabled = $( '#pay_button' ).hasClass('is-disabled'); + var appearsDisabled = $( '#pay_button' ).hasClass( 'is-disabled' ), + isDisabled = $( '#pay_button' ).prop( 'disabled' ); + + expect( !appearsDisabled ).toEqual( isEnabled ); expect( !isDisabled ).toEqual( isEnabled ); }; @@ -92,6 +95,7 @@ define([ // Activate button should be displayed and disabled expect( activateButton.length ).toEqual(1); expect( activateButton.hasClass( 'is-disabled' ) ).toBe( true ); + expect( activateButton.prop( 'disabled' ) ).toBe( true ); }; var goToPayment = function( requests, kwargs ) { diff --git a/lms/static/js/spec/verify_student/review_photos_step_view_spec.js b/lms/static/js/spec/verify_student/review_photos_step_view_spec.js index 1206d825c4..ae232711a0 100644 --- a/lms/static/js/spec/verify_student/review_photos_step_view_spec.js +++ b/lms/static/js/spec/verify_student/review_photos_step_view_spec.js @@ -54,7 +54,10 @@ define([ }; var expectSubmitEnabled = function( isEnabled ) { - var isDisabled = $('#next_step_button').hasClass('is-disabled'); + var appearsDisabled = $( '#next_step_button' ).hasClass( 'is-disabled' ), + isDisabled = $( '#next_step_button' ).prop( 'disabled' ); + + expect( !appearsDisabled ).toBe( isEnabled ); expect( !isDisabled ).toBe( isEnabled ); }; diff --git a/lms/static/js/spec/verify_student/webcam_photo_view_spec.js b/lms/static/js/spec/verify_student/webcam_photo_view_spec.js index f5eecc0cd9..5f4d4a99f5 100644 --- a/lms/static/js/spec/verify_student/webcam_photo_view_spec.js +++ b/lms/static/js/spec/verify_student/webcam_photo_view_spec.js @@ -73,7 +73,10 @@ define([ }; var expectSubmitEnabled = function( isEnabled ) { - var isDisabled = $( '#submit_button' ).hasClass( 'is-disabled' ); + var appearsDisabled = $( '#submit_button' ).hasClass( 'is-disabled' ), + isDisabled = $( '#submit_button' ).prop( 'disabled' ); + + expect( !appearsDisabled ).toEqual( isEnabled ); expect( !isDisabled ).toEqual( isEnabled ); }; @@ -82,7 +85,7 @@ define([ setFixtures( '
' + - '' + '' ); TemplateHelpers.installTemplate( 'templates/verify_student/webcam_photo' ); }); diff --git a/lms/static/js/verify_student/views/make_payment_step_view.js b/lms/static/js/verify_student/views/make_payment_step_view.js index 3066c57957..af3db57c56 100644 --- a/lms/static/js/verify_student/views/make_payment_step_view.js +++ b/lms/static/js/verify_student/views/make_payment_step_view.js @@ -34,6 +34,14 @@ var edx = edx || {}; // Track a virtual pageview, for easy funnel reconstruction. window.analytics.page( 'payment', this.templateName ); + // Set the payment button to disabled by default + this.setPaymentEnabled( false ); + + // The activate button is always disabled + $( '#activate_button' ) + .addClass( 'is-disabled' ) + .prop( 'disabled', true ); + // Update the contribution amount with the amount the user // selected in a previous screen. if ( templateContext.contributionAmount ) { @@ -69,8 +77,9 @@ var edx = edx || {}; if ( _.isUndefined( isEnabled ) ) { isEnabled = true; } - - $( '#pay_button' ).toggleClass( 'is-disabled', !isEnabled ); + $( '#pay_button' ) + .toggleClass( 'is-disabled', !isEnabled ) + .prop( 'disabled', !isEnabled ); }, createOrder: function() { @@ -142,7 +151,7 @@ var edx = edx || {}; }); // Re-enable the button so the user can re-try - $( '#pay_button' ).removeClass( 'is-disabled' ); + this.setPaymentEnabled( true ); }, getPaymentAmount: function() { diff --git a/lms/static/js/verify_student/views/review_photos_step_view.js b/lms/static/js/verify_student/views/review_photos_step_view.js index 5e72c76df5..fbe5067b99 100644 --- a/lms/static/js/verify_student/views/review_photos_step_view.js +++ b/lms/static/js/verify_student/views/review_photos_step_view.js @@ -50,7 +50,7 @@ var edx = edx || {}; var fullName = $( '#new-name' ).val(); // Disable the submit button to prevent duplicate submissions - $( '#next_step_button' ).addClass( 'is-disabled' ); + this.setSubmitButtonEnabled( false ); // On success, move on to the next step this.listenToOnce( this.model, 'sync', _.bind( this.nextStep, this ) ); @@ -69,7 +69,7 @@ var edx = edx || {}; var errorMsg = gettext( 'An unexpected error occurred. Please try again later.' ); // Re-enable the submit button to allow the user to retry - $( '#next_step_button' ).removeClass( 'is-disabled' ); + this.setSubmitButtonEnabled( true ); if ( xhr.status === 400 ) { errorMsg = xhr.responseText; @@ -91,6 +91,12 @@ var edx = edx || {}; title = $( this ).parent(); title.toggleClass( 'is-expanded' ); title.attr( 'aria-expanded', !title.attr( 'aria-expanded' ) ); + }, + + setSubmitButtonEnabled: function( isEnabled ) { + $( '#next_step_button' ) + .toggleClass( 'is-disabled', !isEnabled ) + .prop( 'disabled', !isEnabled ); } }); diff --git a/lms/static/js/verify_student/views/webcam_photo_view.js b/lms/static/js/verify_student/views/webcam_photo_view.js index 6bbca162e9..13e57dc44d 100644 --- a/lms/static/js/verify_student/views/webcam_photo_view.js +++ b/lms/static/js/verify_student/views/webcam_photo_view.js @@ -231,6 +231,9 @@ render: function() { var renderedHtml; + // Set the submit button to disabled by default + this.setSubmitButtonEnabled( false ); + // Load the template for the webcam into the DOM renderedHtml = _.template( $( this.template ).html(), {} ); $( this.el ).html( renderedHtml ); @@ -258,7 +261,7 @@ reset: function() { // Disable the submit button - $( this.submitButton ).addClass( "is-disabled" ); + this.setSubmitButtonEnabled( false ); // Reset the video capture this.backend.reset(); @@ -288,7 +291,7 @@ this.model.set( this.modelAttribute, this.backend.getImageData() ); // Enable the submit button - $( this.submitButton ).removeClass( "is-disabled" ); + this.setSubmitButtonEnabled( true ); } }, @@ -305,6 +308,12 @@ shown: true }); } + }, + + setSubmitButtonEnabled: function( isEnabled ) { + $( this.submitButton ) + .toggleClass( 'is-disabled', !isEnabled ) + .prop( 'disabled', !isEnabled ); } }); diff --git a/lms/templates/verify_student/make_payment_step.underscore b/lms/templates/verify_student/make_payment_step.underscore index 6930b3ae2e..fedf5dc3aa 100644 --- a/lms/templates/verify_student/make_payment_step.underscore +++ b/lms/templates/verify_student/make_payment_step.underscore @@ -140,11 +140,11 @@ <%- gettext( "Go to payment" ) %> - <% } else { %> + <% } else { %> <%- gettext( "Activate Your Account" ) %> - <% } %> + <% } %>