Scrobbles work!

web/src/Components/Navigation.js

@@ -5,6 +5,7 @@ import './Navigation.css';
 
 const menuItems = [
   'Home',
+  'Help',
   'About',
 ];
 
@@ -37,7 +38,7 @@ class Navigation extends Component {
         } else {
           return <div className="navLinkLogin">
                   <Link to="/login" className="navLink">Login</Link>
-                  <Link to="/register" className="navLink">Register</Link>
+                  <Link to="/register" className="navLink" history={this.props.history}>Register</Link>
                 </div>;
         }
       }

web/src/Components/Pages/Help.css

@@ -0,0 +1,4 @@
+.helpBody {
+    padding: 20px 5px 5px 5px;
+    font-size: 16pt;
+}

web/src/Components/Pages/Help.js

@@ -0,0 +1,17 @@
+import '../../App.css';
+import './Help.css';
+
+function Help() {
+  return (
+    <div className="pageWrapper">
+      <h1>
+        Help Docs
+      </h1>
+      <p className="helpBody">
+        Jellyfin Configuration<br/>
+      </p>
+    </div>
+  );
+}
+
+export default Help;

web/src/Components/Pages/Login.js

@@ -4,6 +4,7 @@ import './Login.css';
 import { Button } from 'reactstrap';
 import { Formik, Form, Field } from 'formik';
 import { useToasts } from 'react-toast-notifications';
+import ScaleLoader from "react-spinners/ScaleLoader";
 
 function withToast(Component) {
   return function WrappedComponent(props) {
@@ -42,7 +43,14 @@ class Login extends React.Component {
   };
     const apiUrl = process.env.REACT_APP_API_URL + '/api/v1/login';
     fetch(apiUrl, requestOptions)
-      .then((response) => response.json())
+      .then((response) => {
+        if (response.status === 429) {
+          this.props.addToast("Rate limited. Please try again soon", { appearance: 'error' });
+          return "{}"
+        } else {
+          return response.json()
+        }
+      })
       .then((function(data) {
         if (data.error) {
           this.props.addToast(data.error, { appearance: 'error' });
@@ -95,7 +103,7 @@ class Login extends React.Component {
               type="submit"
               className="loginButton"
               disabled={this.state.loading}
-            >Login</Button>
+            >{this.state.loading ? <ScaleLoader color="#FFF" size={35} /> : "Login"}</Button>
           </Form>
           </Formik>
         </div>

web/src/Components/Pages/Register.js

@@ -3,6 +3,8 @@ import '../../App.css';
 import './Login.css';
 import { Button } from 'reactstrap';
 import { useToasts } from 'react-toast-notifications';
+import ScaleLoader from "react-spinners/ScaleLoader";
+import { withRouter } from 'react-router-dom'
 
 function withToast(Component) {
   return function WrappedComponent(props) {
@@ -66,13 +68,21 @@ class Register extends React.Component {
     const apiUrl = process.env.REACT_APP_API_URL + '/api/v1/register';
     console.log(apiUrl);
     fetch(apiUrl, requestOptions)
-      .then((response) => response.json())
+      .then((response) => {
+        if (response.status === 429) {
+          this.props.addToast("Rate limited. Please try again soon", { appearance: 'error' });
+          return "{}"
+        } else {
+          return response.json()
+        }
+      })
       .then((function(data) {
         console.log(data);
         if (data.error) {
           this.props.addToast(data.error, { appearance: 'error' });
-        } else {
+        } else if (data.message) {
           this.props.addToast(data.message, { appearance: 'success' });
+          this.props.history.push('/login')
         }
         this.setState({loading: false});
       }).bind(this))
@@ -119,7 +129,7 @@ class Register extends React.Component {
                 </label>
                 <br/>
                 <label>
-                  Password<br/>
+                  Password*<br/>
                   <input
                     type="password"
                     required={trueBool}
@@ -130,7 +140,7 @@ class Register extends React.Component {
                 </label>
                 <br/>
                 <label>
-                  Password<br/>
+                  Password*<br/>
                   <input
                     type="password"
                     required={trueBool}
@@ -145,7 +155,7 @@ class Register extends React.Component {
                   type="submit"
                   className="loginButton"
                   disabled={this.state.loading}
-                >Login</Button>
+                  >{this.state.loading ? <ScaleLoader color="#FFF" size={35} /> : "Register"}</Button>
               </form>
             </div>
           </div>
@@ -155,4 +165,4 @@ class Register extends React.Component {
   }
 }
 
-export default withToast(Register);
+export default withRouter(withToast(Register));