Add support for flash messages utilizing redux

package.json

@@ -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",

resources/assets/styles/components/spinners.css

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

resources/scripts/components/App.tsx

@@ -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>
+            <Provider store={store}>
-                <div>
+                <PersistGate persistor={persistor} loading={this.renderLoading()}>
-                    <Route exact path="/"/>
+                    <Router>
-                    <Route path="/auth" component={AuthenticationRouter}/>
+                        <div>
-                </div>
+                            <Route exact path="/"/>
-            </Router>
+                            <Route path="/auth" component={AuthenticationRouter}/>
+                        </div>
+                    </Router>
+                </PersistGate>
+            </Provider>
+        );
+    }
+
+    renderLoading () {
+        return (
+            <div className={'spinner spinner-lg'}></div>
         );
     }
 }

resources/scripts/components/FlashMessageRender.tsx

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

resources/scripts/components/MessageBox.tsx

@@ -1,14 +1,18 @@
 import * as React from 'react';
 
+export type FlashMessageType = 'success' | 'info' | 'warning' | 'error';
+
 interface Props {
     title?: string;
-    message: string;
+    children: string;
-    type?: 'success' | 'info' | 'warning' | 'error';
+    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>
 );

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -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)
+        this.setState({ isSubmitting: true }, () => {
-            .then(() => {
+            this.props.clearAllFlashMessages();
-
+            requestPasswordResetEmail(this.state.email)
-            })
+                .then(() => {
-            .catch(console.error)
+                    // @todo actually handle this.
-            .then(() => this.setState({ isSubmitting: false }));
+                })
-    });
+                .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'}>&nbsp;</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);

resources/scripts/components/auth/LoginContainer.tsx

@@ -54,11 +54,9 @@ export default class LoginContainer extends React.PureComponent<{}, State> {
             <React.Fragment>
                 {this.state.errorMessage &&
                 <div className={'mb-4'}>
-                    <MessageBox
+                    <MessageBox type={'error'} title={'Error'}>
-                        type={'error'}
+                        {this.state.errorMessage}
-                        title={'Error'}
+                    </MessageBox>
-                        message={this.state.errorMessage}
-                    />
                 </div>
                 }
                 <form className={'login-box'} onSubmit={this.submit}>

resources/scripts/index.tsx

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

resources/scripts/redux/actions/flash.ts

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

resources/scripts/redux/configure.ts

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

resources/scripts/redux/reducers.ts

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

resources/scripts/redux/reducers/flash.ts

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

resources/scripts/redux/types.d.ts

@@ -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[];
+}

resources/scripts/routers/AuthenticationRouter.tsx

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

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: