translations

public/locales/en/translations.json

@@ -41,7 +41,11 @@
       "Label": "Profile",
       "Hello": "Hi, {{userName}}",
       "Description": "{{userName}}, authenticated on {{loginDate}}",
-      "OpenPortfolio": "Open portfolio"
+      "OpenPortfolio": "Open portfolio",
+      "Security": {
+        "UserGroups": "User groups",
+        "UserRoles": "User roles"
+      }
     },
     "Settings": "Settings",
     "Logout": "Logout"

public/locales/ro/translations.json

@@ -32,7 +32,11 @@
       "Label": "Profil",
       "Hello": "Salut, {{userName}}",
       "Description": "{{userName}}, autentificat pe {{loginDate}}",
-      "OpenPortfolio": "Deschide portofoliu"
+      "OpenPortfolio": "Deschide portofoliu",
+      "Security": {
+        "UserGroups": "Grupuri utilizator",
+        "UserRoles": "Roluri utilizator"
+      }
     },
     "Settings": "Setări",
     "Logout": "Deconectare"

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

@@ -3,10 +3,12 @@ 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";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);
 
 const SecurityComponent = ({ userGroups, userRoles }) => {
+  const { t } = useTranslation();
   const classes = useStyles();
   return (
     <Paper>
@@ -14,7 +16,7 @@ const SecurityComponent = ({ userGroups, userRoles }) => {
         <Grid item xs={12} md={6}>
           <div className={classes.paper}>
             <Typography gutterBottom variant="body1">
-              User groups
+              {t("User.Profile.Security.UserGroups")}
             </Typography>
             <div>
               {userGroups.map(g => (
@@ -26,7 +28,7 @@ const SecurityComponent = ({ userGroups, userRoles }) => {
         <Grid item xs={12} md={6}>
           <div className={classes.paper}>
             <Typography gutterBottom variant="body1">
-              User roles
+              {t("User.Profile.Security.UserRoles")}
             </Typography>
             <div>
               {userRoles.map(r => (