Migrate the existing login form to use React
This commit is contained in:
Dane Everitt
parent
0ab3768274
commit
d9f30294de
15 changed files with 322 additions and 72 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
@apply .opacity-100;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
|
||||
.fade-leave-active {
|
||||
animation: fadein 500ms reverse;
|
||||
.fade-exit {
|
||||
@apply .opacity-100;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.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;
|
||||
.fade-exit-active {
|
||||
@apply .opacity-0;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
/*! purgecss end ignore */
|
||||
|
|
|
|||
25
resources/scripts/api/auth/login.ts
Normal file
25
resources/scripts/api/auth/login.ts
Normal 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);
|
||||
});
|
||||
};
|
||||
42
resources/scripts/api/http.ts
Normal file
42
resources/scripts/api/http.ts
Normal 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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
14
resources/scripts/components/MessageBox.tsx
Normal file
14
resources/scripts/components/MessageBox.tsx
Normal 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>
|
||||
);
|
||||
111
resources/scripts/components/auth/LoginContainer.tsx
Normal file
111
resources/scripts/components/auth/LoginContainer.tsx
Normal 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'}> </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>
|
||||
);
|
||||
}
|
||||
}
|
||||
30
resources/scripts/components/forms/OpenInputField.tsx
Normal file
30
resources/scripts/components/forms/OpenInputField.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
26
resources/scripts/routers/AuthenticationRouter.tsx
Normal file
26
resources/scripts/routers/AuthenticationRouter.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@extends('templates/wrapper')
|
||||
|
||||
@section('container')
|
||||
<router-view></router-view>
|
||||
<div id="app"></div>
|
||||
@endsection
|
||||
|
||||
@section('below-container')
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
</div>
|
||||
@yield('container')
|
||||
@yield('below-container')
|
||||
@show
|
||||
@section('scripts')
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
->where('vue', '^(?!(\/)?(api|admin|daemon)).+');
|
||||
Route::get('/{react}', 'IndexController@index')
|
||||
->where('react', '^(?!(\/)?(api|auth|admin|daemon)).+');
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
"moduleResolution": "node",
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"lib": ["es2015", "dom"],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./resources/scripts/*"
|
||||
|
|
|
|||
45
yarn.lock
45
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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue