Add support for flash messages utilizing redux

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