diff --git a/app/styles/courses/student-sign-up-modal.sass b/app/styles/courses/student-sign-up-modal.sass new file mode 100644 index 000000000..4a88cfc09 --- /dev/null +++ b/app/styles/courses/student-sign-up-modal.sass @@ -0,0 +1,7 @@ +#student-sign-up-modal + #sign-up-btn + min-width: 30% + margin-bottom: 10px + + .form + margin: 0 25% \ No newline at end of file diff --git a/app/templates/courses/student-sign-up-modal.jade b/app/templates/courses/student-sign-up-modal.jade new file mode 100644 index 000000000..96f7f063a --- /dev/null +++ b/app/templates/courses/student-sign-up-modal.jade @@ -0,0 +1,43 @@ +extends /templates/core/modal-base + +block modal-header-content + .clearfix + + +block modal-body-content + .text-center + h2.modal-title(data-i18n="signup.sign_up") + + form.form + .form-group + label.control-label(for="email") + span(data-i18n="general.email") + input#email.input-large.form-control(name="email", type="email") + .form-group + label.control-label(for="name") + span(data-i18n="general.name") Name + if me.get('name') + input#name.input-large.form-control(name="name", type="text", value="#{me.get('name')}") + else + input#name.input-large.form-control(name="name", type="text", value="", placeholder="Anoner") + .form-group + label.control-label(for="password") + span(data-i18n="general.password") Password + input#password.input-large.form-control(name="password", type="password") + .form-group + label.control-label(for="class-code") + span Class Code + input#class-code-input.input-large.form-control(name="class-code") + .help-block optional - ask your teacher to give you one! + + #errors-alert.alert.alert-danger.hide + + .text-center + if view.willPlayMode + input#sign-up-btn.btn.btn-default(type="submit", value="Start Playing") + p + a#skip-link Skip this, I'll create an account later! + else + input#sign-up-btn.btn.btn-default(data-i18n="[value]signup.sign_up", type="submit") + +block modal-footer-content \ No newline at end of file diff --git a/app/views/courses/HourOfCodeView.coffee b/app/views/courses/HourOfCodeView.coffee index 9c0f4d1c3..31b1585a3 100644 --- a/app/views/courses/HourOfCodeView.coffee +++ b/app/views/courses/HourOfCodeView.coffee @@ -10,7 +10,7 @@ LevelSession = require 'models/LevelSession' Level = require 'models/Level' ChooseLanguageModal = require 'views/courses/ChooseLanguageModal' StudentLogInModal = require 'views/courses/StudentLogInModal' - +StudentSignUpModal = require 'views/courses/StudentSignUpModal' module.exports = class HourOfCodeView extends RootView id: 'hour-of-code-view' @@ -88,10 +88,9 @@ module.exports = class HourOfCodeView extends RootView onClickLogInButton: -> modal = new StudentLogInModal() @openModalView(modal) + modal.on 'want-to-create-account', @onWantToCreateAccount, @ -# onClickStudentButton: -> -# @state = 'enrolling' -# @stateMessage = undefined -# @render?() -# + onWantToCreateAccount: -> + modal = new StudentSignUpModal() + @openModalView(modal) diff --git a/app/views/courses/StudentLogInModal.coffee b/app/views/courses/StudentLogInModal.coffee index 28d92c58b..6f1fa85f4 100644 --- a/app/views/courses/StudentLogInModal.coffee +++ b/app/views/courses/StudentLogInModal.coffee @@ -11,6 +11,7 @@ module.exports = class StudentSignInModal extends ModalView events: 'click #log-in-btn': 'onClickLogInButton' 'submit form': 'onSubmitForm' + 'click #create-new-account-link': 'onClickCreateNewAccountLink' onSubmitForm: (e) -> e.preventDefault() @@ -27,4 +28,7 @@ module.exports = class StudentSignInModal extends ModalView message = _.filter([error.property, error.message]).join(' ') @disableModalInProgress(@$el) @$('#errors-alert').text(message).removeClass('hide') - \ No newline at end of file + + onClickCreateNewAccountLink: -> + @trigger 'want-to-create-account' + @hide?() \ No newline at end of file diff --git a/app/views/courses/StudentSignUpModal.coffee b/app/views/courses/StudentSignUpModal.coffee new file mode 100644 index 000000000..4349b9749 --- /dev/null +++ b/app/views/courses/StudentSignUpModal.coffee @@ -0,0 +1,67 @@ +ModalView = require 'views/core/ModalView' +template = require 'templates/courses/student-sign-up-modal' +auth = require 'core/auth' +forms = require 'core/forms' +User = require 'models/User' + +module.exports = class StudentSignUpModal extends ModalView + id: 'student-sign-up-modal' + template: template + + events: + 'click #sign-up-btn': 'onClickSignUpButton' + 'submit form': 'onSubmitForm' + 'click #skip-link': 'onClickSkipLink' + + initialize: (options) -> + options ?= {} + + onClickSkipLink: -> + @trigger 'click-skip-link' # defer to view that opened this modal + @hide() + + onSubmitForm: (e) -> + e.preventDefault() + @signup() + + onClickSignUpButton: -> + @signup() + + emailCheck: -> + email = @$('#email').val() + filter = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i # https://news.ycombinator.com/item?id=5763990 + unless filter.test(email) + @$('#errors-alert').text($.i18n.t('share_progress_modal.email_invalid')).removeClass('hide') + return false + return true + + signup: -> + return unless @emailCheck() + # TODO: consolidate with AuthModal logic, or make user creation process less magical, more RESTful + data = forms.formToObject @$el + classCode = data['class-code'] + delete data['class-code'] + for key, val of me.attributes when key in ['preferredLanguage', 'testGroupNumber', 'dateCreated', 'wizardColor1', 'name', 'music', 'volume', 'emails'] + data[key] ?= val + Backbone.Mediator.publish "auth:signed-up", {} + data.emails ?= {} + data.emails.generalNews ?= {} + data.emails.generalNews.enabled = false + window.tracker?.trackEvent 'Finished Student Signup', label: 'CodeCombat' + @enableModalInProgress(@$el) + user = new User(data) + user.notyErrors = false + user.save({}, { + validate: false # make server deal with everything + error: (model, jqxhr) => + # really need to make our server errors uniform + if jqxhr.responseJSON + error = jqxhr.responseJSON + error = error[0] if _.isArray(error) + message = _.filter([error.property, error.message]).join(' ') + else + message = jqxhr.responseText + @disableModalInProgress(@$el) + @$('#errors-alert').text(message).removeClass('hide') + success: -> window.location.reload() + })