AuthModal and CreateAccountModal load gplus and facebook on init

On Windows/Chrome, the first click of the g+ button shows a popup
blocked warning, because the action is deferred while loading the
gplus library. Have the modals load the library first, and enable the
buttons when they're ready.

app/templates/core/auth.jade

@@ -39,10 +39,10 @@
     //  btn.btn.btn-sm.github-login-button#github-login-button
     //    img(src="/images/pages/modal/auth/github_icon.png")
     //    | GitHub
-    #facebook-login-btn.btn.btn-primary.btn-lg.btn-illustrated.network-login
+    button#facebook-login-btn.btn.btn-primary.btn-lg.btn-illustrated.network-login(disabled=true)
       img.network-logo(src="/images/pages/community/logo_facebook.png", draggable="false")
       span.sign-in-blurb(data-i18n="login.sign_in_with_facebook")
-    #gplus-login-btn.btn.btn-danger.btn-lg.btn-illustrated.network-login
+    button#gplus-login-btn.btn.btn-danger.btn-lg.btn-illustrated.network-login(disabled=true)
       img.network-logo(src="/images/pages/community/logo_g+.png", draggable="false")
       span.sign-in-blurb(data-i18n="login.sign_in_with_gplus")
       .gplus-login-wrapper

app/templates/core/create-account-modal.jade

@@ -33,10 +33,10 @@
       .col-md-6
         .auth-network-logins.text-center
           strong(data-i18n="signup.or_sign_up_with")
-          #facebook-signup-btn.btn.btn-primary.btn-lg.btn-illustrated.network-login
+          button#facebook-signup-btn.btn.btn-primary.btn-lg.btn-illustrated.network-login(disabled=true)
             img.network-logo(src="/images/pages/community/logo_facebook.png", draggable="false")
             span.sign-in-blurb(data-i18n="login.sign_in_with_facebook")
-          #gplus-signup-btn.btn.btn-danger.btn-lg.btn-illustrated.network-login
+          button#gplus-signup-btn.btn.btn-danger.btn-lg.btn-illustrated.network-login(disabled=true)
             img.network-logo(src="/images/pages/community/logo_g+.png", draggable="false")
             span.sign-in-blurb(data-i18n="login.sign_in_with_gplus")
             .gplus-login-wrapper

app/views/core/AuthModal.coffee

@@ -28,6 +28,10 @@ module.exports = class AuthModal extends ModalView
   initialize: (options={}) ->
     @previousFormInputs = options.initialValues or {}
 
+    # TODO: Switch to promises and state, rather than using defer to hackily enable buttons after render
+    application.gplusHandler.loadAPI({ success: => _.defer => @$('#gplus-login-btn').attr('disabled', false) })
+    application.facebookHandler.loadAPI({ success: => _.defer => @$('#facebook-login-btn').attr('disabled', false) })
+
   getRenderData: ->
     c = super()
     c.showRequiredError = @options.showRequiredError
@@ -68,28 +72,22 @@ module.exports = class AuthModal extends ModalView
 
   onClickGPlusLoginButton: ->
     btn = @$('#gplus-login-btn')
-    btn.attr('disabled', true)
-    application.gplusHandler.loadAPI({
+    application.gplusHandler.connect({
       context: @
       success: ->
-        btn.attr('disabled', false)
-        application.gplusHandler.connect({
+        btn.find('.sign-in-blurb').text($.i18n.t('login.logging_in'))
+        btn.attr('disabled', true)
+        application.gplusHandler.loadPerson({
           context: @
-          success: ->
-            btn.find('.sign-in-blurb').text($.i18n.t('login.logging_in'))
-            btn.attr('disabled', true)
-            application.gplusHandler.loadPerson({
-              context: @
-              success: (gplusAttrs) ->
-                existingUser = new User()
-                existingUser.fetchGPlusUser(gplusAttrs.gplusID, {
-                  success: =>
-                    me.loginGPlusUser(gplusAttrs.gplusID, {
-                      success: -> window.location.reload()
-                      error: @onGPlusLoginError
-                    })
+          success: (gplusAttrs) ->
+            existingUser = new User()
+            existingUser.fetchGPlusUser(gplusAttrs.gplusID, {
+              success: =>
+                me.loginGPlusUser(gplusAttrs.gplusID, {
+                  success: -> window.location.reload()
                   error: @onGPlusLoginError
                 })
+              error: @onGPlusLoginError
             })
         })
     })
@@ -105,28 +103,22 @@ module.exports = class AuthModal extends ModalView
 
   onClickFacebookLoginButton: ->
     btn = @$('#facebook-login-btn')
-    btn.attr('disabled', true)
-    application.facebookHandler.loadAPI({
+    application.facebookHandler.connect({
       context: @
       success: ->
-        btn.attr('disabled', false)
-        application.facebookHandler.connect({
+        btn.find('.sign-in-blurb').text($.i18n.t('login.logging_in'))
+        btn.attr('disabled', true)
+        application.facebookHandler.loadPerson({
           context: @
-          success: ->
-            btn.find('.sign-in-blurb').text($.i18n.t('login.logging_in'))
-            btn.attr('disabled', true)
-            application.facebookHandler.loadPerson({
-              context: @
-              success: (facebookAttrs) ->
-                existingUser = new User()
-                existingUser.fetchFacebookUser(facebookAttrs.facebookID, {
-                  success: =>
-                    me.loginFacebookUser(facebookAttrs.facebookID, {
-                      success: -> window.location.reload()
-                      error: @onFacebookLoginError
-                    })
+          success: (facebookAttrs) ->
+            existingUser = new User()
+            existingUser.fetchFacebookUser(facebookAttrs.facebookID, {
+              success: =>
+                me.loginFacebookUser(facebookAttrs.facebookID, {
+                  success: -> window.location.reload()
                   error: @onFacebookLoginError
                 })
+              error: @onFacebookLoginError
             })
         })
     })

app/views/core/CreateAccountModal.coffee

@@ -29,6 +29,10 @@ module.exports = class CreateAccountModal extends ModalView
   initialize: (options={}) ->
     @onNameChange = _.debounce(_.bind(@checkNameExists, @), 500)
     @previousFormInputs = options.initialValues or {}
+    
+    # TODO: Switch to promises and state, rather than using defer to hackily enable buttons after render
+    application.gplusHandler.loadAPI({ success: => _.defer => @$('#gplus-signup-btn').attr('disabled', false) })
+    application.facebookHandler.loadAPI({ success: => _.defer => @$('#facebook-signup-btn').attr('disabled', false) })
 
   afterRender: ->
     super()
@@ -155,32 +159,26 @@ module.exports = class CreateAccountModal extends ModalView
 
   onClickGPlusSignupButton: ->
     btn = @$('#gplus-signup-btn')
-    btn.attr('disabled', true)
-    application.gplusHandler.loadAPI({
+    application.gplusHandler.connect({
       context: @
       success: ->
-        btn.attr('disabled', false)
-        application.gplusHandler.connect({
+        btn.find('.sign-in-blurb').text($.i18n.t('signup.creating'))
+        btn.attr('disabled', true)
+        application.gplusHandler.loadPerson({
           context: @
-          success: ->
-            btn.find('.sign-in-blurb').text($.i18n.t('signup.creating'))
-            btn.attr('disabled', true)
-            application.gplusHandler.loadPerson({
+          success: (@gplusAttrs) ->
+            existingUser = new User()
+            existingUser.fetchGPlusUser(@gplusAttrs.gplusID, {
               context: @
-              success: (@gplusAttrs) ->
-                existingUser = new User()
-                existingUser.fetchGPlusUser(@gplusAttrs.gplusID, {
-                  context: @
-                  complete: ->
-                    @$('#email-password-row').remove()
-                  success: =>
-                    @$('#gplus-account-exists-row').removeClass('hide')
-                  error: (user, jqxhr) =>
-                    if jqxhr.status is 404
-                      @$('#gplus-logged-in-row').toggleClass('hide')
-                    else
-                      errors.showNotyNetworkError(jqxhr)
-                })
+              complete: ->
+                @$('#email-password-row').remove()
+              success: =>
+                @$('#gplus-account-exists-row').removeClass('hide')
+              error: (user, jqxhr) =>
+                if jqxhr.status is 404
+                  @$('#gplus-logged-in-row').toggleClass('hide')
+                else
+                  errors.showNotyNetworkError(jqxhr)
             })
         })
     })
@@ -201,32 +199,26 @@ module.exports = class CreateAccountModal extends ModalView
 
   onClickFacebookSignupButton: ->
     btn = @$('#facebook-signup-btn')
-    btn.attr('disabled', true)
-    application.facebookHandler.loadAPI({
+    application.facebookHandler.connect({
       context: @
       success: ->
-        btn.attr('disabled', false)
-        application.facebookHandler.connect({
+        btn.find('.sign-in-blurb').text($.i18n.t('signup.creating'))
+        btn.attr('disabled', true)
+        application.facebookHandler.loadPerson({
           context: @
-          success: ->
-            btn.find('.sign-in-blurb').text($.i18n.t('signup.creating'))
-            btn.attr('disabled', true)
-            application.facebookHandler.loadPerson({
+          success: (@facebookAttrs) ->
+            existingUser = new User()
+            existingUser.fetchFacebookUser(@facebookAttrs.facebookID, {
               context: @
-              success: (@facebookAttrs) ->
-                existingUser = new User()
-                existingUser.fetchFacebookUser(@facebookAttrs.facebookID, {
-                  context: @
-                  complete: ->
-                    @$('#email-password-row').remove()
-                  success: =>
-                    @$('#facebook-account-exists-row').removeClass('hide')
-                  error: (user, jqxhr) =>
-                    if jqxhr.status is 404
-                      @$('#facebook-logged-in-row').toggleClass('hide')
-                    else
-                      errors.showNotyNetworkError(jqxhr)
-                })
+              complete: ->
+                @$('#email-password-row').remove()
+              success: =>
+                @$('#facebook-account-exists-row').removeClass('hide')
+              error: (user, jqxhr) =>
+                if jqxhr.status is 404
+                  @$('#facebook-logged-in-row').toggleClass('hide')
+                else
+                  errors.showNotyNetworkError(jqxhr)
             })
         })
     })

test/app/views/core/CreateAccountModal.spec.coffee

@@ -6,31 +6,31 @@ describe 'CreateAccountModal', ->
   
   modal = null
   
-  initModal = (options) ->
+  initModal = (options) -> (done) ->
     application.facebookHandler.fakeAPI()
     application.gplusHandler.fakeAPI()
     modal = new CreateAccountModal(options)
     modal.render()
     modal.render = _.noop
     jasmine.demoModal(modal)
+    _.defer done
   
   afterEach ->
     modal.stopListening()
     
   describe 'constructed with showRequiredError is true', ->
+    beforeEach initModal({showRequiredError: true})
     it 'shows a modal explaining to login first', ->
-      initModal({showRequiredError: true})
       expect(modal.$('#required-error-alert').length).toBe(1)
 
   describe 'constructed with showSignupRationale is true', ->
+    beforeEach initModal({showSignupRationale: true})
     it 'shows a modal explaining signup rationale', ->
-      initModal({showSignupRationale: true})
       expect(modal.$('#signup-rationale-alert').length).toBe(1)
 
   describe 'clicking the save button', ->
 
-    beforeEach ->
-      initModal()
+    beforeEach initModal()
 
     it 'fails if nothing is in the form, showing errors for email, birthday, and password', ->
       modal.$('form').each (i, el) -> el.reset()
@@ -110,8 +110,9 @@ describe 'CreateAccountModal', ->
     
     signupButton = null
 
+    beforeEach initModal()
+ 
     beforeEach ->
-      initModal()
       forms.objectToForm(modal.$el, { birthdayDay: 24, birthdayMonth: 7, birthdayYear: 1988 })
       signupButton = modal.$('#gplus-signup-btn')
       expect(signupButton.attr('disabled')).toBeFalsy()
@@ -176,8 +177,9 @@ describe 'CreateAccountModal', ->
 
     signupButton = null
 
+    beforeEach initModal()
+    
     beforeEach ->
-      initModal()
       forms.objectToForm(modal.$el, { birthdayDay: 24, birthdayMonth: 7, birthdayYear: 1988 })
       signupButton = modal.$('#facebook-signup-btn')
       expect(signupButton.attr('disabled')).toBeFalsy()
@@ -235,4 +237,4 @@ describe 'CreateAccountModal', ->
           expect(request.method).toBe('PUT')
           expect(_.string.startsWith(request.url, '/db/user')).toBe(true)
           expect(modal.$('#signup-button').is(':disabled')).toBe(true)
-          expect(request.url).toBe('/db/user?facebookID=abcd&facebookAccessToken=1234')
+          expect(request.url).toBe('/db/user?facebookID=abcd&facebookAccessToken=1234')