New login page design

Author: DaneEveritt

.gitignore

@@ -12,7 +12,7 @@ node_modules
 _ide_helper.php
 .phpstorm.meta.php
 .php_cs.cache
-public/assets/*
+public/assets/manifest.json
 
 # For local development with docker
 # Remove if we ever put the Dockerfile in the repo

public/assets/pterodactyl.svg

@@ -4,6 +4,7 @@ import requestPasswordResetEmail from '@/api/auth/requestPasswordResetEmail';
 import { connect } from 'react-redux';
 import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash';
 import { httpErrorToHuman } from '@/api/http';
+import LoginFormContainer from '@/components/auth/LoginFormContainer';
 
 type Props = Readonly<{
     pushFlashMessage: typeof pushFlashMessage;
@@ -60,7 +61,7 @@ class ForgotPasswordContainer extends React.PureComponent<Props, State> {
                 <h2 className={'text-center text-neutral-100 font-medium py-4'}>
                     Request Password Reset
                 </h2>
-                <form className={'login-box'} onSubmit={this.handleSubmission}>
+                <LoginFormContainer onSubmit={this.handleSubmission}>
                     <label htmlFor={'email'}>Email</label>
                     <input
                         ref={this.emailField}
@@ -94,7 +95,7 @@ class ForgotPasswordContainer extends React.PureComponent<Props, State> {
                             Return to Login
                         </Link>
                     </div>
-                </form>
+                </LoginFormContainer>
             </div>
         );
     }

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -7,6 +7,7 @@ import MessageBox from '@/components/MessageBox';
 import { Link } from 'react-router-dom';
 import loginCheckpoint from '@/api/auth/loginCheckpoint';
 import { httpErrorToHuman } from '@/api/http';
+import LoginFormContainer from '@/components/auth/LoginFormContainer';
 
 type State = Readonly<{
     isLoading: boolean;
@@ -61,7 +62,7 @@ class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps<{
                     Device Checkpoint
                 </h2>
                 <NetworkErrorMessage message={this.state.errorMessage}/>
-                <form className={'login-box'} onSubmit={this.submit}>
+                <LoginFormContainer onSubmit={this.submit}>
                     <MessageBox type={'warning'}>
                         This account is protected with two-factor authentication. A valid authentication token must
                         be provided in order to continue.
@@ -97,7 +98,7 @@ class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps<{
                             Return to Login
                         </Link>
                     </div>
-                </form>
+                </LoginFormContainer>
             </React.Fragment>
         );
     }

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -3,6 +3,7 @@ import { Link, RouteComponentProps } from 'react-router-dom';
 import login from '@/api/auth/login';
 import { httpErrorToHuman } from '@/api/http';
 import NetworkErrorMessage from '@/components/NetworkErrorMessage';
+import LoginFormContainer from '@/components/auth/LoginFormContainer';
 
 type State = Readonly<{
     errorMessage?: string;
@@ -61,7 +62,7 @@ export default class LoginContainer extends React.PureComponent<RouteComponentPr
                     Login to Continue
                 </h2>
                 <NetworkErrorMessage message={this.state.errorMessage}/>
-                <form className={'login-box'} onSubmit={this.submit}>
+                <LoginFormContainer onSubmit={this.submit}>
                     <label htmlFor={'username'}>Username or Email</label>
                     <input
                         id={'username'}
@@ -103,7 +104,7 @@ export default class LoginContainer extends React.PureComponent<RouteComponentPr
                             Forgot password?
                         </Link>
                     </div>
-                </form>
+                </LoginFormContainer>
             </React.Fragment>
         );
     }

resources/scripts/components/auth/LoginContainer.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export default ({ className, ...props }: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>) => (
+    <form
+        className={'flex items-center justify-center login-box'}
+        {...props}
+        style={{
+            paddingLeft: 0,
+        }}
+    >
+        <div className={'flex-none'}>
+            <img src={'/assets/pterodactyl.svg'} className={'w-64'}/>
+        </div>
+        <div className={'flex-1'}>
+            {props.children}
+        </div>
+    </form>
+);

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -7,6 +7,7 @@ import performPasswordReset from '@/api/auth/performPasswordReset';
 import { httpErrorToHuman } from '@/api/http';
 import { connect } from 'react-redux';
 import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash';
+import LoginFormContainer from '@/components/auth/LoginFormContainer';
 
 type State = Readonly<{
     email?: string;
@@ -91,7 +92,7 @@ class ResetPasswordContainer extends React.PureComponent<Props, State> {
                     Reset Password
                 </h2>
                 <NetworkErrorMessage message={this.state.errorMessage}/>
-                <form className={'login-box'} onSubmit={this.onSubmit}>
+                <LoginFormContainer onSubmit={this.onSubmit}>
                     <label>Email</label>
                     <input value={this.state.email || ''} disabled={true}/>
                     <div className={'mt-6'}>
@@ -136,7 +137,7 @@ class ResetPasswordContainer extends React.PureComponent<Props, State> {
                             Return to Login
                         </Link>
                     </div>
-                </form>
+                </LoginFormContainer>
             </div>
         );
     }

resources/scripts/components/auth/ResetPasswordContainer.tsx

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