0.0.8

- Added Admin/Site config page in frontend for admin users
- Added API POST/GET /config endpoint

web/src/Pages/Admin.css

@@ -0,0 +1,15 @@
+.adminBody {
+    padding: 20px 5px 5px 5px;
+    font-size: 16pt;
+    width: 300px;
+}
+
+.adminFields {
+    width: 100%;
+}
+
+.admin {
+    height: 50px;
+    width: 100%;
+    margin-top:-5px;
+}

web/src/Pages/Admin.js

@@ -0,0 +1,107 @@
+import React, { useContext, useState, useEffect } from 'react';
+import '../App.css';
+import './Login.css';
+import { Button } from 'reactstrap';
+import { Formik, Form, Field } from 'formik';
+import ScaleLoader from 'react-spinners/ScaleLoader';
+import AuthContext from '../Contexts/AuthContext';
+import { Switch } from 'formik-material-ui';
+import { getConfigs, postConfigs } from '../Api/index'
+
+const Admin = () => {
+  const { user } = useContext(AuthContext);
+  const [loading, setLoading] = useState(true);
+  const [configs, setConfigs] = useState({})
+  const [toggle, setToggle] = useState(false);
+
+  useEffect(() => {
+    getConfigs()
+      .then(data => {
+        setConfigs(data.configs);
+        setToggle(data.configs.REGISTRATION_ENABLED === "1")
+        setLoading(false);
+      })
+  }, [])
+
+  if (!user || !user.admin) {
+    return (
+      <div className="pageWrapper">
+        <h1>Unauthorized</h1>
+      </div>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className="pageWrapper">
+        <ScaleLoader color="#6AD7E5" />
+      </div>
+    )
+  }
+
+  const handleToggle = () => {
+    setToggle(!toggle);
+  };
+
+  return (
+    <div className="pageWrapper">
+      <h1>
+        Admin Panel
+      </h1>
+      <div className="loginBody">
+        <Formik
+          initialValues={configs}
+          onSubmit={(values) => postConfigs(values, toggle)}
+        >
+          <Form><br/>
+          <label>
+            <Field
+              type="checkbox"
+              name="REGISTRATION_ENABLED"
+              onChange={handleToggle}
+              component={Switch}
+              checked={toggle}
+              value={toggle}
+            />
+            Registration Enabled
+          </label><br/><br/>
+          <label>
+            LastFM Api Key<br/>
+            <Field
+              name="LASTFM_API_KEY"
+              type="text"
+              className="loginFields"
+            />
+          </label>
+          <br/>
+          <label>
+            Spotify App ID<br/>
+            <Field
+              name="SPOTIFY_APP_ID"
+              type="text"
+              className="loginFields"
+            />
+          </label>
+          <label>
+            Spotify App Secret<br/>
+            <Field
+              name="SPOTIFY_APP_SECRET"
+              type="text"
+              className="loginFields"
+            />
+          </label>
+          <br/><br/>
+          <Button
+            color="primary"
+            type="submit"
+            className="loginButton"
+            disabled={loading}
+          >Update</Button>
+        </Form>
+        </Formik>
+      </div>
+    </div>
+  );
+}
+
+export default Admin;

web/src/Pages/Dashboard.js

@@ -10,7 +10,7 @@ import AuthContext from '../Contexts/AuthContext';
 const Dashboard = () => {
   const history = useHistory();
   let { user } = useContext(AuthContext);
-  let [isLoading, setIsLoading] = useState(true);
+  let [loading, setLoading] = useState(true);
   let [dashboardData, setDashboardData] = useState({});
 
   if (!user) {
@@ -24,7 +24,7 @@ const Dashboard = () => {
     getRecentScrobbles(user.uuid)
       .then(data => {
         setDashboardData(data);
-        setIsLoading(false);
+        setLoading(false);
       })
   }, [user])
 
@@ -33,8 +33,8 @@ const Dashboard = () => {
       <h1>
         Dashboard!
       </h1>
-      {isLoading
-        ? <ScaleLoader color="#FFF" size={60} />
+      {loading
+        ? <ScaleLoader color="#6AD7E5" size={60} />
         : <ScrobbleTable data={dashboardData} />
       }
     </div>