Fix authentication page on mobile devices

resources/scripts/TransitionRouter.tsx

@@ -1,19 +1,32 @@
 import React from 'react';
 import { Route } from 'react-router';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import styled from 'styled-components';
+import { breakpoint } from 'styled-components-breakpoint';
 
 type Props = Readonly<{
     children: React.ReactNode;
 }>;
 
+const ContentContainer = styled.div`
+    max-width: 1200px;
+    ${tw`mx-4`};
+
+    ${breakpoint('xl')`
+        ${tw`mx-auto`};
+    `};
+`;
+
 export default ({ children }: Props) => (
     <Route
         render={({ location }) => (
             <TransitionGroup className={'route-transition-group'}>
                 <CSSTransition key={location.key} timeout={250} in={true} appear={true} classNames={'fade'}>
                     <section>
+                        <ContentContainer>
                             {children}
-                        <div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
+                        </ContentContainer>
+                        <ContentContainer className={'mb-4'}>
                             <p className={'text-right text-neutral-500 text-xs'}>
                                 &copy; 2015 - 2019&nbsp;
                                 <a
@@ -25,7 +38,7 @@ export default ({ children }: Props) => (
                                     Pterodactyl Software
                                 </a>
                             </p>
-                        </div>
+                        </ContentContainer>
                     </section>
                 </CSSTransition>
             </TransitionGroup>

resources/scripts/components/auth/LoginContainer.tsx

@@ -32,8 +32,6 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
         handleSubmit(e);
     };
 
-    console.log(values.recaptchaData);
-
     return (
         <React.Fragment>
             {ref.current && ref.current.render()}

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -1,21 +1,40 @@
 import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Form } from 'formik';
+import { breakpoint } from 'styled-components-breakpoint';
 
 type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
 
+const LoginContainer = styled.div`
+    ${tw`bg-white shadow-lg rounded-lg p-6 mx-1`};
+
+    ${breakpoint('sm')`
+        ${tw`w-4/5 mx-auto`}
+    `};
+
+    ${breakpoint('md')`
+        ${tw`flex p-10`}
+    `};
+
+    ${breakpoint('lg')`
+        ${tw`w-3/5`}
+    `};
+
+    ${breakpoint('xl')`
+        ${tw`w-full`}
+        max-width: 660px;
+    `};
+`;
+
 export default forwardRef<any, Props>(({ className, ...props }, ref) => (
-    <form
-        ref={ref}
-        className={'flex items-center justify-center login-box'}
-        {...props}
-        style={{
-            paddingLeft: 0,
-        }}
-    >
-        <div className={'flex-none select-none'}>
-            <img src={'/assets/pterodactyl.svg'} className={'w-64'}/>
+    <Form {...props}>
+        <LoginContainer>
+            <div className={'flex-none select-none mb-6 md:mb-0 self-center'}>
+                <img src={'/assets/pterodactyl.svg'} className={'block w-48 md:w-64 mx-auto'}/>
             </div>
             <div className={'flex-1'}>
                 {props.children}
             </div>
-    </form>
+        </LoginContainer>
+    </Form>
 ));

resources/scripts/routers/AuthenticationRouter.tsx

@@ -6,7 +6,7 @@ import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
 import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
 
 export default ({ match }: RouteComponentProps) => (
-    <div className={'mt-32'}>
+    <div className={'mt-8 xl:mt-32'}>
         <Route path={`${match.path}/login`} component={LoginContainer} exact/>
         <Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
         <Route path={`${match.path}/password`} component={ForgotPasswordContainer} exact/>

resources/scripts/routers/DashboardRouter.tsx

@@ -10,13 +10,11 @@ export default ({ location }: RouteComponentProps) => (
     <React.Fragment>
         <NavigationBar/>
         <TransitionRouter>
-            <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
             <Switch location={location}>
                 <Route path={'/'} component={DashboardContainer} exact/>
                 <Route path={'/account'} component={AccountOverviewContainer}/>
                 <Route path={'/design'} component={DesignElementsContainer}/>
             </Switch>
-            </div>
         </TransitionRouter>
     </React.Fragment>
 );

resources/scripts/routers/ServerRouter.tsx

@@ -1,4 +1,4 @@
-import React, { lazy, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import NavigationBar from '@/components/NavigationBar';
 import ServerConsole from '@/components/server/ServerConsole';
@@ -12,8 +12,6 @@ import FileManagerContainer from '@/components/server/files/FileManagerContainer
 import { CSSTransition } from 'react-transition-group';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import FileEditContainer from '@/components/server/files/FileEditContainer';
-import UsersContainer from '@/components/server/users/UsersContainer';
-import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
 import SettingsContainer from '@/components/server/settings/SettingsContainer';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
@@ -32,7 +30,6 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
             <NavigationBar/>
             <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
                 <div id={'sub-navigation'}>
-                    <div className={'mx-auto'} style={{ maxWidth: '1200px' }}>
                     <div className={'items'}>
                         <NavLink to={`${match.url}`} exact>Console</NavLink>
                         <NavLink to={`${match.url}/files`}>File Manager</NavLink>
@@ -42,12 +39,10 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                         <NavLink to={`${match.url}/settings`}>Settings</NavLink>
                     </div>
                 </div>
-                </div>
             </CSSTransition>
             <Provider store={ServerContext.useStore()}>
                 <WebsocketHandler/>
                 <TransitionRouter>
-                    <div className={'w-full mx-auto px-3'} style={{ maxWidth: '1200px' }}>
                     {!server ?
                         <div className={'flex justify-center m-20'}>
                             <Spinner size={'large'}/>
@@ -73,7 +68,6 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                             </Switch>
                         </React.Fragment>
                     }
-                    </div>
                 </TransitionRouter>
             </Provider>
         </React.Fragment>

resources/styles/components/authentication.css

@@ -1,9 +0,0 @@
-.login-box {
-  @apply .bg-white .shadow-lg .rounded-lg .p-6;
-
-  @screen xsx {
-    @apply .rounded-none;
-    margin-top: 25%;
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .2), 0 -15px 30px 0 rgba(0, 0, 0, .2);
-  }
-}

resources/styles/components/forms.css

@@ -1,3 +1,7 @@
+form {
+    @apply .m-0;
+}
+
 textarea, select, input, button {
     @apply .outline-none;
 }

resources/styles/main.css

@@ -11,7 +11,6 @@
  */
 @import "components/typography.css";
 @import "components/animations.css";
-@import "components/authentication.css";
 @import "components/forms.css";
 @import "components/miscellaneous.css";
 @import "components/modal.css";

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

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