Merge pull request #233 from coreos-inc/signupflow

Some small UI fixes

static/css/directives/ui/signup-form.css

@@ -0,0 +1,7 @@
+.signup-form-element {
+  position: relative;
+}
+
+.signup-form-element .co-alert {
+  color: black;
+}

static/css/quay.css

@@ -1238,7 +1238,7 @@ i.toggle-icon:hover {
   color: white;
 
   margin-bottom: 0px;
-  padding-top: 120px;
+  padding-top: 40px;
   min-height: 440px;
 }
 

static/directives/signup-form.html

@@ -23,12 +23,10 @@
       <div class="external-login-button" provider="google"></div>
     </div>
   </form>
-  <div ng-show="registering" style="text-align: center">
-    <div class="quay-spinner 2x"></div>
-  </div>
-  <div ng-show="awaitingConfirmation">
-    <div class="sub-message">
+  <div class="cor-loader" ng-show="registering"></div>
+  <div class="co-alert co-alert-info"
+       ng-show="awaitingConfirmation && hideRegisteredMessage != 'true'">
     Thank you for registering! We have sent you an activation email.
-      You must <b>verify your email address</b> before you can continue.</div>
+    You must <b>verify your email address</b> before you can continue.
   </div>
 </div>

static/js/directives/ui/signup-form.js

@@ -10,7 +10,7 @@ angular.module('quay').directive('signupForm', function () {
     restrict: 'C',
     scope: {
       'inviteCode': '=inviteCode',
-
+      'hideRegisteredMessage': '@hideRegisteredMessage',
       'userRegistered': '&userRegistered'
     },
     controller: function($scope, $location, $timeout, ApiService, KeyService, UserService, Config, UIService) {
@@ -35,11 +35,11 @@ angular.module('quay').directive('signupForm', function () {
             mixpanel.alias($scope.newUser.username);
           }
 
-          $scope.userRegistered({'username': $scope.newUser.username});
-
           if (!$scope.awaitingConfirmation) {
             document.location = '/';
           }
+
+          $scope.userRegistered({'username': $scope.newUser.username});
         }, function(result) {
           $scope.registering  = false;
           UIService.showFormError('#signupButton', result);

static/js/pages/landing.js

@@ -12,6 +12,7 @@
   function LandingCtrl($scope, $location, UserService, ApiService, Features, Config) {
     $scope.namespace = null;
     $scope.currentScreenshot = 'repo-view';
+    $scope.userRegistered = false;
 
     $scope.$watch('namespace', function(namespace) {
       loadMyRepos(namespace);
@@ -26,6 +27,10 @@
       loadMyRepos($scope.namespace);
     });
 
+    $scope.handleUserRegistered = function() {
+      $scope.userRegistered = true;
+    };
+
     $scope.changeScreenshot = function(screenshot) {
       $scope.currentScreenshot = screenshot;
     };

static/js/services/ui-service.js

@@ -104,7 +104,7 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio
   uiService.showFormError = function(elem, result, opt_placement) {
     var message =  result.data['message'] || result.data['error_description'] || '';
     if (message) {
-      uiService.showPopover(elem, message, opt_placement);
+      uiService.showPopover(elem, message, opt_placement || 'bottom');
     } else {
       uiService.hidePopover(elem);
     }

static/partials/landing-normal.html

@@ -2,6 +2,11 @@
   <div class="landing-background" ng-class="user.anonymous ? 'landing': 'signedin'"></div>
   <div class="landing-filter" ng-class="user.anonymous ? 'landing': 'signedin'"></div>
   <div class="landing-content">
+    <div class="co-alert co-alert-info" style="color:black;" ng-show="userRegistered">
+      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 class="cor-container">
       <div class="row messages">
         <div class="col-md-7">
@@ -43,7 +48,8 @@
 
         <div class="col-md-4 col-md-offset-1">
           <div ng-show="user.anonymous">
-            <div class="signup-form"></div>
+            <div class="signup-form" user-registered="handleUserRegistered()"
+                 hide-registered-message="true"></div>
           </div>
           <div ng-show="!user.anonymous" class="user-welcome">
             <span class="avatar" size="128" data="user.avatar"></span>