added security component in user profile

master
Tudor Stanciu 2023-04-04 00:32:04 +03:00
parent 4c9491cb74
commit 1d81b8ec49
5 changed files with 83 additions and 8 deletions

14
package-lock.json generated
View File

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

View File

@ -14,7 +14,7 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@flare/js-utils": "^1.1.0", "@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/core": "^4.11.2",
"@material-ui/icons": "^4.11.2", "@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.61", "@material-ui/lab": "^4.0.0-alpha.61",

View File

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

View File

@ -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;

View File

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