From 3d18ddf2a5b7c20d9d51ce7be657d58c1b3e3328 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <jschorr@gmail.com>
Date: Mon, 7 Apr 2014 18:55:39 -0400
Subject: [PATCH] Fix form error popovers in all forms

---
 static/directives/signup-form.html |  6 ++--
 static/js/app.js                   | 55 +++++++++++++++++++++++-------
 static/js/controllers.js           | 33 +++++++-----------
 static/partials/user-admin.html    |  8 ++---
 templates/base.html                |  2 +-
 5 files changed, 63 insertions(+), 41 deletions(-)

diff --git a/static/directives/signup-form.html b/static/directives/signup-form.html
index 562223d96..f5e5f33df 100644
--- a/static/directives/signup-form.html
+++ b/static/directives/signup-form.html
@@ -1,13 +1,13 @@
 <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">
+  <form class="form-signup" name="signupForm" ng-submit="register()" ngshow="!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"
+      <button id="signupButton"
+              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="social-alternate">
         <i class="fa fa-circle"></i>
diff --git a/static/js/app.js b/static/js/app.js
index 311b531fb..f6a94ec45 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -325,6 +325,42 @@ quayApp = angular.module('quay', ['ngRoute', 'chieffancypants.loadingBar', 'angu
     }]);
 
 
+    $provide.factory('UIService', [function() {
+      var uiService = {};
+      
+      uiService.hidePopover = function(elem) {
+        var popover = $('#signupButton').data('bs.popover');
+        if (popover) {
+          popover.hide();
+        }
+      };
+
+      uiService.showPopover = function(elem, content) {
+        var popover = $(elem).data('bs.popover');
+        if (!popover) {
+          $(elem).popover({'content': '-', 'placement': 'left'});
+        }
+
+        setTimeout(function() {
+          var popover = $(elem).data('bs.popover');
+          popover.options.content = content;
+          popover.show();
+        }, 500);
+      };
+      
+      uiService.showFormError = function(elem, result) {
+        var message =  result.data['message'] || result.data['error_description'] || '';
+        if (message) {
+          uiService.showPopover(elem, message);
+        } else {
+          uiService.hidePopover(elem);
+        }
+      };
+      
+      return uiService;
+    }]);
+
+
     $provide.factory('UtilService', ['$sanitize', function($sanitize) {
       var utilService = {};
       
@@ -1582,10 +1618,9 @@ quayApp.directive('signupForm', function () {
     scope: {
 
     },
-    controller: function($scope, $location, $timeout, ApiService, KeyService, UserService) {      
-      $('.form-signup').popover();
-
-      angulartics.waitForVendorApi(mixpanel, 500, function(loadedMixpanel) {
+    controller: function($scope, $location, $timeout, ApiService, KeyService, UserService, UIService) {
+   
+     angulartics.waitForVendorApi(mixpanel, 500, function(loadedMixpanel) {
         var mixpanelId = loadedMixpanel.get_distinct_id();
         $scope.github_state_clause = '&state=' + mixpanelId;    
       });
@@ -1594,22 +1629,18 @@ quayApp.directive('signupForm', function () {
 
       $scope.awaitingConfirmation = false;
       $scope.registering = false;
-        
+
       $scope.register = function() {
-        $('.form-signup').popover('hide');
+        UIService.hidePopover('#signupButton');
         $scope.registering = true;
 
         ApiService.createNewUser($scope.newUser).then(function() {
-          $scope.awaitingConfirmation = true;
           $scope.registering  = false;
-
+          $scope.awaitingConfirmation = true;
           mixpanel.alias($scope.newUser.username);
         }, function(result) {
           $scope.registering  = false;
-          $scope.registerError = result.data.message;
-          $timeout(function() {
-            $('.form-signup').popover('show');
-          });
+          UIService.showFormError('#signupButton', result);
         });
       };
     }
diff --git a/static/js/controllers.js b/static/js/controllers.js
index 08bcca561..ae0a4f090 100644
--- a/static/js/controllers.js
+++ b/static/js/controllers.js
@@ -1607,7 +1607,7 @@ function RepoAdminCtrl($scope, Restangular, ApiService, KeyService, $routeParams
 }
 
 function UserAdminCtrl($scope, $timeout, $location, ApiService, PlanService, UserService, CookieService, KeyService,
-    $routeParams, $http) {
+                       $routeParams, $http, UIService) {
   if ($routeParams['migrate']) {
     $('#migrateTab').tab('show')
   }
@@ -1640,8 +1640,6 @@ function UserAdminCtrl($scope, $timeout, $location, ApiService, PlanService, Use
   $scope.githubClientId = KeyService.githubClientId;
   $scope.authorizedApps = null;
 
-  $('.form-change').popover();
-
   $scope.logsShown = 0;
   $scope.invoicesShown = 0;
   
@@ -1729,7 +1727,8 @@ function UserAdminCtrl($scope, $timeout, $location, ApiService, PlanService, Use
   };
 
   $scope.changeEmail = function() {
-    $('#changeEmailForm').popover('hide');
+    UIService.hidePopover('#changeEmailForm');
+
     $scope.updatingUser = true;
     $scope.changeEmailSent = false;
 
@@ -1744,16 +1743,13 @@ function UserAdminCtrl($scope, $timeout, $location, ApiService, PlanService, Use
       $scope.changeEmailForm.$setPristine();
     }, function(result) {
       $scope.updatingUser = false;
-
-      $scope.changeEmailError = result.data.message;
-      $timeout(function() {
-        $('#changeEmailForm').popover('show');
-      });
+      UIService.showFormError('#changeEmailForm', result);      
     });
   };
 
   $scope.changePassword = function() {
-    $('#changePasswordForm').popover('hide');
+    UIService.hidePopover('#changePasswordForm');
+
     $scope.updatingUser = true;
     $scope.changePasswordSuccess = false;
 
@@ -1771,11 +1767,7 @@ function UserAdminCtrl($scope, $timeout, $location, ApiService, PlanService, Use
       UserService.load();
     }, function(result) {
       $scope.updatingUser = false;
-
-      $scope.changePasswordError = result.data.message;
-      $timeout(function() {
-        $('#changePasswordForm').popover('show');
-      });
+      UIService.showFormError('#changePasswordForm', result);      
     });
   };
 }
@@ -2160,7 +2152,7 @@ function OrgViewCtrl($rootScope, $scope, ApiService, $routeParams) {
   loadOrganization();
 }
 
-function OrgAdminCtrl($rootScope, $scope, $timeout, Restangular, $routeParams, UserService, PlanService, ApiService) {
+function OrgAdminCtrl($rootScope, $scope, $timeout, Restangular, $routeParams, UserService, PlanService, ApiService, UIService) {
   var orgname = $routeParams.orgname;
 
   // Load the list of plans.
@@ -2199,10 +2191,12 @@ function OrgAdminCtrl($rootScope, $scope, $timeout, Restangular, $routeParams, U
   };
 
   $scope.$watch('organizationEmail', function(e) {
-    $('#changeEmailForm').popover('hide');
+    UIService.hidePopover('#changeEmailForm');
   });
 
   $scope.changeEmail = function() {
+    UIService.hidePopover('#changeEmailForm');
+
     $scope.changingOrganization = true;
     var params = {
       'orgname': orgname
@@ -2218,10 +2212,7 @@ function OrgAdminCtrl($rootScope, $scope, $timeout, Restangular, $routeParams, U
       $scope.organization = org;
     }, function(result) {
       $scope.changingOrganization = false;
-      $scope.changeEmailError = result.data.message;
-      $timeout(function() {
-        $('#changeEmailForm').popover('show');
-      });
+      UIService.showFormError('#changeEmailForm', result);
     });
   };
 
diff --git a/static/partials/user-admin.html b/static/partials/user-admin.html
index 0fada5347..721f8ab58 100644
--- a/static/partials/user-admin.html
+++ b/static/partials/user-admin.html
@@ -115,8 +115,8 @@
               <div class="panel-title">Change e-mail address</div>
 
               <div class="panel-body">
-                <form class="form-change col-md-6" id="changeEmailForm" name="changeEmailForm" ng-submit="changeEmail()" data-trigger="manual"
-                      data-content="{{ changeEmailError }}" data-placement="right" ng-show="!awaitingConfirmation && !registering">
+                <form class="form-change col-md-6" id="changeEmailForm" name="changeEmailForm" ng-submit="changeEmail()"
+                      ng-show="!awaitingConfirmation && !registering">
                   <input type="email" class="form-control" placeholder="Your new e-mail address" ng-model="cuser.email" required>
                   <button class="btn btn-primary" ng-disabled="changeEmailForm.$invalid || cuser.email == user.email" type="submit">Change E-mail Address</button>
                 </form>
@@ -137,8 +137,8 @@
               <span class="help-block" ng-show="changePasswordSuccess">Password changed successfully</span>
 
               <div ng-show="!updatingUser" class="panel-body">
-                <form class="form-change col-md-6" id="changePasswordForm" name="changePasswordForm" ng-submit="changePassword()" data-trigger="manual"
-                      data-content="{{ changePasswordError }}" data-placement="right" ng-show="!awaitingConfirmation && !registering">
+                <form class="form-change col-md-6" id="changePasswordForm" name="changePasswordForm" ng-submit="changePassword()"
+                      ng-show="!awaitingConfirmation && !registering">
                   <input type="password" class="form-control" placeholder="Your new password" ng-model="cuser.password" required>
                   <input type="password" class="form-control" placeholder="Verify your new password" ng-model="cuser.repeatPassword"
                          match="cuser.password" required>
diff --git a/templates/base.html b/templates/base.html
index 59e427da1..f4dfe4dbe 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -50,7 +50,7 @@
     <!-- ,typeahead.js@0.10.1 -->
 
     <script src="/static/lib/loading-bar.js"></script>
-    <script src="/static/lib/angular-strap.min.js"></script>
+    <script src="/static/lib/angular-strap.js"></script>
     <script src="/static/lib/angular-strap.tpl.min.js"></script>
     <script src="/static/lib/angulartics.js"></script>
     <script src="/static/lib/angulartics-mixpanel.js"></script>