diff --git a/ui/src/personal/LastfmScrobbleToggle.jsx b/ui/src/personal/LastfmScrobbleToggle.jsx index a3c6793ea..67018d2bb 100644 --- a/ui/src/personal/LastfmScrobbleToggle.jsx +++ b/ui/src/personal/LastfmScrobbleToggle.jsx @@ -3,6 +3,7 @@ import { useNotify, useTranslate } from 'react-admin' import { FormControl, FormControlLabel, + FormHelperText, LinearProgress, Switch, Tooltip, @@ -102,32 +103,20 @@ export const LastfmScrobbleToggle = (props) => { return ( <FormControl> - {apiKey ? ( - <FormControlLabel - control={ - <Switch - id={'lastfm'} - color="primary" - checked={linked || checkingLink} - disabled={linked === null || checkingLink} - onChange={toggleScrobble} - /> - } - label={ - <span>{translate('menu.personal.options.lastfmScrobbling')}</span> - } - /> - ) : ( - <Tooltip title={translate('menu.personal.options.lastfmNotConfigured')}> - <FormControlLabel - disabled={true} - control={<Switch id={'lastfm'} color="primary" />} - label={ - <span>{translate('menu.personal.options.lastfmScrobbling')}</span> - } + <FormControlLabel + control={ + <Switch + id={'lastfm'} + color="primary" + checked={linked || checkingLink} + disabled={!apiKey || linked === null || checkingLink} + onChange={toggleScrobble} /> - </Tooltip> - )} + } + label={ + <span>{translate('menu.personal.options.lastfmScrobbling')}</span> + } + /> {checkingLink && ( <Progress setLinked={setLinked} @@ -135,6 +124,11 @@ export const LastfmScrobbleToggle = (props) => { apiKey={apiKey} /> )} + {!apiKey && ( + <FormHelperText id="scrobble-lastfm-disabled-helper-text"> + {translate('menu.personal.options.lastfmNotConfigured')} + </FormHelperText> + )} </FormControl> ) }