UI: New administrative user view (#361)

CERT-Polska · May 6, 2021 · df15e16 · df15e16
1 parent b8b5093
commit df15e16
Show file tree

Hide file tree

Showing 15 changed files with 646 additions and 464 deletions.
diff --git a/mwdb/schema/user.py b/mwdb/schema/user.py
@@ -63,6 +63,8 @@ class UserItemResponseSchema(UserLoginSchemaBase):
     groups = fields.Nested(
         GroupBasicResponseSchema, many=True, required=True, allow_none=False
     )
+    capabilities = fields.List(fields.Str(), required=True, allow_none=False)
+
     api_keys = fields.Nested(
         APIKeyListItemResponseSchema, many=True, required=True, allow_none=False
     )

diff --git a/mwdb/web/src/App.js b/mwdb/web/src/App.js
@@ -59,6 +59,8 @@ import {
     faCopy,
     faThumbtack,
     faStar,
+    faEdit,
+    faSave,
 } from "@fortawesome/free-solid-svg-icons";
 import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
 
@@ -99,6 +101,8 @@ library.add(faCopy);
 library.add(faThumbtack);
 library.add(faStar);
 library.add(farStar);
+library.add(faEdit);
+library.add(faSave);
 
 function DefaultRoute() {
     const location = useLocation();

diff --git a/mwdb/web/src/commons/api/index.js b/mwdb/web/src/commons/api/index.js
@@ -285,14 +285,18 @@ function registerUser(login, email, additional_info, recaptcha) {
     });
 }
 
-function updateUser(login, email, additional_info, feed_quality) {
+function updateUser(login, { email, additionalInfo, feedQuality }) {
     return axios.put(`/user/${login}`, {
         email,
-        additional_info,
-        feed_quality,
+        additional_info: additionalInfo,
+        feed_quality: feedQuality,
     });
 }
 
+function removeUser(login) {
+    return axios.delete(`/user/${login}`);
+}
+
 function getReadableMetakeyDefinitions() {
     return axios.get("/meta/list/read");
 }
@@ -498,6 +502,7 @@ export default {
     createUser,
     registerUser,
     updateUser,
+    removeUser,
     getReadableMetakeyDefinitions,
     getSettableMetakeyDefinitions,
     getMetakeyDefinitions,

diff --git a/mwdb/web/src/components/Profile/Views/ProfileAPIKeys.js b/mwdb/web/src/components/Profile/Views/ProfileAPIKeys.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 
 import {
     faCopy,
@@ -21,6 +21,7 @@ import {
 
 export default function ProfileAPIKeys({ profile, updateProfile }) {
     const history = useHistory();
+    const location = useLocation();
     const [currentApiToken, setCurrentApiToken] = useState({});
     const [apiKeyToRemove, setApiKeyToRemove] = useState();
     const [removeModalOpened, setRemoveModalOpened] = useState(false);
@@ -34,7 +35,7 @@ export default function ProfileAPIKeys({ profile, updateProfile }) {
             setCurrentApiToken(response.data);
         } catch (error) {
             history.push({
-                pathname: "/profile/api-keys",
+                pathname: location.pathname,
                 state: { error: getErrorMessage(error) },
             });
         }
@@ -46,15 +47,15 @@ export default function ProfileAPIKeys({ profile, updateProfile }) {
             setCurrentApiToken(response.data);
             updateProfile();
             history.push({
-                pathname: "/profile/api-keys",
+                pathname: location.pathname,
                 state: {
                     success: "New API key successfully added",
                     addedKey: response.data.id,
                 },
             });
         } catch (error) {
             history.push({
-                pathname: "/profile/api-keys",
+                pathname: location.pathname,
                 state: { error: getErrorMessage(error) },
             });
         }
@@ -68,22 +69,23 @@ export default function ProfileAPIKeys({ profile, updateProfile }) {
             updateProfile();
             setRemoveModalOpened(false);
             history.push({
-                pathname: "/profile/api-keys",
+                pathname: location.pathname,
                 state: {
                     success: "API key successfully removed",
                 },
             });
         } catch (error) {
             history.push({
-                pathname: "/profile/api-keys",
+                pathname: location.pathname,
                 state: { error: getErrorMessage(error) },
             });
         }
     }
 
+    if (Object.keys(profile).length === 0) return [];
+
     return (
-        <div>
-            <h5>API keys</h5>
+        <div className="container">
             {!profile.api_keys.length ? (
                 <p>
                     <i>

diff --git a/mwdb/web/src/components/Profile/Views/ProfileCapabilities.js b/mwdb/web/src/components/Profile/Views/ProfileCapabilities.js
@@ -36,8 +36,7 @@ function CapabilitiesTable({ profile }) {
 
 export default function ProfileCapabilities({ profile }) {
     return (
-        <div>
-            <h4>Account capabilities</h4>
+        <div className="container">
             <CapabilitiesTable profile={profile} />
         </div>
     );

diff --git a/mwdb/web/src/components/Settings/SettingsView.js b/mwdb/web/src/components/Settings/SettingsView.js
@@ -18,10 +18,10 @@ import ShowPendingUsers from "./Views/ShowPendingUsers";
 import ManageAttributes from "./Views/ManageAttributes";
 import AttributeUpdate from "./Views/AttributeUpdate";
 import GroupUpdate from "./Views/GroupUpdate";
-import UserUpdate from "./Views/UserUpdate";
 import UserCreate from "./Views/UserCreate";
 import GroupRegister from "./Views/GroupRegister";
 import AttributeDefine from "./Views/AttributeDefine";
+import UserView from "./Views/UserView";
 
 function SettingsNav() {
     const auth = useContext(AuthContext);
@@ -138,9 +138,15 @@ export default function SettingsView(props) {
                             </AdministrativeRoute>
                             <AdministrativeRoute
                                 exact
-                                path="/admin/user/:login"
+                                path={[
+                                    "/admin/user/:login",
+                                    "/admin/user/:login/password",
+                                    "/admin/user/:login/capabilities",
+                                    "/admin/user/:login/api-keys",
+                                    "/admin/user/:login/groups",
+                                ]}
                             >
-                                <UserUpdate />
+                                <UserView />
                             </AdministrativeRoute>
 
                             <AdministrativeRoute exact path="/admin/groups">

diff --git a/mwdb/web/src/components/Settings/Views/AttributeDefine.js b/mwdb/web/src/components/Settings/Views/AttributeDefine.js
@@ -44,7 +44,7 @@ class AttributeDefine extends Component {
                 this.state.template,
                 this.state.hidden
             );
-            this.props.history.push(`/attribute/${this.state.metakey}`);
+            this.props.history.push(`/admin/attribute/${this.state.metakey}`);
         } catch (error) {
             this.setState({ ...this.initialState, error });
         }
@@ -132,7 +132,7 @@ class AttributeDefine extends Component {
                             <label
                                 htmlFor="hidden_checkbox"
                                 className="bg-primary"
-                            ></label>
+                            />
                         </div>
                         <div className="form-hint">
                             Hidden attributes have protected values. Attribute

diff --git a/mwdb/web/src/components/Settings/Views/AttributeUpdate.js b/mwdb/web/src/components/Settings/Views/AttributeUpdate.js
@@ -381,7 +381,7 @@ class AttributeUpdate extends Component {
         this.setState({ disabledModalButton: true });
         try {
             await api.removeMetakeyDefinition(metakey);
-            this.props.history.push("/attributes");
+            this.props.history.push("/admin/attributes");
         } catch (error) {
             this.setState({
                 disabledModalButton: false,

diff --git a/mwdb/web/src/components/Settings/Views/ShowUsers.js b/mwdb/web/src/components/Settings/Views/ShowUsers.js
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
 import api from "@mwdb-web/commons/api";
-import { PagedList, View, HighlightText } from "@mwdb-web/commons/ui";
+import { PagedList, HighlightText } from "@mwdb-web/commons/ui";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUser, faRobot } from "@fortawesome/free-solid-svg-icons";
@@ -51,7 +51,7 @@ class ShowUsers extends Component {
 
     render() {
         return (
-            <View fluid ident="showUsers" error={this.state.error}>
+            <div>
                 <Link to="/admin/user/new">
                     <button type="button" className="btn btn-success">
                         Register user
@@ -70,7 +70,7 @@ class ShowUsers extends Component {
                     onPageChange={this.handlePageChange}
                     onFilterChange={this.handleFilterChange}
                 />
-            </View>
+            </div>
         );
     }
 }