Fix router to make it easier to actually navigate around the app

resources/scripts/components/App.tsx

@@ -6,7 +6,7 @@ import AccountRouter from '@/routers/AccountRouter';
 import ServerOverviewContainer from '@/components/ServerOverviewContainer';
 import { StoreProvider } from 'easy-peasy';
 import { store } from '@/state';
-import { UserData } from '@/state/types';
+import TransitionRouter from '@/TransitionRouter';
 
 interface WindowWithUser extends Window {
     PterodactylUser?: {
@@ -39,11 +39,13 @@ const App = () => {
     return (
         <StoreProvider store={store}>
             <Router basename={'/'}>
-                <div className={'mx-auto px-10 w-auto'} style={{ maxWidth: '1000px' }}>
+                <TransitionRouter basename={'/'}>
+                    <div className={'mx-auto w-auto'} style={{ maxWidth: '1000px' }}>
                         <Route exact path="/" component={ServerOverviewContainer}/>
                         <Route path="/auth" component={AuthenticationRouter}/>
                         <Route path="/account" component={AccountRouter}/>
                     </div>
+                </TransitionRouter>
             </Router>
         </StoreProvider>
     );

resources/scripts/components/ServerOverviewContainer.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react';
+import { NavLink } from 'react-router-dom';
 
 export default class ServerOverviewContainer extends React.PureComponent {
     render () {
-        return <p>Test</p>;
+        return (
+            <div className={'mt-10'}>
+                <NavLink className={'text-neutral-100 text-sm block mb-2 no-underline hover:underline'} to={'/account'}>Account</NavLink>
+                <NavLink className={'text-neutral-100 text-sm block mb-2 no-underline hover:underline'} to={'/account/design'}>Design</NavLink>
+            </div>
+        );
     }
 }

resources/scripts/components/account/DesignElements.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Link } from 'react-router-dom';
 
 export default class DesignElements extends React.PureComponent {
     render () {
@@ -8,7 +9,10 @@ export default class DesignElements extends React.PureComponent {
                     <div className={'flex-1 mr-4'}>
                         <h2 className={'text-neutral-300 mb-2 px-4'}>A Special Announcement</h2>
                         <div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
-                            <p className={'text-neutral-200 text-sm'}>Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!</p>
+                            <p className={'text-neutral-200 text-sm'}>
+                                Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
+                            </p>
+                            <p><Link to={'/'}>Back</Link></p>
                         </div>
                     </div>
                     <div className={'ml-4 flex-1'}>

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -66,7 +66,7 @@ export default () => {
                 </div>
                 <div className={'mt-6 text-center'}>
                     <Link
-                        to={'/login'}
+                        to={'/auth/login'}
                         className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
                     >
                         Return to Login

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -15,7 +15,7 @@ export default ({ history, location: { state } }: RouteComponentProps<{}, Static
     const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
 
     if (!state || !state.token) {
-        history.replace('/login');
+        history.replace('/auth/login');
 
         return null;
     }
@@ -79,7 +79,7 @@ export default ({ history, location: { state } }: RouteComponentProps<{}, Static
                 </div>
                 <div className={'mt-6 text-center'}>
                     <Link
-                        to={'/login'}
+                        to={'/auth/login'}
                         className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
                     >
                         Return to Login

resources/scripts/components/auth/LoginContainer.tsx

@@ -28,7 +28,7 @@ export default ({ history }: RouteComponentProps) => {
                     return;
                 }
 
-                history.replace('/login/checkpoint', { token: response.confirmationToken });
+                history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
             })
             .catch(error => {
                 console.error(error);
@@ -82,7 +82,7 @@ export default ({ history }: RouteComponentProps) => {
                 </div>
                 <div className={'mt-6 text-center'}>
                     <Link
-                        to={'/password'}
+                        to={'/auth/password'}
                         className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
                     >
                         Forgot password?

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -41,7 +41,7 @@ export default (props: Props) => {
         })
             .then(() => {
                 addFlash({ type: 'success', message: 'Your password has been reset, please login to continue.' });
-                props.history.push('/login');
+                props.history.push('/auth/login');
             })
             .catch(error => {
                 console.error(error);
@@ -97,7 +97,7 @@ export default (props: Props) => {
                 </div>
                 <div className={'mt-6 text-center'}>
                     <Link
-                        to={'/login'}
+                        to={'/auth/login'}
                         className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
                     >
                         Return to Login

resources/scripts/routers/AccountRouter.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, RouteComponentProps } from 'react-router-dom';
 import DesignElements from '@/components/account/DesignElements';
-import TransitionRouter from '@/TransitionRouter';
 
-export default () => (
+export default ({ match }: RouteComponentProps) => (
-    <TransitionRouter basename={'/account'}>
+    <div>
-        <Route path={'/'} component={DesignElements} exact/>
+        <Route path={`${match.path}/`} component={DesignElements} exact/>
-        <Route path={'/design'} component={DesignElements} exact/>
+        <Route path={`${match.path}/design`} component={DesignElements} exact/>
-    </TransitionRouter>
+    </div>
 );

resources/scripts/routers/AuthenticationRouter.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, RouteComponentProps } from 'react-router-dom';
 import LoginContainer from '@/components/auth/LoginContainer';
 import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
 import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
-import TransitionRouter from '@/TransitionRouter';
 import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
 
-export default () => (
+export default ({ match }: RouteComponentProps) => (
-    <TransitionRouter basename={'/auth'}>
     <div className={'mt-32'}>
-            <Route path={'/login'} component={LoginContainer} exact/>
+        <Route path={`${match.path}/login`} component={LoginContainer} exact/>
-            <Route path={'/login/checkpoint'} component={LoginCheckpointContainer}/>
+        <Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
-            <Route path={'/password'} component={ForgotPasswordContainer} exact/>
+        <Route path={`${match.path}/password`} component={ForgotPasswordContainer} exact/>
-            <Route path={'/password/reset/:token'} component={ResetPasswordContainer}/>
+        <Route path={`${match.path}/password/reset/:token`} component={ResetPasswordContainer}/>
-            <Route path={'/checkpoint'}/>
+        <Route path={`${match.path}/checkpoint`}/>
     </div>
-    </TransitionRouter>
 );