Allow polochon admin to edit the user's config

frontend/js/actions/polochon.js

@@ -1,5 +1,7 @@
 import { configureAxios, request } from "../requests"
 
+import { getUserInfos } from "./users"
+
 export const getPolochons = () => request(
   "PUBLIC_POLOCHON_LIST_FETCH",
   configureAxios().get("/polochons"),
@@ -36,3 +38,13 @@ export const deletePolochon = (id) => request(
     () => getManagedPolochons(),
   ],
 )
+
+export const editPolochonUser = ({ polochonId, id, ...params }) => request(
+  "EDIT_POLOCHON_USER",
+  configureAxios().post(`/polochons/${polochonId}/users/${id}`, params),
+  [
+    () => getPolochons(),
+    () => getManagedPolochons(),
+    () => getUserInfos(),
+  ],
+)

frontend/js/actions/users.js

@@ -2,6 +2,8 @@ import { configureAxios, request } from "../requests"
 
 import { addAlertOk } from "./alerts"
 
+import { getManagedPolochons } from "./polochon"
+
 export function userLogout() {
   return {
     type: "USER_LOGOUT",
@@ -27,6 +29,7 @@ export function updateUser(config) {
     configureAxios().post("/users/edit", config),
     [
       addAlertOk("User updated"),
+      () => getManagedPolochons(),
     ],
   )
 }

frontend/js/components/forms/modal.js

@@ -31,7 +31,7 @@ export const FormModal = ({
         </Modal.Body>
         <Modal.Footer>
           <div className="btn btn-success" onClick={submit}>Apply</div>
-          <div className="btn btn-error" onClick={() => setShow(false)}>Close</div>
+          <div className="btn btn-danger" onClick={() => setShow(false)}>Close</div>
         </Modal.Footer>
       </Modal>
   )

frontend/js/components/polochons/add.js

@@ -11,12 +11,14 @@ export const PolochonAddConnected = ({ addPolochon }) => {
 
   return (
     <React.Fragment>
-      <div className="btn btn-primary btn-lg" onClick={() => setModal(true)}>
+      <div className="btn btn-primary" onClick={() => setModal(true)}>
         <i className="fa fa-plus mr-2" />
         Add new polochon
       </div>
 
       <PolochonEdit
+        title="Add a new polochon"
+        icon="plus"
         show={modal}
         setShow={setModal}
         update={addPolochon}

frontend/js/components/polochons/edit.js

@@ -8,6 +8,8 @@ export const PolochonEdit = ({
   show,
   setShow,
   id,
+  title,
+  icon,
   initialName,
   initialUrl,
   initialToken,
@@ -32,8 +34,8 @@ export const PolochonEdit = ({
     <FormModal
       show={show}
       setShow={setShow}
-      title="Add a new polochon"
-      icon="plus"
+      title={title}
+      icon={icon}
       handleSubmit={handleSubmit}
     >
       <FormInput label="Name" value={name} updateValue={setName} />
@@ -44,6 +46,8 @@ export const PolochonEdit = ({
 }
 PolochonEdit.propTypes = {
   show: PropTypes.bool,
+  title: PropTypes.string,
+  icon: PropTypes.string,
   setShow: PropTypes.func,
   update: PropTypes.func,
   id: PropTypes.string,
@@ -53,6 +57,8 @@ PolochonEdit.propTypes = {
 };
 PolochonEdit.defaultProps = {
   id: "",
+  title: "Edit",
+  icon: "edit",
   initialName: "",
   initialUrl: "",
   initialToken: "",

frontend/js/components/polochons/list.js

@@ -27,7 +27,7 @@ const PolochonListConnected = ({
 
   return (
     <div className="row mb-3">
-      <div className="col-12 col-md-6 offset-md-3">
+      <div className="col-12 col-md-8 offset-md-2">
         <h2>My polochons</h2>
         <hr />
         <span>

frontend/js/components/polochons/polochon.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types"
 import { List } from "immutable"
 import { connect } from "react-redux"
 
-import { PolochonUser } from "./user"
+import { PolochonUsers } from "./users"
 import { PolochonEdit } from "./edit"
 
 import { updatePolochon, deletePolochon } from "../../actions/polochon"
@@ -43,20 +43,12 @@ export const PolochonConnected = ({
           <p className="card-text">ID: {id}</p>
           <p className="card-text">Egress token: {token}</p>
           <p className="card-text">Ingress token: {authToken}</p>
-          <p className="card-text">
-            Users:
-            {users.map((user, index) => (
-              <PolochonUser
-                key={index}
-                id={user.get("id")}
-                name={user.get("name")}
-              />
-            ))}
-          </p>
+          <PolochonUsers id={id} users={users} />
         </div>
       </div>
 
       <PolochonEdit
+        title="Polochon config"
         show={edit}
         setShow={setEdit}
         update={updatePolochon}
@@ -64,7 +56,6 @@ export const PolochonConnected = ({
         initialName={name}
         initialUrl={url}
         initialToken={token}
-        initialAuthToken={authToken}
       />
     </React.Fragment>
   )

frontend/js/components/polochons/select.js

@@ -0,0 +1,30 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { List } from "immutable"
+
+export const PolochonSelect = ({
+  value,
+  changeValue,
+  polochonList,
+}) => {
+  return (
+    <select
+      className="form-control"
+      value={value}
+      onChange={(e) => changeValue(e.target.options[e.target.selectedIndex].value)}
+    >
+      {polochonList.map((el, index) => (
+        <option
+          value={el.get("id")}
+          key={index}>
+          {el.get("name")} ({el.get("url")})
+        </option>
+      ))}
+    </select>
+  );
+}
+PolochonSelect.propTypes = {
+  value: PropTypes.string,
+  changeValue: PropTypes.func,
+  polochonList: PropTypes.instanceOf(List),
+};

frontend/js/components/polochons/user.js

@@ -1,14 +1,82 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 import PropTypes from "prop-types"
+import { connect } from "react-redux"
+
+import { editPolochonUser } from "../../actions/polochon"
+
+import Toggle from "react-bootstrap-toggle";
+
+import { FormModal } from "../forms/modal"
+import { FormInput } from "../forms/input"
+
+export const PolochonUserConnected = ({
+  polochonId,
+  id,
+  name,
+  initialToken,
+  initialActivated,
+  editPolochonUser,
+}) => {
+  const [edit, setEdit] = useState(false);
+  const [token, setToken] = useState(initialToken);
+  const [activated, setActivated] = useState(initialActivated);
+
+  useEffect(() => {
+    setActivated(initialActivated);
+    setToken(initialToken);
+  }, [initialActivated, initialToken])
+
+  const handleSubmit = () => {
+    editPolochonUser({
+      polochonId,
+      id,
+      token,
+      activated,
+    });
+    setEdit(false);
+  }
 
-export const PolochonUser = ({ id, name }) => {
   return (
-    <span>
-      {name} ({id})
-    </span>
+    <tr>
+      <td>
+        {name}
+      </td>
+      <td>
+        {activated ? "Activated" : "Not activated"}
+      </td>
+      <td>
+        <i className="fa fa-edit ml-2" onClick={() => setEdit(true)} />
+        <FormModal
+          show={edit}
+          setShow={setEdit}
+          title="Edit polochon's user"
+          icon="edit"
+          handleSubmit={handleSubmit}
+        >
+          <FormInput label="Token" value={token} updateValue={setToken} />
+          <div className="form-group">
+            <label>Activated</label>
+            <Toggle
+              className="pull-right"
+              on="yes"
+              off="no"
+              active={activated}
+              offstyle="info"
+              handlestyle="secondary"
+              onClick={() => setActivated(!activated)} />
+          </div>
+        </FormModal>
+      </td>
+    </tr>
   )
 }
-PolochonUser.propTypes = {
+PolochonUserConnected.propTypes = {
+  polochonId: PropTypes.string,
   id: PropTypes.string,
   name: PropTypes.string,
+  initialToken: PropTypes.string,
+  initialActivated: PropTypes.bool,
+  editPolochonUser: PropTypes.func,
 };
+
+export const PolochonUser = connect(null, {editPolochonUser})(PolochonUserConnected);

frontend/js/components/polochons/users.js

@@ -0,0 +1,37 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { List } from "immutable"
+
+import { PolochonUser } from "./user"
+
+export const PolochonUsers = ({ id, users }) => {
+  if (users === null || users.size === 0) { return null }
+
+  return (
+    <table className="table border border-light table-dark">
+      <thead className="thead-dark">
+        <tr>
+          <th scope="col">User</th>
+          <th scope="col">Status</th>
+          <th scope="col">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {users.map((user, index) => (
+          <PolochonUser
+            key={index}
+            polochonId={id}
+            id={user.get("id")}
+            name={user.get("name")}
+            initialToken={user.get("token")}
+            initialActivated={user.get("polochon_activated")}
+          />
+        ))}
+      </tbody>
+    </table>
+  )
+}
+PolochonUsers.propTypes = {
+  id: PropTypes.string,
+  users: PropTypes.instanceOf(List),
+};

frontend/js/components/users/edit.js

@@ -7,13 +7,12 @@ import { List } from "immutable"
 import { getUserInfos, updateUser } from "../../actions/users"
 import { getPolochons } from "../../actions/polochon"
 
-import { FormInput } from "../forms/input"
+import { PolochonSelect } from "../polochons/select"
 
 const mapStateToProps = (state) => ({
   loading: state.userStore.get("loading"),
   publicPolochons: state.polochon.get("public"),
   polochonId: state.userStore.get("polochonId"),
-  polochonToken: state.userStore.get("polochonToken"),
   polochonActivated: state.userStore.get("polochonActivated"),
 });
 
@@ -24,7 +23,6 @@ const mapDispatchToProps = {
 const UserEditConnect = ({
   loading,
   polochonId,
-  polochonToken,
   polochonActivated,
   updateUser,
   getPolochons,
@@ -32,7 +30,6 @@ const UserEditConnect = ({
   publicPolochons,
 }) => {
   const [id, setId] = useState(polochonId);
-  const [token, setToken] = useState(polochonToken);
   const [password, setPassword] = useState("");
   const [passwordConfirm, setPasswordConfirm] = useState("");
 
@@ -43,8 +40,7 @@ const UserEditConnect = ({
 
   useEffect(() => {
     setId(polochonId);
-    setToken(polochonToken);
-  }, [polochonToken, polochonId])
+  }, [polochonId])
 
   const handleSubmit = (ev) => {
     ev.preventDefault();
@@ -52,7 +48,6 @@ const UserEditConnect = ({
       "password": password,
       "password_confirm": passwordConfirm,
       "polochon_id": id,
-      "polochon_token": token,
     });
   }
 
@@ -60,7 +55,7 @@ const UserEditConnect = ({
 
   return (
     <div className="row mb-3">
-      <div className="col-12 col-md-6 offset-md-3">
+      <div className="col-12 col-md-8 offset-md-2">
         <h2>Edit user</h2>
         <hr />
         <form className="form-horizontal" onSubmit={(ev) => handleSubmit(ev)}>
@@ -71,23 +66,9 @@ const UserEditConnect = ({
                   <span className="ml-1 text text-primary">(Needs activation from admin)</span>
               }
             </label>
-            <select
-              className="form-control"
-              value={id}
-              onChange={(e) => setId(e.target.options[e.target.selectedIndex].value)}
-            >
-              {publicPolochons.map((el, index) => (
-                <option
-                  value={el.get("id")}
-                  key={index}>
-                  {el.get("name")} ({el.get("url")})
-                </option>
-              ))}
-            </select>
+            <PolochonSelect value={id} changeValue={setId} polochonList={publicPolochons} />
           </div>
 
-          <FormInput label="token" value={token} updateValue={setToken} />
-
           <hr />
 
           <div className="form-group">
@@ -123,7 +104,6 @@ const UserEditConnect = ({
 UserEditConnect.propTypes = {
   loading: PropTypes.bool.isRequired,
   polochonId: PropTypes.string,
-  polochonToken: PropTypes.string,
   polochonActivated: PropTypes.bool,
   updateUser: PropTypes.func,
   getPolochons: PropTypes.func,