app/addons/auth/components/createadminform.js

// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.

import PropTypes from 'prop-types';

import React from "react";
import {
  createAdmin
} from "./../actions";
import {connect} from 'react-redux';

export class CreateAdminForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    };
  }

  onChangeUsername(e) {
    this.setState({username: e.target.value});
  }

  onChangePassword(e) {
    this.setState({password: e.target.value});
  }

  componentDidMount() {
    this.usernameField.focus();
  }

  createAdmin(e) {
    e.preventDefault();
    this.props.createAdmin(
      this.state.username,
      this.state.password,
      this.props.loginAfter,
      this.props.nodes
    );
  }

  render() {
    return (
      <div className="faux__auth-page">
        <h3>Create Admins</h3>

        <p>
          Before a server admin is configured, all clients have admin privileges. This is fine when

          HTTP access is restricted to trusted users. <strong>
            If end-users will be accessing this
            CouchDB, you must create an admin account to prevent accidental (or malicious) data

            loss.
          </strong>
        </p>
        <p>
          Server admins can create and destroy databases, install and update _design documents, run

          the test suite, and edit all aspects of CouchDB configuration.
        </p>

        <form id="create-admin-form" onSubmit={this.createAdmin.bind(this)}>
          <input
            id="username"
            type="text"
            ref={node => this.usernameField = node}
            name="name"
            placeholder="Username"
            size="24"
            onChange={this.onChangeUsername.bind(this)}
          />
          <br />
          <input
            id="password"
            type="password"
            name="password"
            placeholder="Password"
            size="24"
            onChange={this.onChangePassword.bind(this)}
          />
          <p>
            Non-admin users have read and write access to all databases, which
            are controlled by validation. CouchDB can be configured to block all
            access to anonymous users.
          </p>
          <button type="submit" id="create-admin" className="btn btn-primary">
            Create Admin
          </button>
        </form>
      </div>
    );
  }
}

CreateAdminForm.propTypes = {
  loginAfter: PropTypes.bool.isRequired
};

CreateAdminForm.defaultProps = {
  loginAfter: false
};

const mapStateToProps = ({clusters}) => {
  return {
    nodes: clusters.nodes
  };
};


export default connect(
  mapStateToProps,
  {createAdmin}
)(CreateAdminForm);