codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-02-17 08:50:58 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

AuthModal and CreateAccountModal load gplus and facebook on init

Browse source 
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.
This commit is contained in:
Scott Erickson 2016-05-31 12:39:30 -07:00
parent 9f4861bbaa
commit 249255e4dc
5 changed files with 76 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/templates/core/auth.jade
View file

@ -39,10 +39,10 @@
// btn.btn.btn-sm.github-login-button#github-login-button // btn.btn.btn-sm.github-login-button#github-login-button
// img(src="/images/pages/modal/auth/github_icon.png") // img(src="/images/pages/modal/auth/github_icon.png")
// | GitHub // | 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") img.network-logo(src="/images/pages/community/logo_facebook.png", draggable="false")
span.sign-in-blurb(data-i18n="login.sign_in_with_facebook") 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") img.network-logo(src="/images/pages/community/logo_g+.png", draggable="false")
span.sign-in-blurb(data-i18n="login.sign_in_with_gplus") span.sign-in-blurb(data-i18n="login.sign_in_with_gplus")
.gplus-login-wrapper .gplus-login-wrapper

4
app/templates/core/create-account-modal.jade
View file

@ -33,10 +33,10 @@
.col-md-6 .col-md-6
.auth-network-logins.text-center .auth-network-logins.text-center
strong(data-i18n="signup.or_sign_up_with") 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") img.network-logo(src="/images/pages/community/logo_facebook.png", draggable="false")
span.sign-in-blurb(data-i18n="login.sign_in_with_facebook") 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") img.network-logo(src="/images/pages/community/logo_g+.png", draggable="false")
span.sign-in-blurb(data-i18n="login.sign_in_with_gplus") span.sign-in-blurb(data-i18n="login.sign_in_with_gplus")
.gplus-login-wrapper .gplus-login-wrapper

60
app/views/core/AuthModal.coffee
View file

@ -28,6 +28,10 @@ module.exports = class AuthModal extends ModalView
initialize: (options={}) -> initialize: (options={}) ->
@previousFormInputs = options.initialValues or {} @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: -> getRenderData: ->
c = super() c = super()
c.showRequiredError = @options.showRequiredError c.showRequiredError = @options.showRequiredError
@ -68,28 +72,22 @@ module.exports = class AuthModal extends ModalView
onClickGPlusLoginButton: -> onClickGPlusLoginButton: ->
btn = @$('#gplus-login-btn') btn = @$('#gplus-login-btn')
btn.attr('disabled', true) application.gplusHandler.connect({
application.gplusHandler.loadAPI({
context: @ context: @
success: -> success: ->
btn.attr('disabled', false) btn.find('.sign-in-blurb').text($.i18n.t('login.logging_in'))
application.gplusHandler.connect({ btn.attr('disabled', true)
application.gplusHandler.loadPerson({
context: @ context: @
success: -> success: (gplusAttrs) ->
btn.find('.sign-in-blurb').text($.i18n.t('login.logging_in')) existingUser = new User()
btn.attr('disabled', true) existingUser.fetchGPlusUser(gplusAttrs.gplusID, {
application.gplusHandler.loadPerson({ success: =>
context: @ me.loginGPlusUser(gplusAttrs.gplusID, {
success: (gplusAttrs) -> success: -> window.location.reload()
existingUser = new User()
existingUser.fetchGPlusUser(gplusAttrs.gplusID, {
success: =>
me.loginGPlusUser(gplusAttrs.gplusID, {
success: -> window.location.reload()
error: @onGPlusLoginError
})
error: @onGPlusLoginError error: @onGPlusLoginError
}) })
error: @onGPlusLoginError
}) })
}) })
}) })
@ -105,28 +103,22 @@ module.exports = class AuthModal extends ModalView
onClickFacebookLoginButton: -> onClickFacebookLoginButton: ->
btn = @$('#facebook-login-btn') btn = @$('#facebook-login-btn')
btn.attr('disabled', true) application.facebookHandler.connect({
application.facebookHandler.loadAPI({
context: @ context: @
success: -> success: ->
btn.attr('disabled', false) btn.find('.sign-in-blurb').text($.i18n.t('login.logging_in'))
application.facebookHandler.connect({ btn.attr('disabled', true)
application.facebookHandler.loadPerson({
context: @ context: @
success: -> success: (facebookAttrs) ->
btn.find('.sign-in-blurb').text($.i18n.t('login.logging_in')) existingUser = new User()
btn.attr('disabled', true) existingUser.fetchFacebookUser(facebookAttrs.facebookID, {
application.facebookHandler.loadPerson({ success: =>
context: @ me.loginFacebookUser(facebookAttrs.facebookID, {
success: (facebookAttrs) -> success: -> window.location.reload()
existingUser = new User()
existingUser.fetchFacebookUser(facebookAttrs.facebookID, {
success: =>
me.loginFacebookUser(facebookAttrs.facebookID, {
success: -> window.location.reload()
error: @onFacebookLoginError
})
error: @onFacebookLoginError error: @onFacebookLoginError
}) })
error: @onFacebookLoginError
}) })
}) })
}) })

80
app/views/core/CreateAccountModal.coffee
View file

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

18
test/app/views/core/CreateAccountModal.spec.coffee
View file

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