@{
    ViewBag.Title = "Account Registration";
}
@section scripts {
  <script src="@Url.Content("~/Binding/Models/AccountRegisterModel.js")"
           type="text/javascript"></script>
  <script src="@Url.Content("~/Binding/ViewModels/AccountRegisterViewModel.js")"
           type="text/javascript"></script>
}

@section footerScript {
  angular.bootstrap(document.getElementById("registration"), ['accountRegister']);
}

<div ng-non-bindable>
  <div data-ng-controller="AccountRegisterViewModel" id="registration">
    <br />
    @Html.Partial("~/Views/Shared/_ValidationErrors.cshtml")
    <br />
    <div ng-view></div>
  </div>
</div>

var commonModule = angular.module('common', ['ngRoute', 'ui.bootstrap']);

// Non-SPA views will use Angular controllers created on the appMainModule.
var appMainModule = angular.module('appMain', ['common']);

// SPA-views will attach to their own module and use their own data-ng-app and nested controllers.
// Each MVC-delivered top-spa-level view will link its needed JS files.

// Services attached to the commonModule will be available to all other Angular modules.

commonModule.factory('viewModelHelper', function ($http, $q) {
  return AlbumApp.viewModelHelper($http, $q);
});

commonModule.factory('validator', function () {
  return valJs.validator();
});

(function (aa) {
  var viewModelHelper = function ($http, $q) {

    var self = this;

    self.modelIsValid = true;
    self.modelErrors = [];
    self.isLoading = false;
...

var accountRegisterModule = angular.module('accountRegister', ['common'])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider.when(AlbumApp.rootPath + 'account/register/step1',
            { templateUrl: AlbumApp.rootPath + 'Templates/RegisterStep1.html',
              controller: 'AccountRegisterStep1ViewModel' });
    $routeProvider.when(AlbumApp.rootPath + 'account/register/step2',
            { templateUrl: AlbumApp.rootPath + 'Templates/RegisterStep2.html',
              controller: 'AccountRegisterStep2ViewModel' });
    $routeProvider.when(AlbumApp.rootPath + 'account/register/step3',
            { templateUrl: AlbumApp.rootPath + 'Templates/RegisterStep3.html',
              controller: 'AccountRegisterStep3ViewModel' });
    $routeProvider.when(AlbumApp.rootPath + 'account/register/confirm',
            { templateUrl: AlbumApp.rootPath + 'Templates/RegisterConfirm.html',
              controller: 'AccountRegisterConfirmViewModel' });
    $routeProvider.otherwise({ redirectTo: AlbumApp.rootPath + 'account/register/step1' });
    $locationProvider.html5Mode({ enabled: true, requireBase: false });
  });


accountRegisterModule.controller("AccountRegisterViewModel",
                      function ($scope, $http, $location, $window, viewModelHelper) {
  $scope.viewModelHelper = viewModelHelper;
  $scope.accountModelStep1 = new AlbumApp.AccountRegisterModelStep1();
  $scope.accountModelStep2 = new AlbumApp.AccountRegisterModelStep2();
  $scope.accountModelStep3 = new AlbumApp.AccountRegisterModelStep3();
  $scope.previous = function () { $window.history.back(); } });


accountRegisterModule.controller("AccountRegisterStep1ViewModel",
                      function ($scope, $http, $location, $window, viewModelHelper, validator) {
  viewModelHelper.modelIsValid = true; viewModelHelper.modelErrors = []; var accountModelStep1Rules = [];

  var setupRules = function () {
    accountModelStep1Rules.push(new validator.PropertyRule("FirstName", {
      required: { message: "First name is required" } }));
    accountModelStep1Rules.push(new validator.PropertyRule("LastName", {
      required: { message: "Last name is required" } }));
    accountModelStep1Rules.push(new validator.PropertyRule("Address", {
      required: { message: "Address is required" } }));
    accountModelStep1Rules.push(new validator.PropertyRule("City", {
      required: { message: "City is required" } }));
    accountModelStep1Rules.push(new validator.PropertyRule("State", {
      required: { message: "State is required" } }));
    accountModelStep1Rules.push(new validator.PropertyRule("ZipCode", {
      required: { message: "Zip code is required" },
      pattern: { message: "Zip code is in invalid format (5 digits)",
              params: /^d{5}$/ } })); }

  $scope.step2 = function () {
    validator.ValidateModel($scope.accountModelStep1, accountModelStep1Rules);
    viewModelHelper.modelIsValid = $scope.accountModelStep1.isValid;
    viewModelHelper.modelErrors = $scope.accountModelStep1.errors;
    if (viewModelHelper.modelIsValid) {        /* api/account/register/validate1 */
      viewModelHelper.apiPost('api/account/register/validate1', $scope.accountModelStep1,
        function (result) { $scope.accountModelStep1.Initialized = true;
          $location.path(AlbumApp.rootPath + 'account/register/step2'); }); }
    else viewModelHelper.modelErrors = $scope.accountModelStep1.errors; }

  setupRules();    });


accountRegisterModule.controller("AccountRegisterStep2ViewModel", function ($scope, $http,
                                          $location, $window, viewModelHelper, validator) {
  if (!$scope.accountModelStep1.Initialized) { // go to this controller before going through step 2
    $location.path(AlbumApp.rootPath + 'account/register/step1');}

  viewModelHelper.modelIsValid = true; viewModelHelper.modelErrors = []; var accountModelStep2Rules = [];

  var setupRules = function () {
    accountModelStep2Rules.push(new validator.PropertyRule("LoginEmail", {
      required: { message: "Login Email is required" },
      email: { message: "Login email is not an email." } }));
    var pwdLen = 6;
    accountModelStep2Rules.push(new validator.PropertyRule("Password", {
      required: { message: "Password is required" },
      minLength: { message: "Password must be at least " + pwdLen + " characters", params: pwdLen } }));
    accountModelStep2Rules.push(new validator.PropertyRule("PasswordConfirm", {
      required: { message: "Password Confirmation is required" },
      custom: {
        validator: AlbumApp.mustEqual,
        message: "Passwords do not match",
        params: function () { return $scope.accountModelStep2.Password; } } }));
  }

  $scope.step3 = function () {
    validator.ValidateModel($scope.accountModelStep2, accountModelStep2Rules);
    viewModelHelper.modelIsValid = $scope.accountModelStep2.isValid;
    viewModelHelper.modelErrors = $scope.accountModelStep2.errors;
    if (viewModelHelper.modelIsValid) {        /* api/account/register/validate2 */
      viewModelHelper.apiPost('api/account/register/validate2', $scope.accountModelStep2,
        function (result) {
          $scope.accountModelStep2.Initialized = true;
          $location.path(AlbumApp.rootPath + 'account/register/step3');
        });
    }
    else viewModelHelper.modelErrors = $scope.accountModelStep2.errors;
  }

  setupRules();
});


accountRegisterModule.controller("AccountRegisterStep3ViewModel", function ($scope, $http,
                                          $location, viewModelHelper, validator) { // $window
  if (!$scope.accountModelStep2.Initialized) { // go to this controller before going through step 3
    $location.path(AlbumApp.rootPath + 'account/register/step2');
  }

  viewModelHelper.modelIsValid = true; viewModelHelper.modelErrors = []; var accountModelStep3Rules = [];

  var setupRules = function () {
    accountModelStep3Rules.push(new validator.PropertyRule("CreditCard", {
      required: { message: "Credit Card # is required" },
      pattern: { message: "CreditCard is in invalid format (16 digits)", params: /^d{16}$/ }
    }));
    accountModelStep3Rules.push(new validator.PropertyRule("ExpDate", {
      required: { message: "Expiration Date is required" },
      pattern: {
        message: "Expiration Date is in invalid format (MM/YY)",
        params: /^(0[1-9]|1[0-2])/[0-9]{2}$/ } }));
  }

  $scope.confirm = function () {
    validator.ValidateModel($scope.accountModelStep3, accountModelStep3Rules);
    viewModelHelper.modelIsValid = $scope.accountModelStep3.isValid;
    viewModelHelper.modelErrors = $scope.accountModelStep3.errors;
    if (viewModelHelper.modelIsValid) {        /* api/account/register/validate3 */
      viewModelHelper.apiPost('api/account/register/validate3', $scope.accountModelStep3,
        function (result) {
          $scope.accountModelStep3.Initialized = true;
          $location.path(AlbumApp.rootPath + 'account/register/confirm');
        }); }
    else viewModelHelper.modelErrors = $scope.accountModelStep3.errors;
  }

  setupRules();
});

accountRegisterModule.controller("AccountRegisterConfirmViewModel", function ($scope, $http,
                                          $location, $window, viewModelHelper) {
  if (!$scope.accountModelStep3.Initialized) { // go to this controller before going through step confirm
    $location.path(AlbumApp.rootPath + 'account/register/step3'); }

  $scope.createAccount = function () {
    var accountModel;
    accountModel = $.extend(accountModel, $scope.accountModelStep1);
    accountModel = $.extend(accountModel, $scope.accountModelStep2);
    accountModel = $.extend(accountModel, $scope.accountModelStep3);

    /* api/account/register */
    viewModelHelper.apiPost('api/account/register', accountModel,
      function (result) { $window.location.href = AlbumApp.rootPath; });  }  });

<div>
  <p class="input-group" style="width: 400px">
    <span class="input-group-addon" style="width: 140px; text-align: left;">First name:</span>
    <input type="text" class="form-control" ng-model="accountModelStep1.FirstName" placeholder="first name" />
  </p>
  <p class="input-group" style="width: 400px">
    <span class="input-group-addon" style="width: 140px; text-align: left;">Last name:</span>
    <input type="text" class="form-control" ng-model="accountModelStep1.LastName" placeholder="last name" />
  </p>
  <p class="input-group" style="width: 500px">
    <span class="input-group-addon" style="width: 140px; text-align: left;">Address:</span>
    <input type="text" class="form-control" ng-model="accountModelStep1.Address" placeholder="address" />
  </p>
  <p class="input-group" style="width: 400px">
    <span class="input-group-addon" style="width: 140px; text-align: left;">City:</span>
    <input type="text" class="form-control" ng-model="accountModelStep1.City" placeholder="city" />
  </p>
  <p class="input-group" style="width: 200px">
    <span class="input-group-addon" style="width: 140px; text-align: left;">State:</span>
    <input type="text" class="form-control" ng-model="accountModelStep1.State" placeholder="state" />
  </p>
  <p class="input-group" style="width: 215px">
    <span class="input-group-addon" style="width: 140px; text-align: left;">Zip code:</span>
    <input type="text" class="form-control" ng-model="accountModelStep1.ZipCode" placeholder="zip code" />
  </p>
  <hr style="width: 415px; text-align: left;" />
  <div>
    <a href="" class="btn btn-info" ng-show="!viewModelHelper.isLoading" ng-click="step2()">Next</a>
    <span class="spinner-config" ng-show="viewModelHelper.isLoading">
      <i class="fa fa-spinner fa-spin"></i>
    </span>
  </div>
</div>

<div>
  <p class="input-group" style="width: 400px">
    <span class="input-group-addon" style="width: 140px; text-align: left;">Login Email:</span>
    <input type="text" ng-model="accountModelStep2.LoginEmail" class="form-control" placeholder="login email" />
  </p>
  <p  class="input-group" style="width: 400px">
    <span class="input-group-addon" style="width: 140px; text-align: left;">Password:</span>
    <input type="password" ng-model="accountModelStep2.Password"  class="form-control"placeholder="password" />
  </p>
  <p class="input-group" style="width: 400px">
    <span class="input-group-addon" style="width: 140px; text-align: left;">Confirm Password:</span>
    <input type="password" ng-model="accountModelStep2.PasswordConfirm" class="form-control" placeholder="confirm password" />
  </p>
  <hr style="width: 415px; text-align: left;" />
  <div>
    <a href="" class="btn btn-info" ng-show="!viewModelHelper.isLoading" ng-click="previous()">Previous</a>
    <a href="" class="btn btn-info" ng-show="!viewModelHelper.isLoading" ng-click="step3()">Next</a>
    <span class="spinner-config" ng-show="viewModelHelper.isLoading">
      <i class="fa fa-spinner fa-spin"></i>
    </span>
  </div>
</div>