Skip to content

Commit 1f6f7c4

Browse files
DaneEverittDaneEveritt
committed
Fix authentication page on mobile devices
1 parent 513692f commit 1f6f7c4

File tree

10 files changed

+94
-80
lines changed

10 files changed

+94
-80
lines changed

‎resources/scripts/TransitionRouter.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
11
import React from 'react';
22
import { Route } from 'react-router';
33
import { CSSTransition, TransitionGroup } from 'react-transition-group';
4+
import styled from 'styled-components';
5+
import { breakpoint } from 'styled-components-breakpoint';
46

57
type Props = Readonly<{
68
children: React.ReactNode;
79
}>;
810

11+
const ContentContainer = styled.div`
12+
max-width: 1200px;
13+
${tw`mx-4`};
14+
15+
${breakpoint('xl')`
16+
${tw`mx-auto`};
17+
`};
18+
`;
19+
920
export default ({ children }: Props) => (
1021
<Route
1122
render={({ location }) => (
1223
<TransitionGroup className={'route-transition-group'}>
1324
<CSSTransition key={location.key} timeout={250} in={true} appear={true} classNames={'fade'}>
1425
<section>
15-
{children}
16-
<div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
26+
<ContentContainer>
27+
{children}
28+
</ContentContainer>
29+
<ContentContainer className={'mb-4'}>
1730
<p className={'text-right text-neutral-500 text-xs'}>
1831
&copy; 2015 - 2019&nbsp;
1932
<a
@@ -25,7 +38,7 @@ export default ({ children }: Props) => (
2538
Pterodactyl Software
2639
</a>
2740
</p>
28-
</div>
41+
</ContentContainer>
2942
</section>
3043
</CSSTransition>
3144
</TransitionGroup>

‎resources/scripts/components/auth/LoginContainer.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,6 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
3232
handleSubmit(e);
3333
};
3434

35-
console.log(values.recaptchaData);
36-
3735
return (
3836
<React.Fragment>
3937
{ref.current && ref.current.render()}

‎resources/scripts/components/auth/LoginFormContainer.tsx‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,40 @@
11
import React, { forwardRef } from 'react';
2+
import styled from 'styled-components';
3+
import { Form } from 'formik';
4+
import { breakpoint } from 'styled-components-breakpoint';
25

36
type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
47

8+
const LoginContainer = styled.div`
9+
${tw`bg-white shadow-lg rounded-lg p-6 mx-1`};
10+
11+
${breakpoint('sm')`
12+
${tw`w-4/5 mx-auto`}
13+
`};
14+
15+
${breakpoint('md')`
16+
${tw`flex p-10`}
17+
`};
18+
19+
${breakpoint('lg')`
20+
${tw`w-3/5`}
21+
`};
22+
23+
${breakpoint('xl')`
24+
${tw`w-full`}
25+
max-width: 660px;
26+
`};
27+
`;
28+
529
export default forwardRef<any, Props>(({ className, ...props }, ref) => (
6-
<form
7-
ref={ref}
8-
className={'flex items-center justify-center login-box'}
9-
{...props}
10-
style={{
11-
paddingLeft: 0,
12-
}}
13-
>
14-
<div className={'flex-none select-none'}>
15-
<img src={'/assets/pterodactyl.svg'} className={'w-64'}/>
16-
</div>
17-
<div className={'flex-1'}>
18-
{props.children}
19-
</div>
20-
</form>
30+
<Form {...props}>
31+
<LoginContainer>
32+
<div className={'flex-none select-none mb-6 md:mb-0 self-center'}>
33+
<img src={'/assets/pterodactyl.svg'} className={'block w-48 md:w-64 mx-auto'}/>
34+
</div>
35+
<div className={'flex-1'}>
36+
{props.children}
37+
</div>
38+
</LoginContainer>
39+
</Form>
2140
));

‎resources/scripts/routers/AuthenticationRouter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
66
import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
77

88
export default ({ match }: RouteComponentProps) => (
9-
<div className={'mt-32'}>
9+
<div className={'mt-8 xl:mt-32'}>
1010
<Route path={`${match.path}/login`} component={LoginContainer} exact/>
1111
<Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
1212
<Route path={`${match.path}/password`} component={ForgotPasswordContainer} exact/>

‎resources/scripts/routers/DashboardRouter.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,11 @@ export default ({ location }: RouteComponentProps) => (
1010
<React.Fragment>
1111
<NavigationBar/>
1212
<TransitionRouter>
13-
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
14-
<Switch location={location}>
15-
<Route path={'/'} component={DashboardContainer} exact/>
16-
<Route path={'/account'} component={AccountOverviewContainer}/>
17-
<Route path={'/design'} component={DesignElementsContainer}/>
18-
</Switch>
19-
</div>
13+
<Switch location={location}>
14+
<Route path={'/'} component={DashboardContainer} exact/>
15+
<Route path={'/account'} component={AccountOverviewContainer}/>
16+
<Route path={'/design'} component={DesignElementsContainer}/>
17+
</Switch>
2018
</TransitionRouter>
2119
</React.Fragment>
2220
);

‎resources/scripts/routers/ServerRouter.tsx‎

Lines changed: 33 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { lazy, useEffect } from 'react';
1+
import React, { useEffect } from 'react';
22
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
33
import NavigationBar from '@/components/NavigationBar';
44
import ServerConsole from '@/components/server/ServerConsole';
@@ -12,8 +12,6 @@ import FileManagerContainer from '@/components/server/files/FileManagerContainer
1212
import { CSSTransition } from 'react-transition-group';
1313
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
1414
import FileEditContainer from '@/components/server/files/FileEditContainer';
15-
import UsersContainer from '@/components/server/users/UsersContainer';
16-
import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
1715
import SettingsContainer from '@/components/server/settings/SettingsContainer';
1816

1917
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
@@ -32,48 +30,44 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
3230
<NavigationBar/>
3331
<CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
3432
<div id={'sub-navigation'}>
35-
<div className={'mx-auto'} style={{ maxWidth: '1200px' }}>
36-
<div className={'items'}>
37-
<NavLink to={`${match.url}`} exact>Console</NavLink>
38-
<NavLink to={`${match.url}/files`}>File Manager</NavLink>
39-
<NavLink to={`${match.url}/databases`}>Databases</NavLink>
40-
{/* <NavLink to={`${match.url}/users`}>User Management</NavLink> */}
41-
{/* <NavLink to={`${match.url}/schedules`}>Schedules</NavLink> */}
42-
<NavLink to={`${match.url}/settings`}>Settings</NavLink>
43-
</div>
33+
<div className={'items'}>
34+
<NavLink to={`${match.url}`} exact>Console</NavLink>
35+
<NavLink to={`${match.url}/files`}>File Manager</NavLink>
36+
<NavLink to={`${match.url}/databases`}>Databases</NavLink>
37+
{/* <NavLink to={`${match.url}/users`}>User Management</NavLink> */}
38+
{/* <NavLink to={`${match.url}/schedules`}>Schedules</NavLink> */}
39+
<NavLink to={`${match.url}/settings`}>Settings</NavLink>
4440
</div>
4541
</div>
4642
</CSSTransition>
4743
<Provider store={ServerContext.useStore()}>
4844
<WebsocketHandler/>
4945
<TransitionRouter>
50-
<div className={'w-full mx-auto px-3'} style={{ maxWidth: '1200px' }}>
51-
{!server ?
52-
<div className={'flex justify-center m-20'}>
53-
<Spinner size={'large'}/>
54-
</div>
55-
:
56-
<React.Fragment>
57-
<Switch location={location}>
58-
<Route path={`${match.path}`} component={ServerConsole} exact/>
59-
<Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
60-
<Route
61-
path={`${match.path}/files/:action(edit|new)`}
62-
render={props => (
63-
<SuspenseSpinner>
64-
<FileEditContainer {...props as any}/>
65-
</SuspenseSpinner>
66-
)}
67-
exact
68-
/>
69-
<Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
70-
{/* <Route path={`${match.path}/users`} component={UsersContainer} exact/> */}
71-
{/* <Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/> */}
72-
<Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
73-
</Switch>
74-
</React.Fragment>
75-
}
76-
</div>
46+
{!server ?
47+
<div className={'flex justify-center m-20'}>
48+
<Spinner size={'large'}/>
49+
</div>
50+
:
51+
<React.Fragment>
52+
<Switch location={location}>
53+
<Route path={`${match.path}`} component={ServerConsole} exact/>
54+
<Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
55+
<Route
56+
path={`${match.path}/files/:action(edit|new)`}
57+
render={props => (
58+
<SuspenseSpinner>
59+
<FileEditContainer {...props as any}/>
60+
</SuspenseSpinner>
61+
)}
62+
exact
63+
/>
64+
<Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
65+
{/* <Route path={`${match.path}/users`} component={UsersContainer} exact/> */}
66+
{/* <Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/> */}
67+
<Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
68+
</Switch>
69+
</React.Fragment>
70+
}
7771
</TransitionRouter>
7872
</Provider>
7973
</React.Fragment>

‎resources/styles/components/authentication.css‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎resources/styles/components/forms.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
form {
2+
@apply .m-0;
3+
}
4+
15
textarea, select, input, button {
26
@apply .outline-none;
37
}

‎resources/styles/main.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
*/
1212
@import "components/typography.css";
1313
@import "components/animations.css";
14-
@import "components/authentication.css";
1514
@import "components/forms.css";
1615
@import "components/miscellaneous.css";
1716
@import "components/modal.css";

‎resources/views/templates/auth/core.blade.php‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,5 @@
33
])
44

55
@section('container')
6-
<div class="w-full max-w-xs sm:max-w-md m-auto mt-8">
7-
<div id="app"></div>
8-
</div>
6+
<div id="app"></div>
97
@endsection

0 commit comments

Comments
 (0)