hyperscript.js

/*
 * No hyperscript helpers
 */


import { h } from '../../snabbdom.wrapper'
import UserStore from '../../stores/UserStore'
import Link from '../components/Link'
import Form from '../components/Form'

function handler(e?) {
  if(e) {
    e.preventDefault()
  }
  UserStore.register()
}

export default function RegisterForm() {
  return Form(
    [
      h('div.ui inverted header', 'Sign up'),
      h('div.ui stacked segment', [
        h('div.field', [
          h('div.ui left icon input', [
            h('i.user icon'),
            h('input', {
              attrs: {
                type:        'text',
                name:        'email',
                placeholder: 'E-mail address',
                value:       UserStore.username,
                disabled:    UserStore.loading
              },
              on:    {
                change: (e) => {
                  UserStore.username = e.target.value
                }
              }
            })
          ])
        ]),
        h('div.field', [
          h('div.ui left icon input', [
            h('i.lock icon'),
            h('input', {
              attrs: {
                type:        'password',
                name:        'password',
                placeholder: 'Password',
                value:       UserStore.password,
                disabled:    UserStore.loading
              },
              on:    {
                change: (e) => {
                  UserStore.password = e.target.value
                }
              }
            })
          ])
        ]),
        h('div.field',
          {
            key:  'activation-code',
            hook: {
              insert: (vnode) => {
                vnode.elm.classList.add('animated')
                vnode.elm.classList.add('expandInDown')
              },
              remove: (vnode, callback) => {
                vnode.elm.classList.remove('expandInDown')
                vnode.elm.classList.add('expandOutUp')
                setTimeout(callback, 500)
              }
            }
          },
          [
            h('div.ui left icon input',
              [
                h('i.keyboard icon'),
                h('input', {
                  attrs: {
                    type:        'text',
                    name:        'activation',
                    placeholder: 'Activation code',
                    value:       UserStore.activationCode,
                    disabled:    UserStore.loading
                  },
                  on:    {
                    change: (e) => {
                      UserStore.activationCode = e.target.value
                    }
                  }
                })
              ])
          ]),
        h(`button.ui fluid large blue right labeled icon submit ${UserStore.loading ? 'disabled' : ''} button`, { on: { click: handler } }, [
          h(`i.right ${UserStore.loading ? '' : 'arrow'} icon`, UserStore.loading ? [h('div.ui active inverted loader')] : ''),
          'Sign up'
        ])
      ]),
      h('div.ui gray message', [
        Link({
          classes:  ['ui inverted orange'],
          href:     '/users/login',
          children: ['Login']
        })
      ])
    ], handler)
}


/*
 * Hyperscript helpers
 */

import { h } from '../../snabbdom.wrapper'
import UserStore from '../../stores/UserStore'
import Link from '../components/Link'
import Form from '../components/Form'

function handler(e?) {
  if(e) {
    e.preventDefault()
  }
  UserStore.register()
}

export default function RegisterForm() {
  return Form(
    [
      div('.ui inverted header', 'Sign up'),
      div('.ui stacked segment', [
        div('.field', [
          div('.ui left icon input', [
            i('.user icon'),
            input('', {
              attrs: {
                type:        'text',
                name:        'email',
                placeholder: 'E-mail address',
                value:       UserStore.username,
                disabled:    UserStore.loading
              },
              on:    {
                change: (e) => {
                  UserStore.username = e.target.value
                }
              }
            })
          ])
        ]),
        div('.field', [
          div('.ui left icon input', [
            i('.lock icon'),
            input('', {
              attrs: {
                type:        'password',
                name:        'password',
                placeholder: 'Password',
                value:       UserStore.password,
                disabled:    UserStore.loading
              },
              on:    {
                change: (e) => {
                  UserStore.password = e.target.value
                }
              }
            })
          ])
        ]),
        div('.field',
          {
            key:  'activation-code',
            hook: {
              insert: (vnode) => {
                vnode.elm.classList.add('animated')
                vnode.elm.classList.add('expandInDown')
              },
              remove: (vnode, callback) => {
                vnode.elm.classList.remove('expandInDown')
                vnode.elm.classList.add('expandOutUp')
                setTimeout(callback, 500)
              }
            }
          },
          [
            div('.ui left icon input',
              [
                i('.keyboard icon'),
                input('', {
                  attrs: {
                    type:        'text',
                    name:        'activation',
                    placeholder: 'Activation code',
                    value:       UserStore.activationCode,
                    disabled:    UserStore.loading
                  },
                  on:    {
                    change: (e) => {
                      UserStore.activationCode = e.target.value
                    }
                  }
                })
              ])
          ]),
        h(`button.ui fluid large blue right labeled icon submit ${UserStore.loading ? 'disabled' : ''} button`, { on: { click: handler } }, [
          h(`i.right ${UserStore.loading ? '' : 'arrow'} icon`, UserStore.loading ? [div('.ui active inverted loader')] : ''),
          'Sign up'
        ])
      ]),
      div('.ui gray message', [
        Link({
          classes:  ['ui inverted orange'],
          href:     '/users/login',
          children: ['Login']
        })
      ])
    ], handler)
}