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

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _dec, _class;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactForms = require('@bigfishtv/react-forms');

var _reactFormsCakephp = require('react-forms-cakephp');

var _reactRedux = require('react-redux');

var _reactGoogleRecaptcha = require('react-google-recaptcha');

var _reactGoogleRecaptcha2 = _interopRequireDefault(_reactGoogleRecaptcha);

var _index = require('../../index');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var LOGIN_URL = '/admin/tank/users/login.json';

var LoginModal = (_dec = (0, _reactRedux.connect)(function (_ref) {
	var viewer = _ref.viewer;
	return { viewer: viewer };
}), _dec(_class = function (_Component) {
	_inherits(LoginModal, _Component);

	function LoginModal(props) {
		_classCallCheck(this, LoginModal);

		var _this = _possibleConstructorReturn(this, _Component.call(this, props));

		_this.onChange = function (formValue) {
			formValue = (0, _index.invalidateExternalErrorList)(formValue, _this.state.formValue);
			_this.setState({ formValue: formValue });
		};

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

		_this.state = {
			formValue: (0, _reactForms.createValue)({ value: { email: props.viewer.email || '' }, onChange: _this.onChange }),
			sitekey: '', // filled in automatically
			invalidCount: 0
		};
		return _this;
	}

	LoginModal.prototype.render = function render() {
		return _react2.default.createElement(
			'form',
			{ onSubmit: this.handleLogin },
			_react2.default.createElement(
				_index.Modal,
				{
					title: 'Login',
					size: 'small',
					ModalActions: function ModalActions() {
						return _react2.default.createElement(_index.Button, { type: 'submit', text: 'Login', style: 'primary' });
					},
					ModalToolbar: function ModalToolbar() {
						return _react2.default.createElement(_index.Icon, { name: 'lock', className: 'text-grey' });
					} },
				_react2.default.createElement(
					_reactForms.Fieldset,
					{ formValue: this.state.formValue },
					_react2.default.createElement(_index.Field, { select: 'email', type: 'email', autoComplete: 'username', autoFocus: true }),
					_react2.default.createElement(_index.Field, { select: 'password', type: 'password', autoComplete: 'current-password' }),
					this.state.sitekey && _react2.default.createElement(
						_index.Field,
						{ key: this.state.invalidCount, select: 'g-recaptcha-response', label: false },
						_react2.default.createElement(ReCAPTCHAWrapper, { sitekey: this.state.sitekey })
					)
				)
			)
		);
	};

	return LoginModal;
}(_react.Component)) || _class);
exports.default = LoginModal;


var ReCAPTCHAWrapper = function ReCAPTCHAWrapper(_ref2) {
	var onChange = _ref2.onChange,
	    sitekey = _ref2.sitekey;

	return _react2.default.createElement(_reactGoogleRecaptcha2.default, { sitekey: sitekey, onChange: onChange });
};