added security component in user profile

package-lock.json

@@ -1316,21 +1316,21 @@
       "integrity": "sha512-6NBXdZgRrHbLXw4EMgyqCIzOVAlUgr1+8QGHjlA+n5Iw2Lp/+dP3FTgAfPW/cHR/PBI3cj7gUDVUf/zD/qTPOQ=="
     },
     "@flare/tuitio-client": {
-      "version": "1.2.2",
-      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client/-/tuitio-client-1.2.2.tgz",
-      "integrity": "sha512-Rqz9seWFY5nUivMHrONphgYEeVriAq3yn8icAUQ+TFgf/ajoOqv0GlVfo2Nc//vqsLBJkZtHexmF92/5WHvvhQ==",
+      "version": "1.2.3",
+      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client/-/tuitio-client-1.2.3.tgz",
+      "integrity": "sha512-m1cJZNTLNXwviD2hkeAvs6I/jlC17GHkUraExfaEaYOUrmDpovE64sg6Xheb01mXnDADCdA2MYxdJgxODNJAqw==",
       "requires": {
         "@flare/js-utils": "^1.1.0",
         "axios": "^1.3.2"
       }
     },
     "@flare/tuitio-client-react": {
-      "version": "1.2.2",
-      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.2.2.tgz",
-      "integrity": "sha512-mhO1psmLgNXe2bIYwi+2J1WYQM63IDr8162M3s3tjm4V+9pyM0lQs7EGIXJfn344TSmXFde3SZwyxakIyWeIbQ==",
+      "version": "1.2.3",
+      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.2.3.tgz",
+      "integrity": "sha512-ry8eiNJh+TrAVu+PN/vuZ6MJXVMDDEBixz+X37rPOKzY283FhiLSJt76l0rBjfSKuFHyqE8Bx5g4mJ0XgutjMg==",
       "requires": {
         "@flare/js-utils": "^1.1.0",
-        "@flare/tuitio-client": "^1.2.2"
+        "@flare/tuitio-client": "^1.2.3"
       }
     },
     "@gar/promisify": {

package.json

@@ -14,7 +14,7 @@
   "private": true,
   "dependencies": {
     "@flare/js-utils": "^1.1.0",
-    "@flare/tuitio-client-react": "^1.2.2",
+    "@flare/tuitio-client-react": "^1.2.3",
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.61",

src/features/user/profile/card/UserProfileComponent.js

@@ -4,9 +4,15 @@ import { useTranslation } from "react-i18next";
 import { Card, CardHeader, CardContent } from "@material-ui/core";
 import PageTitle from "../../../../components/common/PageTitle";
 import UserProfileCardContent from "./UserProfileCardContent";
+import SecurityComponent from "../security/SecurityComponent";
+import styles from "../styles";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(styles);
 
 const UserProfileComponent = ({ userData }) => {
   const { t } = useTranslation();
+  const classes = useStyles();
 
   const userLoginDate = useMemo(
     () =>
@@ -32,6 +38,13 @@ const UserProfileComponent = ({ userData }) => {
           <UserProfileCardContent userData={userData} />
         </CardContent>
       </Card>
+
+      <div className={classes.section}>
+        <SecurityComponent
+          userGroups={userData.userGroups}
+          userRoles={userData.userRoles}
+        />
+      </div>
     </>
   );
 };

src/features/user/profile/security/SecurityComponent.js

@@ -0,0 +1,53 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Paper, Grid, Chip, Typography } from "@material-ui/core";
+import styles from "../styles";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(styles);
+
+const SecurityComponent = ({ userGroups, userRoles }) => {
+  const classes = useStyles();
+  return (
+    <Paper>
+      <Grid container>
+        <Grid item xs={12} md={6}>
+          <div className={classes.paper}>
+            <Typography gutterBottom variant="body1">
+              User groups
+            </Typography>
+            <div>
+              {userGroups.map(g => (
+                <Chip key={g.code} className={classes.chip} label={g.name} />
+              ))}
+            </div>
+          </div>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <div className={classes.paper}>
+            <Typography gutterBottom variant="body1">
+              User roles
+            </Typography>
+            <div>
+              {userRoles.map(r => (
+                <Chip
+                  key={r.code}
+                  className={classes.chip}
+                  color="primary"
+                  label={r.name}
+                />
+              ))}
+            </div>
+          </div>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+};
+
+SecurityComponent.propTypes = {
+  userGroups: PropTypes.array.isRequired,
+  userRoles: PropTypes.array.isRequired
+};
+
+export default SecurityComponent;

src/features/user/profile/styles.js

@@ -1,5 +1,8 @@
 const style = theme => {
   return {
+    section: {
+      marginTop: theme.spacing(2)
+    },
     panel: {
       display: "flex",
       flexDirection: "row",
@@ -12,6 +15,12 @@ const style = theme => {
       display: "block",
       width: theme.spacing(25),
       height: theme.spacing(25)
+    },
+    paper: {
+      margin: theme.spacing(2)
+    },
+    chip: {
+      margin: theme.spacing(0.5)
     }
   };
 };