Migrate the existing login form to use React

Author: DaneEveritt

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 {
-  &.fadein {
-    animation: fadein 500ms;
-  }
-}
-
-.animated-fade-in {
-  animation: fadein 500ms;
+/*! purgecss start ignore */
+.fade-enter {
+  @apply .opacity-0;
 }
 
 .fade-enter-active {
-  animation: fadein 500ms;
-}
-
-.fade-leave-active {
-  animation: fadein 500ms reverse;
-}
-
-@keyframes fadein {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-@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;
+  @apply .opacity-100;
+  transition: opacity 150ms;
 }
 
-.slide-fade-leave-active {
-  transition: all 250ms cubic-bezier(1.0, 0.5, 0.8, 1.0);
+.fade-exit {
+  @apply .opacity-100;
 }
 
-.slide-fade-enter, .slide-fade-leave-to {
-  transform: translateX(10px);
-  opacity: 0;
+.fade-exit-active {
+  @apply .opacity-0;
+  transition: opacity 150ms;
 }
+/*! 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">
-            <img src="/assets/img/pterodactyl-flat.svg" class="max-w-xxs">
-        </div>
-        <router-view></router-view>
+        <div id="app"></div>
         <p class="text-center text-neutral-500 text-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}
         </p>