apeman-react-sign/lib/ap_signin_form.jsx

apeman react package for sign components

/**
 * Form for signin
 * @class ApSigninForm
 */

'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 { ApCheckbox } from 'apeman-react-checkbox'

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,
      values,
      labels,
      icons,
      idOf,
      onUpdate,
      onSubmit,
      spinning,
      errorList,
      errorStyle,
      actions,
      centered,
      rememberEnabled
    } = props
    return (
      <ApForm id={ id }
              centered={ centered }
              spinning={ spinning }
              className={ classnames('ap-signin-form', props.className)}
              style={ Object.assign({}, props.style) }
      >
        <ApFieldSet plain>
          { errorList }
          { errorStyle }
          <ApSigninForm.KeyField { ...{ values, labels, idOf, onUpdate } }/>
          <ApSigninForm.PasswordField { ...{ values, labels, idOf, onUpdate } }/>
          <ApSigninForm.RememberField { ...{ labels, idOf } }
                                      enabled={ rememberEnabled }
                                      onToggle={ actions.toggleRemember }
          />
          { props.children }
          <ApSigninForm.ButtonField { ...{ labels, idOf } }
                                    onSubmit={ () => onSubmit(s.props.values) }/>
        </ApFieldSet>
        <ApSigninForm.MenuFieldSet actions={ props.menu }
                                   labels={ labels }
                                   idOf={ idOf }
        />
        <ApSigninForm.ButtonFieldSet actions={ props.buttons }
                                     labels={ labels }
                                     icons={ icons }
                                     idOf={ idOf }/>
      </ApForm>
    )
  }
}

Object.assign(ApSigninForm, {
  // --------------------
  // Specs
  // --------------------
  propTypes: {
    labels: types.object,
    icons: types.object,
    menu: types.objectOf(types.func),
    buttons: types.objectOf(types.func),
    rememberEnabled: types.bool
  },

  defaultProps: {
    labels: {
      key: 'Username or Email',
      password: 'Password',
      remember: 'Remember Me',
      submit: 'Sign In',
      signup: 'Sign Up',
      recover: 'Forget Password?',
      twitter: 'Sign in with Twitter',
      google: 'Sign in with Google',
      facebook: 'Sign in with Facebook'
    },
    icons: {
      facebook: 'fa fa-facebook',
      twitter: 'fa fa-twitter',
      google: 'fa fa-google'
    },
    actions: {
      toggleRemember: noop
    },
    menu: null,
    buttons: null,
    rememberEnabled: false
  },

  // ------------------
  // Sub Components
  // ------------------

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

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

  RememberField ({ labels, idOf, enabled, onToggle }) {
    let name = 'remember'
    return (
      <ApField className='ap-signin-form-sub-field'>
        <ApFieldLabel htmlFor={ idOf(name) }>
        </ApFieldLabel>
        <ApFieldValue>
          <ApCheckbox id={ idOf(name) }
                      value='YES'
                      checked={ enabled }
                      title={ labels[ name ] }
                      name={ name }
                      onChange={ () => onToggle(!enabled) }
          />
        </ApFieldValue>
      </ApField>
    )
  },

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

  MenuFieldSet ({ actions, labels, idOf }) {
    if (!actions) {
      return null
    }
    return (
      <ApFieldSet plain>
        <ApField center
                 className='ap-signin-form-action-field'>
          <ApCellButtonRow className='ap-signin-form-action-button-row'>
            {
              Object.keys(actions).map((name) => (
                <ApCellButton id={ idOf(name) }
                              key={ name }
                              onTap={ (e) => actions[ name ]() }
                              text={ labels[ name ] }/>
              ))
            }
          </ApCellButtonRow>
        </ApField>
      </ApFieldSet>
    )
  },

  ButtonFieldSet ({ actions, labels, icons, idOf }) {
    if (!actions) {
      return null
    }
    return (
      <ApFieldSet plain>
        <ApField className='ap-signin-form-action-field'>
          <ApIconButtonRow className='ap-signin-form-action-button-row'>
            {
              Object.keys(actions).map((name) => (
                <ApIconButton id={ idOf(name) }
                              key={ name }
                              onTap={ (e) => actions[ name ]() }
                              icon={ icons[ name ] }
                              text={ labels[ name ] }/>
              ))
            }
          </ApIconButtonRow>
        </ApField>
      </ApFieldSet>
    )
  }
})

export { ApSigninForm }
export default withForm(ApSigninForm)