@bigfishtv/cockpit/src/components/modal/LoginModal.js

import React, { Component } from 'react'
import { Fieldset, createValue } from '@bigfishtv/react-forms'
import { validationErrors } from 'react-forms-cakephp'
import { connect } from 'react-redux'
import ReCAPTCHA from 'react-google-recaptcha'

import { Modal, Field, xhrUtils, Icon, viewerActions, Button, invalidateExternalErrorList } from '../../index'

const LOGIN_URL = '/admin/tank/users/login.json'

@connect(({ viewer }) => ({ viewer }))
export default class LoginModal extends Component {
	constructor(props) {
		super(props)
		this.state = {
			formValue: createValue({ value: { email: props.viewer.email || '' }, onChange: this.onChange }),
			sitekey: '', // filled in automatically
			invalidCount: 0,
		}
	}

	onChange = formValue => {
		formValue = invalidateExternalErrorList(formValue, this.state.formValue)
		this.setState({ formValue })
	}

	handleLogin = event => {
		event.preventDefault()
		xhrUtils.post({
			url: LOGIN_URL,
			data: this.state.formValue.value,
			quietSuccess: true,
			failureMessage: 'Please check your login details',
			callback: viewer => {
				this.props.dispatch(viewerActions.setViewer(viewer))
				this.props.closeModal()
			},
			callbackError: response => {
				if (response.data && response.data.errors) {
					this.state.formValue.updateExternalErrorList(validationErrors(response.data.errors))
				}
				if (response.data && response.data.sitekey) {
					this.setState({ sitekey: response.data.sitekey })
				}
				this.setState({ invalidCount: this.state.invalidCount + 1 })
			},
		})
	}

	render() {
		return (
			<form onSubmit={this.handleLogin}>
				<Modal
					title="Login"
					size="small"
					ModalActions={() => <Button type="submit" text="Login" style="primary" />}
					ModalToolbar={() => <Icon name="lock" className="text-grey" />}>
					<Fieldset formValue={this.state.formValue}>
						<Field select="email" type="email" autoComplete="username" autoFocus />
						<Field select="password" type="password" autoComplete="current-password" />
						{this.state.sitekey && (
							<Field key={this.state.invalidCount} select="g-recaptcha-response" label={false}>
								<ReCAPTCHAWrapper sitekey={this.state.sitekey} />
							</Field>
						)}
					</Fieldset>
				</Modal>
			</form>
		)
	}
}

const ReCAPTCHAWrapper = ({ onChange, sitekey }) => {
	return <ReCAPTCHA sitekey={sitekey} onChange={onChange} />
}