apeman-react-sign/lib/ap_signup_form.jsx

apeman react package for sign components

/**
 * Form for signup
 * @class ApSignupForm
 */

'use strict'

import React, { Component, PropTypes as types } from 'react'
import classnames from 'classnames'

import { ApForm, withForm } from 'apeman-react-form'
import { ApFieldSet, ApField, ApFieldLabel, ApFieldValue } from 'apeman-react-field'
import { ApButton, ApCellButton, ApCellButtonRow, ApIconButton, ApIconButtonRow } from 'apeman-react-button'
import { ApText } from 'apeman-react-text'
import { ApPassword } from 'apeman-react-password'
import { ApCaptcha } from 'apeman-react-captcha'

const noop = (e) => console.log(e)

/** @lends ApSigninForm */
class ApSigninForm extends Component {
  constructor (props) {
    super(props)
    const s = this
    s.state = {}
  }

  render () {
    const s = this
    let { props } = s
    let {
      id,
      idOf,
      labels,
      values,
      images,
      actions,
      placeholders,
      onUpdate,
      onSubmit,
      spinning,
      errorList,
      errorStyle,
      centered,
      captchaSpinning
    } = props
    return (
      <ApForm id={ id }
              spinning={ spinning }
              centered={ centered }
              className={ classnames('ap-signin-form', props.className)}
              style={ Object.assign({}, props.style) }
      >
        <ApFieldSet plain>
          { errorList }
          { errorStyle }
          <ApSigninForm.KeyField { ...{ idOf, labels, values, onUpdate } }/>
          <ApSigninForm.EmailField { ...{ idOf, labels, values, onUpdate } }/>
          <ApSigninForm.PasswordField { ...{ idOf, labels, values, onUpdate } }/>
        </ApFieldSet>
        <ApFieldSet plain>
          <ApSigninForm.CaptchaField { ...{
            idOf,
            labels,
            values,
            onUpdate,
            placeholders,
            images,
            actions,
            captchaSpinning
          } }/>
        </ApFieldSet>
        <ApFieldSet plain>
          { props.children }
        </ApFieldSet>
        <ApFieldSet plain>
          <ApSigninForm.ButtonField { ...{ idOf, labels, values, onSubmit } }/>
        </ApFieldSet>
      </ApForm>
    )
  }
}
Object.assign(ApSigninForm, {
  // --------------------
  // Specs
  // --------------------

  propTypes: {
    captchaSpinning: types.bool
  },

  defaultProps: {
    labels: {
      key: 'Username',
      email: 'Email',
      password: 'Password',
      captcha: 'Captcha',
      captchaRefresh: 'refresh',
      submit: 'Sign Up'
    },
    placeholders: {
      captcha: '(Type numbers above)'
    },
    images: {
      captcha: ''
    },
    actions: {
      captchaRefresh: noop
    },
    captchaSpinning: false
  },

  // --------------------
  // Sub Component
  // --------------------
  KeyField ({ idOf, labels, values, onUpdate }) {
    return (
      <ApField>
        <ApFieldLabel htmlFor={ idOf('key') }>
          { labels[ 'key' ] }
        </ApFieldLabel>
        <ApFieldValue>
          <ApText autoFocus
                  id={ idOf('key') }
                  name={ 'key' }
                  value={ values[ 'key' ] }
                  onChange={ (e) => onUpdate({ key: e.target.value }) }
          />
        </ApFieldValue>
      </ApField>
    )
  },

  EmailField ({ idOf, labels, values, onUpdate }) {
    return (
      <ApField>
        <ApFieldLabel htmlFor={ idOf('email') }>
          { labels[ 'email' ] }
        </ApFieldLabel>
        <ApFieldValue>
          <ApText id={ idOf('email') }
                  name={ 'email' }
                  value={ values[ 'email' ] }
                  onChange={ (e) => onUpdate({ email: e.target.value }) }
          />
        </ApFieldValue>
      </ApField>
    )
  },

  PasswordField ({ idOf, labels, values, onUpdate }) {
    return (
      <ApField>
        <ApFieldLabel htmlFor={ idOf('password') }>
          { labels[ 'password' ] }
        </ApFieldLabel>
        <ApFieldValue>
          <ApPassword id={ idOf('password') }
                      name={ 'password' }
                      value={ values[ 'password' ] }
                      onChange={ (e) => onUpdate({ password: e.target.value }) }
          />
        </ApFieldValue>
      </ApField>
    )
  },

  CaptchaField ({ idOf, labels, values, onUpdate, placeholders, images, actions, captchaSpinning }) {
    return (
      <ApField>
        <ApFieldLabel htmlFor={ idOf('captcha') }>
          { labels[ 'captcha' ] }
        </ApFieldLabel>
        <ApFieldValue>
          <ApCaptcha src={ images[ 'captcha' ] }
                     spinning={ captchaSpinning }
                     refreshText={ labels[ 'captchaRefresh' ] }
                     onRefresh={ actions[ 'captchaRefresh' ] }>
          </ApCaptcha>
          <ApText id={ idOf('captcha') }
                  name={ 'captcha' }
                  value={ values[ 'captcha' ] }
                  onChange={ (e) => onUpdate({ captcha: e.target.value }) }
                  placeholder={ placeholders[ 'captcha' ] }
          />
        </ApFieldValue>
      </ApField>
    )
  },

  ButtonField ({ idOf, labels, values, onSubmit }) {
    return (
      <ApField center className='ap-signup-form-button-field'>
        <ApButton id={ idOf('submit') }
                  onTap={ () => onSubmit(values) }
                  wide
                  primary
        >{ labels[ 'submit' ] }</ApButton>
      </ApField>
    )
  }
})

export { ApSigninForm }
export default withForm(ApSigninForm)