HHS fork [HEAD] with sprint11 [upstream/sprint11] merged in

login_controller.js

define([
  'jquery',
  'underscore',
  'backbone',
  'bootstrap',
  'utilities',
  'base_controller',
  'login_view',
<<<<<<< HEAD
  'login_config',
  'modal_component',
  'registration_view',
  'profile_model',
  'text!alert_template',
  'autocomplete',
  'tag_show_view'
], function ($, _, Backbone, Bootstrap, utils, BaseController, LoginView, Login, ModalComponent, RegistrationView, ProfileModel, AlertTemplate, autocomplete, TagShowView) {
=======
  'json!login_config',
  'modal_component'
], function ($, _, Backbone, Bootstrap, utils, BaseController, LoginView, Login, ModalComponent) {
>>>>>>> upstream/sprint11

  Application.Login = BaseController.extend({
    model: null,
    events: {
<<<<<<< HEAD
      "click .login-register"    : "showRegister",
	  "keyup .comment-content"          : "search"
=======
      "click #register-cancel"   : "showLogin",
      "click #login-register"    : "showRegister"
>>>>>>> upstream/sprint11
    },

    initialize: function ( options ) {
      var self = this;
      this.options = options;
      this.initializeView();
	  this.initializeTags();
	  this.initializeSelect2();
    },

    showRegister: function (e) {
      if (e.preventDefault) e.preventDefault();

      if (this.loginView) this.loginView.cleanup();
      if (this.modalComponent) this.modalComponent.cleanup();
	  this.initializeTags();
	  this.initializeSelect2();

      this.modalComponent = new ModalComponent({
        el: "#container",
        id: "login-register",
        modalTitle: "Register",
		model: this.model,
		data: this.data
      }).render();

      this.loginView = new RegistrationView({
        el: ".modal-template",
		model: this.model,
		data: this.data,		      
        message: this.options.message
      }).render();
	 
    },
	
    initializeView: function () {
      var self = this;
      if (this.loginView) {
        this.loginView.cleanup();
        this.modalComponent.cleanup();
      }

      this.modalComponent = new ModalComponent({
        el: this.el,
        id: "login",
        modalTitle: "HHS FairTrade Beta"
      }).render();

      this.loginView = new LoginView({
        el: ".modal-template",
        login: Login,
        message: this.options.message
      }).render();
      this.$("#registration-view").hide();
      $("#login").modal('show');

      self.listenTo(window.cache.userEvents, "user:login", function (user) {
        // hide the modal
        self.stopListening(window.cache.userEvents);
        // window.cache.userEvents.stopListening();
        $('#login').bind('hidden.bs.modal', function() {
          // reload the page after login
          Backbone.history.loadUrl();
          window.cache.userEvents.trigger("user:login:success", user);
          self.cleanup();
        }).modal('hide');
      });
    },
<<<<<<< HEAD
	
    initializeTags: function() {
      if (this.tagView) { this.tagView.cleanup(); }
      this.tagView = new TagShowView({
        model: this.model,
        el: '.tag-wrapper',
        target: 'profile',
        edit: this.edit,
        url: '/api/tag/findAllByUserId/'
      });
      this.tagView.render();
    },
	
    initializeSelect2: function () {
      var self = this;
      var formatResult = function (object, container, query) {
        return object.name;
      };

      var modelJson = this.model.toJSON();
      $("#company").select2({
        placeholder: 'Select an Agency',
        formatResult: formatResult,
        formatSelection: formatResult,
        minimumInputLength: 2,
        ajax: {
          url: '/api/ac/tag',
          dataType: 'json',
          data: function (term) {
            return {
              type: 'agency',
              q: term
            };
          },
          results: function (data) {
            return { results: data };
          }
        }
      });
      if (modelJson.agency) {
        $("#company").select2('data', modelJson.agency.tag);
      }
      $("#company").on('change', function (e) {
        self.model.trigger("profile:input:changed", e);
      });
      $("#location").select2({
        placeholder: 'Select a Location',
        formatResult: formatResult,
        formatSelection: formatResult,
        minimumInputLength: 1,
        data: [ location ],
        ajax: {
          url: '/api/ac/tag',
          dataType: 'json',
          data: function (term) {
            return {
              type: 'location',
              q: term
            };
          },
          results: function (data) {
            return { results: data };
          }
        }
      });
      if (modelJson.location) {
        $("#location").select2('data', modelJson.location.tag);
      }
      $("#location").on('change', function (e) {
        self.model.trigger("profile:input:changed", e);
      });
=======

    showRegister: function (e) {
      if (e.preventDefault) e.preventDefault();
      this.$("#login-view").hide();
      this.$("#login-footer").hide();
      this.$("#registration-view").show();
      this.$("#registration-footer").show();
    },

    showLogin: function (e) {
      if (e.preventDefault) e.preventDefault();
      this.$("#login-view").show();
      this.$("#login-footer").show();
      this.$("#registration-view").hide();
      this.$("#registration-footer").hide();
>>>>>>> upstream/sprint11
    },

    // ---------------------
    //= UTILITY METHODS
    // ---------------------
    cleanup: function() {
      // don't do anything
      if (this.loginView) { this.loginView.cleanup(); }
      if (this.modalComponent) { this.modalComponent.cleanup(); }
      removeView(this);
    }

  });

  return Application.Login;
})

login_template.html

<form class="form-horizontal" role="form" id="login-password-form">

<div class="modal-body padding-bottom-none" id="login-view">

  <% if (message) { %>
  <div class="alert alert-warning">
    <%= message %>
  </div>
  <% } %>

  <% if (login.oauth.length > 0) { %>
  <div class="login-oauth">Login with
  <% _.each(login.oauth, function (e) { %>
  <div class="row">
    <div class="col-sm-offset-3 col-sm-6">
      <div class="login-option">
        <a href="<%= login.config[e].endpoint %>" class="btn btn-c0 btn-login">
          <img src="<%= login.config[e].image %>" alt="<%= login.config[e].name %>" class="btn-login-responsive"/>
        </a>
      </div>
    </div>
  </div>
  <% }); %>
  </div>
  <% } %>

  <% if (login.local.enabled === true) { %>
    <% if (login.oauth.length > 0) { %>
    <hr/>
    <% } %>
    <div class="alert alert-danger" id="login-error" style="display:none;"></div>
      <div class="form-group">
        <label for="username" class="col-sm-offset-1 col-sm-3 control-label">Email Address</label>
        <div class="col-sm-6">
          <input type="email" class="form-control" id="username" name="username" placeholder="Email Address"/>
        </div>
      </div>
      <div class="form-group margin-bottom-none">
        <label for="password" class="col-sm-offset-1 col-sm-3 control-label">Password</label>
        <div class="col-sm-6">
          <input type="password" class="form-control" id="password" name="password" placeholder="Password"/>
        </div>
      </div>
  </div>
  <div class="modal-footer modal-footer-grey" id="login-footer">
    <div class="row">
      <div class="col-md-3 col-md-push-9">
        <button type="submit" class="btn btn-c2 pull-right">Sign in</button>
      </div>
      <div class="col-md-9 col-md-pull-3 modal-footer-text">
        <a href="#forgot-password" id="forgot-password">Forgot your password?</a>
        <br/>
        <a href="#login-register" id="login-register">Sign up now</a>
      </div>
    </div>
  </div>
  <% } else { %>
  </div>
  <% } %>
</form>

<form role="form" id="registration-form">
<div class="modal-body padding-bottom-none" id="registration-view">
    <h2>Create a New Account</h2>

    <div class="form-group">
      <label for="rusername" class="control-label">Email Address</label>
      <div class="input-group">
        <input type="text" class="form-control validate" id="rusername" name="username" placeholder="Email Address" data-validate="button"/>
        <span class="input-group-btn">
          <a href="#" class="btn btn-danger" id="rusername-button" tabindex="-1">
            <i id="rusername-check" class="icon-remove"></i>
          </a>
        </span>
      </div>
      <span class="help-block error-button" style="display:none;">The email address is not valid or is already in use.</span>
    </div>

    <div class="row">
      <div class="col-sm-9 sm-nopadding">
        <div class="form-group">
<<<<<<< HEAD
          <label for="username" class="col-sm-offset-1 col-sm-3 control-label">Email Address</label>
          <div class="col-sm-6">
            <input type="email" class="form-control" id="username" name="username" placeholder="Work Email"/>
          </div>
=======
          <label for="rpassword" class="control-label">Password</label>
          <input type="password" class="form-control validate" id="rpassword" name="password" placeholder="Password" data-validate="empty,password,confirm"/>
          <span class="help-block error-empty" style="display:none;">You must enter a password.</span>
          <span class="help-block error-password" style="display:none;">Your password does not meet password rules.</span>
          <span class="help-block error-confirm" style="display:none;">Your password does not match the password entered below.</span>
>>>>>>> upstream/sprint11
        </div>
        <div class="form-group">
          <label for="rpassword-confirm" class="control-label">Confirm Password</label>
          <input type="password" class="form-control" id="rpassword-confirm" placeholder="Confirm Password"/>
        </div>
<<<<<<< HEAD
        <div class="form-group">
          <div class="col-sm-12">
            <button type="submit" class="btn btn-c2">Sign in</button>
			<a href="mailto:read.holman@hhs.gov?subject=HHSFairTradeBETA" class="btn btn-link pull-right">Forgot Password?</a>
          </div>
=======
      </div>
      <div class="col-sm-3 nopadding">
        <div class="password-rules-title">
          Must Contain:
>>>>>>> upstream/sprint11
        </div>
        <ul class="password-rules">
          <li class="success rule-username"><i class="icon icon-ok"></i> Not your email</li>
          <li class="error rule-username"><i class="icon icon-remove"></i> Not your email</li>
          <li class="success rule-length"><i class="icon icon-ok"></i> 8 characters or more</li>
          <li class="error rule-length"><i class="icon icon-remove"></i> 8 characters or more</li>
          <li class="success rule-upper"><i class="icon icon-ok"></i> Uppercase</li>
          <li class="error rule-upper"><i class="icon icon-remove"></i> Uppercase</li>
          <li class="success rule-lower"><i class="icon icon-ok"></i> Lowercase</li>
          <li class="error rule-lower"><i class="icon icon-remove"></i> Lowercase</li>
          <li class="success rule-number"><i class="icon icon-ok"></i> A Number</li>
          <li class="error rule-number"><i class="icon icon-remove"></i> A Number</li>
          <li class="success rule-symbol"><i class="icon icon-ok"></i> A Symbol</li>
          <li class="error rule-symbol"><i class="icon icon-remove"></i> A Symbol</li>
        </ul>
      </div>
    </div>

    <div class="checkbox">
      <label>
        <% if (login.terms.enabled === true) { %>
        <input type="checkbox" id="rterms" class="validate" data-validate="checked"> Yes, I agree to the <a href="<%= login.terms.link %>"><%= login.terms.name %></a>.
        <span class="help-block error-checked" style="display:none;">You must accept the <%= login.terms.name %> to register.</span>
        <% } %>
      </label>
    </div>

    <div class="form-group margin-bottom-none">
      <div class="row">
        <div class="col-sm-12">
          <div class="alert alert-danger" id="registration-error" style="display:none;"></div>
        </div>
      </div>
    </div>
</div>
<div class="modal-footer modal-footer-grey" id="registration-footer" style="display:none;">
  <div class="row">
    <div class="col-sm-12">
      <div class="pull-right">
        <button type="button" id="register-cancel" class="btn btn-c0">Cancel</button>
        <button type="submit" class="btn btn-c2">Register</button>
      </div>
    </div>
  </div>
</div>
</form>

login_view.js

define([
  'jquery',
  'underscore',
  'backbone',
  'utilities',
  'text!login_template',
  'modal_component'
], function ($, _, Backbone, utils, LoginTemplate, ModalComponent) {

  var LoginView = Backbone.View.extend({

    events: {
      'click .oauth-link'              : 'link',
      'keyup #rusername'               : 'checkUsername',
      'click #rusername-button'        : 'clickUsername',
      'keyup #rpassword'               : 'checkPassword',
      'blur #rpassword'                : 'checkPassword',
      'submit #login-password-form'    : 'submitLogin',
      'submit #registration-form'      : 'submitRegister'
    },

    initialize: function (options) {
      this.options = options;
    },

    render: function () {
      var data = {
        login: this.options.login,
        message: this.options.message
      };
      var template = _.template(LoginTemplate, data);
      this.$el.html(template);
      return this;
    },

    link: function (e) {
      if (e.preventDefault) e.preventDefault();
      var link = $(e.currentTarget).attr('href');
      window.location.href = link;
    },

<<<<<<< HEAD
    showLogin: function (e) {
      if (e.preventDefault) e.preventDefault();
      $(".login-form").show();
    },

    showRegister: function (e) {
      if (e.preventDefault) e.preventDefault();
      if (this.loginView) this.loginView.cleanup();
      if (this.modalComponent) this.modalComponent.cleanup();

      this.loginView = new RegistrationView({
        el: ".modal-template"
      }).render();
=======
    v: function (e) {
      return validate(e);
>>>>>>> upstream/sprint11
    },

    submitLogin: function (e) {
      var self = this;
      if (e.preventDefault) e.preventDefault();
      var data = {
        username: this.$("#username").val(),
        password: this.$("#password").val(),
        json: true
      };
      $.ajax({
        url: '/api/auth/local',
        type: 'POST',
        data: data
      }).done(function (success) {
        // Set the user object and trigger the user login event
        window.cache.currentUser = success;
        window.cache.userEvents.trigger("user:login", success);
      }).fail(function (error) {
        var d = JSON.parse(error.responseText);
        self.$("#login-error").html(d.message);
        self.$("#login-error").show();
      });
    },

    submitRegister: function (e) {
      var self = this;
      if (e.preventDefault) e.preventDefault();

      // validate input fields
      var validateIds = ['#rusername', '#rpassword'];
      // Only validate terms & conditions if it is enabled
      if (this.options.login.terms.enabled === true) {
        validateIds.push('#rterms');
      }
      var abort = false;
      for (i in validateIds) {
        var iAbort = validate({ currentTarget: validateIds[i] });
        abort = abort || iAbort;
      }
      var passwordSuccess = this.checkPassword();
      var parent = $(this.$("#rpassword").parents('.form-group')[0]);
      if (passwordSuccess !== true) {
        parent.addClass('has-error');
        $(parent.find('.error-password')[0]).show();
      } else {
        $(parent.find('.error-password')[0]).hide();
      }
      if (abort === true || passwordSuccess !== true) {
        return;
      }

      // Create a data object with the required fields
      var data = {
        username: this.$("#rusername").val(),
        password: this.$("#rpassword").val(),
        json: true
      };
      // Add in additional, optional fields
      if (this.options.login.terms.enabled === true) {
        data['terms'] = (this.$("#rterms").val() == "on");
      }
      // Post the registration request to the server
      $.ajax({
        url: '/api/auth/register',
        type: 'POST',
        data: data
      }).done(function (success) {
        // Set the user object and trigger the user login event
        window.cache.currentUser = success;
        window.cache.userEvents.trigger("user:login", success);
      }).fail(function (error) {
        var d = JSON.parse(error.responseText);
        self.$("#registration-error").html(d.message);
        self.$("#registration-error").show();
      });
    },

    checkUsername: function (e) {
      var username = $("#rusername").val();
      $.ajax({
        url: '/api/user/username/' + username,
      }).done(function (data) {
        $("#rusername-button").removeClass('btn-success');
        $("#rusername-button").removeClass('btn-danger');
        $("#rusername-check").removeClass('icon-ok');
        $("#rusername-check").removeClass('icon-remove');
        if (data) {
          // username is taken
          $("#rusername-button").addClass('btn-danger');
          $("#rusername-check").addClass('icon-remove');
        } else {
          // username is available
          $("#rusername-button").addClass('btn-success');
          $("#rusername-check").addClass('icon-ok');
        }
      });
    },

    checkPassword: function (e) {
      var rules = validatePassword(this.$("#rusername").val(), this.$("#rpassword").val());
      var success = true;
      _.each(rules, function (value, key) {
        if (value === true) {
          this.$(".password-rules .success.rule-" + key).show();
          this.$(".password-rules .error.rule-" + key).hide();
        } else {
          this.$(".password-rules .success.rule-" + key).hide();
          this.$(".password-rules .error.rule-" + key).show();
        }
        success = success && value;
      });
      return success;
    },

    clickUsername: function (e) {
      e.preventDefault();
    },

    cleanup: function () {
      removeView(this);
    },
  });

  return LoginView;
});