From 360363c0ae30c5369ef50504f0a6c456dbfab18d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Wed, 10 Jul 2019 14:42:33 +0200 Subject: [PATCH] Allow polochon admin to edit the user's config --- frontend/js/actions/polochon.js | 12 +++ frontend/js/actions/users.js | 3 + frontend/js/components/forms/modal.js | 2 +- frontend/js/components/polochons/add.js | 4 +- frontend/js/components/polochons/edit.js | 10 ++- frontend/js/components/polochons/list.js | 2 +- frontend/js/components/polochons/polochon.js | 15 +--- frontend/js/components/polochons/select.js | 30 ++++++++ frontend/js/components/polochons/user.js | 80 ++++++++++++++++++-- frontend/js/components/polochons/users.js | 37 +++++++++ frontend/js/components/users/edit.js | 28 +------ 11 files changed, 176 insertions(+), 47 deletions(-) create mode 100644 frontend/js/components/polochons/select.js create mode 100644 frontend/js/components/polochons/users.js diff --git a/frontend/js/actions/polochon.js b/frontend/js/actions/polochon.js index a5c97ef..177868e 100644 --- a/frontend/js/actions/polochon.js +++ b/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(), + ], +) diff --git a/frontend/js/actions/users.js b/frontend/js/actions/users.js index 229cee9..625af61 100644 --- a/frontend/js/actions/users.js +++ b/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(), ], ) } diff --git a/frontend/js/components/forms/modal.js b/frontend/js/components/forms/modal.js index 26b3475..5baef5f 100644 --- a/frontend/js/components/forms/modal.js +++ b/frontend/js/components/forms/modal.js @@ -31,7 +31,7 @@ export const FormModal = ({
Apply
-
setShow(false)}>Close
+
setShow(false)}>Close
 ) diff --git a/frontend/js/components/polochons/add.js b/frontend/js/components/polochons/add.js index e8d41d8..e2cf7f7 100644 --- a/frontend/js/components/polochons/add.js +++ b/frontend/js/components/polochons/add.js @@ -11,12 +11,14 @@ export const PolochonAddConnected = ({ addPolochon }) => { return ( -
setModal(true)}> +
setModal(true)}> Add new polochon
@@ -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: "", diff --git a/frontend/js/components/polochons/list.js b/frontend/js/components/polochons/list.js index 22474fe..1319140 100644 --- a/frontend/js/components/polochons/list.js +++ b/frontend/js/components/polochons/list.js @@ -27,7 +27,7 @@ const PolochonListConnected = ({ return (
-
+

My polochons

diff --git a/frontend/js/components/polochons/polochon.js b/frontend/js/components/polochons/polochon.js index 6e86c00..7efb43c 100644 --- a/frontend/js/components/polochons/polochon.js +++ b/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 = ({

ID: {id}

Egress token: {token}

Ingress token: {authToken}

-

- Users: - {users.map((user, index) => ( - - ))} -

+
) diff --git a/frontend/js/components/polochons/select.js b/frontend/js/components/polochons/select.js new file mode 100644 index 0000000..b3fe9a6 --- /dev/null +++ b/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 ( + + ); +} +PolochonSelect.propTypes = { + value: PropTypes.string, + changeValue: PropTypes.func, + polochonList: PropTypes.instanceOf(List), +}; diff --git a/frontend/js/components/polochons/user.js b/frontend/js/components/polochons/user.js index 4ed207b..fd86740 100644 --- a/frontend/js/components/polochons/user.js +++ b/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 ( - - {name} ({id}) - + + + {name} + + + {activated ? "Activated" : "Not activated"} + + + setEdit(true)} /> + + +
+ + setActivated(!activated)} /> +
+ + + ) } -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); diff --git a/frontend/js/components/polochons/users.js b/frontend/js/components/polochons/users.js new file mode 100644 index 0000000..3dba984 --- /dev/null +++ b/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 ( + + + + + + + + + + {users.map((user, index) => ( + + ))} + +
UserStatusActions
+ ) +} +PolochonUsers.propTypes = { + id: PropTypes.string, + users: PropTypes.instanceOf(List), +}; diff --git a/frontend/js/components/users/edit.js b/frontend/js/components/users/edit.js index 240dc4a..adecb62 100644 --- a/frontend/js/components/users/edit.js +++ b/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 (
-
+

Edit user

handleSubmit(ev)}> @@ -71,23 +66,9 @@ const UserEditConnect = ({ (Needs activation from admin) } - +
- -
@@ -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,