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
|
|
@ -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')
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue