Migrate the existing login form to use React

This commit is contained in:
Dane Everitt 2019-06-09 19:26:20 -07:00
parent 0ab3768274
commit d9f30294de
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
15 changed files with 322 additions and 72 deletions

View file

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

View file

@ -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 { .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 */

View file

@ -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);
});
};

View file

@ -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;
}

View file

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

View file

@ -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>
);

View file

@ -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>
);
}
}

View file

@ -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>
);
};

View file

@ -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>
);
}
}

View file

@ -4,10 +4,7 @@
@section('container') @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-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"> <p class="text-center text-neutral-500 text-xs">
{!! trans('strings.copyright', ['year' => date('Y')]) !!} {!! trans('strings.copyright', ['year' => date('Y')]) !!}
</p> </p>

View file

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

View file

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

View file

@ -32,5 +32,5 @@ Route::group(['prefix' => 'account/two_factor'], function () {
Route::post('/totp/disable', 'SecurityController@delete')->name('account.two_factor.disable'); 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)).+');

View file

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

View file

@ -735,6 +735,10 @@
prop-types "^15.6.2" prop-types "^15.6.2"
scheduler "^0.13.6" 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": "@types/eslint-visitor-keys@^1.0.0":
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d" 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" version "4.7.0"
resolved "https://registry.yarnpkg.com/@types/feather-icons/-/feather-icons-4.7.0.tgz#ec66bc046bcd1513835f87541ecef54b50c57ec9" 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": "@types/lodash@^4.14.119":
version "4.14.119" version "4.14.119"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39"
@ -757,6 +765,27 @@
dependencies: dependencies:
"@types/react" "*" "@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": "@types/react@*", "@types/react@^16.8.19":
version "16.8.19" version "16.8.19"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.19.tgz#629154ef05e2e1985cdde94477deefd823ad9be3" 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" isobject "^3.0.0"
static-extend "^0.1.1" static-extend "^0.1.1"
classnames@^2.2.5: classnames@^2.2.5, classnames@^2.2.6:
version "2.2.6" version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
@ -2551,6 +2580,12 @@ dom-converter@~0.1:
dependencies: dependencies:
utila "~0.3" 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: dom-serializer@0:
version "0.1.0" version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82" 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-invariant "^1.0.2"
tiny-warning "^1.0.0" 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: react@^16.8.6:
version "16.8.6" version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe" resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"