Fix router logic to account for logged out users; closes #4085

Middleware was removed from the `/` route to redirect users without authentication, so now we need to handle this on the front-end properly.

resources/scripts/components/App.tsx

@@ -13,6 +13,8 @@ import tw, { GlobalStyles as TailwindGlobalStyles } from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
 import { history } from '@/components/history';
 import { setupInterceptors } from '@/api/interceptors';
+import AuthenticatedRoute from '@/components/elements/AuthenticatedRoute';
+import { ServerContext } from '@/state/server';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
@@ -60,10 +62,20 @@ const App = () => {
                 <div css={tw`mx-auto w-auto`}>
                     <Router history={history}>
                         <Switch>
-                            <Route path="/server/:id" component={ServerRouter}/>
-                            <Route path="/auth" component={AuthenticationRouter}/>
-                            <Route path="/" component={DashboardRouter}/>
-                            <Route path={'*'} component={NotFound}/>
+                            <Route path={'/auth'}>
+                                <AuthenticationRouter/>
+                            </Route>
+                            <AuthenticatedRoute path={'/server/:id'}>
+                                <ServerContext.Provider>
+                                    <ServerRouter/>
+                                </ServerContext.Provider>
+                            </AuthenticatedRoute>
+                            <AuthenticatedRoute path={'/'}>
+                                <DashboardRouter/>
+                            </AuthenticatedRoute>
+                            <Route path={'*'}>
+                                <NotFound/>
+                            </Route>
                         </Switch>
                     </Router>
                 </div>

resources/scripts/components/elements/AuthenticatedRoute.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Redirect, Route, RouteProps } from 'react-router';
+import { useStoreState } from '@/state/hooks';
+
+export default ({ children, ...props }: Omit<RouteProps, 'render'>) => {
+    const isAuthenticated = useStoreState(state => !!state.user.data?.uuid);
+
+    return (
+        <Route
+            {...props}
+            render={({ location }) => (
+                isAuthenticated ? children : <Redirect to={{ pathname: '/auth/login', state: { from: location } }}/>
+            )}
+        />
+    );
+};

resources/scripts/routers/AuthenticationRouter.tsx

@@ -1,22 +1,29 @@
 import React from 'react';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import LoginContainer from '@/components/auth/LoginContainer';
 import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
 import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
 import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
 import { NotFound } from '@/components/elements/ScreenBlock';
+import { useHistory, useLocation } from 'react-router';
 
-export default ({ location, history, match }: RouteComponentProps) => (
-    <div className={'pt-8 xl:pt-32'}>
-        <Switch location={location}>
-            <Route path={`${match.path}/login`} component={LoginContainer} exact/>
-            <Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
-            <Route path={`${match.path}/password`} component={ForgotPasswordContainer} exact/>
-            <Route path={`${match.path}/password/reset/:token`} component={ResetPasswordContainer}/>
-            <Route path={`${match.path}/checkpoint`}/>
-            <Route path={'*'}>
-                <NotFound onBack={() => history.push('/auth/login')}/>
-            </Route>
-        </Switch>
-    </div>
-);
+export default () => {
+    const history = useHistory();
+    const location = useLocation();
+    const { path } = useRouteMatch();
+
+    return (
+        <div className={'pt-8 xl:pt-32'}>
+            <Switch location={location}>
+                <Route path={`${path}/login`} component={LoginContainer} exact/>
+                <Route path={`${path}/login/checkpoint`} component={LoginCheckpointContainer}/>
+                <Route path={`${path}/password`} component={ForgotPasswordContainer} exact/>
+                <Route path={`${path}/password/reset/:token`} component={ResetPasswordContainer}/>
+                <Route path={`${path}/checkpoint`}/>
+                <Route path={'*'}>
+                    <NotFound onBack={() => history.push('/auth/login')}/>
+                </Route>
+            </Switch>
+        </div>
+    );
+};

resources/scripts/routers/DashboardRouter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { NavLink, Route, Switch } from 'react-router-dom';
 import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
 import NavigationBar from '@/components/NavigationBar';
 import DashboardContainer from '@/components/dashboard/DashboardContainer';
@@ -8,37 +8,42 @@ import { NotFound } from '@/components/elements/ScreenBlock';
 import TransitionRouter from '@/TransitionRouter';
 import SubNavigation from '@/components/elements/SubNavigation';
 import AccountSSHContainer from '@/components/dashboard/ssh/AccountSSHContainer';
+import { useLocation } from 'react-router';
 
-export default ({ location }: RouteComponentProps) => (
-    <>
-        <NavigationBar/>
-        {location.pathname.startsWith('/account') &&
-        <SubNavigation>
-            <div>
-                <NavLink to={'/account'} exact>Settings</NavLink>
-                <NavLink to={'/account/api'}>API Credentials</NavLink>
-                <NavLink to={'/account/ssh'}>SSH Keys</NavLink>
-            </div>
-        </SubNavigation>
-        }
-        <TransitionRouter>
-            <Switch location={location}>
-                <Route path={'/'} exact>
-                    <DashboardContainer/>
-                </Route>
-                <Route path={'/account'} exact>
-                    <AccountOverviewContainer/>
-                </Route>
-                <Route path={'/account/api'} exact>
-                    <AccountApiContainer/>
-                </Route>
-                <Route path={'/account/ssh'} exact>
-                    <AccountSSHContainer/>
-                </Route>
-                <Route path={'*'}>
-                    <NotFound/>
-                </Route>
-            </Switch>
-        </TransitionRouter>
-    </>
-);
+export default () => {
+    const location = useLocation();
+
+    return (
+        <>
+            <NavigationBar/>
+            {location.pathname.startsWith('/account') &&
+                <SubNavigation>
+                    <div>
+                        <NavLink to={'/account'} exact>Settings</NavLink>
+                        <NavLink to={'/account/api'}>API Credentials</NavLink>
+                        <NavLink to={'/account/ssh'}>SSH Keys</NavLink>
+                    </div>
+                </SubNavigation>
+            }
+            <TransitionRouter>
+                <Switch location={location}>
+                    <Route path={'/'} exact>
+                        <DashboardContainer/>
+                    </Route>
+                    <Route path={'/account'} exact>
+                        <AccountOverviewContainer/>
+                    </Route>
+                    <Route path={'/account/api'} exact>
+                        <AccountApiContainer/>
+                    </Route>
+                    <Route path={'/account/ssh'} exact>
+                        <AccountSSHContainer/>
+                    </Route>
+                    <Route path={'*'}>
+                        <NotFound/>
+                    </Route>
+                </Switch>
+            </TransitionRouter>
+        </>
+    );
+};

resources/scripts/routers/ServerRouter.tsx

@@ -1,6 +1,6 @@
 import TransferListener from '@/components/server/TransferListener';
 import React, { useEffect, useState } from 'react';
-import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { NavLink, Route, Switch, useRouteMatch } from 'react-router-dom';
 import NavigationBar from '@/components/NavigationBar';
 import ServerConsole from '@/components/server/ServerConsole';
 import TransitionRouter from '@/TransitionRouter';
@@ -31,6 +31,7 @@ import RequireServerPermission from '@/hoc/RequireServerPermission';
 import ServerInstallSvg from '@/assets/images/server_installing.svg';
 import ServerRestoreSvg from '@/assets/images/server_restore.svg';
 import ServerErrorSvg from '@/assets/images/server_error.svg';
+import { useLocation } from 'react-router';
 
 const ConflictStateRenderer = () => {
     const status = ServerContext.useStoreState(state => state.server.data?.status || null);
@@ -59,7 +60,10 @@ const ConflictStateRenderer = () => {
     );
 };
 
-const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
+export default () => {
+    const match = useRouteMatch<{ id: string }>();
+    const location = useLocation();
+
     const rootAdmin = useStoreState(state => state.user.data!.rootAdmin);
     const [ error, setError ] = useState('');
 
@@ -194,9 +198,3 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
         </React.Fragment>
     );
 };
-
-export default (props: RouteComponentProps<any>) => (
-    <ServerContext.Provider>
-        <ServerRouter {...props}/>
-    </ServerContext.Provider>
-);