sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Dane Everitt 2019-06-22 18:09:42 -07:00
parent f34593e777
commit 60f32f055e
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
9 changed files with 42 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
resources/scripts/components/App.tsx
View File

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

8
resources/scripts/components/ServerOverviewContainer.tsx
View File

@ -1,7 +1,13 @@
import * as React from 'react'; import * as React from 'react';
import { NavLink } from 'react-router-dom';
export default class ServerOverviewContainer extends React.PureComponent { export default class ServerOverviewContainer extends React.PureComponent {
render () { 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>
);
} }
} }

6
resources/scripts/components/account/DesignElements.tsx
View File

@ -1,4 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Link } from 'react-router-dom';
export default class DesignElements extends React.PureComponent { export default class DesignElements extends React.PureComponent {
render () { render () {
@ -8,7 +9,10 @@ export default class DesignElements extends React.PureComponent {
<div className={'flex-1 mr-4'}> <div className={'flex-1 mr-4'}>
<h2 className={'text-neutral-300 mb-2 px-4'}>A Special Announcement</h2> <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'}> <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> </div>
<div className={'ml-4 flex-1'}> <div className={'ml-4 flex-1'}>

2
resources/scripts/components/auth/ForgotPasswordContainer.tsx
View File

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

4
resources/scripts/components/auth/LoginCheckpointContainer.tsx
View File

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

4
resources/scripts/components/auth/LoginContainer.tsx
View File

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

4
resources/scripts/components/auth/ResetPasswordContainer.tsx
View File

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

13
resources/scripts/routers/AccountRouter.tsx
View File

@ -1,11 +1,10 @@
import * as React from 'react'; 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 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>
); );

21
resources/scripts/routers/AuthenticationRouter.tsx
View File

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