NotAllowed component

private/Notes.txt

@@ -10,3 +10,5 @@ Add in settings:
 - ping interval
 - notifications
 - test notification mechanism
+- permissions
+- permissions hierarchy

public/locales/en/translations.json

@@ -36,6 +36,12 @@
     "Label": "Login",
     "IncorrectCredentials": "Incorrect credentials."
   },
+  "Announcements": {
+    "NotAllowed": {
+      "Title": "It seems that you do not have sufficient rights to view this page.",
+      "Message": "For more details, please contact an administrator."
+    }
+  },
   "Dashboard": {
     "Announcements": {
       "Guest": {

public/locales/ro/translations.json

@@ -27,6 +27,12 @@
     "Label": "Autentificare",
     "IncorrectCredentials": "Credențiale incorecte."
   },
+  "Announcements": {
+    "NotAllowed": {
+      "Title": "Se pare că nu aveți suficiente drepturi pentru a vizualiza această pagină.",
+      "Message": "Pentru mai multe detalii, vă rugăm să contactați un administrator."
+    }
+  },
   "Dashboard": {
     "Announcements": {
       "Guest": {

src/components/common/NotAllowed.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { Alert, AlertTitle } from "@material-ui/lab";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles(theme => ({
+  alert: {
+    width: "100%",
+    "& > * + *": {
+      marginTop: theme.spacing(1)
+    }
+  }
+}));
+
+const NotAllowed = () => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <div className={classes.alert}>
+      <Alert variant="outlined" severity="error">
+        <AlertTitle>{t("Announcements.NotAllowed.Title")}</AlertTitle>
+        {t("Announcements.NotAllowed.Message")}
+      </Alert>
+    </div>
+  );
+};
+
+export default NotAllowed;

src/features/network/components/NetworkContainer.js

@@ -1,8 +1,14 @@
 import React from "react";
 import MachinesContainer from "../../machines/components/MachinesContainer";
 import NetworkStateProvider from "../state/NetworkStateProvider";
+import { usePermissions } from "../../../hooks";
+import NotAllowed from "../../../components/common/NotAllowed";
 
 const NetworkContainer = () => {
+  const { viewMachines } = usePermissions();
+
+  if (!viewMachines) return <NotAllowed />;
+
   return (
     <NetworkStateProvider>
       <MachinesContainer />