login.coffee

define [
  "jquery"
  "react"
  "mixins/backbone"
  "mixins/server_error"

  "models/account"

  "views/forms"
  "views/account/account_nav"

  "lib/glm_utils"

  "apps/i18n"
], (
  $
  React
  BackboneMixin
  ServerError
  Account
  Forms
  AccountNav
  GlmUtils
  I18N
) ->

  { div, h2, h3, p, form, a, input } = React.DOM
  { classSet } = React.addons
  { TextField, CheckBox, AuthToken } = Forms
  { MobileNav } = AccountNav
  { setEventData, getEventData } = GlmUtils

  # parent view
  LoginRegister = React.createClass
    displayName: "Account.LoginRegister"
    componentWillMount: ->
      window.LoginRegister = @
    getDefaultProps: ->
      errorMsg: null
      current: "main"
    getInitialState: ->
      section: @props.current
      onSection: @props.current != "main"
    componentWillUpdate: (nextProps, nextState) ->
      if @state.section != nextState.section or @state.onSection != nextState.onSection
        # if we're changing sections, clear the error msg
        nextProps.errorMsg = null
    onClick: (e) ->
      newSection = getEventData e, "setSection"
      if newSection and newSection == "main"
        @setState
          onSection: false
        @refs.mobileNav.setState
          showBack: false
      else if newSection
        @setState
          section: newSection
          onSection: true
        @refs.mobileNav.setState
          showBack: true
    mobileBack: (e) ->
      @setState
        onSection: false
      @refs.mobileNav.setState
        label: 'Account'
        showBack: false
    render: ->
      classes = classSet
        "login-register-content": true
        "account-section": true
        "mobile-anchored": [email protected]
      content = []
      if @state.section == "register"
        content.push(
          BackButton()
          RegisterForm
            ref: 'registerForm'
            errorMsg: @props.errorMsg
        )
      else if @state.section == "resetPassword"
        content.push(
          BackButton()
          ForgotPassword
            ref: "forgotPassword"
            errorMsg: @props.errorMsg
        )

      div
        className: classes
        onClick: @onClick
        children: [
          MobileNav
            ref: 'mobileNav'
            onBack: @mobileBack
            showBack: @state.onSection
          div
            className: "panels"
            ref: "panels"
            children: [
              div
                className: "account-secondary"
                children: [
                  # Main Content
                  Login
                    ref: "login"
                    errorMsg: @props.errorMsg
                  Register
                    ref: "register"
                    errorMsg: @props.errorMsg
                ]
              div
                className: "account-main"
                ref: "main-component"
                children: content
            ]
        ]

  BackButton = React.createClass
    getDefaultProps: ->
      label: I18N.t("account.forgot_password.cancel")
    click: (e) ->
      if e
        e.preventDefault()
      #bubble
      setEventData e, setSection: "main"
    render: ->
      a
        className: "back-link"
        href: "#back"
        onClick: @click
        @props.label

  Login = React.createClass
    displayName: "Account.Login"
    render: ->
      classes = classSet
        "login-content": true
      div
        className: classes
        id: "overlay-login-content"
        children: [
          h2
            className: "headline"
            I18N.t("account.log_in")
          p {}, I18N.t("account.log_in_copy")
          LoginForm
            errorMsg: @props.errorMsg
            ref: "form"
        ]

  LoginForm = React.createClass
    displayName: "Account.LoginForm"
    mixins: [ BackboneMixin, ServerError ]
    componentDidMount: ->
      @watchForServerErrors @state.model, ['email', 'password']
    getInitialState: ->
      model: new Account.Model({})
    getBackboneModels: ->
      [ @state.model ]
    showPasswordReset: (e) ->
      if e
        e.preventDefault()
      setEventData e, setSection: "resetPassword"
    handleKeyDown:(e)->
      if ('key' of e and e.key == 'Enter')
        e.preventDefault()
        @handleClick(e)
    handleClick: (e)->
      e.preventDefault()
      if ($ "input[name='spree_user_email']").val()
        @state.model.set('email', ($ "input[name='spree_user_email']").val())
      if ($ "input[name='spree_user_password']").val()
        @state.model.set('password', ($ "input[name='spree_user_password']").val())
      @state.model.logInUser()
    render: ->
      account = @state.model
      form
        onKeyDown: @handleKeyDown
        onSubmit: @handleClick
        action: "/login"
        method: "POST"
        children: [
          AuthToken {}
          ErrorMsg
            ref: "errors"
            msg: @props.errorMsg
          TextField
            ref: "email"
            name: "spree_user_email"
            autoComplete: "off"
            boundTo: [ account, "email" ]
            label: I18N.t("account.email")
          TextField
            ref: "password"
            type: "password"
            name: "spree_user_password"
            autoComplete: "off"
            boundTo: [ account, "password" ]
            label: I18N.t("account.password")
          a
            href: "#"
            onClick: @showPasswordReset
            className: "forgot-password-link"
            I18N.t("account.forgot_password_cta")
          a
            className: "button"
            id: "at-signin-button"
            href: "signin"
            ref: "submit"
            onClick: @handleClick
            children: I18N.t("account.cta")
        ]

  ForgotPassword = React.createClass
    displayName: "Account.ForgotPassword"
    mixins: [ BackboneMixin ]
    getInitialState: ->
      model: new Account.Model()
    getBackboneModels: ->
      [ @state.model ]
    handleClick:(e)->
      e.preventDefault()
      @state.model.recoverPassword()
    render: ->
      account = @state.model
      classes = classSet
        "reset-password": true
        "account-panel": true
      div
        className: classes
        children: [
          h2
            className: "headline"
            I18N.t("account.forgot_password.headline")
          p {}, I18N.t("account.forgot_password.copy")
          form
            ref: "form"
            action: "/password/recover"
            method: "POST"
            children: [
              AuthToken {}
              ErrorMsg
                ref: "errors"
                msg: @props.errorMsg
              TextField
                ref: "email"
                autoComplete: "off"
                name: "spree_user[email]"
                boundTo: [ account, "email" ]
                label: I18N.t("account.forgot_password.email")
              a
                href: "#recover-password"
                ref: "submit"
                onClick: @handleClick
                id: "at-recover-link"
                className: "button"
                I18N.t("account.forgot_password.cta")
            ]
        ]


  Register = React.createClass
    displayName: "Account.Register"
    showRegisterForm: (e) ->
      if e
        e.preventDefault()
      setEventData e, setSection: "register"
    render: ->
      classes = classSet
        "register-content": true
      div
        className: classes
        children: [
          h2
            className: "headline"
            I18N.t("account.register")
          h3
            className: "headline-secondary"
            children: [
              I18N.t("account.mobile_headline_1")
              I18N.t("account.mobile_headline_2")
            ]

          p
            className: "desc"
            I18N.t("account.register_copy")
          a
            href: "#signup"
            ref: "button"
            onClick: @showRegisterForm
            id: "at-signup-link"
            className: "button"
            I18N.t("account.register_page.cta")
        ]

  # sign em up, sign em up
  RegisterForm = React.createClass
    displayName: "Account.RegisterForm"
    mixins: [ BackboneMixin , ServerError ]
    componentDidMount: ->
      window.RegisterForm = @
      @watchForServerErrors @state.model, ['email', 'password']
    getInitialState: ->
      model: @setupInitialModel()
    setupInitialModel: ()-> if window.registerEmail then new Account.Model({email: window.registerEmail, newsletter_on: true}) else new Account.Model({newsletter_on: true})
    getBackboneModels: ->
      [ @state.model ]
    handleKeyDown:(e)->
      if ('key' of e and e.key == 'Enter')
        document.getElementById('join-button').click()
    handleClick: (e)->
      e.preventDefault()
      @state.model.saveNewUser()
    render: ->
      account = @state.model
      classes = classSet
        "register": true
        "account-panel": true
      div
        className: classes
        children: [
          h2
            className: "headline"
            I18N.t("account.register_page.headline")
          p {}, I18N.t("account.register_page.copy")
          form
            onKeyDown: @handleKeyDown
            action: "/signup"
            method: "POST"
            children: [
              AuthToken {}
              ErrorMsg
                ref: "errors"
                msg: @props.errorMsg
              TextField
                ref: "email"
                autoComplete: "off"
                name: "spree_user[email]"
                boundTo: [ account, "email" ]
                label: I18N.t("account.register_page.email")
              TextField
                ref: "password"
                type: "password"
                autoComplete: "off"
                name: "spree_user[password]"
                boundTo: [ account, "password" ]
                label: I18N.t("account.register_page.password")
              TextField
                ref: "passwordConfirmation"
                type: "password"
                autoComplete: "off"
                name: "spree_user[password_confirmation]"
                boundTo: [ account, "password_confirmation" ]
                label: I18N.t("account.register_page.re_enter_password")
              CheckBox
                ref: "optin"
                name: "spree_user[newsletter_on]"
                boundTo: [account, "newsletter_on"]
                label: I18N.t("account.register_page.subscribe")
              a
                className: "button"
                href: "signup"
                ref: "submit"
                id: "join-button"
                onClick: @handleClick
                children: I18N.t("account.register_page.cta")
            ]
        ]

  ErrorMsg = React.createClass
    render: ->
      classes = classSet
        "active": @props.msg
        "error-msg": true
      div
        className: classes
        children: [
          p {}, @props.msg
        ]

  exports =
    LoginRegisterMain: LoginRegister