From 4c08699728fa8235aadd12e49d824a7fe4f0a68c Mon Sep 17 00:00:00 2001
From: smartapant <smartapant@gmail.com>
Date: Tue, 5 Jan 2016 19:44:49 +0300
Subject: [PATCH] Personal info form.

---
 src/app/pages/form/wizard/wizardPage.html | 57 ++++++++++++++---------
 src/app/pages/form/wizard/wizrdCtrl.js    | 15 ++++--
 src/sass/app/_form.scss                   |  7 +++
 3 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/src/app/pages/form/wizard/wizardPage.html b/src/app/pages/form/wizard/wizardPage.html
index 776c635..cbc6f53 100644
--- a/src/app/pages/form/wizard/wizardPage.html
+++ b/src/app/pages/form/wizard/wizardPage.html
@@ -3,27 +3,39 @@
     <div class="row">
         <div class="col-md-12">
             <blur-panel title="Form Wizard" class-container="with-scroll">
-              <ba-wizard>
-                  <ba-wizard-tab title="Personal info" completeness="vm.personalInfoForm.$valid">
-                      <form name="vm.personalInfoForm" novalidate>
-                          <div class="form-group">
-                              <label for="exampleInputEmail1">Email address</label>
-                              <input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="Email" ng-model="vm.personalInfo.email" required>
-                          </div>
-                          <div class="form-group">
-                              <label for="exampleInputPassword1">Password</label>
-                              <input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="Password" ng-model="vm.personalInfo.password" required>
-                          </div>
-                          <div class="checkbox">
-                              <label class="custom-checkbox">
-                                  <input type="checkbox">
-                                  <span>Check me out</span>
-                              </label>
-                          </div>
-                          <button type="submit" class="btn btn-danger">Submit</button>
-                      </form>
-                  </ba-wizard-tab>
-                  <ba-wizard-tab title="Product Info" completeness="vm.productInfoForm.$valid">
+                <ba-wizard>
+                    <ba-wizard-tab title="Personal info" form="vm.personalInfoForm">
+                        <form name="vm.personalInfoForm" novalidate>
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="form-group has-feedback"
+                                         ng-class="{'has-error': vm.personalInfoForm.username.$invalid && (vm.personalInfoForm.username.$dirty || vm.personalInfoForm.$submitted)}">
+                                        <label for="exampleUsername1">Username</label>
+                                        <input type="text" class="form-control" id="exampleUsername1" name="username" placeholder="Username" ng-model="vm.personalInfo.username" required>
+                                        <span class="help-block error-block basic-block">Required</span>
+                                    </div>
+                                    <div class="form-group" ng-class="{'has-error': vm.personalInfoForm.email.$invalid && (vm.personalInfoForm.email.$dirty || vm.personalInfoForm.$submitted)}">
+                                        <label for="exampleInputEmail1">Email address</label>
+                                        <input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="Email" ng-model="vm.personalInfo.email" required>
+                                        <span class="help-block error-block basic-block">Proper email required</span>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-group" ng-class="{'has-error': vm.personalInfoForm.password.$invalid && (vm.personalInfoForm.password.$dirty || vm.personalInfoForm.$submitted)}">
+                                        <label for="exampleInputPassword1">Password</label>
+                                        <input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="Password" ng-model="vm.personalInfo.password" required>
+                                        <span class="help-block error-block basic-block">Required</span>
+                                    </div>
+                                    <div class="form-group"  ng-class="{'has-error': !vm.arePersonalInfoPasswordsEqual() && (vm.personalInfoForm.confirmPassword.$dirty || vm.personalInfoForm.$submitted)}">
+                                        <label for="exampleInputConfirmPassword1">Confirm Password</label>
+                                        <input type="password" class="form-control" id="exampleInputConfirmPassword1" name="confirmPassword" placeholder="Confirm Password" ng-model="vm.personalInfo.confirmPassword" required>
+                                        <span class="help-block error-block basic-block">Passwords should match</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </form>
+                    </ba-wizard-tab>
+                  <ba-wizard-tab title="Product Info" form="vm.productInfoForm">
                       <form name="vm.productInfoForm" novalidate>
                           <div class="row">
                               <div class="col-sm-6">
@@ -54,9 +66,8 @@
                               </div>
                           </div>
                       </form>
-                      <button type="submit" class="btn btn-primary">Submit</button>
                   </ba-wizard-tab>
-                  <ba-wizard-tab title="Payment"  completeness="vm.paymentForm.$valid">
+                  <ba-wizard-tab title="Payment"  form="vm.paymentForm">
                       <form class="row form-inline" name="vm.paymentForm" novalidate>
                           <div class="form-group col-sm-3 col-xs-6">
                               <input type="text" class="form-control" id="exampleInputName2" placeholder="Name" ng-model="vm.payment.name" required>
diff --git a/src/app/pages/form/wizard/wizrdCtrl.js b/src/app/pages/form/wizard/wizrdCtrl.js
index 9bafbb0..88818a8 100644
--- a/src/app/pages/form/wizard/wizrdCtrl.js
+++ b/src/app/pages/form/wizard/wizrdCtrl.js
@@ -7,7 +7,7 @@
       .directive('baWizardTab', baWizardTab);
 
   /** @ngInject */
-  function WizardCtrl($scope, $location, $sce) {
+  function WizardCtrl($scope) {
    var vm = this;
 
     vm.personalInfo = {};
@@ -15,6 +15,9 @@
     vm.payment = {};
     vm.finish = {};
 
+    vm.arePersonalInfoPasswordsEqual = function () {
+      return vm.personalInfo.confirmPassword && vm.personalInfo.password == vm.personalInfo.confirmPassword;
+    };
   }
 
   function baWizard() {
@@ -39,6 +42,7 @@
         $scope.$watch(angular.bind(vm, function () {return vm.tabNum;}), countProgress);
 
         vm.selectTab = function (tabNum) {
+          vm.tabs[vm.tabNum].submit();
           if (vm.tabs[tabNum].isAvailiable()) {
             vm.tabNum = tabNum;
             vm.tabs.forEach(function (t, tIndex) {
@@ -76,7 +80,7 @@
       transclude: true,
       require: '^baWizard',
       scope: {
-        completeness: '='
+        form: '='
       },
       templateUrl:  'app/pages/form/wizard/tab.html',
       link: function($scope, $element, $attrs, wizard) {
@@ -85,6 +89,7 @@
         var tab = {
           title: $attrs.title,
           select: select,
+          submit: submit,
           isComplete: isComplete,
           isAvailiable: isAvailiable,
           prevTab: undefined,
@@ -101,8 +106,12 @@
           }
         }
 
+        function submit() {
+          $scope.form && $scope.form.$setSubmitted(true);
+        }
+
         function isComplete() {
-          return $scope.completeness;
+          return $scope.form ? $scope.form.$valid : true;
         }
 
         function isAvailiable() {
diff --git a/src/sass/app/_form.scss b/src/sass/app/_form.scss
index 4fd4562..018606f 100644
--- a/src/sass/app/_form.scss
+++ b/src/sass/app/_form.scss
@@ -380,6 +380,13 @@ label.custom-input-danger {
   color: $help-text;
 }
 
+.help-block.error-block {
+  display: none;
+  .has-error &.basic-block {
+    display: block;
+  }
+}
+
 @mixin groupAddon($color) {
   background: $color;
   color: #ffffff;