0.0.26

- Make email required
- Add basic navidrome/subsonic connection
- Tidy up request/response structure in backend
- Tidy Settings page

web/src/Api/index.js

@@ -281,6 +281,26 @@ export const spotifyDisonnectionRequest = () => {
   });
 }
 
+export const navidromeConnectionRequest = (values) => {
+  return axios.post(process.env.REACT_APP_API_URL + "user/navidrome", values, { headers: getHeaders() })
+  .then((data) => {
+    toast.success(data.data.message);
+    return true
+  }).catch((error) => {
+    return handleErrorResp(error)
+  });
+};
+
+export const navidromeDisonnectionRequest = () => {
+  return axios.delete(process.env.REACT_APP_API_URL + "user/navidrome", { headers: getHeaders() })
+  .then((data) => {
+    toast.success(data.data.message);
+    return true
+  }).catch((error) => {
+    return handleErrorResp(error)
+  });
+}
+
 
 export const getServerInfo = () => {
   return axios.get(process.env.REACT_APP_API_URL + "serverinfo")

web/src/Components/ScrobbleTable.js

@@ -3,15 +3,14 @@ import { Link } from 'react-router-dom';
 
 const ScrobbleTable = (props) => {
     return (
-        <div>
-        <table width={900} border={1} cellPadding={5}>
+        <div style={{width: `100%`}}>
+        <table style={{width: `100%`}} border={1} cellPadding={5}>
            <thead>
               <tr>
                 <td>Timestamp</td>
                 <td>Track</td>
                 <td>Artist</td>
                 <td>Album</td>
-                <td>Source</td>
               </tr>
            </thead>
            <tbody>
@@ -30,7 +29,6 @@ const ScrobbleTable = (props) => {
                         </td>
                         <td>{element.artist}</td>
                         <td>{element.album}</td>
-                        <td>{element.source}</td>
                      </tr>;
                   })
               }

web/src/Pages/Profile.js

@@ -71,7 +71,7 @@ const Profile = (route) => {
         <br/>
         <TopTable type="artist" items={topArtists} />
         <br/>
-        Last 10 scrobbles...<br/>
+        Last 10 scrobbles<br/>
         <ScrobbleTable data={profile.scrobbles}/>
       </div>
     </div>

web/src/Pages/Register.js

@@ -54,7 +54,7 @@ const Register = () => {
             >
               <Form>
                 <label>
-                  Username*<br/>
+                  Username<br/>
                   <Field
                     name="username"
                     type="text"
@@ -68,12 +68,13 @@ const Register = () => {
                   <Field
                     name="email"
                     type="email"
+                    required={boolTrue}
                     className="registerFields"
                   />
                 </label>
                 <br/>
                 <label>
-                  Password*<br/>
+                  Password<br/>
                   <Field
                     name="password"
                     type="password"
@@ -83,7 +84,7 @@ const Register = () => {
                 </label>
                 <br/>
                 <label>
-                  Confirm Password*<br/>
+                  Confirm Password<br/>
                   <Field
                     name="passwordconfirm"
                     type="password"

web/src/Pages/User.js

@@ -4,11 +4,18 @@ import './User.css';
 import { useHistory } from "react-router";
 import AuthContext from '../Contexts/AuthContext';
 import ScaleLoader from 'react-spinners/ScaleLoader';
-import { getUser, patchUser } from '../Api/index'
 import { Button } from 'reactstrap';
+import { Formik, Form, Field } from 'formik';
 import { confirmAlert } from 'react-confirm-alert';
 import 'react-confirm-alert/src/react-confirm-alert.css';
-import { spotifyConnectionRequest, spotifyDisonnectionRequest } from '../Api/index'
+import {
+  getUser,
+  patchUser,
+  spotifyConnectionRequest,
+  spotifyDisonnectionRequest,
+  navidromeDisonnectionRequest,
+  navidromeConnectionRequest,
+} from '../Api/index'
 import TimezoneSelect from 'react-timezone-select'
 
 const User = () => {
@@ -25,7 +32,7 @@ const User = () => {
   const resetTokenPopup = () => {
     confirmAlert({
       title: 'Reset token',
-      message: 'Resetting your token will require you to update your sources with the new token. Continue?',
+      message: 'Resetting your token will require you to update your Jellyfin server / custom scroblers with the new token. Continue?',
       buttons: [
         {
           label: 'Reset',
@@ -38,10 +45,73 @@ const User = () => {
     });
   };
 
+  const connectNavidromePopup = () => {
+    confirmAlert({
+      title: 'Connect Navidrome',
+      buttons: [
+        {
+          label: 'Close',
+        }
+      ],
+      childrenElement: () =>  <Formik
+            initialValues={{ url: '', username: '', password: '' }}
+            onSubmit={values => navidromeConnectionRequest(values)}
+        >
+          <Form>
+          <label>
+            Server URL<br/>
+            <Field
+              name="url"
+              type="text"
+            />
+          </label>
+          <br/>
+          <label>
+            Username<br/>
+            <Field
+              name="username"
+              type="text"
+            />
+          </label>
+          <br/>
+          <label>
+            Password<br/>
+            <Field
+              name="password"
+              type="password"
+            />
+          </label>
+          <br/><br/>
+          <Button
+            color="primary"
+            type="submit"
+            className="loginButton"
+          >Connect</Button>
+        </Form>
+      </Formik>,
+    });
+  };
+
+  const disconnectNavidromePopup = () => {
+    confirmAlert({
+      title: 'Disconnect Navidrome',
+      message: 'Are you sure you want to disconnect your Navidrome connection?',
+      buttons: [
+        {
+          label: 'Disconnect',
+          onClick: () => navidromeDisonnectionRequest()
+        },
+        {
+          label: 'No',
+        }
+      ]
+    });
+  };
+
   const disconnectSpotifyPopup = () => {
     confirmAlert({
       title: 'Disconnect Spotify',
-      message: 'Are you sure you want to disconnect your spotify account?',
+      message: 'Are you sure you want to disconnect your Spotify account?',
       buttons: [
         {
           label: 'Disconnect',
@@ -54,6 +124,32 @@ const User = () => {
     });
   };
 
+  const connectJellyfinPopup = () => {
+    confirmAlert({
+      title: 'Connect Jellyfin',
+      message: 'Install the webhook plugin. Add a webhook to {API_URL}/api/v1/ingress/jellyfin?key='+userdata.token
+        +'\nSet it to only send "Playback Start" and "Songs/Albums"',
+      buttons: [
+        {
+          label: 'Close',
+        }
+      ]
+    });
+  }
+
+  const connectOtherPopup = () => {
+    confirmAlert({
+      title: 'Connect Jellyfin',
+      message: 'Endpoint: {API_URL}/api/v1/ingress/multiscrobbler?key='+userdata.token
+        +'\nNeed to send JSON body with a string array for artists names, album:string, track:string, playDate:timestamp of scrobble, duration:tracklength in seconds',
+      buttons: [
+        {
+          label: 'Close',
+        }
+      ]
+    });
+  }
+
   const resetToken = () => {
     setLoading(true);
     patchUser({ token: '' })
@@ -95,32 +191,29 @@ const User = () => {
       <h1>
         Welcome {userdata.username}
       </h1>
-      <p className="pageBody">
-      Timezone<br/>
-      <TimezoneSelect
-          className="userDropdown"
-          value={userdata.timezone}
-          onChange={updateTimezone}
-      /><br/>
-        Token: {userdata.token}<br/>
-        <Button
-              color="primary"
-              type="button"
-              className="userButton"
-              onClick={resetTokenPopup}
-            >Reset Token</Button><br/><br/>
-        Created At: {userdata.created_at}<br/>
-        Email: {userdata.email}<br/>
-        Verified: {userdata.verified ? '✓' : '✖'}<br/>
-
-        {userdata.spotify_username
-          ? <div>Spotify Account: {userdata.spotify_username}<br/><br/>
-          <Button
+      <div style={{display: `flex`, flexWrap: `wrap`, textAlign: `center`}}>
+        <div style={{width: `300px`, padding: `0 10px 10px 10px`, textAlign: `left`}}>
+          <h3 style={{textAlign: `center`}}>Profile</h3>
+          Timezone<br/>
+          <TimezoneSelect
+              className="userDropdown"
+              value={userdata.timezone}
+              onChange={updateTimezone}
+          /><br/>
+          Created At:<br/>{userdata.created_at}<br/>
+          Email:<br/>{userdata.email}<br/>
+          Verified: {userdata.verified ? '✓' : '✖'}
+        </div>
+        <div style={{width: `300px`, padding: `0 10px 10px 10px`}}>
+          <h3>Scrobblers</h3>
+          <br/>
+          {userdata.spotify_username
+          ? <Button
             color="secondary"
             type="button"
             className="userButton"
             onClick={disconnectSpotifyPopup}
-          >Disconnect Spotify</Button></div>
+          >Disconnect Spotify ({userdata.spotify_username})</Button>
           : <div>
             <br/>
             <Button
@@ -129,9 +222,55 @@ const User = () => {
               className="userButton"
               onClick={spotifyConnectionRequest}
             >Connect To Spotify</Button>
-          </div>
-        }
-      </p>
+            </div>
+          }
+          <br/><br/>
+          {userdata.navidrome_server
+            ? <Button
+              color="secondary"
+              type="button"
+              className="userButton"
+              onClick={disconnectNavidromePopup}
+            >Disconnect Navidrome ({userdata.navidrome_server})</Button>
+            : <Button
+                color="primary"
+                type="button"
+                className="userButton"
+                onClick={connectNavidromePopup}
+              >Connect Navidrome</Button>
+          }
+          <br/><br/>
+          <Button
+            color="primary"
+            type="button"
+            className="userButton"
+            onClick={connectJellyfinPopup}
+          >Connect Jellyfin</Button>
+          <br/><br/>
+          <Button
+            color="primary"
+            type="button"
+            className="userButton"
+            onClick={connectOtherPopup}
+          >Other Scrobblers</Button>
+        </div>
+        <div style={{width: `300px`, padding: `0 10px 10px 10px`}}>
+          <h3>Sad Settings</h3>
+          <br/>
+          <Button
+            color="secondary"
+            type="button"
+            className="userButton"
+          >Delete Account</Button>
+          <br/><br/>
+          <Button
+            color="secondary"
+            type="button"
+            className="userButton"
+            onClick={resetTokenPopup}
+          >Reset Scrobbler Token</Button>
+        </div>
+      </div>
     </div>
   );
 }