Add support for flash messages utilizing redux

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

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

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)
-            .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'}>&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
-                        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}>

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