tin-react-components/src/LoginForm/index.js

All components used for Omadi apps

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import './style.css'

/**
 * Component to allow for identification and password authentication
 * @author: Jason Baddley
 */
class LoginForm extends Component {
  constructor (props) {
    super(props)
    this.state = {}
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit (e) {
    const { onSubmit, log, allowLogging } = this.props
    const model = {
      identifier: this.identifier.value,
      password: this.password.value
    }
    onSubmit(model)
    if (allowLogging && log) {
      log('LoginForm', 'handleSubmit', e, 'info')
    }
  }

  renderErrors () {
    const { errors } = this.props
    if (!errors) return null
    const err = errors.map((error, i) => {
      return <label key={i} data-error={i} className='error'>{error.message}</label>
    })
    return (
      <div className='errors'>
        {err}
      </div>
    )
  }

  render () {
    const { type = 'block', identifierLabel = 'Email', passwordLabel = 'Password', buttonText = 'Login' } = this.props
    const formClasses = classnames('form login-form', `${type}`)
    const errors = this.renderErrors()
    return (
      <div className={formClasses}>
        {errors}
        <div className='field identifier'>
          <label htmlFor='identifier'>{identifierLabel}</label>
          <input ref={i => (this.identifier = i)} required type='text' name='identifier' />
        </div>
        <div className='field password'>
          <label htmlFor='password'>{passwordLabel}</label>
          <input ref={i => (this.password = i)} required type='password' name='password' />
        </div>
        <button type='submit' onClick={this.handleSubmit}>{buttonText}</button>
      </div>
    )
  }
}

LoginForm.propTypes = {
    /**
     * Function whose only argument is the user's identifier and password
     * as an object with the following argument structure:
     * @structure:
     * {
     *      identifier: 'IDENTIFIER',
     *      password: 'PASSWORD'
     * }
     */
  onSubmit: PropTypes.func.isRequired,
    /**
     * Array of errors. Each error is an object with the following structure:
     * @structure:
     * {
     *      message: 'Message of the error',
     *      placement: 'placement name where error will be seen'
     * }
     */
  errors: PropTypes.array,
    /**
     * Either 'block' or 'inline'
     * @default: block
     * @options: block,inline
     */
  type: PropTypes.string,
    /**
     * Label text for the identifier field.
     * @default: Email
     */
  identifierLabel: PropTypes.string,
    /**
     * Label text for the password field.
     * @default: Password
     */
  passwordLabel: PropTypes.string,
    /**
     * Text for the submit button.
     * @default: Login
     */
  buttonText: PropTypes.string,
    /**
     * Function that allows for advanced logging.
     * @arguments:
     * [
     *      {
     *          type: 'string',
     *          name: 'componentName',
     *          description: 'Name of component',
     *
     *      },
     *      {
     *          type: 'string',
     *          name: 'methodName',
     *          description: 'Name of method fired',
     *
     *      },
     *      {
     *          type: 'object',
     *          name: 'event',
     *          description: 'The data to be logged',
     *
     *      },
     *      {
     *          type: 'string',
     *          name: 'type',
     *          description: 'Type of log',
     *          options: ['error', 'warning', 'info', 'debug']
     *      }
     * ]
     */
  log: PropTypes.func,
    /**
     * Flag to indicate whether to log events or not
     */
  allowLogging: PropTypes.bool
}

export default LoginForm