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

import React, { useState } from "react";
import PropTypes from "prop-types";
import { List } from "immutable";

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

export const UserList = props => (
  <div className="table-responsive my-2">
    <table className="table table-striped">
      <thead className="table-secondary">
        <tr>
          <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((el, index) => (
          <User key={index} data={el} updateUser={props.updateUser} />
        ))}
      </tbody>
    </table>
  </div>
);
UserList.propTypes = {
  users: PropTypes.PropTypes.instanceOf(List),
  updateUser: PropTypes.func
};

const User = function(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 activated={props.data.get("Activated")} />
      </td>
      <td>
        <UserAdminStatus admin={props.data.get("Admin")} />
      </td>
      <td>{polochonUrl}</td>
      <td>{polochonToken}</td>
      <td>
        <UserEdit
          data={props.data}
          updateUser={props.updateUser}
          polochonUrl={polochonUrl}
          polochonToken={polochonToken}
        />
      </td>
    </tr>
  );
};
User.propTypes = {
  data: PropTypes.object,
  updateUser: PropTypes.func
};

const UserAdminStatus = props => (
  <span className={props.admin ? "fa fa-check" : "fa fa-times"}></span>
);
UserAdminStatus.propTypes = { admin: PropTypes.bool.isRequired };

const UserActivationStatus = props => (
  <span
    className={props.activated ? "fa fa-check" : "fa fa-times text-danger"}
  ></span>
);
UserActivationStatus.propTypes = { activated: PropTypes.bool.isRequired };

function UserEdit(props) {
  const [modal, setModal] = useState(false);
  const [admin, setAdmin] = useState(props.data.get("Admin"));
  const [activated, setActivated] = useState(props.data.get("Activated"));
  const [url, setUrl] = useState(props.polochonUrl);
  const [token, setToken] = useState(props.polochonToken);

  const handleSubmit = function(e) {
    if (e) {
      e.preventDefault();
    }
    props.updateUser({
      userId: props.data.get("id"),
      admin: admin,
      activated: activated,
      polochonUrl: url,
      polochonToken: token
    });
    setModal(false);
  };

  return (
    <span>
      <span
        className="fa fa-pencil clickable"
        onClick={() => setModal(true)}
      ></span>
      <Modal show={modal} onHide={() => setModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>
            <i className="fa fa-pencil"></i>
            &nbsp; Edit user - {props.data.get("Name")}
          </Modal.Title>
        </Modal.Header>
        <Modal.Body bsPrefix="modal-body admin-edit-user-modal">
          <form className="form-horizontal" onSubmit={ev => handleSubmit(ev)}>
            <div className="form-group">
              <label>Account status</label>
              <Toggle
                className="pull-right"
                on="Activated"
                off="Deactivated"
                active={activated}
                offstyle="danger"
                handlestyle="secondary"
                onClick={() => setActivated(!activated)}
              />
            </div>
            <div className="form-group">
              <label>Admin status</label>
              <Toggle
                className="pull-right"
                on="Admin"
                off="User"
                active={admin}
                offstyle="info"
                handlestyle="secondary"
                onClick={() => setAdmin(!admin)}
              />
            </div>
            <div className="form-group">
              <label className="control-label">Polochon URL</label>
              <input
                className="form-control"
                value={url}
                onChange={e => setUrl(e.target.value)}
              />
            </div>
            <div className="form-group">
              <label className="control-label">Polochon token</label>
              <input
                className="form-control"
                value={token}
                onChange={e => setToken(e.target.value)}
              />
            </div>
          </form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="success" onClick={handleSubmit}>
            Apply
          </Button>
          <Button onClick={() => setModal(false)}>Close</Button>
        </Modal.Footer>
      </Modal>
    </span>
  );
}
UserEdit.propTypes = {
  data: PropTypes.object,
  updateUser: PropTypes.func,
  polochonUrl: PropTypes.string,
  polochonToken: PropTypes.string
};