Update readme, add stack+support. Add redis env vars. Add disable registration flag

web/src/Components/Api.js

@@ -0,0 +1 @@
+// https://stackoverflow.com/questions/38397653/redux-what-is-the-correct-place-to-save-cookie-after-login-request

web/src/Components/AppProvider.js

@@ -0,0 +1,45 @@
+import React, { Component, PropTypes } from 'react';
+import { Provider } from 'react-redux';
+import { persistStore } from 'redux-persist';
+
+class AppProvider extends Component {
+    static propTypes = {
+        store: PropTypes.object.isRequired,
+        children: PropTypes.node
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = { rehydrated: false };
+    }
+
+    componentWillMount() {
+        const opts = {
+            whitelist: ['user'] // <-- Your auth/user reducer storing the cookie
+        };
+
+        persistStore(this.props.store, opts, () => {
+            this.setState({ rehydrated: true });
+        });
+    }
+
+    render() {
+        if (!this.state.rehydrated) {
+            return null;
+        }
+
+        return (
+            <Provider store={this.props.store}>
+                {this.props.children}
+            </Provider>
+        );
+    }
+}
+
+AppProvider.propTypes = {
+    store: PropTypes.object.isRequired,
+    children: PropTypes.node
+}
+
+export default AppProvider;

web/src/Components/Pages/Login.js

@@ -2,7 +2,7 @@ import React from 'react';
 import '../../App.css';
 import './Login.css';
 import { Button } from 'reactstrap';
-
+import { Formik, Form, Field } from 'formik';
 import { useToasts } from 'react-toast-notifications';
 
 function withToast(Component) {
@@ -29,16 +29,15 @@ class Login extends React.Component {
     this.setState({password: event.target.value});
   }
 
-  handleSubmit(event) {
-    event.preventDefault();
+  handleSubmit(values) {
     this.setState({loading: true});
     const requestOptions = {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       timeout: 5000,
       body: JSON.stringify({
-        username: this.state.username,
-        password: this.state.password,
+        username: values.username,
+        password: values.password,
       })
   };
     const apiUrl = process.env.REACT_APP_API_URL + '/api/v1/login';
@@ -47,7 +46,7 @@ class Login extends React.Component {
       .then((function(data) {
         if (data.error) {
           this.props.addToast(data.error, { appearance: 'error' });
-        } else {
+        } else if (data.token) {
           this.props.addToast(data.token, { appearance: 'success' });
         }
         this.setState({loading: false});
@@ -59,30 +58,35 @@ class Login extends React.Component {
   }
 
   render() {
+    let trueBool = true;
     return (
       <div className="pageWrapper">
         <h1>
           Login
         </h1>
         <div className="loginBody">
-          <form onSubmit={this.handleSubmit}>
+          <Formik
+            initialValues={{ username: '', password: '' }}
+            onSubmit={async values => this.handleSubmit(values)}
+          >
+            <Form>
             <label>
               Email / Username<br/>
-              <input
+              <Field
+                name="username"
                 type="text"
+                required={trueBool}
                 className="loginFields"
-                value={this.state.username}
-                onChange={this.handleUsernameChange}
               />
             </label>
             <br/>
             <label>
               Password<br/>
-              <input
+              <Field
+                name="password"
                 type="password"
+                required={trueBool}
                 className="loginFields"
-                value={this.state.password}
-                onChange={this.handlePasswordChange}
               />
             </label>
             <br/><br/>
@@ -92,7 +96,8 @@ class Login extends React.Component {
               className="loginButton"
               disabled={this.state.loading}
             >Login</Button>
-          </form>
+          </Form>
+          </Formik>
         </div>
       </div>
     );

web/src/Components/Pages/Register.js

@@ -2,7 +2,6 @@ import React from 'react';
 import '../../App.css';
 import './Login.css';
 import { Button } from 'reactstrap';
-
 import { useToasts } from 'react-toast-notifications';
 
 function withToast(Component) {
@@ -84,64 +83,73 @@ class Register extends React.Component {
   }
 
   render() {
+    let trueBool = true;
     return (
       <div className="pageWrapper">
-        <h1>
-        Register
-        </h1>
-        <div className="loginBody">
-          <form onSubmit={this.handleSubmit}>
-            <label>
-              Username*<br/>
-              <input
-                type="text"
-                required="true"
-                className="loginFields"
-                value={this.state.username}
-                onChange={this.handleUsernameChange}
-              />
-            </label>
-            <br/>
-            <label>
-              Email<br/>
-              <input
-                type="email"
-                className="loginFields"
-                value={this.state.email}
-                onChange={this.handleEmailChange}
-              />
-            </label>
-            <br/>
-            <label>
-              Password<br/>
-              <input
-                type="password"
-                required="true"
-                className="loginFields"
-                value={this.state.password}
-                onChange={this.handlePasswordChange}
-              />
-            </label>
-            <br/>
-            <label>
-              Password<br/>
-              <input
-                type="password"
-                required="true"
-                className="loginFields"
-                value={this.state.passwordconfirm}
-                onChange={this.handlePasswordConfirmChange}
-              />
-            </label>
-            <br/><br/>
-            <Button
-              color="primary"
-              type="submit"
-              className="loginButton"
-              disabled={this.state.loading}
-            >Login</Button>
-          </form>
-        </div>
+        {
+          // TODO: Move to DB:config REGISTRATION_DISABLED=1|0
+          process.env.REACT_APP_REGISTRATION_DISABLED === "true" ?
+          <p>Registration is temporarily disabled. Please try again soon!</p>
+          :
+          <div>
+            <h1>
+            Register
+            </h1>
+            <div className="loginBody">
+              <form onSubmit={this.handleSubmit}>
+                <label>
+                  Username*<br/>
+                  <input
+                    type="text"
+                    required={trueBool}
+                    className="loginFields"
+                    value={this.state.username}
+                    onChange={this.handleUsernameChange}
+                  />
+                </label>
+                <br/>
+                <label>
+                  Email<br/>
+                  <input
+                    type="email"
+                    className="loginFields"
+                    value={this.state.email}
+                    onChange={this.handleEmailChange}
+                  />
+                </label>
+                <br/>
+                <label>
+                  Password<br/>
+                  <input
+                    type="password"
+                    required={trueBool}
+                    className="loginFields"
+                    value={this.state.password}
+                    onChange={this.handlePasswordChange}
+                  />
+                </label>
+                <br/>
+                <label>
+                  Password<br/>
+                  <input
+                    type="password"
+                    required={trueBool}
+                    className="loginFields"
+                    value={this.state.passwordconfirm}
+                    onChange={this.handlePasswordConfirmChange}
+                  />
+                </label>
+                <br/><br/>
+                <Button
+                  color="primary"
+                  type="submit"
+                  className="loginButton"
+                  disabled={this.state.loading}
+                >Login</Button>
+              </form>
+            </div>
+          </div>
+        }
       </div>
     );
   }

web/src/Components/Pages/Settings.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import '../../App.css';
+import './Settings.css';
+
+import { useToasts } from 'react-toast-notifications';
+
+function withToast(Component) {
+  return function WrappedComponent(props) {
+    const toastFuncs = useToasts()
+    return <Component {...props} {...toastFuncs} />;
+  }
+}
+
+class Settings extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {username: '', password: '', loading: false};
+  }
+
+  render() {
+    return (
+      <div className="pageWrapper">
+        <h1>
+          Settings
+        </h1>
+        <div className="loginBody">
+        <p>
+          All the settings
+        </p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withToast(Settings);