canape/frontend/js/components/admins/users.js

import React from "react"

import { Button, Modal } from "react-bootstrap"
import Toggle from "react-bootstrap-toggle";

export default function UserList(props) {
  return (
    <div>
      <h2 className="hidden-xs">Users</h2>
      <h3 className="visible-xs">Users</h3>
      <table className="table">
        <thead>
          <tr className="active">
            <th>#</th>
            <th>Name</th>
            <th>Activated</th>
            <th>Admin</th>
            <th>Polochon URL</th>
            <th>Polochon token</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {props.users.map(function(el, index) {
            return (
              <User
                key={index}
                data={el}
                updateUser={props.updateUser}
              />
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

function User(props) {
  const polochonConfig = props.data.get("RawConfig").get("polochon");
  const polochonURL = polochonConfig ? polochonConfig.get("url") : "-";
  const polochonToken = polochonConfig ? polochonConfig.get("token") : "-";
  return (
    <tr>
      <td>{props.data.get("id")}</td>
      <td>{props.data.get("Name")}</td>
      <td><UserActivationStatus data={props.data}/></td>
      <td><UserAdminStatus data={props.data}/></td>
      <td>{polochonURL}</td>
      <td>{polochonToken}</td>
      <td>
        <UserEdit
          data={props.data}
          updateUser={props.updateUser}
        />
      </td>
    </tr>
  );
}

function UserAdminStatus(props) {
  const admin = props.data.get("Admin");
  const className = admin ? "fa fa-check" : "fa fa-times";
  return (<span className={className}></span>);
}

function UserActivationStatus(props) {
  const activated = props.data.get("Activated");
  const className = activated ? "fa fa-check" : "fa fa-times text-danger";
  return (<span className={className}></span>);
}

class UserEdit extends React.PureComponent {
  constructor(props) {
    super(props);

    // User props
    const polochonConfig = props.data.get("RawConfig").get("polochon");
    const polochonUrl = polochonConfig ? polochonConfig.get("url") : "";
    const polochonToken = polochonConfig ? polochonConfig.get("token") : "";

    // Functions
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleUrlInput = this.handleUrlInput.bind(this);
    this.handleTokenInput = this.handleTokenInput.bind(this);
    this.handleActivatedToggle = this.handleActivatedToggle.bind(this);
    this.handleAdminToggle = this.handleAdminToggle.bind(this);

    this.state = {
      showModal: false,
      polochonUrl: polochonUrl,
      polochonToken: polochonToken,
      activated: props.data.get("Activated"),
      admin: props.data.get("Admin"),
    };
  }
  showModal() {
    this.setState({ showModal: true });
  }
  hideModal() {
    this.setState({ showModal: false });
  }
  handleSubmit(e) {
    if (e) { e.preventDefault(); }
    this.props.updateUser({
      userId: this.props.data.get("id"),
      admin: this.state.admin,
      activated: this.state.activated,
      polochonUrl: this.state.polochonUrl,
      polochonToken: this.state.polochonToken,
    });
    this.setState({ showModal: false });
  }
  handleTokenInput() {
    this.setState({ polochonToken: this.refs.polochonToken.value });
  }
  handleUrlInput() {
    this.setState({ polochonUrl: this.refs.polochonUrl.value });
  }
  handleActivatedToggle() {
    this.setState({ activated: !this.state.activated });
  }
  handleAdminToggle() {
    this.setState({ admin: !this.state.admin });
  }
  render() {
    return (
      <span>
        <span className="fa fa-pencil clickable" onClick={this.showModal}></span>
        <Modal show={this.state.showModal} onHide={this.hideModal}>
          <Modal.Header closeButton>
            <Modal.Title>
              <i className="fa fa-pencil"></i>
              &nbsp; Edit user - {this.props.data.get("Name")}
            </Modal.Title>
          </Modal.Header>
          <Modal.Body bsClass="modal-body admin-edit-user-modal">
            <form className="form-horizontal" onSubmit={(ev) => this.handleSubmit(ev)}>
              <div className="form-group">
                <label>Account status</label>
                <Toggle
                  className="pull-right"
                  on="Activated"
                  off="Deactivated"
                  active={this.state.activated}
                  onClick={this.handleActivatedToggle}
                />
              </div>
              <div className="form-group">
                <label>Admin status</label>
                <Toggle
                  className="pull-right"
                  on="Admin"
                  off="User"
                  active={this.state.admin}
                  onClick={this.handleAdminToggle}
                />
              </div>
              <div className="form-group">
                <label className="control-label">Polochon URL</label>
                <input
                  className="form-control"
                  value={this.state.polochonUrl}
                  onChange={this.handleUrlInput}
                  ref="polochonUrl"
                />
              </div>
              <div className="form-group">
                <label className="control-label">Polochon token</label>
                <input
                  className="form-control"
                  value={this.state.polochonToken}
                  onChange={this.handleTokenInput}
                  ref="polochonToken"
                />
              </div>
            </form>
          </Modal.Body>
          <Modal.Footer>
            <Button bsStyle="success" onClick={this.handleSubmit}>Apply</Button>
            <Button onClick={this.hideModal}>Close</Button>
          </Modal.Footer>
        </Modal>
      </span>
    );
  }
}