2014-11-28 20:49:41 -05:00
|
|
|
ModalView = require 'views/core/ModalView'
|
2014-05-22 14:24:35 -04:00
|
|
|
template = require 'templates/modal/auth'
|
2014-11-28 20:49:41 -05:00
|
|
|
{loginUser, createUser, me} = require 'core/auth'
|
|
|
|
forms = require 'core/forms'
|
2014-05-22 14:24:35 -04:00
|
|
|
User = require 'models/User'
|
2014-11-28 20:49:41 -05:00
|
|
|
application = require 'core/application'
|
2014-05-22 14:24:35 -04:00
|
|
|
|
2014-07-23 10:02:45 -04:00
|
|
|
module.exports = class AuthModal extends ModalView
|
2014-06-30 22:16:26 -04:00
|
|
|
id: 'auth-modal'
|
2014-05-22 14:24:35 -04:00
|
|
|
template: template
|
2014-11-02 21:36:43 -05:00
|
|
|
mode: 'signup' # or 'login'
|
2014-06-30 22:16:26 -04:00
|
|
|
|
2014-05-22 14:24:35 -04:00
|
|
|
events:
|
|
|
|
# login buttons
|
2014-06-30 22:16:26 -04:00
|
|
|
'click #switch-to-signup-button': 'onSignupInstead'
|
2014-11-02 21:36:43 -05:00
|
|
|
'click #switch-to-login-button': 'onLoginInstead'
|
2014-10-06 17:02:29 -04:00
|
|
|
'click #confirm-age': 'checkAge'
|
2014-08-15 10:20:45 -04:00
|
|
|
'click #github-login-button': 'onGitHubLoginClicked'
|
2014-05-22 14:24:35 -04:00
|
|
|
'submit': 'onSubmitForm' # handles both submit buttons
|
2014-07-10 14:50:16 -04:00
|
|
|
'keyup #name': 'onNameChange'
|
2014-11-14 14:04:17 -05:00
|
|
|
'click #gplus-login-button': 'onClickGPlusLogin'
|
2014-05-22 14:24:35 -04:00
|
|
|
|
|
|
|
subscriptions:
|
2014-08-27 15:24:03 -04:00
|
|
|
'errors:server-error': 'onServerError'
|
|
|
|
'auth:logging-in-with-facebook': 'onLoggingInWithFacebook'
|
2014-06-30 22:16:26 -04:00
|
|
|
|
2014-07-10 14:50:16 -04:00
|
|
|
constructor: (options) ->
|
2014-11-25 13:19:38 -05:00
|
|
|
options ?= {}
|
2014-07-10 14:50:16 -04:00
|
|
|
@onNameChange = _.debounce @checkNameExists, 500
|
|
|
|
super options
|
2014-11-22 20:38:01 -05:00
|
|
|
@mode = options.mode if options.mode
|
2014-07-10 14:50:16 -04:00
|
|
|
|
2014-05-22 14:24:35 -04:00
|
|
|
getRenderData: ->
|
|
|
|
c = super()
|
|
|
|
c.showRequiredError = @options.showRequiredError
|
2014-06-30 22:16:26 -04:00
|
|
|
c.title = {0: 'short', 1: 'long'}[me.get('testGroupNumber') % 2]
|
|
|
|
c.descriptionOn = {0: 'yes', 1: 'no'}[Math.floor(me.get('testGroupNumber')/2) % 2]
|
2014-05-22 14:24:35 -04:00
|
|
|
if @mode is 'signup'
|
|
|
|
application.tracker.identify authModalTitle: c.title
|
|
|
|
application.tracker.trackEvent 'Started Signup', authModalTitle: c.title, descriptionOn: c.descriptionOn
|
|
|
|
c.mode = @mode
|
|
|
|
c.formValues = @previousFormInputs or {}
|
2014-07-08 02:23:36 -04:00
|
|
|
c.onEmployersPage = Backbone.history.fragment is "employers"
|
2014-07-10 14:50:16 -04:00
|
|
|
c.me = me
|
2014-05-22 14:24:35 -04:00
|
|
|
c
|
2014-08-27 15:24:03 -04:00
|
|
|
|
2014-05-22 14:24:35 -04:00
|
|
|
afterInsert: ->
|
|
|
|
super()
|
2014-10-15 16:43:26 -04:00
|
|
|
_.delay (=> application.router.renderLoginButtons()), 500
|
2014-09-25 18:32:33 -04:00
|
|
|
_.delay (=> $('input:visible:first', @$el).focus()), 500
|
2014-06-30 22:16:26 -04:00
|
|
|
|
2014-05-22 14:24:35 -04:00
|
|
|
onSignupInstead: (e) ->
|
2014-11-26 09:58:23 -05:00
|
|
|
@playSound 'menu-button-click'
|
2014-05-22 14:24:35 -04:00
|
|
|
@mode = 'signup'
|
|
|
|
@previousFormInputs = forms.formToObject @$el
|
|
|
|
@render()
|
|
|
|
_.delay application.router.renderLoginButtons, 500
|
2014-06-30 22:16:26 -04:00
|
|
|
|
2014-11-02 21:36:43 -05:00
|
|
|
onLoginInstead: (e) ->
|
2014-11-26 09:58:23 -05:00
|
|
|
@playSound 'menu-button-click'
|
2014-11-02 21:36:43 -05:00
|
|
|
@mode = 'login'
|
|
|
|
@previousFormInputs = forms.formToObject @$el
|
|
|
|
@render()
|
|
|
|
_.delay application.router.renderLoginButtons, 500
|
|
|
|
|
2014-05-22 14:24:35 -04:00
|
|
|
onSubmitForm: (e) ->
|
2014-11-26 09:58:23 -05:00
|
|
|
@playSound 'menu-button-click'
|
2014-05-22 14:24:35 -04:00
|
|
|
e.preventDefault()
|
|
|
|
if @mode is 'login' then @loginAccount() else @createAccount()
|
|
|
|
false
|
|
|
|
|
|
|
|
checkAge: (e) ->
|
2014-11-26 09:58:23 -05:00
|
|
|
@playSound 'menu-button-click'
|
2014-06-30 22:16:26 -04:00
|
|
|
$('#signup-button', @$el).prop 'disabled', not $(e.target).prop('checked')
|
2014-05-22 14:24:35 -04:00
|
|
|
|
|
|
|
loginAccount: ->
|
|
|
|
forms.clearFormAlerts(@$el)
|
|
|
|
userObject = forms.formToObject @$el
|
|
|
|
res = tv4.validateMultiple userObject, User.schema
|
|
|
|
return forms.applyErrorsToForm(@$el, res.errors) unless res.valid
|
|
|
|
@enableModalInProgress(@$el) # TODO: part of forms
|
|
|
|
loginUser(userObject)
|
|
|
|
|
|
|
|
createAccount: ->
|
|
|
|
forms.clearFormAlerts(@$el)
|
|
|
|
userObject = forms.formToObject @$el
|
|
|
|
delete userObject.subscribe
|
2014-06-30 22:16:26 -04:00
|
|
|
delete userObject['confirm-age']
|
2014-07-10 14:50:16 -04:00
|
|
|
delete userObject.name if userObject.name is ''
|
|
|
|
userObject.name = @suggestedName if @suggestedName
|
2014-06-30 22:16:26 -04:00
|
|
|
for key, val of me.attributes when key in ['preferredLanguage', 'testGroupNumber', 'dateCreated', 'wizardColor1', 'name', 'music', 'volume', 'emails']
|
2014-05-22 14:24:35 -04:00
|
|
|
userObject[key] ?= val
|
2014-09-01 12:11:10 -04:00
|
|
|
subscribe = @$el.find('#subscribe').prop('checked')
|
2014-05-22 14:24:35 -04:00
|
|
|
userObject.emails ?= {}
|
|
|
|
userObject.emails.generalNews ?= {}
|
|
|
|
userObject.emails.generalNews.enabled = subscribe
|
|
|
|
res = tv4.validateMultiple userObject, User.schema
|
|
|
|
return forms.applyErrorsToForm(@$el, res.errors) unless res.valid
|
2014-11-21 19:23:26 -05:00
|
|
|
Backbone.Mediator.publish "auth:signed-up", {}
|
2014-05-22 14:24:35 -04:00
|
|
|
window.tracker?.trackEvent 'Finished Signup'
|
|
|
|
@enableModalInProgress(@$el)
|
|
|
|
createUser userObject, null, window.nextLevelURL
|
|
|
|
|
|
|
|
onLoggingInWithFacebook: (e) ->
|
|
|
|
modal = $('.modal:visible', @$el)
|
|
|
|
@enableModalInProgress(modal) # TODO: part of forms
|
|
|
|
|
|
|
|
onServerError: (e) -> # TODO: work error handling into a separate forms system
|
2014-06-30 22:16:26 -04:00
|
|
|
@disableModalInProgress(@$el)
|
2014-07-10 14:50:16 -04:00
|
|
|
|
|
|
|
checkNameExists: =>
|
|
|
|
name = $('#name', @$el).val()
|
|
|
|
return forms.clearFormAlerts(@$el) if name is ''
|
|
|
|
User.getUnconflictedName name, (newName) =>
|
|
|
|
forms.clearFormAlerts(@$el)
|
|
|
|
if name is newName
|
|
|
|
@suggestedName = undefined
|
|
|
|
else
|
|
|
|
@suggestedName = newName
|
|
|
|
forms.setErrorToProperty @$el, 'name', "That name is taken! How about #{newName}?", true
|
2014-08-15 10:20:45 -04:00
|
|
|
|
|
|
|
onGitHubLoginClicked: ->
|
2014-11-26 09:58:23 -05:00
|
|
|
@playSound 'menu-button-click'
|
2014-08-27 15:24:03 -04:00
|
|
|
Backbone.Mediator.publish 'auth:log-in-with-github', {}
|
2014-11-14 14:04:17 -05:00
|
|
|
|
|
|
|
gplusAuthSteps: [
|
|
|
|
{ i18n: 'login.authenticate_gplus', done: false }
|
|
|
|
{ i18n: 'login.load_profile', done: false }
|
|
|
|
{ i18n: 'login.load_email', done: false }
|
|
|
|
{ i18n: 'login.finishing', done: false }
|
|
|
|
]
|
|
|
|
|
|
|
|
onClickGPlusLogin: ->
|
2014-11-26 09:58:23 -05:00
|
|
|
@playSound 'menu-button-click'
|
2014-11-14 14:04:17 -05:00
|
|
|
step.done = false for step in @gplusAuthSteps
|
|
|
|
handler = application.gplusHandler
|
2014-11-21 19:23:26 -05:00
|
|
|
|
2014-11-14 14:04:17 -05:00
|
|
|
@listenToOnce handler, 'logged-in', ->
|
|
|
|
@gplusAuthSteps[0].done = true
|
|
|
|
@renderGPlusAuthChecklist()
|
|
|
|
handler.loginCodeCombat()
|
|
|
|
@listenToOnce handler, 'person-loaded', ->
|
|
|
|
@gplusAuthSteps[1].done = true
|
|
|
|
@renderGPlusAuthChecklist()
|
|
|
|
|
|
|
|
@listenToOnce handler, 'email-loaded', ->
|
|
|
|
@gplusAuthSteps[2].done = true
|
|
|
|
@renderGPlusAuthChecklist()
|
|
|
|
|
|
|
|
@listenToOnce handler, 'logging-into-codecombat', ->
|
|
|
|
@gplusAuthSteps[3].done = true
|
|
|
|
@renderGPlusAuthChecklist()
|
2014-11-21 19:23:26 -05:00
|
|
|
|
2014-11-14 14:04:17 -05:00
|
|
|
renderGPlusAuthChecklist: ->
|
|
|
|
template = require 'templates/modal/auth-modal-gplus-checklist'
|
|
|
|
el = $(template({steps: @gplusAuthSteps}))
|
|
|
|
el.i18n()
|
|
|
|
@$el.find('.modal-body:visible').empty().append(el)
|
|
|
|
@$el.find('.modal-footer').remove()
|