From a86e9e68dbc1ad412598a07fc2ba5c710785bd9a Mon Sep 17 00:00:00 2001 From: AlasdairSwan Date: Fri, 24 Oct 2014 13:23:56 -0400 Subject: [PATCH 01/10] ECOM-466 Added support for custom error messages. Styled select widths --- .../js/spec_helpers/edx.utils.validate.js | 38 +++++++++------ lms/static/sass/views/_login-register.scss | 46 +++++++++++++++++++ .../student_account/form_field.underscore | 25 ++++++++-- 3 files changed, 92 insertions(+), 17 deletions(-) diff --git a/common/static/js/spec_helpers/edx.utils.validate.js b/common/static/js/spec_helpers/edx.utils.validate.js index cf41b58568..b17ed04b24 100644 --- a/common/static/js/spec_helpers/edx.utils.validate.js +++ b/common/static/js/spec_helpers/edx.utils.validate.js @@ -13,9 +13,9 @@ var edx = edx || {}; email: '
  • A properly formatted e-mail is required
    • ', min: '
  • <%= field %> must be a minimum of <%= count %> characters long
    • ', max: '
  • <%= field %> must be a maximum of <%= count %> characters long
    • ', - password: '
  • A valid password is required
    • ', required: '
  • <%= field %> field is required
    • ', - terms: '
  • To enroll you must agree to the Terms of Service and Honor Code
    • ' + terms: '
  • To enroll you must agree to the Terms of Service and Honor Code
    • ', + custom: '
  • <%= content %>
    • ' }, field: function( el ) { @@ -28,6 +28,7 @@ var edx = edx || {}; isBlank = _fn.validate.isBlank( $el ); if ( _fn.validate.isRequired( $el ) ) { +console.log('is required'); if ( isBlank ) { required = false; } else { @@ -40,7 +41,7 @@ var edx = edx || {}; } response.isValid = required && min && max && email; - +console.log(response.isValid); if ( !response.isValid ) { response.message = _fn.validate.getMessage( $el, { required: required, @@ -78,7 +79,7 @@ var edx = edx || {}; }, isBlank: function( $el ) { - return ( $el.attr('type') === 'checkbox' ) ? $el.prop('checked') : !$el.val(); + return ( $el.attr('type') === 'checkbox' ) ? !$el.prop('checked') : !$el.val(); }, email: { @@ -105,22 +106,33 @@ var edx = edx || {}; var txt = [], tpl, name, - obj; + obj, + customMsg; _.each( tests, function( value, key ) { if ( !value ) { name = $el.attr('name'); + customMsg = $el.data('errormsg-' + key) || false; - tpl = _fn.validate.msg[key]; + // If the field has a custom error msg attached use it + if ( customMsg ) { + tpl = _fn.validate.msg.custom; - obj = { - field: _fn.validate.str.capitalizeFirstLetter( name ) - }; + obj = { + content: customMsg + }; + } else { + tpl = _fn.validate.msg[key]; - if ( key === 'min' ) { - obj.count = $el.attr('minlength'); - } else if ( key === 'max' ) { - obj.count = $el.attr('maxlength'); + obj = { + field: _fn.validate.str.capitalizeFirstLetter( name ) + }; + + if ( key === 'min' ) { + obj.count = $el.attr('minlength'); + } else if ( key === 'max' ) { + obj.count = $el.attr('maxlength'); + } } txt.push( _.template( tpl, obj ) ); diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss index cda41059fa..0abce46cca 100644 --- a/lms/static/sass/views/_login-register.scss +++ b/lms/static/sass/views/_login-register.scss @@ -119,6 +119,8 @@ } .form-field { + @include clearfix; + clear: both; width: 100%; margin: 0 0 $baseline 0; @@ -277,6 +279,12 @@ @include media( $tablet ) { $grid-columns: 8; + %inline-form-field-tablet { + clear: none; + display: inline-block; + float: left; + } + .headline, .tagline, .form-type { @@ -287,11 +295,30 @@ .form-toggle { margin-right: 5px; } + + .form-field { + &.select-gender { + @extend %inline-form-field-tablet; + width: calc( 50% - 10px ); + margin-right: 20px; + } + + &.select-year_of_birth { + @extend %inline-form-field-tablet; + width: calc( 50% - 10px ); + } + } } @include media( $desktop ) { $grid-columns: 12; + %inline-form-field-desktop { + clear: none; + display: inline-block; + float: left; + } + .headline, .tagline, .form-type { @@ -302,5 +329,24 @@ .form-toggle { margin-right: 10px; } + + .form-field { + &.select-level_of_education { + @extend %inline-form-field-desktop; + width: 290px; + margin-right: 20px; + } + + &.select-gender { + @extend %inline-form-field-desktop; + width: 60px; + margin-right: 20px; + } + + &.select-year_of_birth { + @extend %inline-form-field-desktop; + width: 100px; + } + } } } diff --git a/lms/templates/student_account/form_field.underscore b/lms/templates/student_account/form_field.underscore index e6db67513d..b994e527b2 100644 --- a/lms/templates/student_account/form_field.underscore +++ b/lms/templates/student_account/form_field.underscore @@ -1,4 +1,4 @@ -

    +

    <% if ( type !== 'checkbox' ) { %>

  • ' + error.responseText + '
    • ']; + this.setErrors(); + }, - this.trigger('password-help'); + setErrors: function() { + var $msg = this.$errors.find('.message-copy'), + html = [], + errors = this.errors, + i, + len = errors.length; + + for ( i=0; i' + error.responseText + '']; /* If we've gotten a 403 error, it means that we've successfully * authenticated with a third-party provider, but we haven't @@ -90,14 +83,14 @@ var edx = edx || {}; * to complete the registration process. */ if (error.status === 403 && error.responseText === "third-party-auth" && this.currentProvider) { - this.$alreadyAuthenticatedMsg.removeClass("hidden"); - } - else { - this.$alreadyAuthenticatedMsg.addClass("hidden"); + this.element.show( this.$alreadyAuthenticatedMsg ); + } else { + this.element.hide( this.$alreadyAuthenticatedMsg ); // TODO -- display the error } + this.setErrors(); } }); -})(jQuery, _, Backbone, gettext); \ No newline at end of file +})(jQuery, _, gettext); diff --git a/lms/static/js/student_account/views/PasswordResetView.js b/lms/static/js/student_account/views/PasswordResetView.js index 48b4480998..3474e7e3c5 100644 --- a/lms/static/js/student_account/views/PasswordResetView.js +++ b/lms/static/js/student_account/views/PasswordResetView.js @@ -1,6 +1,6 @@ var edx = edx || {}; -(function($, _, Backbone, gettext) { +(function($, _, gettext) { 'use strict'; edx.student = edx.student || {}; @@ -24,34 +24,25 @@ var edx = edx || {}; this.$form = $container.find('form'); - this.$resetFail = $container.find('.js-reset-fail'); this.$errors = $container.find('.submission-error'); this.listenTo( this.model, 'success', this.resetComplete ); - this.listenTo( this.model, 'error', this.resetError ); + this.listenTo( this.model, 'error', this.saveError ); }, toggleErrorMsg: function( show ) { if ( show ) { this.setErrors(); } else { - this.$errors - .addClass('hidden') - .attr('aria-hidden', true); + this.element.hide( this.$errors ); } }, resetComplete: function() { var $el = $(this.el); - $el.find('#password-reset-form').addClass('hidden'); - $el.find('.js-reset-success').removeClass('hidden'); - - this.$resetFail.addClass('hidden'); - }, - - resetError: function() { - this.$resetFail.removeClass('hidden'); + this.element.hide( $el.find('#password-reset-form') ); + this.element.show( $el.find('.js-reset-success') ); }, submitForm: function( event ) { @@ -73,4 +64,4 @@ var edx = edx || {}; } }); -})(jQuery, _, Backbone, gettext); +})(jQuery, _, gettext); diff --git a/lms/static/js/student_account/views/RegisterView.js b/lms/static/js/student_account/views/RegisterView.js index 697c19cf7c..c455741b19 100644 --- a/lms/static/js/student_account/views/RegisterView.js +++ b/lms/static/js/student_account/views/RegisterView.js @@ -1,6 +1,6 @@ var edx = edx || {}; -(function($, _, Backbone, gettext) { +(function($, _, gettext) { 'use strict'; edx.student = edx.student || {}; @@ -18,13 +18,7 @@ var edx = edx || {}; formType: 'register', - initialize: function( data ) { - this.tpl = $(this.tpl).html(); - this.fieldTpl = $(this.fieldTpl).html(); - - this.buildForm( data.fields ); - this.model = data.model; - + preRender: function( data ) { this.providers = data.thirdPartyAuth.providers || []; this.currentProvider = data.thirdPartyAuth.currentProvider || ''; }, @@ -45,6 +39,7 @@ var edx = edx || {}; thirdPartyAuth: function( event ) { var providerUrl = $(event.target).data('provider-url') || ''; + if (providerUrl) { window.location.href = providerUrl; } else { @@ -54,4 +49,4 @@ var edx = edx || {}; } }); -})(jQuery, _, Backbone, gettext); \ No newline at end of file +})(jQuery, _, gettext); diff --git a/lms/templates/student_account/access.underscore b/lms/templates/student_account/access.underscore index 6106cbc857..a920aaed56 100644 --- a/lms/templates/student_account/access.underscore +++ b/lms/templates/student_account/access.underscore @@ -8,7 +8,7 @@ checked<% } %> > -
    +
    @@ -16,7 +16,7 @@ checked<% } %>> -
    +
    diff --git a/lms/templates/student_account/login.underscore b/lms/templates/student_account/login.underscore index 604d847fe8..456c8c9982 100644 --- a/lms/templates/student_account/login.underscore +++ b/lms/templates/student_account/login.underscore @@ -3,7 +3,7 @@

    We couldn't log you in.

    - - From 3efeaf5a473a22b8505368fba1a5dce2725c2f2d Mon Sep 17 00:00:00 2001 From: AlasdairSwan Date: Mon, 27 Oct 2014 10:05:48 -0400 Subject: [PATCH 03/10] Moved pre-render to first in initialize to ensure runs before render --- lms/static/js/student_account/views/FormView.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lms/static/js/student_account/views/FormView.js b/lms/static/js/student_account/views/FormView.js index ce9aa17a71..9aca2099f6 100644 --- a/lms/static/js/student_account/views/FormView.js +++ b/lms/static/js/student_account/views/FormView.js @@ -29,6 +29,7 @@ var edx = edx || {}; requiredStr: '*', initialize: function( data ) { + this.preRender( data ); this.tpl = $(this.tpl).html(); this.fieldTpl = $(this.fieldTpl).html(); @@ -36,8 +37,6 @@ var edx = edx || {}; this.model = data.model; this.listenTo( this.model, 'error', this.saveError ); - - this.preRender( data ); }, /* Allows extended views to add custom From 0b9ed0315b64160159c176b59524f1f6103a9458 Mon Sep 17 00:00:00 2001 From: AlasdairSwan Date: Mon, 27 Oct 2014 11:21:19 -0400 Subject: [PATCH 04/10] ECOM-369 Styled third party auth buttons and cleaned up third party auth messaging --- .../js/student_account/views/LoginView.js | 7 ++- lms/static/sass/views/_login-register.scss | 51 +++++++++++++++++++ .../student_account/login.underscore | 5 -- .../student_account/register.underscore | 10 ++-- 4 files changed, 62 insertions(+), 11 deletions(-) diff --git a/lms/static/js/student_account/views/LoginView.js b/lms/static/js/student_account/views/LoginView.js index d210baac6d..025e2c2c73 100644 --- a/lms/static/js/student_account/views/LoginView.js +++ b/lms/static/js/student_account/views/LoginView.js @@ -24,6 +24,8 @@ var edx = edx || {}; preRender: function( data ) { this.providers = data.thirdPartyAuth.providers || []; this.currentProvider = data.thirdPartyAuth.currentProvider || ''; + + console.log(data); }, render: function( html ) { @@ -64,6 +66,7 @@ var edx = edx || {}; thirdPartyAuth: function( event ) { var providerUrl = $(event.target).data('provider-url') || ''; + if (providerUrl) { window.location.href = providerUrl; } else { @@ -73,8 +76,9 @@ var edx = edx || {}; }, saveError: function( error ) { - console.log(error.status, ' error: ', error.responseText); + // console.log(error.status, ' error: ', error.responseText); this.errors = ['
  • ' + error.responseText + '
    • ']; + this.setErrors(); /* If we've gotten a 403 error, it means that we've successfully * authenticated with a third-party provider, but we haven't @@ -89,7 +93,6 @@ var edx = edx || {}; // TODO -- display the error } - this.setErrors(); } }); diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss index 0abce46cca..a31adea179 100644 --- a/lms/static/sass/views/_login-register.scss +++ b/lms/static/sass/views/_login-register.scss @@ -220,6 +220,45 @@ text-transform: none; } + .login-provider { + @extend %btn-secondary-blue-outline; + width: 100%; + margin-top: 20px; + + .icon { + color: inherit; + margin-right: $baseline/2; + } + + &.button-Google:hover, &.button-Google:focus { + background-color: #dd4b39; + border: 1px solid #A5382B; + } + + &.button-Google:hover { + box-shadow: 0 2px 1px 0 #8D3024; + } + + &.button-Facebook:hover, &.button-Facebook:focus { + background-color: #3b5998; + border: 1px solid #263A62; + } + + &.button-Facebook:hover { + box-shadow: 0 2px 1px 0 #30487C; + } + + &.button-LinkedIn:hover , &.button-LinkedIn:focus { + background-color: #0077b5; + border: 1px solid #06527D; + } + + &.button-LinkedIn:hover { + box-shadow: 0 2px 1px 0 #005D8E; + } + + } + /** Error Container - from _account.scss **/ .status { @include box-sizing(border-box); @@ -348,5 +387,17 @@ width: 100px; } } + + .login-provider { + width: calc( 50% - 12px ); + + &:nth-child(odd) { + margin-left: 10px; + } + + &:nth-child(even) { + margin-right: 10px; + } + } } } diff --git a/lms/templates/student_account/login.underscore b/lms/templates/student_account/login.underscore index 456c8c9982..d26aa1a15b 100644 --- a/lms/templates/student_account/login.underscore +++ b/lms/templates/student_account/login.underscore @@ -3,11 +3,6 @@

    We couldn't log you in.

      - <%= fields %> diff --git a/lms/templates/student_account/register.underscore b/lms/templates/student_account/register.underscore index 198f4c8acf..3227e55194 100644 --- a/lms/templates/student_account/register.underscore +++ b/lms/templates/student_account/register.underscore @@ -1,8 +1,10 @@ <% if (currentProvider) { %> -

      - You've successfully signed in with <%- currentProvider %>.
      - We just need a little more information before you start learning with edX. -

      +
      +

      You've successfully signed in with <%- currentProvider %>.

      +
        +
      • We just need a little more information before you start learning with edX.
        • +
      +
      <% } else { _.each( providers, function( provider) { %> diff --git a/lms/templates/student_account/register.underscore b/lms/templates/student_account/register.underscore index 0d1f6e84f4..e98d0f5147 100644 --- a/lms/templates/student_account/register.underscore +++ b/lms/templates/student_account/register.underscore @@ -1,7 +1,7 @@ <% if (currentProvider) { %> -
      +

      You've successfully signed in with <%- currentProvider %>.

      -
        +

        You've successfully signed in with <%- currentProvider %>. We just need a little more information before you start learning with edX.

        <% } else { _.each( providers, function( provider) { %>