Ractive register+login

script.coffee

AuthForm = new Ractive({
  el: '#AuthForm'
  template: '#AuthFormT'
  data: {
    sitename: 'Register/Login'
    user: {
      name: null
      password: null
    }
    domain: 'ifanda.cz'
    domains: [
      {name: 'smaslem.cz'},
      {name: 'ifanda.cz'}
    ]
  }

  valid_data: () ->
    if @get('user').name.length > 3 and @get('domain').length > 0
      # check characters etc
      if @get('user').password.length > 8
        return true
      else
        @set 'error', 'Heslo je krátké'
    else
      @set 'error', 'Jméno a doména jsou povinné'
    @set 'state', 'error'
    return false

  onrender: () ->
    @on('postAuth', (event, action) ->
      event.original.preventDefault()
      @set 'state', 'waiting'
      return false if not @valid_data()
      oboe({
        url: '/'+action
        method: 'POST'
        body: {
          user: @get('user')
          domain: @get('domain')
        }
        cached: false
      }).
      done( (user) ->
        alert(JSON.stringify(user))
        @fire 'authSuccess'
        @set 'token', user
        # save token to cookie & redirect to app
      ).
      error( (errors) ->
        alert(JSON.stringify(errors))
        @fire 'authError', errors
      )
    )
    @on('success', (event) ->
      @set 'state', 'valid'
    )
    @on('errors', (event, errors) ->
      alert(JSON.stringify(errors))
      @set 'state', 'invalid'
      @set 'errors', errors
    )
})

template.haml

%script{type: "ractive", id: "AuthFormT"}
  .cd-auth
    %h1
      :plain
        {{sitename }}
    %h2
      Přihlašovací formulář
    %form.auth-form{:action => "/auth", :method => "POST", :class => "pure-form pure-form-stacked"}
      .pure-g
        = '{{#user }}'
        .pure-u-1-2
          %input.tar.pure-input-1{name: 'name', placeholder: "Zvolte své ID", type: "text", value: "{{name }}"}/
        .pure-u-1-2
          %select.pure-input-1{name: 'domain', value: '{{domain }}'}
            %option Vyberte doménu
            :plain
              {{#domains }}
              <option value="{{name }}">@{{name }}</option>
              {{/domains }}
        = '{{/user }}'
      .pure-g
        = '{{#user }}'
        .pure-u-1-1
          %input.tac.pure-input-1{name: 'password', placeholder: "Zadejte heslo", type: "password", value: "{{password }}"}
        = '{{/user }}'

      .pure-g
        .pure-u-1-2
          %button.pure-input-1.pure-button.pure-button-success{:type => "submit", "on-click" => "postAuth:register"} Vytvořit účet
        .pure-u-1-2
          %button.pure-input-1.pure-button.pure-button-primary{:type => "submit", "on-click" => "postAuth:login"} Přihlásit