UI (#15)

Adding new Admin UI. Updating Fredy to V3.0.0 as it has been a large rewrite. Thanks for all contributions and help on the way!

ui/src/components/permission/InsufficientPermission.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Header } from 'semantic-ui-react';
+import insufficientPermission from '../../assets/insufficient_permission.png';
+
+export default function InsufficientPermission() {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
+      <img src={insufficientPermission} height={250} />
+      <br />
+      <Header as="h4" inverted>
+        Insufficient permission :(
+      </Header>
+    </div>
+  );
+}

ui/src/components/permission/PermissionAwareRoute.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Redirect } from 'react-router-dom';
+import { Route } from 'react-router';
+
+export default function PermissionAwareRoute({ currentUser, name, path, component }) {
+  /**
+   * Checks if given component should be rendered if current user has given permission enabled. If that's not the case,
+   * user is redirected to '/403'.
+   *
+   * @param permission
+   * @param component
+   * @param path
+   * @returns {*}
+   */
+  const checkIfAdmin = (component, path) => {
+    return currentUser != null && currentUser.isAdmin ? component : <Redirect from={path} to="/403" />;
+  };
+
+  return <Route name={name} path={path} render={() => checkIfAdmin(component, path)} />;
+}