Scrobbles work!

web/package-lock.json

@@ -21,6 +21,7 @@
         "react-redux": "^7.2.3",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.3",
+        "react-spinners": "^0.10.6",
         "react-toast": "^1.0.1",
         "react-toast-notifications": "^2.4.3",
         "reactstrap": "^8.9.0",
@@ -16679,6 +16680,18 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.10.6.tgz",
+      "integrity": "sha512-UPLcaMFhFnLWtS1zVDDT14ssW08gnZ44cjPN6GL27dEGboiCvRSthOilZXRDWESp449GB2iI6gjEbxzaMtA+dg==",
+      "dependencies": {
+        "@emotion/core": "^10.0.35"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-toast": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/react-toast/-/react-toast-1.0.1.tgz",
@@ -35210,6 +35223,14 @@
         }
       }
     },
+    "react-spinners": {
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.10.6.tgz",
+      "integrity": "sha512-UPLcaMFhFnLWtS1zVDDT14ssW08gnZ44cjPN6GL27dEGboiCvRSthOilZXRDWESp449GB2iI6gjEbxzaMtA+dg==",
+      "requires": {
+        "@emotion/core": "^10.0.35"
+      }
+    },
     "react-toast": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/react-toast/-/react-toast-1.0.1.tgz",

web/package.json

@@ -16,6 +16,7 @@
     "react-redux": "^7.2.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-spinners": "^0.10.6",
     "react-toast": "^1.0.1",
     "react-toast-notifications": "^2.4.3",
     "reactstrap": "^8.9.0",

web/src/App.js

@@ -1,12 +1,13 @@
 import './App.css';
 import Home from './Components/Pages/Home';
 import About from './Components/Pages/About';
+import Help from './Components/Pages/Help';
 import Login from './Components/Pages/Login';
 import Settings from './Components/Pages/Settings';
 import Register from './Components/Pages/Register';
 import Navigation from './Components/Navigation';
 
-import { Route, Switch } from 'react-router-dom';
+import { Route, Switch, withRouter } from 'react-router-dom';
 import { connect } from "react-redux";
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
@@ -32,6 +33,7 @@ const App = () => {
         <Route exact={exact} path="/" component={Home} />
         <Route path="/about" component={About} />
         <Route path="/settings" component={Settings} />
+        <Route path="/help" component={Help} />
         <Route path="/login" component={Login} />
         <Route path="/register" component={Register} />
       </Switch>
@@ -39,4 +41,4 @@ const App = () => {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

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

web/src/index.js

@@ -16,7 +16,7 @@ const store = createStore(goScorbbleStore);
 
 ReactDOM.render(
   <HashRouter>
-    <ToastProvider autoDismiss="true" autoDismissTimeout="5000" placement="bottom-right">
+    <ToastProvider autoDismiss="true" autoDismissTimeout="6000" placement="bottom-right">
       <Provider store={store}>
           <App />
       </Provider>