Move the signup form into its own directive

static/directives/signup-form.html

@@ -0,0 +1,29 @@
+<div class="signup-form-element">
+  <form class="form-signup" name="signupForm" ng-submit="register()" data-trigger="manual"
+        data-content="{{ registerError }}" data-placement="left" ng-show="!awaitingConfirmation && !registering">
+    <input type="text" class="form-control" placeholder="Create a username" name="username" ng-model="newUser.username" autofocus required>
+    <input type="email" class="form-control" placeholder="Email address" ng-model="newUser.email" required>
+    <input type="password" class="form-control" placeholder="Create a password" ng-model="newUser.password" required>
+    <input type="password" class="form-control" placeholder="Verify your password" ng-model="newUser.repeatPassword"
+           match="newUser.password" required>
+    <div class="form-group signin-buttons">
+      <button class="btn btn-primary btn-block landing-signup-button" ng-disabled="signupForm.$invalid" type="submit"
+              analytics-on analytics-event="register">Sign Up for Free!</button>
+      <span class="landing-social-alternate">
+        <i class="fa fa-circle"></i>
+        <span class="inner-text">OR</span>
+      </span>
+      <a href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email{{ github_state_clause }}"
+         class="btn btn-primary btn-block"><i class="fa fa-github fa-lg"></i> Sign In with GitHub</a>
+      <p class="help-block">No credit card required.</p>
+    </div>
+  </form>
+  <div ng-show="registering" style="text-align: center">
+    <i class="fa fa-spinner fa-spin fa-3x"></i>
+  </div>
+  <div ng-show="awaitingConfirmation">
+    <div class="sub-message">
+      Thank you for registering! We have sent you an activation email.
+      You must <b>verify your email address</b> before you can continue.</div>
+  </div>
+</div>

static/js/app.js

@@ -579,6 +579,53 @@ quayApp.directive('signinForm', function () {
 });
 
 
+quayApp.directive('signupForm', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/signup-form.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+
+    },
+    controller: function($scope, $location, $timeout, Restangular, KeyService, UserService) {      
+      $('.form-signup').popover();
+
+      angulartics.waitForVendorApi(mixpanel, 500, function(loadedMixpanel) {
+        var mixpanelId = loadedMixpanel.get_distinct_id();
+        $scope.github_state_clause = '&state=' + mixpanelId;    
+      });
+
+      $scope.githubClientId = KeyService.githubClientId;
+
+      $scope.awaitingConfirmation = false;
+      $scope.registering = false;
+        
+      $scope.register = function() {
+        $('.form-signup').popover('hide');
+        $scope.registering = true;
+
+        var newUserPost = Restangular.one('user/');
+        newUserPost.customPOST($scope.newUser).then(function() {
+          $scope.awaitingConfirmation = true;
+          $scope.registering  = false;
+
+          mixpanel.alias($scope.newUser.username);
+        }, function(result) {
+          $scope.registering  = false;
+          $scope.registerError = result.data.message;
+          $timeout(function() {
+            $('.form-signup').popover('show');
+          });
+        });
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
 quayApp.directive('plansTable', function () {
   var directiveDefinitionObject = {
     priority: 0,

static/js/controllers.js

@@ -107,8 +107,6 @@ function RepoListCtrl($scope, Restangular, UserService) {
 }
 
 function LandingCtrl($scope, $timeout, $location, Restangular, UserService, KeyService) {
-  $('.form-signup').popover();
-
   $scope.namespace = null;
 
   $scope.$watch('namespace', function(namespace) {
@@ -119,35 +117,6 @@ function LandingCtrl($scope, $timeout, $location, Restangular, UserService, KeyS
     $scope.user = currentUser;
   }, true);
 
-  angulartics.waitForVendorApi(mixpanel, 500, function(loadedMixpanel) {
-    var mixpanelId = loadedMixpanel.get_distinct_id();
-    $scope.github_state_clause = '&state=' + mixpanelId;    
-  });
-
-  $scope.githubClientId = KeyService.githubClientId;
-
-  $scope.awaitingConfirmation = false;
-  $scope.registering = false;
-
-  $scope.register = function() {
-    $('.form-signup').popover('hide');
-    $scope.registering = true;
-
-    var newUserPost = Restangular.one('user/');
-    newUserPost.customPOST($scope.newUser).then(function() {
-      $scope.awaitingConfirmation = true;
-      $scope.registering  = false;
-
-      mixpanel.alias($scope.newUser.username);
-    }, function(result) {
-      $scope.registering  = false;
-      $scope.registerError = result.data.message;
-      $timeout(function() {
-        $('.form-signup').popover('show');
-      });
-    });
-  };
-
   $scope.canCreateRepo = function(namespace) {
     if (!$scope.user) { return false; }
 

static/partials/landing.html

@@ -36,27 +36,7 @@
 
       <div class="col-md-4 col-md-offset-1">
         <div ng-show="user.anonymous">
-          <form class="form-signup" name="signupForm" ng-submit="register()" data-trigger="manual" data-content="{{ registerError }}" data-placement="left" ng-show="!awaitingConfirmation && !registering">
+          <div class="signup-form"></div>
-            <input type="text" class="form-control" placeholder="Create a username" name="username" ng-model="newUser.username" autofocus required>
-            <input type="email" class="form-control" placeholder="Email address" ng-model="newUser.email" required>
-            <input type="password" class="form-control" placeholder="Create a password" ng-model="newUser.password" required>
-            <input type="password" class="form-control" placeholder="Verify your password" ng-model="newUser.repeatPassword" match="newUser.password" required>
-            <div class="form-group signin-buttons">
-              <button class="btn btn-primary btn-block landing-signup-button" ng-disabled="signupForm.$invalid" type="submit" analytics-on analytics-event="register">Sign Up for Free!</button>
-              <span class="landing-social-alternate">
-                <i class="fa fa-circle"></i>
-                <span class="inner-text">OR</span>
-              </span>
-              <a href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email{{ github_state_clause }}" class="btn btn-primary btn-block"><i class="fa fa-github fa-lg"></i> Sign In with GitHub</a>
-              <p class="help-block">No credit card required.</p>
-            </div>
-          </form>
-          <div ng-show="registering" style="text-align: center">
-            <span class="spin" color="#fff" style="display: inline-block"></span>
-          </div>
-          <div ng-show="awaitingConfirmation">
-            <div class="sub-message">Thank you for registering! We have sent you an activation email. You must <b>verify your email address</b> before you can continue.</div>
-          </div>
         </div>
         <div ng-show="!user.anonymous" class="user-welcome">
           <img class="gravatar" src="//www.gravatar.com/avatar/{{ user.gravatar }}?s=128&d=identicon" />