0.0.3

- Clean up login/redirect flow
- Add redirect when not authed on other endpoints
- Add GET /stats endpoint for overal stats

web/src/Pages/Dashboard.js

@@ -10,7 +10,6 @@ class Dashboard extends React.Component {
 
     if (!isLoggedIn) {
       history.push("/login")
-      window.location.reload()
     }
   }
 
@@ -18,7 +17,7 @@ class Dashboard extends React.Component {
     return (
       <div className="pageWrapper">
         <h1>
-          Hai Dashboard!
+          Dashboard!
         </h1>
       </div>
     );

web/src/Pages/Home.js

@@ -1,8 +1,11 @@
 import logo from '../logo.png';
 import '../App.css';
+import HomeBanner from '../Components/HomeBanner';
+import React from 'react';
 
-function Home() {
-  return (
+class Home extends React.Component {
+  render() {
+    return (
     <div className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <p>
@@ -16,8 +19,10 @@ function Home() {
       >
         gitlab.com/idanoo/go-scrobble
       </a>
+      <HomeBanner />
     </div>
-  );
+    );
+  }
 }
 
 export default Home;

web/src/Pages/Login.js

@@ -6,6 +6,8 @@ import { Formik, Form, Field } from 'formik';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 import { connect } from 'react-redux';
 import { login } from '../Actions/auth';
+import eventBus from "../Actions/eventBus";
+import { LOGIN_SUCCESS } from '../Actions/types';
 
 class Login extends React.Component {
   constructor(props) {
@@ -13,6 +15,14 @@ class Login extends React.Component {
     this.state = {username: '', password: '', loading: false};
   }
 
+  componentDidMount() {
+    const { history, isLoggedIn } = this.props;
+
+    if (isLoggedIn) {
+      history.push("/dashboard")
+    }
+  }
+
   handleLogin(values) {
     this.setState({loading: true});
 
@@ -22,9 +32,11 @@ class Login extends React.Component {
       .then(() => {
         this.setState({
           loading: false,
+          isLoggedIn: true
         });
+
+        eventBus.dispatch(LOGIN_SUCCESS, { isLoggedIn: true });
         history.push("/dashboard");
-        window.location.reload();
       })
       .catch(() => {
         this.setState({
@@ -82,10 +94,8 @@ class Login extends React.Component {
 
 function mapStateToProps(state) {
   const { isLoggedIn } = state.auth;
-  const { message } = state.message;
   return {
-    isLoggedIn,
-    message
+    isLoggedIn
   };
 }
 

web/src/Pages/Profile.js

@@ -5,12 +5,10 @@ import { connect } from 'react-redux';
 
 class Profile extends React.Component {
   componentDidMount() {
-    const { history } = this.props;
-    const isLoggedIn = this.props.isLoggedIn;
-
+    const { history, isLoggedIn } = this.props;
+    
     if (!isLoggedIn) {
       history.push("/login")
-      window.location.reload()
     }
   }
 

web/src/Pages/Register.js

@@ -1,86 +1,42 @@
 import React from 'react';
 import '../App.css';
 import './Login.css';
-import { Button } from 'reactstrap';
+import { Button, Form } from 'reactstrap';
 import ScaleLoader from "react-spinners/ScaleLoader";
-import { withRouter } from 'react-router-dom'
+import { register } from '../Actions/auth';
+import { Formik, Field } from 'formik';
+import { connect } from 'react-redux';
 
 class Register extends React.Component {
   constructor(props) {
     super(props);
     this.state = {username: '', email: '', password: '', passwordconfirm: '', loading: false};
-    this.handleUsernameChange = this.handleUsernameChange.bind(this);
-    this.handleEmailChange = this.handleEmailChange.bind(this);
-    this.handlePasswordChange = this.handlePasswordChange.bind(this);
-    this.handlePasswordConfirmChange = this.handlePasswordConfirmChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  handleUsernameChange(event) {
-    this.setState({username: event.target.value});
-  }
+  componentDidMount() {
+    const { history, isLoggedIn } = this.props;
 
-  handleEmailChange(event) {
-    this.setState({email: event.target.value});
-  }
-
-  handlePasswordChange(event) {
-    this.setState({password: event.target.value});
-  }
-
-  handlePasswordConfirmChange(event) {
-    this.setState({passwordconfirm: event.target.value});
-  }
-
-  handleSubmit(event) {
-    event.preventDefault();
-
-    if (this.state.password !== this.state.passwordconfirm) {
-      this.props.addToast('Passwords do not match', { appearance: 'error' });
-      return
+    if (isLoggedIn) {
+      history.push("/dashboard")
     }
+  }
 
-    // if (this.state.password.len < 8) {
-    //   this.props.addToast('Password must be at least 8 characters', { appearance: 'error' });
-    //   return
-    // }
-
+  handleRegister(values) {
     this.setState({loading: true});
-    const requestOptions = {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      timeout: 5000,
-      body: JSON.stringify({
-        username: this.state.username,
-        email: this.state.email,
-        password: this.state.password,
-      })
-    };
 
-    const apiUrl = process.env.REACT_APP_API_URL + '/api/v1/register';
-    console.log(apiUrl);
-    fetch(apiUrl, requestOptions)
-      .then((response) => {
-        if (response.status === 429) {
-          this.props.addToast("Rate limited. Please try again soon", { appearance: 'error' });
-          return "{}"
-        } else {
-          return response.json()
-        }
+    const { dispatch, history } = this.props;
+
+    dispatch(register(values.username, values.email, values.password))
+      .then(() => {
+        this.setState({
+          loading: false,
+        });
+        history.push("/login");
       })
-      .then((function(data) {
-        console.log(data);
-        if (data.error) {
-          this.props.addToast(data.error, { appearance: 'error' });
-        } else if (data.message) {
-          this.props.addToast(data.message, { appearance: 'success' });
-          this.props.history.push('/login')
-        }
-        this.setState({loading: false});
-      }).bind(this))
       .catch(() => {
-        this.props.addToast('Error submitting form. Please try again', { appearance: 'error' });
-        this.setState({loading: false});
+        this.setState({
+          loading: false
+        });
       });
   }
 
@@ -98,57 +54,57 @@ class Register extends React.Component {
             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}
-                  >{this.state.loading ? <ScaleLoader color="#FFF" size={35} /> : "Register"}</Button>
-              </form>
+              <Formik
+                initialValues={{ username: '', email: '', password: '', passwordconfirm: '' }}
+                onSubmit={async values => this.handleRegister(values)}>
+                <Form>
+                  <label>
+                    Username*<br/>
+                    <Field
+                      name="username"
+                      type="text"
+                      required={trueBool}
+                      className="loginFields"
+                    />
+                  </label>
+                  <br/>
+                  <label>
+                    Email<br/>
+                    <Field
+                      name="email"
+                      type="email"
+                      className="loginFields"
+                    />
+                  </label>
+                  <br/>
+                  <label>
+                    Password*<br/>
+                    <Field
+                      name="password"
+                      type="password"
+                      required={trueBool}
+                      className="loginFields"
+                    />
+                  </label>
+                  <br/>
+                  <label>
+                    Confirm Password*<br/>
+                    <Field
+                      name="passwordconfirm"
+                      type="password"
+                      required={trueBool}
+                      className="loginFields"
+                    />
+                  </label>
+                  <br/><br/>
+                  <Button
+                    color="primary"
+                    type="submit"
+                    className="loginButton"
+                    disabled={this.state.loading}
+                    >{this.state.loading ? <ScaleLoader color="#FFF" size={35} /> : "Register"}</Button>
+                </Form>
+              </Formik>
             </div>
           </div>
         }
@@ -157,4 +113,11 @@ class Register extends React.Component {
   }
 }
 
-export default withRouter(Register);
+function mapStateToProps(state) {
+  const { isLoggedIn } = state.auth;
+  return {
+    isLoggedIn
+  };
+}
+
+export default connect(mapStateToProps)(Register);