Migrate the existing login form to use React

package.json

@@ -4,6 +4,7 @@
         "@hot-loader/react-dom": "^16.8.6",
         "axios": "^0.18.0",
         "brace": "^0.11.1",
+        "classnames": "^2.2.6",
         "date-fns": "^1.29.0",
         "feather-icons": "^4.10.0",
         "jquery": "^3.3.1",
@@ -12,6 +13,7 @@
         "react-dom": "^16.8.6",
         "react-hot-loader": "^4.9.0",
         "react-router-dom": "^5.0.1",
+        "react-transition-group": "^4.1.0",
         "redux": "^4.0.1",
         "socket.io-client": "^2.2.0",
         "ws-wrapper": "^2.0.0",
@@ -22,10 +24,13 @@
         "@babel/plugin-syntax-dynamic-import": "^7.2.0",
         "@babel/preset-env": "^7.3.1",
         "@babel/preset-react": "^7.0.0",
+        "@types/classnames": "^2.2.8",
         "@types/feather-icons": "^4.7.0",
         "@types/lodash": "^4.14.119",
         "@types/react": "^16.8.19",
         "@types/react-dom": "^16.8.4",
+        "@types/react-router-dom": "^4.3.3",
+        "@types/react-transition-group": "^2.9.2",
         "@types/webpack-env": "^1.13.6",
         "@typescript-eslint/eslint-plugin": "^1.10.1",
         "@typescript-eslint/parser": "^1.10.1",

resources/assets/styles/components/animations.css

@@ -1,68 +1,19 @@
-.animate {
+/*! purgecss start ignore */
-  &.fadein {
+.fade-enter {
-    animation: fadein 500ms;
+  @apply .opacity-0;
-  }
-}
-
-.animated-fade-in {
-  animation: fadein 500ms;
 }
 
 .fade-enter-active {
-  animation: fadein 500ms;
+  @apply .opacity-100;
+  transition: opacity 150ms;
 }
 
-.fade-leave-active {
+.fade-exit {
-  animation: fadein 500ms reverse;
+  @apply .opacity-100;
 }
 
-@keyframes fadein {
+.fade-exit-active {
-  from { opacity: 0; }
+  @apply .opacity-0;
-  to   { opacity: 1; }
+  transition: opacity 150ms;
-}
-
-@keyframes onlineblink {
-  0% {
-    @apply .bg-green-500;
-  }
-  100% {
-    @apply .bg-green-600;
-  }
-}
-
-@keyframes offlineblink {
-  0% {
-    @apply .bg-red-500;
-  }
-  100% {
-    @apply .bg-red-600;
-  }
-}
-
-/*
- * transition="modal"
- */
-.modal-enter, .modal-leave-active {
-  opacity: 0;
-}
-
-.modal-enter .modal-container,
-.modal-leave-active .modal-container {
-  animation: opacity 250ms linear;
-}
-
-/**
- * name="slide-fade" mode="out-in"
- */
-.slide-fade-enter-active {
-  transition: all 250ms ease;
-}
-
-.slide-fade-leave-active {
-  transition: all 250ms cubic-bezier(1.0, 0.5, 0.8, 1.0);
-}
-
-.slide-fade-enter, .slide-fade-leave-to {
-  transform: translateX(10px);
-  opacity: 0;
 }
+/*! purgecss end ignore */

resources/scripts/api/auth/login.ts

@@ -0,0 +1,25 @@
+import http from '@/api/http';
+
+interface LoginResponse {
+    complete: boolean;
+    intended?: string;
+    token?: string;
+}
+
+export default (user: string, password: string): Promise<LoginResponse> => {
+    return new Promise((resolve, reject) => {
+        http.post('/auth/login', { user, password })
+            .then(response => {
+                if (!(response.data instanceof Object)) {
+                    return reject(new Error('An error occurred while processing the login request.'));
+                }
+
+                return resolve({
+                    complete: response.data.complete,
+                    intended: response.data.intended || undefined,
+                    token: response.data.token || undefined,
+                });
+            })
+            .catch(reject);
+    });
+};

resources/scripts/api/http.ts

@@ -0,0 +1,42 @@
+import axios, { AxiosInstance } from 'axios';
+
+// This token is set in the bootstrap.js file at the beginning of the request
+// and is carried through from there.
+// const token: string = '';
+
+const http: AxiosInstance = axios.create({
+    headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+    },
+});
+
+// If we have a phpdebugbar instance registered at this point in time go
+// ahead and route the response data through to it so things show up.
+// @ts-ignore
+if (typeof window.phpdebugbar !== 'undefined') {
+    http.interceptors.response.use(response => {
+        // @ts-ignore
+        window.phpdebugbar.ajaxHandler.handle(response.request);
+
+        return response;
+    });
+}
+
+export default http;
+
+/**
+ * Converts an error into a human readable response. Mostly just a generic helper to
+ * make sure we display the message from the server back to the user if we can.
+ */
+export function httpErrorToHuman (error: any): string {
+    if (error.response && error.response.data) {
+        const { data } = error.response;
+        if (data.errors && data.errors[0] && data.errors[0].detail) {
+            return data.errors[0].detail;
+        }
+    }
+
+    return error.message;
+}

resources/scripts/components/App.tsx

@@ -1,10 +1,17 @@
 import * as React from 'react';
 import { hot } from 'react-hot-loader/root';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import AuthenticationRouter from '@/routers/AuthenticationRouter';
 
 class App extends React.PureComponent {
     render () {
         return (
-            <h1>Hello</h1>
+            <Router>
+                <div>
+                    <Route exact path="/"/>
+                    <Route path="/auth" component={AuthenticationRouter}/>
+                </div>
+            </Router>
         );
     }
 }

resources/scripts/components/MessageBox.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface Props {
+    title?: string;
+    message: string;
+    type?: 'success' | 'info' | 'warning' | 'error';
+}
+
+export default ({ title, message, type }: Props) => (
+    <div className={`lg:inline-flex alert ${type}`} role={'alert'}>
+        {title && <span className={'title'}>{title}</span>}
+        <span className={'message'}>{message}</span>
+    </div>
+);

resources/scripts/components/auth/LoginContainer.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import OpenInputField from '@/components/forms/OpenInputField';
+import { Link } from 'react-router-dom';
+import login from '@/api/auth/login';
+import { httpErrorToHuman } from '@/api/http';
+import MessageBox from '@/components/MessageBox';
+
+type State = Readonly<{
+    errorMessage?: string;
+    isLoading: boolean;
+    username?: string;
+    password?: string;
+}>;
+
+export default class LoginContainer extends React.PureComponent<{}, State> {
+    username = React.createRef<HTMLInputElement>();
+
+    state: State = {
+        isLoading: false,
+    };
+
+    submit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        const { username, password } = this.state;
+
+        this.setState({ isLoading: true }, () => {
+            login(username!, password!)
+                .then(response => {
+
+                })
+                .catch(error => this.setState({
+                    isLoading: false,
+                    errorMessage: httpErrorToHuman(error),
+                }, () => console.error(error)));
+        });
+    };
+
+    canSubmit () {
+        if (!this.state.username || !this.state.password) {
+            return false;
+        }
+
+        return this.state.username.length > 0 && this.state.password.length > 0;
+    }
+
+    // @ts-ignore
+    handleFieldUpdate = (e: React.ChangeEvent<HTMLInputElement>) => this.setState({
+        [e.target.id]: e.target.value,
+    });
+
+    render () {
+        return (
+            <React.Fragment>
+                {this.state.errorMessage &&
+                <div className={'mb-4'}>
+                    <MessageBox
+                        type={'error'}
+                        title={'Error'}
+                        message={this.state.errorMessage}
+                    />
+                </div>
+                }
+                <form className={'login-box'} onSubmit={this.submit}>
+                    <div className={'-mx-3'}>
+                        <OpenInputField
+                            autoFocus={true}
+                            label={'Username or Email'}
+                            type={'text'}
+                            required={true}
+                            id={'username'}
+                            onChange={this.handleFieldUpdate}
+                            disabled={this.state.isLoading}
+                        />
+                    </div>
+                    <div className={'-mx-3 mt-6'}>
+                        <OpenInputField
+                            label={'Password'}
+                            type={'password'}
+                            required={true}
+                            id={'password'}
+                            onChange={this.handleFieldUpdate}
+                            disabled={this.state.isLoading}
+                        />
+                    </div>
+                    <div className={'mt-6'}>
+                        <button
+                            type={'submit'}
+                            className={'btn btn-primary btn-jumbo'}
+                            disabled={this.state.isLoading || !this.canSubmit()}
+                        >
+                            {this.state.isLoading ?
+                                <span className={'spinner white'}>&nbsp;</span>
+                                :
+                                'Login'
+                            }
+                        </button>
+                    </div>
+                    <div className={'mt-6 text-center'}>
+                        <Link
+                            to={'/auth/forgot-password'}
+                            className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
+                        >
+                            Forgot password?
+                        </Link>
+                    </div>
+                </form>
+            </React.Fragment>
+        );
+    }
+}

resources/scripts/components/forms/OpenInputField.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+type Props = React.InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+};
+
+export default ({ className, onChange, label, ...props }: Props) => {
+    const [ value, setValue ] = React.useState('');
+
+    const classes = classNames('input open-label', {
+        'has-content': value && value.length > 0,
+    });
+
+    return (
+        <div className={'input-open'}>
+            <input
+                className={classes}
+                onChange={e => {
+                    setValue(e.target.value);
+                    if (onChange) {
+                        onChange(e);
+                    }
+                }}
+                {...props}
+            />
+            <label htmlFor={props.id}>{label}</label>
+        </div>
+    );
+};

resources/scripts/routers/AuthenticationRouter.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import LoginContainer from '@/components/auth/LoginContainer';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+
+export default class AuthenticationRouter extends React.PureComponent {
+    render () {
+        return (
+            <BrowserRouter basename={'/auth'}>
+                <Route
+                    render={({ location }) => (
+                        <TransitionGroup>
+                            <CSSTransition key={location.key} timeout={150} classNames={'fade'}>
+                                <Switch location={location}>
+                                    <Route path={'/login'} component={LoginContainer}/>
+                                    <Route path={'/forgot-password'}/>
+                                    <Route path={'/checkpoint'}/>
+                                </Switch>
+                            </CSSTransition>
+                        </TransitionGroup>
+                    )}
+                />
+            </BrowserRouter>
+        );
+    }
+}

resources/themes/pterodactyl/templates/auth/core.blade.php

@@ -4,10 +4,7 @@
 
 @section('container')
     <div class="w-full max-w-xs sm:max-w-sm m-auto mt-8">
-        <div class="text-center hidden sm:block">
+        <div id="app"></div>
-            <img src="/assets/img/pterodactyl-flat.svg" class="max-w-xxs">
-        </div>
-        <router-view></router-view>
         <p class="text-center text-neutral-500 text-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}
         </p>

resources/themes/pterodactyl/templates/base/core.blade.php

@@ -1,7 +1,7 @@
 @extends('templates/wrapper')
 
 @section('container')
-    <router-view></router-view>
+    <div id="app"></div>
 @endsection
 
 @section('below-container')

resources/themes/pterodactyl/templates/wrapper.blade.php

@@ -35,9 +35,7 @@
     <body class="{{ $css['body'] ?? 'bg-neutral-50' }}">
         @section('content')
             @yield('above-container')
-            <div id="app" class="flex flex-col">
+            @yield('container')
-                @yield('container')
-            </div>
             @yield('below-container')
         @show
         @section('scripts')

routes/base.php

@@ -32,5 +32,5 @@ Route::group(['prefix' => 'account/two_factor'], function () {
     Route::post('/totp/disable', 'SecurityController@delete')->name('account.two_factor.disable');
 });
 
-Route::get('/{vue}', 'IndexController@index')
+Route::get('/{react}', 'IndexController@index')
-    ->where('vue', '^(?!(\/)?(api|admin|daemon)).+');
+    ->where('react', '^(?!(\/)?(api|auth|admin|daemon)).+');

tsconfig.json

@@ -8,6 +8,7 @@
     "moduleResolution": "node",
     "sourceMap": true,
     "baseUrl": ".",
+    "lib": ["es2015", "dom"],
     "paths": {
       "@/*": [
         "./resources/scripts/*"

yarn.lock

@@ -735,6 +735,10 @@
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+"@types/classnames@^2.2.8":
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.8.tgz#17139e1e1104203572caa4368f6796f6225b70b4"
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -743,6 +747,10 @@
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/@types/feather-icons/-/feather-icons-4.7.0.tgz#ec66bc046bcd1513835f87541ecef54b50c57ec9"
 
+"@types/history@*":
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
+
 "@types/lodash@^4.14.119":
   version "4.14.119"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39"
@@ -757,6 +765,27 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-router-dom@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.3.tgz#7837e3e9fefbc84a8f6c8a51dca004f4e83e94e3"
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.0.1.tgz#9f4548c75755c55b0cffdd743080e5afa87da6dd"
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
+"@types/react-transition-group@^2.9.2":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d"
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.8.19":
   version "16.8.19"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.19.tgz#629154ef05e2e1985cdde94477deefd823ad9be3"
@@ -1841,7 +1870,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
 
@@ -2551,6 +2580,12 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-helpers@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -6112,6 +6147,14 @@ react-router@5.0.1:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-transition-group@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.1.0.tgz#7b50c0a93a6c127336187252c3c1a70eff3304ce"
+  dependencies:
+    dom-helpers "^3.4.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"