From e332e7932806beef282c9594aab1fc3704cb58cc Mon Sep 17 00:00:00 2001
From: AlasdairSwan <alasdair_swan@hotmail.com>
Date: Thu, 23 Oct 2014 09:21:05 -0400
Subject: [PATCH] ECOM-369 Moved to Base FormView extended by other views.

---
 .../js/spec_helpers/edx.utils.validate.js     |  82 +++++++-
 lms/envs/common.py                            |   3 +-
 .../js/student_account/views/AccessView.js    |  75 +++++++-
 .../js/student_account/views/FormView.js      | 176 ++++++++++++++++++
 .../js/student_account/views/LoginView.js     | 151 +++------------
 .../views/PasswordResetView.js                | 111 ++---------
 .../js/student_account/views/RegisterView.js  | 140 +-------------
 lms/static/sass/views/_login-register.scss    |  75 ++++++++
 .../student_account/form_field.underscore     |   4 +-
 .../student_account/login.underscore          |  19 +-
 .../student_account/password_reset.underscore |  20 +-
 .../student_account/register.underscore       |  20 +-
 12 files changed, 470 insertions(+), 406 deletions(-)
 create mode 100644 lms/static/js/student_account/views/FormView.js

diff --git a/common/static/js/spec_helpers/edx.utils.validate.js b/common/static/js/spec_helpers/edx.utils.validate.js
index 2e79413c7c..db1fe96063 100644
--- a/common/static/js/spec_helpers/edx.utils.validate.js
+++ b/common/static/js/spec_helpers/edx.utils.validate.js
@@ -9,12 +9,37 @@ var edx = edx || {};
         var _fn = {
             validate: {
 
-                field: function( el ) {
-                    var $el = $(el);
+                msg: {
+                    email: '<p>A properly formatted e-mail is required</p>',
+                    min: '<p><%= field %> must be a minimum of <%= length %> characters long',
+                    max: '<p><%= field %> must be a maximum of <%= length %> characters long',
+                    password: '<p>A valid password is required</p>',
+                    required: '<p><%= field %> field is required</p>',
+                    terms: '<p>To enroll you must agree to the <a href="#">Terms of Service and Honor Code</a></p>'
+                },
 
-                    return _fn.validate.required( $el ) &&
-                           _fn.validate.charLength( $el ) &&
-                           _fn.validate.email.valid( $el );
+                field: function( el ) {
+                    var $el = $(el),
+                        required = _fn.validate.required( $el ),
+                        // length = _fn.validate.charLength( $el ),
+                        min = _fn.validate.str.minlength( $el ),
+                        max = _fn.validate.str.maxlength( $el ),
+                        email = _fn.validate.email.valid( $el ),
+                        response = {
+                            isValid: required && min && max && email
+                        };
+
+                    if ( !response.isValid ) {
+                        response.message = _fn.validate.getMessage( $el, {
+                            required: required,
+                            // length: length,
+                            min: min,
+                            max: max,
+                            email: email
+                        });
+                    }
+
+                    return response;
                 },
 
                 charLength: function( $el ) {
@@ -39,11 +64,30 @@ var edx = edx || {};
                     return within;
                 },
 
-                required: function( $el ) {
-                    if ($el.attr("type") === "checkbox") {
-                        return $el.attr('required') ? $el.prop("checked") : true;
+                str: {
+                    minlength: function( $el ) {
+                        var min = $el.attr('minlength') || 0;
+
+                        return min <= $el.val().length;
+                    },
+
+                    maxlength: function( $el ) {
+                        var max = $el.attr('maxlength') || false;
+
+                        return ( !!max ) ? max >= $el.val().length : true;
+                    },
+
+                    capitalizeFirstLetter: function( str ) {
+                        str = str.replace('_', ' ');
+
+                        return str.charAt(0).toUpperCase() + str.slice(1);
                     }
-                    else {
+                },
+
+                required: function( $el ) {
+                    if ( $el.attr('type') === 'checkbox' ) {
+                        return $el.attr('required') ? $el.prop('checked') : true;
+                    } else {
                         return $el.attr('required') ? $el.val() : true;
                     }
                 },
@@ -66,6 +110,26 @@ var edx = edx || {};
                     format: function( str ) {
                         return _fn.validate.email.regex.test( str );
                     }
+                },
+
+                getMessage: function( $el, tests ) {
+                    var txt = [],
+                        tpl,
+                        name;
+
+                    _.each( tests, function( value, key ) {
+                        if ( !value ) {
+                            name = $el.attr('name');
+
+                            tpl = _fn.validate.msg[key];
+
+                            txt.push( _.template( tpl, {
+                                field: _fn.validate.str.capitalizeFirstLetter( name )
+                            }));
+                        }
+                    });
+
+                    return txt.join(' ');
                 }
             }
         };
diff --git a/lms/envs/common.py b/lms/envs/common.py
index 36e9986e64..9820b16ae3 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -1030,6 +1030,7 @@ student_account_js = [
     'js/student_account/models/LoginModel.js',
     'js/student_account/models/RegisterModel.js',
     'js/student_account/models/PasswordResetModel.js',
+    'js/student_account/views/FormView.js',
     'js/student_account/views/LoginView.js',
     'js/student_account/views/RegisterView.js',
     'js/student_account/views/PasswordResetView.js',
@@ -1549,7 +1550,7 @@ REGISTRATION_EXTRA_FIELDS = {
     'honor_code': 'required',
     'terms_of_service': 'hidden',
     'city': 'hidden',
-    'country': 'required',
+    'country': 'hidden',
 }
 
 ########################## CERTIFICATE NAME ########################
diff --git a/lms/static/js/student_account/views/AccessView.js b/lms/static/js/student_account/views/AccessView.js
index ec42ac8be2..dc2a45953f 100644
--- a/lms/static/js/student_account/views/AccessView.js
+++ b/lms/static/js/student_account/views/AccessView.js
@@ -52,18 +52,79 @@ var edx = edx || {};
         },
 
         loadForm: function( type ) {
-            if ( type === 'login' ) {
-                this.subview.login = new edx.student.account.LoginView( this.thirdPartyAuth );
+            if ( type === 'reset' ) {
+                this.load.reset( this );
+            } else {
+                this.getFormData( type, this.load[type], this );
+            }
+        },
+
+        load: {
+            login: function( data, context ) {
+                var model = new edx.student.account.LoginModel({
+                    url: data.submit_url
+                });
+
+                context.subview.login =  new edx.student.account.LoginView({
+                    fields: data.fields,
+                    model: model,
+                    thirdPartyAuth: context.thirdPartyAuth
+                });
 
                 // Listen for 'password-help' event to toggle sub-views
-                this.listenTo( this.subview.login, 'password-help', this.resetPassword );
-            } else if ( type === 'register' ) {
-                this.subview.register = new edx.student.account.RegisterView( this.thirdPartyAuth );
-            } else if ( type === 'reset' ) {
-                this.subview.passwordHelp = new edx.student.account.PasswordResetView();
+                context.listenTo( context.subview.login, 'password-help', context.resetPassword );
+            },
+
+            reset: function( context ) {
+                var model = new edx.student.account.PasswordResetModel(),
+                    data = [{
+                        label: 'E-mail',
+                        instructions: 'This is the e-mail address you used to register with edX',
+                        name: 'email',
+                        required: true,
+                        type: 'email',
+                        restrictions: [],
+                        defaultValue: ''
+                    }];
+
+                context.subview.passwordHelp = new edx.student.account.PasswordResetView({
+                    fields: data,
+                    model: model
+                });
+            },
+
+            register: function( data, context ) {
+                var model = new edx.student.account.RegisterModel({
+                    url: data.submit_url
+                });
+
+                context.subview.register =  new edx.student.account.RegisterView({
+                    fields: data.fields,
+                    model: model,
+                    thirdPartyAuth: context.thirdPartyAuth
+                });
             }
         },
 
+        getFormData: function( type, callback, context ) {
+            var urls = {
+                login: 'login_session',
+                register: 'registration'
+            };
+
+            $.ajax({
+                type: 'GET',
+                dataType: 'json',
+                url: '/user_api/v1/account/' + urls[type] + '/',
+                success: function( data ) {
+                    callback( data, context );
+                },
+                error: function( jqXHR, textStatus, errorThrown ) {
+                    console.log('fail ', errorThrown);
+                }
+            });
+        },
+
         resetPassword: function() {
             this.$header.addClass('hidden');
             $(this.el).find('.form-type').addClass('hidden');
diff --git a/lms/static/js/student_account/views/FormView.js b/lms/static/js/student_account/views/FormView.js
new file mode 100644
index 0000000000..18460a9626
--- /dev/null
+++ b/lms/static/js/student_account/views/FormView.js
@@ -0,0 +1,176 @@
+var edx = edx || {};
+
+(function($, _, Backbone, gettext) {
+    'use strict';
+
+    edx.student = edx.student || {};
+    edx.student.account = edx.student.account || {};
+
+    edx.student.account.FormView = Backbone.View.extend({
+        tagName: 'form',
+
+        el: '',
+
+        tpl: '',
+
+        fieldTpl: '#form_field-tpl',
+
+        events: {},
+
+        errors: [],
+
+        formType: '',
+
+        $form: {},
+
+        fields: [],
+
+        // String to append to required label fields
+        requiredStr: '*',
+
+        initialize: function( data ) {
+            this.tpl = $(this.tpl).html();
+            this.fieldTpl = $(this.fieldTpl).html();
+
+            this.buildForm( data.fields );
+            this.model = data.model;
+
+            this.listenTo( this.model, 'error', this.modelError );
+        },
+
+        // Renders the form.
+        render: function( html ) {
+            var fields = html || '';
+
+            $(this.el).html( _.template( this.tpl, {
+                fields: fields
+            }));
+
+            this.postRender();
+
+            return this;
+        },
+
+        postRender: function() {
+            var $container = $(this.el);
+
+            this.$form = $container.find('form');
+            this.$errors = $container.find('.submission-error');
+        },
+
+        buildForm: function( data ) {
+            var html = [],
+                i,
+                len = data.length,
+                fieldTpl = this.fieldTpl;
+
+            this.fields = data;
+
+            for ( i=0; i<len; i++ ) {
+                html.push( _.template( fieldTpl, $.extend( data[i], {
+                    form: this.formType,
+                    requiredStr: this.requiredStr
+                }) ) );
+            }
+
+            this.render( html.join('') );
+        },
+
+        getFormData: function() {
+
+            var obj = {},
+                $form = this.$form,
+                elements = $form[0].elements,
+                i,
+                len = elements.length,
+                $el,
+                $label,
+                key = '',
+                errors = [],
+                // $status = $form.find('.status'),
+                test = {};
+
+            for ( i=0; i<len; i++ ) {
+
+                $el = $( elements[i] );
+                $label = $form.find('label[for=' + $el.attr('id') + ']');
+                key = $el.attr('name') || false;
+
+                if ( key ) {
+                    test = this.validate( elements[i], this.formType );
+
+                    if ( test.isValid ) {
+                        obj[key] = $el.attr('type') === 'checkbox' ? $el.is(':checked') : $el.val();
+                        $el.removeClass('error');
+                        $label.removeClass('error');
+                    } else {
+                        errors.push( test.message );
+                        $el.addClass('error');
+                        $label.addClass('error');
+                    }
+                }
+            }
+
+            this.errors = _.uniq( errors );
+
+            return obj;
+        },
+
+        forgotPassword: function( event ) {
+            event.preventDefault();
+
+            this.trigger('password-help');
+        },
+
+        submitForm: function( event ) {
+            var data = this.getFormData();
+
+            event.preventDefault();
+
+            if ( !_.compact(this.errors).length ) {
+                this.model.set( data );
+                this.model.save();
+                this.toggleErrorMsg( false );
+            } else {
+                this.toggleErrorMsg( true );
+            }
+        },
+
+        toggleErrorMsg: function( show ) {
+            if ( show ) {
+                this.setErrors();
+            } else {
+                this.$errors
+                    .addClass('hidden')
+                    .attr('aria-hidden', true);
+            }
+        },
+
+        setErrors: function() {
+            var $msg = this.$errors.find('.message-copy'),
+                html = [],
+                errors = this.errors,
+                i,
+                len = errors.length;
+
+            for ( i=0; i<len; i++ ) {
+                html.push( errors[i] );
+            }
+
+            $msg.html( html.join('') );
+
+            this.$errors
+                .removeClass('hidden')
+                .attr('aria-hidden', false);
+        },
+
+        modelError: function( error ) {
+            console.log('error ', error);
+        },
+
+        validate: function( $el, form ) {
+            return edx.utils.validate( $el, form );
+        }
+    });
+
+})(jQuery, _, Backbone, gettext);
diff --git a/lms/static/js/student_account/views/LoginView.js b/lms/static/js/student_account/views/LoginView.js
index 2ea46747a9..b2f4a850b6 100644
--- a/lms/static/js/student_account/views/LoginView.js
+++ b/lms/static/js/student_account/views/LoginView.js
@@ -6,36 +6,34 @@ var edx = edx || {};
     edx.student = edx.student || {};
     edx.student.account = edx.student.account || {};
 
-    edx.student.account.LoginView = Backbone.View.extend({
-        tagName: 'form',
-
+    edx.student.account.LoginView = edx.student.account.FormView.extend({
         el: '#login-form',
 
         tpl: '#login-tpl',
 
-        fieldTpl: '#form_field-tpl',
-
         events: {
             'click .js-login': 'submitForm',
             'click .forgot-password': 'forgotPassword',
             'click .login-provider': 'thirdPartyAuth'
         },
 
-        errors: [],
+        formType: 'login',
 
-        $form: {},
+        requiredStr: '',
 
-        initialize: function( thirdPartyAuthInfo ) {
+        initialize: function( data ) {
             this.tpl = $(this.tpl).html();
             this.fieldTpl = $(this.fieldTpl).html();
 
-            this.providers = thirdPartyAuthInfo.providers || [];
-            this.currentProvider = thirdPartyAuthInfo.currentProvider || "";
+            this.buildForm( data.fields );
+            this.model = data.model;
 
-            this.getInitialData();
+            this.providers = data.thirdPartyAuth.providers || [];
+            this.currentProvider = data.thirdPartyAuth.currentProvider || '';
+
+            this.listenTo( this.model, 'error', this.saveError );
         },
 
-        // Renders the form.
         render: function( html ) {
             var fields = html || '';
 
@@ -52,145 +50,45 @@ var edx = edx || {};
 
         postRender: function() {
             var $container = $(this.el);
+
             this.$form = $container.find('form');
-            this.$errors = $container.find('.error-msg');
+            this.$errors = $container.find('.submission-error');
             this.$alreadyAuthenticatedMsg =  $container.find('.already-authenticated-msg');
 
-            // If we're already authenticated with a third-party
-            // provider, try logging in.  The easiest way to do this
-            // is to simply submit the form.
+            /* If we're already authenticated with a third-party
+             * provider, try logging in.  The easiest way to do this
+             * is to simply submit the form.
+             */
             if (this.currentProvider) {
                 this.model.save();
             }
         },
 
-        getInitialData: function() {
-            var that = this;
-
-            $.ajax({
-                type: 'GET',
-                dataType: 'json',
-                url: '/user_api/v1/account/login_session/',
-                success: function( data ) {
-                    console.log(data);
-                    that.initModel( data.submit_url, data.method );
-                    that.buildForm( data.fields );
-                },
-                error: function( jqXHR, textStatus, errorThrown ) {
-                    console.log('fail ', errorThrown);
-                }
-            });
-        },
-
-        initModel: function( url ) {
-            this.model = new edx.student.account.LoginModel({
-                url: url
-            });
-
-            this.listenTo( this.model, 'error', this.saveError );
-        },
-
-        buildForm: function( data ) {
-            var html = [],
-                i,
-                len = data.length,
-                fieldTpl = this.fieldTpl;
-
-            for ( i=0; i<len; i++ ) {
-                html.push( _.template( fieldTpl, $.extend( data[i], {
-                    form: 'login'
-                }) ) );
-            }
-
-            this.render( html.join('') );
-        },
-
-        getFormData: function() {
-
-            var obj = {},
-                $form = this.$form,
-                elements = $form[0].elements,
-                i,
-                len = elements.length,
-                $el,
-                key = '',
-                errors = [];
-
-            for ( i=0; i<len; i++ ) {
-
-                $el = $( elements[i] );
-                key = $el.attr('name') || false;
-
-                if ( key ) {
-                    if ( this.validate( elements[i] ) ) {
-                        obj[key] = $el.attr('type') === 'checkbox' ? $el.is(':checked') : $el.val();
-                        $el.css('border', '1px solid #ccc');
-                    } else {
-                        errors.push( key );
-                        $el.css('border', '2px solid red');
-                    }
-                }
-            }
-
-            this.errors = errors;
-
-            return obj;
-        },
-
         forgotPassword: function( event ) {
             event.preventDefault();
 
             this.trigger('password-help');
         },
 
-        submitForm: function( event ) {
-            var data = this.getFormData();
-
-            event.preventDefault();
-
-            // console.log(this.model);
-
-            if ( !this.errors.length ) {
-                console.log('save me');
-                this.model.set( data );
-                this.model.save();
-                this.toggleErrorMsg( false );
-            } else {
-                console.log('here are the errors ', this.errors);
-                this.toggleErrorMsg( true );
-            }
-        },
-
         thirdPartyAuth: function( event ) {
-            var providerUrl = $(event.target).data("provider-url") || "";
+            var providerUrl = $(event.target).data('provider-url') || '';
             if (providerUrl) {
                 window.location.href = providerUrl;
             } else {
                 // TODO -- error handling here
-                console.log("No URL available for third party auth provider");
+                console.log('No URL available for third party auth provider');
             }
         },
 
-        toggleErrorMsg: function( show ) {
-            if ( show ) {
-                this.$errors.removeClass('hidden');
-            } else {
-                this.$errors.addClass('hidden');
-            }
-        },
-
-        validate: function( $el ) {
-            return edx.utils.validate( $el );
-        },
-
         saveError: function( error ) {
             console.log(error.status, ' error: ', error.responseText);
 
-            // If we've gotten a 401 error, it means that we've successfully
-            // authenticated with a third-party provider, but we haven't
-            // linked the account to an EdX account.  In this case,
-            // we need to prompt the user to enter a little more information
-            // to complete the registration process.
+            /* If we've gotten a 401 error, it means that we've successfully
+             * authenticated with a third-party provider, but we haven't
+             * linked the account to an EdX account.  In this case,
+             * we need to prompt the user to enter a little more information
+             * to complete the registration process.
+             */
             if (error.status === 401 && this.currentProvider) {
                 this.$alreadyAuthenticatedMsg.removeClass("hidden");
             }
@@ -198,6 +96,7 @@ var edx = edx || {};
                 this.$alreadyAuthenticatedMsg.addClass("hidden");
                 // TODO -- display the error
             }
+
         }
     });
 
diff --git a/lms/static/js/student_account/views/PasswordResetView.js b/lms/static/js/student_account/views/PasswordResetView.js
index d915602f49..e6cd326b59 100644
--- a/lms/static/js/student_account/views/PasswordResetView.js
+++ b/lms/static/js/student_account/views/PasswordResetView.js
@@ -6,116 +6,37 @@ var edx = edx || {};
     edx.student = edx.student || {};
     edx.student.account = edx.student.account || {};
 
-    edx.student.account.PasswordResetView = Backbone.View.extend({
-        tagName: 'form',
-
+    edx.student.account.PasswordResetView = edx.student.account.FormView.extend({
         el: '#password-reset-wrapper',
 
         tpl: '#password_reset-tpl',
 
-        fieldTpl: '#form_field-tpl',
-
         events: {
             'click .js-reset': 'submitForm'
         },
 
-        errors: [],
-
-        mode: {},
-
-        $form: {},
-
-        initialize: function() {
-            this.fieldTpl = $(this.fieldTpl).html();
-
-            var fields = this.buildForm([{
-                name: 'email',
-                label: 'Email',
-                defaultValue: '',
-                type: 'text',
-                required: true,
-                placeholder: 'xsy@edx.org',
-                instructions: 'This is the email address you used to register with edX.',
-                restrictions: {}
-            }]);
-
-            this.tpl = $(this.tpl).html();
-            this.initModel();
-            this.render( fields );
-        },
-
-        // Renders the form.
-        render: function( html ) {
-            var fields = html || '';
-
-            $(this.el).html( _.template( this.tpl, {
-                fields: fields
-            }));
-
-            this.postRender();
-
-            return this;
-        },
+        requiredStr: '',
 
         postRender: function() {
             var $container = $(this.el);
 
             this.$form = $container.find('form');
-            this.$errors = $container.find('.error-msg');
+
             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 );
         },
 
-        initModel: function() {
-            this.model = new edx.student.account.PasswordResetModel();
-        },
-
-        buildForm: function( data ) {
-            var html = [],
-                i,
-                len = data.length,
-                fieldTpl = this.fieldTpl;
-
-            for ( i=0; i<len; i++ ) {
-                html.push( _.template( fieldTpl, $.extend( data[i], {
-                    form: 'reset-password'
-                }) ) );
+        toggleErrorMsg: function( show ) {
+            if ( show ) {
+                this.setErrors();
+            } else {
+                this.$errors
+                    .addClass('hidden')
+                    .attr('aria-hidden', true);
             }
-
-            return html.join('');
-        },
-
-        getFormData: function() {
-            var obj = {},
-                $form = this.$form,
-                elements = $form[0].elements,
-                i,
-                len = elements.length,
-                $el,
-                key = '',
-                errors = [];
-
-            for ( i=0; i<len; i++ ) {
-
-                $el = $( elements[i] );
-                key = $el.attr('name') || false;
-
-                if ( key ) {
-                    if ( this.validate( elements[i] ) ) {
-                        obj[key] = $el.attr('type') === 'checkbox' ? $el.is(':checked') : $el.val();
-                        $el.css('border', '1px solid #ccc');
-                    } else {
-                        errors.push( key );
-                        $el.css('border', '2px solid red');
-                    }
-                }
-            }
-
-            this.errors = errors;
-
-            return obj;
         },
 
         resetComplete: function() {
@@ -136,7 +57,7 @@ var edx = edx || {};
 
             event.preventDefault();
 
-            if ( !this.errors.length ) {
+            if ( !_.compact(this.errors).length ) {
                 this.model.set( data );
                 this.model.save();
                 this.toggleErrorMsg( false );
@@ -145,14 +66,6 @@ var edx = edx || {};
             }
         },
 
-        toggleErrorMsg: function( show ) {
-            if ( show ) {
-                this.$errors.removeClass('hidden');
-            } else {
-                this.$errors.addClass('hidden');
-            }
-        },
-
         validate: function( $el ) {
             return edx.utils.validate( $el );
         }
diff --git a/lms/static/js/student_account/views/RegisterView.js b/lms/static/js/student_account/views/RegisterView.js
index ec6ee2eaa0..6be3e3a562 100644
--- a/lms/static/js/student_account/views/RegisterView.js
+++ b/lms/static/js/student_account/views/RegisterView.js
@@ -6,34 +6,27 @@ var edx = edx || {};
     edx.student = edx.student || {};
     edx.student.account = edx.student.account || {};
 
-    edx.student.account.RegisterView = Backbone.View.extend({
-        tagName: 'form',
-
+    edx.student.account.RegisterView = edx.student.account.FormView.extend({
         el: '#register-form',
 
         tpl: '#register-tpl',
 
-        fieldTpl: '#form_field-tpl',
-
         events: {
             'click .js-register': 'submitForm',
             'click .login-provider': 'thirdPartyAuth'
         },
 
-        errors: [],
-
-        $form: {},
-
-        initialize: function( thirdPartyAuthInfo ) {
+        initialize: function( data ) {
             this.tpl = $(this.tpl).html();
-            this.fieldTpl = $(this.fieldTpl).html(),
+            this.fieldTpl = $(this.fieldTpl).html();
 
-            this.providers = thirdPartyAuthInfo.providers || [];
-            this.currentProvider = thirdPartyAuthInfo.currentProvider || "";
-            this.getInitialData();
+            this.buildForm( data.fields );
+            this.model = data.model;
+
+            this.providers = data.thirdPartyAuth.providers || [];
+            this.currentProvider = data.thirdPartyAuth.currentProvider || '';
         },
 
-        // Renders the form.
         render: function( html ) {
             var fields = html || '';
 
@@ -48,127 +41,14 @@ var edx = edx || {};
             return this;
         },
 
-        postRender: function() {
-            var $container = $(this.el);
-
-            this.$form = $container.find('form');
-            this.$errors = $container.find('.error-msg');
-        },
-
-        getInitialData: function() {
-            var that = this;
-
-            $.ajax({
-                type: 'GET',
-                dataType: 'json',
-                url: '/user_api/v1/account/registration/',
-                success: function( data ) {
-                    console.log(data);
-                    that.buildForm( data.fields );
-                    that.initModel( data.submit_url, data.method );
-                },
-                error: function( jqXHR, textStatus, errorThrown ) {
-                    console.log('fail ', errorThrown);
-                }
-            });
-        },
-
-        initModel: function( url ) {
-            this.model = new edx.student.account.RegisterModel({
-                url: url
-            });
-
-            this.listenTo( this.model, 'error', function( error ) {
-                console.log(error.status, ' error: ', error.responseText);
-            });
-        },
-
-        buildForm: function( data ) {
-            var html = [],
-                i,
-                len = data.length,
-                fieldTpl = this.fieldTpl;
-
-            for ( i=0; i<len; i++ ) {
-                html.push( _.template( fieldTpl, $.extend( data[i], {
-                    form: 'register'
-                }) ) );
-            }
-
-            this.render( html.join('') );
-        },
-
-        getFormData: function() {
-
-            var obj = {},
-                $form = this.$form,
-                elements = $form[0].elements,
-                i,
-                len = elements.length,
-                $el,
-                key = '',
-                errors = [];
-
-            for ( i=0; i<len; i++ ) {
-
-                $el = $( elements[i] );
-                key = $el.attr('name') || false;
-
-                if ( key ) {
-                    if ( this.validate( elements[i] ) ) {
-                        obj[key] = $el.attr('type') === 'checkbox' ? $el.is(':checked') : $el.val();
-                        $el.css('border', '1px solid #ccc');
-                    } else {
-                        errors.push( key );
-                        $el.css('border', '2px solid red');
-                    }
-                }
-            }
-
-            this.errors = errors;
-
-            return obj;
-        },
-
-        submitForm: function( event ) {
-            var data = this.getFormData();
-
-            event.preventDefault();
-console.log(data);
-            // console.log(this.model);
-
-            if ( !this.errors.length ) {
-                console.log('save me');
-                this.model.set( data );
-console.log(this.model);
-                this.model.save();
-                this.toggleErrorMsg( false );
-            } else {
-                console.log('here are the errors ', this.errors);
-                this.toggleErrorMsg( true );
-            }
-        },
-
         thirdPartyAuth: function( event ) {
-            var providerUrl = $(event.target).data("provider-url") || "";
+            var providerUrl = $(event.target).data('provider-url') || '';
             if (providerUrl) {
                 window.location.href = providerUrl;
             } else {
                 // TODO -- error handling here
-                console.log("No URL available for third party auth provider");
+                console.log('No URL available for third party auth provider');
             }
-        },
-
-        toggleErrorMsg: function( show ) {
-            if ( show ) {
-                this.$errors.removeClass('hidden');
-            } else {
-                this.$errors.addClass('hidden');
-            }
-        },
-
-        validate: function( $el ) {
-            return edx.utils.validate( $el );
         }
     });
 
diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss
index 722a7165ed..cda41059fa 100644
--- a/lms/static/sass/views/_login-register.scss
+++ b/lms/static/sass/views/_login-register.scss
@@ -1,5 +1,21 @@
 // lms - views - login/register view
 // ====================
+
+%heading-4 {
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0 !important;
+    color: $m-gray-d2;
+}
+
+%body-text {
+    font-size: 15px;
+    margin: 0 0 $baseline 0;
+    color: $base-font-color;
+    line-height: lh(1);
+}
+
 .section-bkg-wrapper {
     background: $m-gray-l4;
 }
@@ -128,6 +144,9 @@
                 display: inline;
             }
 
+            &.error {
+                color: $red;
+            }
         }
 
         .field-link {
@@ -199,6 +218,62 @@
         text-transform: none;
     }
 
+    /** Error Container - from _account.scss **/
+    .status {
+        @include box-sizing(border-box);
+        margin: 0 0 $baseline 0;
+        border-bottom: 3px solid shade($yellow, 10%);
+        padding: $baseline $baseline;
+        background: tint($yellow,20%);
+
+        .message-title {
+            @extend %heading-4;
+            margin: 0 0 ($baseline/4) 0;
+            font-size: em(14);
+            font-weight: 600;
+        }
+
+        .message-copy {
+            @extend %body-text;
+            margin: 0 !important;
+            padding: 0;
+            list-style: none;
+
+            li {
+                margin: 0 0 ($baseline/4) 0;
+            }
+        }
+    }
+
+    .submission-error, .system-error {
+        box-shadow: inset 0 -1px 2px 0 tint($red, 85%);
+        border-bottom: 3px solid shade($red, 10%);
+        background: tint($red,95%);
+
+        .message-title {
+            color: shade($red, 10%) !important;
+        }
+
+        .message-copy {
+
+        }
+    }
+
+    .submission-success {
+        box-shadow: inset 0 -1px 2px 0 tint($green, 85%);
+        border-bottom: 3px solid shade($green, 10%);
+        background: tint($green, 95%);
+
+        .message-title {
+            color: shade($green, 10%) !important;
+        }
+
+        .message-copy {
+
+        }
+    }
+
+    /** RWD **/
     @include media( $tablet ) {
         $grid-columns: 8;
 
diff --git a/lms/templates/student_account/form_field.underscore b/lms/templates/student_account/form_field.underscore
index 3a3a93ab0b..e6db67513d 100644
--- a/lms/templates/student_account/form_field.underscore
+++ b/lms/templates/student_account/form_field.underscore
@@ -2,7 +2,7 @@
     <% if ( type !== 'checkbox' ) { %>
         <label for="<%= form %>-<%= name %>">
             <%= label %>
-            <% if ( required ) { %> *</label><% } %>
+            <% if ( required && requiredStr ) { %> <%= requiredStr %></label><% } %>
         </label>
     <% } %>
 
@@ -34,7 +34,7 @@
     <% if ( type === 'checkbox' ) { %>
         <label for="<%= form %>-<%= name %>" class="inline">
             <%= label %>
-            <% if ( required ) { %> *</label><% } %>
+            <% if ( required && requiredStr ) { %> <%= requiredStr %></label><% } %>
         </label>
     <% } %>
 
diff --git a/lms/templates/student_account/login.underscore b/lms/templates/student_account/login.underscore
index b1ba59b49c..d92d26aa90 100644
--- a/lms/templates/student_account/login.underscore
+++ b/lms/templates/student_account/login.underscore
@@ -1,26 +1,21 @@
 <form id="login">
-    <div class="error-msg hidden">
-        <h4>We couldn't log you in.</h4>
-        <div class="errors">
+    <div class="status submission-error hidden" aria-hidden="true">
+        <h4 class="message-title">We couldn't log you in.</h4>
+        <div class="message-copy">
             <p>Email or password is incorrent. <a href="#">Forgot password?</a></p>
         </div>
     </div>
     <div class="already-authenticated-msg hidden">
         <% if (currentProvider) { %>
-            <p class="instructions">
-            You've successfully logged into <%- currentProvider %>, but you need to link
-            your account.  Please click "I am a returning user" to create
-            an EdX account.
-            </p>
+            <p class="instructions">You've successfully logged into <%- currentProvider %>, but you need to link your account.  Please click "I am a returning user" to create an EdX account.</p>
         <% } %>
     </div>
     <%= fields %>
     <button class="action action-primary action-update js-login">Log in</button>
 </form>
-<% for (var i=0; i < providers.length; i++) {
-    var provider = providers[i];
-%>
+
+<% _.each( providers, function( provider) { %>
     <button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.loginUrl %>">
         <span class="icon <%- provider.iconClass %>"></span>Sign in with <%- provider.name %>
     </button>
-<% } %>
+<% }); %>
diff --git a/lms/templates/student_account/password_reset.underscore b/lms/templates/student_account/password_reset.underscore
index 5b8a39dbc5..209d01b760 100644
--- a/lms/templates/student_account/password_reset.underscore
+++ b/lms/templates/student_account/password_reset.underscore
@@ -3,13 +3,13 @@
 </header>
 
 <section class="form-type">
-    <p class="action-label">Please enter your email address below and we will send you instructions for setting a new password.</p>
     <div id="password-reset-form" class="form-wrapper">
-        <form>
-            <div class="error-msg hidden">
-                <h4>An error occured.</h4>
-                <div class="errors">
-                    <p>Please enter a valid email address</p>
+        <p class="action-label">Please enter your email address below and we will send you instructions for setting a new password.</p>
+        <form id="password-reset-form">
+            <div class="status submission-error hidden" aria-hidden="true">
+                <h4 class="message-title">An error occurred.</h4>
+                <div class="message-copy">
+                    <p>Please provide a valid email.</p>
                 </div>
             </div>
 
@@ -19,9 +19,11 @@
         </form>
     </div>
 
-    <div class="js-reset-success hidden">
-        <h2>Password Reset Successful</h2>
-        <p>We've e-mailed you instructions for setting your password to the e-mail address you submitted. You should be receiving it shortly.</p>
+    <div class="js-reset-success status submission-success hidden" aria-hidden="true">
+        <h4 class="message-title">Password Reset Successful</h4>
+        <div class="message-copy">
+            <p>We've e-mailed you instructions for setting your password to the e-mail address you submitted. You should be receiving it shortly.</p>
+        </div>
     </div>
     <div class="js-reset-fail hidden">
         <h2>Password Reset Failed</h2>
diff --git a/lms/templates/student_account/register.underscore b/lms/templates/student_account/register.underscore
index effc27dabc..501c5ac63b 100644
--- a/lms/templates/student_account/register.underscore
+++ b/lms/templates/student_account/register.underscore
@@ -4,20 +4,18 @@
       We just need a little more information before you start learning with edX.
     </p>
 <% } else {
-    for (var i=0; i < providers.length; i++) {
-        var provider = providers[i];
-%>
-    <button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.registerUrl %>">
-        <span class="icon <%- provider.iconClass %>"></span>Sign up with <%- provider.name %>
-    </button>
-<% }
+    _.each( providers, function( provider) { %>
+        <button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.registerUrl %>">
+            <span class="icon <%- provider.iconClass %>"></span>Sign up with <%- provider.name %>
+        </button>
+    <% });
 } %>
 
 <form id="register" autocomplete="off">
-    <div class="error-msg hidden">
-        <h4>An error occured in your registration.</h4>
-        <div class="errors">
-            <p>Please enter a valid password</p>
+    <div class="status submission-error hidden" aria-hidden="true">
+        <h4 class="message-title">An error occurred in your registration.</h4>
+        <div class="message-copy">
+            <p>Please provide a valid email.</p>
         </div>
     </div>
     <%= fields %>