mirror of
https://github.com/pterodactyl/panel.git
synced 2024-11-26 02:52:30 +01:00
Add support for flash messages utilizing redux
This commit is contained in:
Dane Everitt
parent
b93b40ba31
commit
435626f4b7
@ -2,6 +2,7 @@
|
||||
"name": "pterodactyl-panel",
|
||||
"dependencies": {
|
||||
"@hot-loader/react-dom": "^16.8.6",
|
||||
"@types/react-redux": "^7.0.9",
|
||||
"axios": "^0.18.0",
|
||||
"brace": "^0.11.1",
|
||||
"classnames": "^2.2.6",
|
||||
@ -12,9 +13,11 @@
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-hot-loader": "^4.9.0",
|
||||
"react-redux": "^7.1.0",
|
||||
"react-router-dom": "^5.0.1",
|
||||
"react-transition-group": "^4.1.0",
|
||||
"redux": "^4.0.1",
|
||||
"redux-persist": "^5.10.0",
|
||||
"socket.io-client": "^2.2.0",
|
||||
"ws-wrapper": "^2.0.0",
|
||||
"xterm": "^3.5.1"
|
||||
@ -31,6 +34,7 @@
|
||||
"@types/react-dom": "^16.8.4",
|
||||
"@types/react-router-dom": "^4.3.3",
|
||||
"@types/react-transition-group": "^2.9.2",
|
||||
"@types/redux-persist": "^4.3.1",
|
||||
"@types/webpack-env": "^1.13.6",
|
||||
"@typescript-eslint/eslint-plugin": "^1.10.1",
|
||||
"@typescript-eslint/parser": "^1.10.1",
|
||||
|
||||
@ -56,3 +56,36 @@
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-circle {
|
||||
@apply .w-8 .h-8;
|
||||
border: 3px solid hsla(211, 12%, 43%, 0.2);
|
||||
border-top-color: hsl(211, 12%, 43%);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s cubic-bezier(0.55, 0.25, 0.25, 0.70) infinite;
|
||||
|
||||
&.spinner-sm {
|
||||
@apply .w-4 .h-4 .border-2;
|
||||
}
|
||||
|
||||
&.spinner-lg {
|
||||
@apply .w-16 .h-16;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
&.spinner-blue {
|
||||
border: 3px solid hsla(212, 92%, 43%, 0.2);
|
||||
border-top-color: hsl(212, 92%, 43%);
|
||||
}
|
||||
|
||||
&.spinner-white {
|
||||
border: 3px solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,16 +2,29 @@ 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';
|
||||
import { Provider } from 'react-redux';
|
||||
import { persistor, store } from '@/redux/configure';
|
||||
import { PersistGate } from 'redux-persist/integration/react';
|
||||
|
||||
class App extends React.PureComponent {
|
||||
render () {
|
||||
return (
|
||||
<Router>
|
||||
<div>
|
||||
<Route exact path="/"/>
|
||||
<Route path="/auth" component={AuthenticationRouter}/>
|
||||
</div>
|
||||
</Router>
|
||||
<Provider store={store}>
|
||||
<PersistGate persistor={persistor} loading={this.renderLoading()}>
|
||||
<Router>
|
||||
<div>
|
||||
<Route exact path="/"/>
|
||||
<Route path="/auth" component={AuthenticationRouter}/>
|
||||
</div>
|
||||
</Router>
|
||||
</PersistGate>
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
|
||||
renderLoading () {
|
||||
return (
|
||||
<div className={'spinner spinner-lg'}></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
38
resources/scripts/components/FlashMessageRender.tsx
Normal file
38
resources/scripts/components/FlashMessageRender.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import * as React from 'react';
|
||||
import { FlashMessage, ReduxState } from '@/redux/types';
|
||||
import { connect } from 'react-redux';
|
||||
import MessageBox from '@/components/MessageBox';
|
||||
|
||||
type Props = Readonly<{
|
||||
flashes: FlashMessage[];
|
||||
}>;
|
||||
|
||||
class FlashMessageRender extends React.PureComponent<Props> {
|
||||
render () {
|
||||
if (this.props.flashes.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
{
|
||||
this.props.flashes.map(flash => (
|
||||
<MessageBox
|
||||
key={flash.id || flash.type + flash.message}
|
||||
type={flash.type}
|
||||
title={flash.title}
|
||||
>
|
||||
{flash.message}
|
||||
</MessageBox>
|
||||
))
|
||||
}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: ReduxState) => ({
|
||||
flashes: state.flashes,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(FlashMessageRender);
|
||||
@ -1,14 +1,18 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export type FlashMessageType = 'success' | 'info' | 'warning' | 'error';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
message: string;
|
||||
type?: 'success' | 'info' | 'warning' | 'error';
|
||||
children: string;
|
||||
type?: FlashMessageType;
|
||||
}
|
||||
|
||||
export default ({ title, message, type }: Props) => (
|
||||
export default ({ title, children, type }: Props) => (
|
||||
<div className={`lg:inline-flex alert ${type}`} role={'alert'}>
|
||||
{title && <span className={'title'}>{title}</span>}
|
||||
<span className={'message'}>{message}</span>
|
||||
<span className={'message'}>
|
||||
{children}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,9 +2,14 @@ import * as React from 'react';
|
||||
import OpenInputField from '@/components/forms/OpenInputField';
|
||||
import { Link } from 'react-router-dom';
|
||||
import requestPasswordResetEmail from '@/api/auth/requestPasswordResetEmail';
|
||||
import { connect } from 'react-redux';
|
||||
import { ReduxState } from '@/redux/types';
|
||||
import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
|
||||
type Props = Readonly<{
|
||||
|
||||
pushFlashMessage: typeof pushFlashMessage;
|
||||
clearAllFlashMessages: typeof clearAllFlashMessages;
|
||||
}>;
|
||||
|
||||
type State = Readonly<{
|
||||
@ -12,7 +17,7 @@ type State = Readonly<{
|
||||
isSubmitting: boolean;
|
||||
}>;
|
||||
|
||||
export default class ForgotPasswordContainer extends React.PureComponent<Props, State> {
|
||||
class ForgotPasswordContainer extends React.PureComponent<Props, State> {
|
||||
state: State = {
|
||||
email: '',
|
||||
isSubmitting: false,
|
||||
@ -22,16 +27,27 @@ export default class ForgotPasswordContainer extends React.PureComponent<Props,
|
||||
email: e.target.value,
|
||||
});
|
||||
|
||||
handleSubmission = (e: React.FormEvent<HTMLFormElement>) => this.setState({ isSubmitting: true }, () => {
|
||||
handleSubmission = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
requestPasswordResetEmail(this.state.email)
|
||||
.then(() => {
|
||||
|
||||
})
|
||||
.catch(console.error)
|
||||
.then(() => this.setState({ isSubmitting: false }));
|
||||
});
|
||||
this.setState({ isSubmitting: true }, () => {
|
||||
this.props.clearAllFlashMessages();
|
||||
requestPasswordResetEmail(this.state.email)
|
||||
.then(() => {
|
||||
// @todo actually handle this.
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
this.props.pushFlashMessage({
|
||||
id: 'auth:forgot-password',
|
||||
type: 'error',
|
||||
title: 'Error',
|
||||
message: httpErrorToHuman(error),
|
||||
});
|
||||
})
|
||||
.then(() => this.setState({ isSubmitting: false }));
|
||||
});
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
@ -50,11 +66,11 @@ export default class ForgotPasswordContainer extends React.PureComponent<Props,
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<button
|
||||
className={'btn btn-primary btn-jumbo'}
|
||||
className={'btn btn-primary btn-jumbo flex justify-center'}
|
||||
disabled={this.state.isSubmitting || this.state.email.length < 5}
|
||||
>
|
||||
{this.state.isSubmitting ?
|
||||
<span className={'spinner white'}> </span>
|
||||
<div className={'spinner-circle spinner-sm spinner-white'}></div>
|
||||
:
|
||||
'Send Email'
|
||||
}
|
||||
@ -73,3 +89,14 @@ export default class ForgotPasswordContainer extends React.PureComponent<Props,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: ReduxState) => ({
|
||||
flashes: state.flashes,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
pushFlashMessage,
|
||||
clearAllFlashMessages,
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ForgotPasswordContainer);
|
||||
|
||||
@ -54,11 +54,9 @@ export default class LoginContainer extends React.PureComponent<{}, State> {
|
||||
<React.Fragment>
|
||||
{this.state.errorMessage &&
|
||||
<div className={'mb-4'}>
|
||||
<MessageBox
|
||||
type={'error'}
|
||||
title={'Error'}
|
||||
message={this.state.errorMessage}
|
||||
/>
|
||||
<MessageBox type={'error'} title={'Error'}>
|
||||
{this.state.errorMessage}
|
||||
</MessageBox>
|
||||
</div>
|
||||
}
|
||||
<form className={'login-box'} onSubmit={this.submit}>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import App from "@/components/App";
|
||||
import App from '@/components/App';
|
||||
|
||||
ReactDOM.render(<App/>, document.getElementById('app'));
|
||||
|
||||
17
resources/scripts/redux/actions/flash.ts
Normal file
17
resources/scripts/redux/actions/flash.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { FlashMessage } from '@/redux/types';
|
||||
|
||||
export const PUSH_FLASH_MESSAGE = 'PUSH_FLASH_MESSAGE';
|
||||
export const REMOVE_FLASH_MESSAGE = 'REMOVE_FLASH_MESSAGE';
|
||||
export const CLEAR_ALL_FLASH_MESSAGES = 'CLEAR_ALL_FLASH_MESSAGES';
|
||||
|
||||
export const pushFlashMessage = (payload: FlashMessage) => ({
|
||||
type: PUSH_FLASH_MESSAGE, payload,
|
||||
});
|
||||
|
||||
export const removeFlashMessage = (id: string) => ({
|
||||
type: REMOVE_FLASH_MESSAGE, payload: id,
|
||||
});
|
||||
|
||||
export const clearAllFlashMessages = () => ({
|
||||
type: CLEAR_ALL_FLASH_MESSAGES,
|
||||
});
|
||||
14
resources/scripts/redux/configure.ts
Normal file
14
resources/scripts/redux/configure.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { createStore } from 'redux';
|
||||
import { persistStore, persistReducer, PersistConfig } from 'redux-persist';
|
||||
import storage from 'redux-persist/lib/storage';
|
||||
import { reducers } from './reducers';
|
||||
|
||||
const persistConfig: PersistConfig = {
|
||||
key: 'root',
|
||||
storage,
|
||||
};
|
||||
|
||||
const persistedReducer = persistReducer(persistConfig, reducers);
|
||||
|
||||
export const store = createStore(persistedReducer);
|
||||
export const persistor = persistStore(store);
|
||||
7
resources/scripts/redux/reducers.ts
Normal file
7
resources/scripts/redux/reducers.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { combineReducers } from 'redux';
|
||||
import flashReducer from './reducers/flash';
|
||||
import { ReduxState } from '@/redux/types';
|
||||
|
||||
export const reducers = combineReducers<ReduxState>({
|
||||
flashes: flashReducer,
|
||||
});
|
||||
21
resources/scripts/redux/reducers/flash.ts
Normal file
21
resources/scripts/redux/reducers/flash.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { FlashMessage, ReduxReducerAction } from '@/redux/types';
|
||||
import { CLEAR_ALL_FLASH_MESSAGES, PUSH_FLASH_MESSAGE, REMOVE_FLASH_MESSAGE } from '@/redux/actions/flash';
|
||||
|
||||
export default (state: FlashMessage[] = [], action: ReduxReducerAction) => {
|
||||
switch (action.type) {
|
||||
case PUSH_FLASH_MESSAGE:
|
||||
return [ ...state.filter(flash => {
|
||||
if (action.payload.id && flash.id) {
|
||||
return flash.id !== action.payload.id;
|
||||
}
|
||||
|
||||
return true;
|
||||
}), action.payload ];
|
||||
case REMOVE_FLASH_MESSAGE:
|
||||
return [ ...state.filter(flash => flash.id !== action.payload) ];
|
||||
case CLEAR_ALL_FLASH_MESSAGES:
|
||||
return [];
|
||||
default:
|
||||
return [ ...state ];
|
||||
}
|
||||
};
|
||||
17
resources/scripts/redux/types.d.ts
vendored
Normal file
17
resources/scripts/redux/types.d.ts
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
import { FlashMessageType } from '@/components/MessageBox';
|
||||
|
||||
export interface ReduxReducerAction {
|
||||
type: string;
|
||||
payload?: any;
|
||||
}
|
||||
|
||||
export interface FlashMessage {
|
||||
id?: string;
|
||||
type: FlashMessageType;
|
||||
title?: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface ReduxState {
|
||||
flashes: FlashMessage[];
|
||||
}
|
||||
@ -3,6 +3,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
|
||||
import LoginContainer from '@/components/auth/LoginContainer';
|
||||
import { CSSTransition, TransitionGroup } from 'react-transition-group';
|
||||
import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
|
||||
export default class AuthenticationRouter extends React.PureComponent {
|
||||
render () {
|
||||
@ -10,9 +11,12 @@ export default class AuthenticationRouter extends React.PureComponent {
|
||||
<BrowserRouter basename={'/auth'}>
|
||||
<Route
|
||||
render={({ location }) => (
|
||||
<TransitionGroup className={'route-transition-group'}>
|
||||
<TransitionGroup className={'route-transition-group mt-32'}>
|
||||
<CSSTransition key={location.key} timeout={150} classNames={'fade'}>
|
||||
<section>
|
||||
<div className={'mb-2'}>
|
||||
<FlashMessageRender/>
|
||||
</div>
|
||||
<Switch location={location}>
|
||||
<Route path={'/login'} component={LoginContainer}/>
|
||||
<Route path={'/forgot-password'} component={ForgotPasswordContainer}/>
|
||||
|
||||
47
yarn.lock
47
yarn.lock
@ -605,7 +605,7 @@
|
||||
"@babel/plugin-transform-react-jsx-self" "^7.0.0"
|
||||
"@babel/plugin-transform-react-jsx-source" "^7.0.0"
|
||||
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0":
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5":
|
||||
version "7.4.5"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
|
||||
dependencies:
|
||||
@ -751,6 +751,13 @@
|
||||
version "4.7.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
|
||||
|
||||
"@types/hoist-non-react-statics@^3.3.0":
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
|
||||
"@types/lodash@^4.14.119":
|
||||
version "4.14.119"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39"
|
||||
@ -765,6 +772,15 @@
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-redux@^7.0.9":
|
||||
version "7.0.9"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.0.9.tgz#4825ee2872c44768916304b6bb8df5b46d443b88"
|
||||
dependencies:
|
||||
"@types/hoist-non-react-statics" "^3.3.0"
|
||||
"@types/react" "*"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
redux "^4.0.0"
|
||||
|
||||
"@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"
|
||||
@ -793,6 +809,12 @@
|
||||
"@types/prop-types" "*"
|
||||
csstype "^2.2.0"
|
||||
|
||||
"@types/redux-persist@^4.3.1":
|
||||
version "4.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/redux-persist/-/redux-persist-4.3.1.tgz#aa4c876859e0bea5155e5f7980e5b8c4699dc2e6"
|
||||
dependencies:
|
||||
redux-persist "*"
|
||||
|
||||
"@types/webpack-env@^1.13.6":
|
||||
version "1.13.6"
|
||||
resolved "http://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.13.6.tgz#128d1685a7c34d31ed17010fc87d6a12c1de6976"
|
||||
@ -3856,7 +3878,7 @@ interpret@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
|
||||
|
||||
invariant@^2.2.0, invariant@^2.2.2:
|
||||
invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
dependencies:
|
||||
@ -5950,7 +5972,7 @@ promise-inflight@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
|
||||
|
||||
prop-types@^15.6.1, prop-types@^15.6.2:
|
||||
prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
version "15.7.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
dependencies:
|
||||
@ -6112,7 +6134,7 @@ react-hot-loader@^4.9.0:
|
||||
shallowequal "^1.0.2"
|
||||
source-map "^0.7.3"
|
||||
|
||||
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
|
||||
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
|
||||
version "16.8.6"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
|
||||
|
||||
@ -6120,6 +6142,17 @@ react-lifecycles-compat@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
|
||||
|
||||
react-redux@^7.1.0:
|
||||
version "7.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.0.tgz#72af7cf490a74acdc516ea9c1dd80e25af9ea0b2"
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.5"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
invariant "^2.2.4"
|
||||
loose-envify "^1.4.0"
|
||||
prop-types "^15.7.2"
|
||||
react-is "^16.8.6"
|
||||
|
||||
react-router-dom@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"
|
||||
@ -6244,7 +6277,11 @@ reduce-css-calc@^2.0.0:
|
||||
css-unit-converter "^1.1.1"
|
||||
postcss-value-parser "^3.3.0"
|
||||
|
||||
redux@^4.0.1:
|
||||
redux-persist@*, redux-persist@^5.10.0:
|
||||
version "5.10.0"
|
||||
resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b"
|
||||
|
||||
redux@^4.0.0, redux@^4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5"
|
||||
dependencies:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user