Add flag to disable Scrobble config in the UI

ui/src/config.js

@@ -19,6 +19,7 @@ const defaultConfig = {
   defaultTheme: 'Dark',
   enableUserEditing: true,
   devEnableShare: true,
+  devEnableScrobble: true,
 }
 
 let config

ui/src/personal/Personal.js

@@ -5,6 +5,8 @@ import { SelectLanguage } from './SelectLanguage'
 import { SelectTheme } from './SelectTheme'
 import { SelectDefaultView } from './SelectDefaultView'
 import { NotificationsToggle } from './NotificationsToggle'
+import { ScrobbleToggle } from './ScrobbleToggle'
+import config from '../config'
 
 const useStyles = makeStyles({
   root: { marginTop: '1em' },
@@ -22,6 +24,7 @@ const Personal = () => {
         <SelectLanguage />
         <SelectDefaultView />
         <NotificationsToggle />
+        {config.devEnableScrobble && <ScrobbleToggle />}
       </SimpleForm>
     </Card>
   )

ui/src/personal/ScrobbleToggle.js

@@ -0,0 +1,43 @@
+import { useNotify, useTranslate } from 'react-admin'
+import { useDispatch, useSelector } from 'react-redux'
+import { setNotificationsState } from '../actions'
+import {
+  FormControl,
+  FormControlLabel,
+  LinearProgress,
+  Switch,
+} from '@material-ui/core'
+import { useState } from 'react'
+import { openInNewTab } from '../utils'
+
+export const ScrobbleToggle = (props) => {
+  const translate = useTranslate()
+  const [linked, setLinked] = useState(false)
+
+  const toggleScrobble = (event) => {
+    if (!linked) {
+      openInNewTab(
+        'https://www.last.fm/api/auth/?api_key=c2918986bf01b6ba353c0bc1bdd27bea'
+      )
+    }
+    setLinked(!linked)
+  }
+
+  return (
+    <FormControl>
+      <FormControlLabel
+        control={
+          <Switch
+            id={'notifications'}
+            color="primary"
+            checked={linked}
+            disabled={linked}
+            onChange={toggleScrobble}
+          />
+        }
+        label={<span>{translate('Scrobble to Last.FM')}</span>}
+      />
+      {linked && <LinearProgress />}
+    </FormControl>
+  )
+}