ECOM-369 Added initial Backbone code which allows a user to login to lms

lms/envs/common.py

@@ -1025,7 +1025,12 @@ instructor_dash_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/ins
 # JavaScript used by the student account and profile pages
 # These are not courseware, so they do not need many of the courseware-specific
 # JavaScript modules.
-student_account_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'js/student_account/**/*.js'))
+student_account_js = [
+    'js/student_account/models/LoginModel.js',
+    'js/student_account/views/LoginView.js',
+    'js/student_account/views/AccessView.js',
+    'js/student_account/accessApp.js',
+]
 student_profile_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'js/student_profile/**/*.js'))
 
 PIPELINE_CSS = {

lms/static/js/student_account/accessApp.js

+var edx = edx || {};
+
+(function($) {
+    'use strict';
+
+    edx.student = edx.student || {};
+    edx.student.account = edx.student.account || {};
+
+    return new edx.student.account.AccessView({
+        mode: $('#login-and-registration-container').data('initial-mode') || 'login',
+        thirdPartyAuth: $('#login-and-registration-container').data('third-party-auth-providers') || false
+    });
+})(jQuery);
\ No newline at end of file

lms/static/js/student_account/models/LoginModel.js

+var edx = edx || {};
+
+(function($, _, Backbone, gettext) {
+    'use strict';
+
+    edx.student = edx.student || {};
+    edx.student.account = edx.student.account || {};
+
+    edx.student.account.LoginModel = Backbone.Model.extend({
+
+        defaults: {
+            email: '',
+            password: '',
+            remember: false
+        },
+
+        urlRoot: '',
+
+        initialize: function( obj ) {
+            this.urlRoot = obj.url;
+        },
+
+        sync: function(method, model) {
+            var headers = {
+                'X-CSRFToken': $.cookie('csrftoken')
+            };
+
+            $.ajax({
+                url: model.urlRoot,
+                type: 'POST',
+                data: model.attributes,
+                headers: headers
+            })
+            .done(function() {
+                var query = window.location.search,
+                    url = '/dashboard';
+
+                model.trigger('sync');
+
+                // If query string in url go back to that page
+                if ( query.length > 1 ) {
+                    url = query.substring( query.indexOf('=') + 1 );
+                }
+
+                window.location.href = url;
+            })
+            .fail( function( error ) {
+                model.trigger('error', error);
+            });
+        }
+    });
+})(jQuery, _, Backbone, gettext);
\ No newline at end of file

lms/static/js/student_account/views/AccessView.js

+var edx = edx || {};
+
+(function($, _, Backbone, gettext) {
+    'use strict';
+
+    edx.student = edx.student || {};
+    edx.student.account = edx.student.account || {};
+
+    edx.student.account.AccessView = Backbone.View.extend({
+        el: '#login-and-registration-container',
+
+        tpl: $('#access-tpl').html(),
+
+        events: {
+            'change .form-toggle': 'toggleForm'
+        },
+
+        // The form currently loaded
+        activeForm: '',
+
+        initialize: function( obj ) {
+            this.activeForm = obj.mode;
+            console.log(obj);
+
+            this.render();
+        },
+
+        render: function() {
+            $(this.el).html( _.template( this.tpl, {
+                mode: this.activeForm
+            }));
+
+            this.postRender();
+
+            return this;
+        },
+
+        postRender: function() {
+            // Load the default form
+            this.loadForm( this.activeForm );
+        },
+
+        loadForm: function( type ) {
+            if ( type === 'login' ) {
+                console.log('load login');
+                return new edx.student.account.LoginView();
+            }
+
+            // return new app.LoginView({
+            //     el: $('#' + type + '-form'),
+            //     model: this.getModel( type ),
+            //     tpl: $('#' + type + '-form-tpl').html()
+            // });
+        },
+
+        toggleForm: function( e ) {
+            var type = $(e.currentTarget).val(),
+                $form = $('#' + type + '-form');
+
+            if ( !this.form.isLoaded( $form ) ) {
+                this.loadForm( type );
+            }
+
+            $(this.el).find('.form-wrapper').addClass('hidden');
+            $form.removeClass('hidden');
+        },
+
+        getModel: function( type ) {
+            var models = {
+                join: app.JoinModel,
+                login: app.JoinModel
+            };
+
+            return models[type] ? new models[type]() : false;
+        },
+
+        form: {
+            isLoaded: function( $form ) {
+                return $form.html().length > 0;
+            }
+        }
+    });
+
+})(jQuery, _, Backbone, gettext);
\ No newline at end of file

lms/static/js/student_account/views/LoginView.js

+var edx = edx || {};
+
+(function($, _, Backbone, gettext) {
+    'use strict';
+
+    edx.student = edx.student || {};
+    edx.student.account = edx.student.account || {};
+
+    edx.student.account.LoginView = Backbone.View.extend({
+        tagName: 'form',
+
+        el: '#login-form',
+
+        tpl: $('#login-tpl').html(),
+
+        fieldTpl: $('#form_field-tpl').html(),
+
+        events: {
+            'click .js-login': 'submitForm',
+            'click .forgot-password': 'forgotPassword'
+        },
+
+        errors: [],
+
+        $form: {},
+
+        initialize: function( obj ) {
+            this.getInitialData();
+        },
+
+        // Renders the form.
+        render: function( html ) {
+            var fields = html || '';
+
+            $(this.el).html( _.template( this.tpl, {
+                fields: fields
+            }));
+
+            this.postRender();
+
+            return this;
+        },
+
+        postRender: function() {
+
+            this.$form = $(this.el).find('form');
+        },
+
+        getInitialData: function() {
+            var that = this;
+
+            $.ajax({
+                type: 'GET',
+                dataType: 'json',
+                url: '/user_api/v1/account/login_session/',
+                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, method ) {
+            this.model = new edx.student.account.LoginModel({
+                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++ ) {
+                if ( data[i].name === 'password' ) {
+                    data[i].type = 'password';
+                }
+
+                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();
+            console.log('forgotPassword');
+        },
+
+        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 );
+            }
+        },
+
+        toggleErrorMsg: function( show ) {
+            if ( show ) {
+                console.log('show');
+            } else {
+                console.log('hide');
+            }
+        }
+    });
+
+})(jQuery, _, Backbone, gettext);
\ No newline at end of file

lms/templates/student_account/access.underscore

+<section class="form-type">
+    <h2>
+        <input type="radio" name="form" id="register-option" value="register" class="form-toggle" <% if ( mode === 'register' ) { %>checked<% } %> >
+        <label for"register-option">I am a new user</label>
+    </h2>
+    <div id="register-form" class="form-wrapper <% if ( mode === 'register' ) { %>hidden<% } %>"></div>
+</section>
+
+<section class="form-type">
+    <h2>
+        <input type="radio" name="form" id="login-option" value="login" class="form-toggle" <% if ( mode === 'login' ) { %>checked<% } %>>
+        <label for="login-option">I am a returning user with an edX account</label>
+    </h2>
+    <div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden<% } %>"></div>
+</section>

lms/templates/student_account/form_field.underscore

+<p class="form-field">
+    <% if ( type !== 'checkbox' ) { %>
+        <label for="<%= form %>-<%= name %>">
+            <%= label %>
+            <% if ( required ) { %> *</label><% } %>
+        </label>
+    <% } %>
+
+    <% if( form === 'login' && name === 'password' ) { %>
+        <a href="#" class="forgot-password">Forgot password?</a>
+    <% } %>
+
+    <input id="<%= form %>-<%= name %>" type="<%= type %>" name="<%= name %>" aria-describedby="<%= form %>-<%= name %>-desc"
+        <% if ( restrictions.min_length ) { %> minlength="<%= restrictions.min_length %>"<% } %>
+        <% if ( restrictions.max_length ) { %> maxlength="<%= restrictions.max_length %>"<% } %>
+        <% if ( required ) { %> required<% } %>
+    />
+
+    <% if ( type === 'checkbox' ) { %>
+        <label for="<%= form %>-<%= name %>">
+            <%= label %>
+            <% if ( required ) { %> *</label><% } %>
+        </label>
+    <% } %>
+
+    <span id="<%= form %>-<%= name %>-desc" class="desc"><%= instructions %></span>
+</p>
\ No newline at end of file

lms/templates/student_account/login.underscore

+<form id="login">
+    <%= fields %>
+    <button class="action action-primary action-update js-login">Log in</button>
+    <button type="submit" class="button button-primary button-facebook"><span class="icon icon-facebook"></span>Sign in with Facebook</button>
+    <button type="submit" class="button button-primary button-google"><span class="icon icon-google-plus"></span>Sign in with Google</button>
+</form>
\ No newline at end of file

lms/templates/student_account/login_and_register.html

@@ -12,7 +12,7 @@
 </%block>
 
 <%block name="header_extras">
-% for template_name in ["account"]:
+% for template_name in ["account", "access", "form_field", "login"]:
 <script type="text/template" id="${template_name}-tpl">
   <%static:include path="student_account/${template_name}.underscore" />
 </script>
@@ -21,7 +21,7 @@
 
 <h1>Login and Registration!</h1>
 
-<p>This is a placeholder for the combined login and registration form</p>
+<p>This is a placeholder for the combined login and registration form.</p>
 
 ## TODO: Use JavaScript to populate this div with
 ## the actual registration/login forms (loaded asynchronously from the user API)