directivefy the user info registration form

client/users/auth/register/RegisterForm.html

@@ -0,0 +1,8 @@
+<form class="form" role="form" ng-submit="submitHandler()">
+    <input type="text" name="name" ng-model="model.name" required="required" placeholder="Your name" autofocus>
+    <input type="email" name="email" ng-class="{ error: model.errors.email }" ng-model="model.email" required="required" placeholder="Your email">
+    <input type="password" name="password" ng-class="{ error: model.errors.password }" ng-model="model.password" required="required" placeholder="Choose a password">
+    <input type="password" name="password_confirmation" ng-class="{ error: model.errors.password_confirmation }" ng-model="model.password_confirmation" required="required" placeholder="Retype that password">
+    <p class="error" ng-repeat="error in model.errors.full_messages">{{ error }}.</p>
+    <button ng-show="showSubmitButton" type="submit">Create My Account</button>
+</form>

client/users/auth/register/RegisterFormDirective.js

@@ -0,0 +1,12 @@
+angular.module('caac.users.register-form.directive', [])
+  .directive('registerForm', function() {
+    return {
+      restrict: 'E',
+      scope: {
+        model: '=ngModel',
+        submitHandler: '&',
+        showSubmitButton: '='
+      },
+      templateUrl: 'users/auth/register/RegisterForm.html'
+    };
+  });

client/users/auth/register/learners/RegisterLearnersController.js

@@ -3,11 +3,11 @@ angular.module('caac.users.register.learners.controller', [
   'caac.shared.copyright.directive',
   'caac.shared.progress-indicator.directive',
   'caac.shared.title.service',
-  'caac.users.auth.service'
+  'caac.users.auth.service',
+  'caac.users.register-form.directive'
 ]).controller('RegisterLearnersController', function($location, $log, $scope, AuthService, TitleService) {
     var self = $scope;
     var logger = $log.getInstance('RegisterLearnersController');
-    self.registrationForm = {};
 
     self.construct = function() {
       TitleService.set('Register');

client/users/auth/register/learners/RegisterLearnersView.html

@@ -6,14 +6,7 @@
             <h1>Add yourself as a CaaC Learner</h1>
             <h2>Tell us a little about you.</h2>
         </div>
-        <form class="form" role="form" ng-submit="handleRegisterBtnClick()">
-            <input type="text" name="name" ng-model="registrationForm.name" required="required" placeholder="Your name" autofocus>
-            <input type="email" name="email" ng-class="{ error: registrationForm.errors.email }" ng-model="registrationForm.email" required="required" placeholder="Your email">
-            <input type="password" name="password" ng-class="{ error: registrationForm.errors.password }" ng-model="registrationForm.password" required="required" placeholder="Choose a password">
-            <input type="password" name="password_confirmation" ng-class="{ error: registrationForm.errors.password_confirmation }" ng-model="registrationForm.password_confirmation" required="required" placeholder="Retype that password">
-            <p class="error" ng-repeat="error in registrationForm.errors.full_messages">{{ error }}.</p>
-            <button type="submit">Create My Account</button>
-        </form>
+        <register-form ng-model="registrationForm" show-submit-button="true" submit-handler="handleRegisterBtnClick()"></register-form>
         <progress-indicator current-step="2" number-of-steps="2"></progress-indicator>
     </div>
 </section>

client/users/auth/register/organizers/RegisterOrganizersView.html

@@ -6,13 +6,7 @@
             <h1>Add Yourself</h1>
             <h2>Tell us a little about you.</h2>
         </div>
-        <form class="form" role="form">
-            <input type="text" name="name" ng-class="{ error: registrationForm.errors.name }" ng-model="registrationForm.name" required="required" placeholder="Your name" autofocus>
-            <input type="email" name="email" ng-class="{ error: registrationForm.errors.email }" ng-model="registrationForm.email" required="required" placeholder="Your email">
-            <input type="password" name="password" ng-class="{ error: registrationForm.errors.password }" ng-model="registrationForm.password" required="required" placeholder="Choose a password">
-            <input type="password" name="password_confirmation" ng-class="{ error: registrationForm.errors.password_confirmation }" ng-model="registrationForm.password_confirmation" required="required" placeholder="Retype that password">
-            <p class="error" ng-repeat="error in registrationForm.errors.full_messages">{{ error }}.</p>
-        </form>
+        <register-form ng-model="registrationForm"></register-form>
     </div>
     <div class="container short">
         <div class="title primary-light">