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>
-                        {children}
-                        <div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
+                        <ContentContainer>
+                            {children}
+                        </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'}/>
-        </div>
-        <div className={'flex-1'}>
-            {props.children}
-        </div>
-    </form>
+    <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>
+        </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>
+            <Switch location={location}>
+                <Route path={'/'} component={DashboardContainer} exact/>
+                <Route path={'/account'} component={AccountOverviewContainer}/>
+                <Route path={'/design'} component={DesignElementsContainer}/>
+            </Switch>
         </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,48 +30,44 @@ 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>
-                            <NavLink to={`${match.url}/databases`}>Databases</NavLink>
-                            {/* <NavLink to={`${match.url}/users`}>User Management</NavLink> */}
-                            {/* <NavLink to={`${match.url}/schedules`}>Schedules</NavLink> */}
-                            <NavLink to={`${match.url}/settings`}>Settings</NavLink>
-                        </div>
+                    <div className={'items'}>
+                        <NavLink to={`${match.url}`} exact>Console</NavLink>
+                        <NavLink to={`${match.url}/files`}>File Manager</NavLink>
+                        <NavLink to={`${match.url}/databases`}>Databases</NavLink>
+                        {/* <NavLink to={`${match.url}/users`}>User Management</NavLink> */}
+                        {/* <NavLink to={`${match.url}/schedules`}>Schedules</NavLink> */}
+                        <NavLink to={`${match.url}/settings`}>Settings</NavLink>
                     </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'}/>
-                            </div>
-                            :
-                            <React.Fragment>
-                                <Switch location={location}>
-                                    <Route path={`${match.path}`} component={ServerConsole} exact/>
-                                    <Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
-                                    <Route
-                                        path={`${match.path}/files/:action(edit|new)`}
-                                        render={props => (
-                                            <SuspenseSpinner>
-                                                <FileEditContainer {...props as any}/>
-                                            </SuspenseSpinner>
-                                        )}
-                                        exact
-                                    />
-                                    <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
-                                    {/* <Route path={`${match.path}/users`} component={UsersContainer} exact/> */}
-                                    {/* <Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/> */}
-                                    <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
-                                </Switch>
-                            </React.Fragment>
-                        }
-                    </div>
+                    {!server ?
+                        <div className={'flex justify-center m-20'}>
+                            <Spinner size={'large'}/>
+                        </div>
+                        :
+                        <React.Fragment>
+                            <Switch location={location}>
+                                <Route path={`${match.path}`} component={ServerConsole} exact/>
+                                <Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
+                                <Route
+                                    path={`${match.path}/files/:action(edit|new)`}
+                                    render={props => (
+                                        <SuspenseSpinner>
+                                            <FileEditContainer {...props as any}/>
+                                        </SuspenseSpinner>
+                                    )}
+                                    exact
+                                />
+                                <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
+                                {/* <Route path={`${match.path}/users`} component={UsersContainer} exact/> */}
+                                {/* <Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/> */}
+                                <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
+                            </Switch>
+                        </React.Fragment>
+                    }
                 </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>
+    <div id="app"></div>
 @endsection