content: 
  // https://react-bootstrap.github.io/components.html#forms
  
  import React from 'react';
  import PropTypes from 'prop-types';
  import { Button, FormGroup, ControlLabel } from 'react-bootstrap';
  
  import { withRouter } from 'react-router';
  import { Form, Control } from 'react-redux-form';
  import { connect } from 'react-redux';
  
  import { checkAuth } from '../redux/actions';
  import BuildInfo from '../util/BuildInfo';
  
  import FormControlAdapter from '../components/FormControlAdapter';
  
  const click = (target) => {
    document.location.href = `/auth/${target}`;
  };
  
  const loginDemo = async (dispatch, history) => {
    try {
      await dispatch(checkAuth('demo@linky1.com', 'demo'));
      history.replace('/links/portal');
    } catch (err) {
      // ignore
    }
  };
  
  /* eslint-disable eqeqeq */
  
  const Login = ({ dispatch, history }) => (
    <div>
      <div className="jumbotron">
        <p>modern bookmark management - fully searchable, tags with hierarchy,
          build-in RSS support, auto validation over time, due dates, html snapshots</p>
      </div>
      <div className="row">
        <div className="panel">
          <div className="panel-body">
            A word about data privacy: This page tries to collect minimal personal information.
            You can see all the data we got and stored from the 3rd party login service
            when you click on `Help` and then click the `I am curious` button. There you can also
            delete your account. After log in we will set 2 cookies on your computer. One has a
            lifetime of 1 year. With clicking any of the below buttons you accept those cookies.
            More information on this in the help section.
          </div>
        </div>
      </div>
      <div className="row">
        { BuildInfo.OAUTHLOGIN.toString() === 'true' ?
          <div className="center-form panel">
            <div className="panel-body">
              <h2 className="text-center">Log in</h2>
              <Button className="btn btn-block" onClick={() => loginDemo(dispatch, history)}>
                <i className="ion-ios-pricetag" /> Demo account
              </Button>
              <Button className="btn btn-block btn-facebook" onClick={() => click('facebook')}>
                <i className="ion-logo-facebook" /> Sign in with Facebook
              </Button>
              <Button className="btn btn-block btn-google-plus" onClick={() => click('google')}>
                <i className="ion-logo-googleplus" /> Sign in with Google
              </Button>
              <Button className="btn btn-block btn-github" onClick={() => click('github')}>
                <i className="ion-logo-github" /> Sign in with GitHub
              </Button>
              <button className="btn btn-block btn-linkedin" onClick={() => click('linkedin')}>
                <i className="ion-logo-linkedin" /> Sign in with LinkedIn
              </button>
              <button className="btn btn-block btn-twitter" onClick={() => click('twitter')}>
                <i className="ion-logo-twitter" /> Sign in with Twitter
              </button>
              <button className="btn btn-block btn-bitbucket" onClick={() => click('bitbucket')}>
                <i className="fa fa-bitbucket" /> Sign in with Bitbucket
              </button>
              <button className="btn btn-block btn-live" onClick={() => click('windowslive')}>
                <i className="ion-logo-windows" /> Sign in with Windows Live
              </button>
              <button className="btn btn-block btn-blizzard" onClick={() => click('blizzard-eu')}>
                <i className="ion-ios-game-controller-a" /> Sign in with EU Battle.net
              </button>
              <button className="btn btn-block btn-yahoo" onClick={() => click('yahoo')}>
                <i className="ion-logo-yahoo" /> Sign in with Yahoo
              </button>
              <button className="btn btn-block btn-reddit" onClick={() => click('reddit')}>
                <i className="ion-logo-reddit" /> Sign in with Reddit
              </button>
            </div>
          </div> : ''
        }
        { BuildInfo.USERPASSLOGIN.toString() === 'true' ?
          <div className="center-form panel">
            <div className="panel-body">
              <Form
                model="login"
                onSubmit={async (formData) => {
                  try {
                    await dispatch(checkAuth(formData.email, formData.password));
                    history.replace('/links/portal');
                  } catch (err) {
                    // ignore
                  }
                }}
              >
                <FormGroup controlId="loginEmail">
                  <ControlLabel>Enter your registered email address</ControlLabel>
                  <Control
                    type="text"
                    componentClass="input"
                    model=".email"
                    placeholder="email"
                    autoFocus="true"
                    component={FormControlAdapter}
                  />
                </FormGroup>
                <FormGroup controlId="loginPassword">
                  <ControlLabel>Enter password</ControlLabel>
                  <Control
                    type="password"
                    componentClass="input"
                    model=".password"
                    placeholder="password"
                    component={FormControlAdapter}
                  />
                </FormGroup>
                <FormGroup controlId="loginSubmit">
                  <Button type="submit">Log in</Button>
                </FormGroup>
              </Form>
              <p>
                Create user:
                curl -X POST --data &apos;{'{'}&quot;email&quot;: &quot;your email&quot;,&quot;password&quot;: &quot;your password&quot; {'}'}&apos;
                -H &quot;Content-Type: application/json&quot; $LINKY_HOST/rest/users
              </p>
            </div>
          </div> : ''
        }
      </div>
    </div>
  );
  Login.propTypes = {
    dispatch: PropTypes.func.isRequired,
    history: PropTypes.shape().isRequired,
  };
  
  export default withRouter(connect()(Login));
  