diff --git a/resources/scripts/components/screens/ScreenBlock.tsx b/resources/scripts/components/screens/ScreenBlock.tsx index 55e1e70a0..38cad46cb 100644 --- a/resources/scripts/components/screens/ScreenBlock.tsx +++ b/resources/scripts/components/screens/ScreenBlock.tsx @@ -52,8 +52,8 @@ export default ({ title, image, message, onBack, onRetry }: Props) => ( } - -

{title}

+ +

{title}

{message}

diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx index a330685b1..64d69aec0 100644 --- a/resources/scripts/components/server/network/NetworkContainer.tsx +++ b/resources/scripts/components/server/network/NetworkContainer.tsx @@ -24,7 +24,7 @@ const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`; const NetworkContainer = () => { - const { uuid, allocations, name: serverName } = useServer(); + const { uuid, allocations } = useServer(); const { clearFlashes, clearAndAddHttpError } = useFlash(); const [ loading, setLoading ] = useState(false); const { data, error, mutate } = useSWR(uuid, key => getServerAllocations(key), { initialData: allocations }); @@ -61,10 +61,7 @@ const NetworkContainer = () => { }, [ error ]); return ( - - - {serverName} | Network - + {!data ? : diff --git a/resources/scripts/hoc/requireServerPermission.tsx b/resources/scripts/hoc/requireServerPermission.tsx new file mode 100644 index 000000000..88ff05e20 --- /dev/null +++ b/resources/scripts/hoc/requireServerPermission.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import Can from '@/components/elements/Can'; +import NotFound from '@/components/screens/NotFound'; +import ScreenBlock from '@/components/screens/ScreenBlock'; + +const requireServerPermission = (Component: React.ComponentType, permissions: string | string[]) => { + return class extends React.Component { + render () { + return ( + + } + > + + + ); + } + }; +}; + +export default requireServerPermission; diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx index 22e701fa9..7e0e30685 100644 --- a/resources/scripts/routers/ServerRouter.tsx +++ b/resources/scripts/routers/ServerRouter.tsx @@ -28,6 +28,7 @@ import SubNavigation from '@/components/elements/SubNavigation'; import NetworkContainer from '@/components/server/network/NetworkContainer'; import InstallListener from '@/components/server/InstallListener'; import StartupContainer from '@/components/server/startup/StartupContainer'; +import requireServerPermission from '@/hoc/requireServerPermission'; const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => { const { rootAdmin } = useStoreState(state => state.user.data!); @@ -121,7 +122,11 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) - + ( @@ -131,17 +136,17 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) )} exact /> - - + + - - - - + + + +