Merge remote-tracking branch 'origin/v3.4' into dev

interface/src/components/routing/RequireAdmin.tsx

@@ -0,0 +1,11 @@
+import { FC, useContext } from 'react';
+import { Navigate } from 'react-router-dom';
+
+import { AuthenticatedContext } from '../../contexts/authentication';
+
+const RequireAdmin: FC = ({ children }) => {
+  const authenticatedContext = useContext(AuthenticatedContext);
+  return authenticatedContext.me.admin ? <>{children}</> : <Navigate replace to="/" />;
+};
+
+export default RequireAdmin;

interface/src/components/routing/RequireAuthenticated.tsx

@@ -0,0 +1,30 @@
+import { FC, useContext, useEffect } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+
+import {
+  AuthenticatedContext,
+  AuthenticatedContextValue,
+  AuthenticationContext
+} from '../../contexts/authentication/context';
+import { storeLoginRedirect } from '../../api/authentication';
+
+const RequireAuthenticated: FC = ({ children }) => {
+  const authenticationContext = useContext(AuthenticationContext);
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!authenticationContext.me) {
+      storeLoginRedirect(location);
+    }
+  });
+
+  return authenticationContext.me ? (
+    <AuthenticatedContext.Provider value={authenticationContext as AuthenticatedContextValue}>
+      {children}
+    </AuthenticatedContext.Provider>
+  ) : (
+    <Navigate to="/unauthorized" />
+  );
+};
+
+export default RequireAuthenticated;

interface/src/components/routing/RequireUnauthenticated.tsx

@@ -0,0 +1,15 @@
+import { FC, useContext } from 'react';
+import { Navigate } from 'react-router-dom';
+
+import * as AuthenticationApi from '../../api/authentication';
+import { AuthenticationContext } from '../../contexts/authentication';
+import { FeaturesContext } from '../../contexts/features';
+
+const RequireUnauthenticated: FC = ({ children }) => {
+  const { features } = useContext(FeaturesContext);
+  const authenticationContext = useContext(AuthenticationContext);
+
+  return authenticationContext.me ? <Navigate to={AuthenticationApi.fetchLoginRedirect(features)} /> : <>{children}</>;
+};
+
+export default RequireUnauthenticated;

interface/src/components/routing/RouterTabs.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Tabs, useMediaQuery, useTheme } from '@mui/material';
+
+interface RouterTabsProps {
+  value: string | false;
+}
+
+const RouterTabs: FC<RouterTabsProps> = ({ value, children }) => {
+  const navigate = useNavigate();
+
+  const theme = useTheme();
+  const smallDown = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+    navigate(path);
+  };
+
+  return (
+    <Tabs value={value} onChange={handleTabChange} variant={smallDown ? 'scrollable' : 'fullWidth'}>
+      {children}
+    </Tabs>
+  );
+};
+
+export default RouterTabs;

interface/src/components/routing/index.ts

@@ -0,0 +1,6 @@
+export { default as RouterTabs } from './RouterTabs';
+export { default as RequireAdmin } from './RequireAdmin';
+export { default as RequireAuthenticated } from './RequireAuthenticated';
+export { default as RequireUnauthenticated } from './RequireUnauthenticated';
+
+export * from './useRouterTab';

interface/src/components/routing/useRouterTab.ts

@@ -0,0 +1,9 @@
+import { useMatch, useResolvedPath } from 'react-router-dom';
+
+export const useRouterTab = () => {
+  const routerTabPath = useResolvedPath(':tab');
+  const routerTabPathMatch = useMatch(routerTabPath.pathname);
+
+  const routerTab = routerTabPathMatch?.params?.tab || false;
+  return { routerTab } as const;
+};