[web] Add getters related Lastfm and Spotify in the services store

web-src/src/components/ModalDialogUpdate.vue

@@ -8,7 +8,7 @@
     <template #content>
       <div v-if="!libraryStore.updating">
         <div
-          v-if="servicesStore.isSpotifyEnabled || rss.tracks > 0"
+          v-if="servicesStore.isSpotifyActive || rss.tracks > 0"
           class="field"
         >
           <label class="label" v-text="$t('dialog.update.info')" />
@@ -18,7 +18,7 @@
                 <option value="" v-text="$t('dialog.update.all')" />
                 <option value="files" v-text="$t('dialog.update.local')" />
                 <option
-                  v-if="servicesStore.isSpotifyEnabled"
+                  v-if="servicesStore.isSpotifyActive"
                   value="spotify"
                   v-text="$t('dialog.update.spotify')"
                 />
@@ -38,7 +38,7 @@
         </control-switch>
       </div>
       <div v-else>
-        <p class="mb-3" v-text="$t('dialog.update.progress')" />
+        <div class="mb-3" v-text="$t('dialog.update.progress')" />
       </div>
     </template>
   </modal-dialog>

web-src/src/components/NavbarTop.vue

@@ -116,7 +116,7 @@ export default {
         {
           key: 'navigation.spotify',
           name: 'music-spotify',
-          show: this.servicesStore.spotify.webapi_token_valid,
+          show: this.servicesStore.isSpotifyActive,
           sub: true
         },
         {

web-src/src/components/TabsMusic.vue

@@ -41,7 +41,7 @@ export default {
           to: { name: 'music-composers' }
         }
       ]
-      if (this.servicesStore.spotify.webapi_token_valid) {
+      if (this.servicesStore.isSpotifyActive) {
         links.push({
           icon: 'spotify',
           key: 'page.music.tabs.spotify',

web-src/src/components/TabsSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <section v-if="servicesStore.isSpotifyEnabled">
+  <section v-if="servicesStore.isSpotifyActive">
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">

web-src/src/pages/PageAlbums.vue

@@ -15,7 +15,7 @@
               </template>
             </control-switch>
             <control-switch
-              v-if="servicesStore.isSpotifyEnabled"
+              v-if="servicesStore.isSpotifyActive"
               v-model="uiStore.hideSpotify"
             >
               <template #label>

web-src/src/pages/PageArtist.vue

@@ -5,7 +5,7 @@
         <list-options>
           <template #filter>
             <control-switch
-              v-if="servicesStore.isSpotifyEnabled"
+              v-if="servicesStore.isSpotifyActive"
               v-model="uiStore.hideSpotify"
             >
               <template #label>

web-src/src/pages/PageArtistTracks.vue

@@ -6,7 +6,7 @@
         <list-options>
           <template #filter>
             <control-switch
-              v-if="servicesStore.isSpotifyEnabled"
+              v-if="servicesStore.isSpotifyActive"
               v-model="uiStore.hideSpotify"
             >
               <template #label>

web-src/src/pages/PageArtists.vue

@@ -15,7 +15,7 @@
               </template>
             </control-switch>
             <control-switch
-              v-if="servicesStore.isSpotifyEnabled"
+              v-if="servicesStore.isSpotifyActive"
               v-model="uiStore.hideSpotify"
             >
               <template #label>

web-src/src/pages/PageSettingsOnlineServices.vue

@@ -8,41 +8,44 @@
         />
       </template>
       <template #content>
-        <div v-if="spotify.spotify_installed">
+        <div v-if="servicesStore.isSpotifyEnabled">
-          <div>
+          <div v-text="$t('page.settings.services.spotify.grant-access')" />
-            <p
-              class="content"
-              v-text="$t('page.settings.services.spotify.grant-access')"
-            />
-            <div class="notification help">
-              <p v-text="$t('page.settings.services.spotify.requirements')" />
-              <p v-text="spotify_required_scope.join(', ')" />
-            </div>
-            <p v-if="spotify.webapi_token_valid" class="content">
-              <span v-text="$t('page.settings.services.spotify.user')" />
-              <code v-text="spotify.webapi_user" />
-            </p>
-            <p v-if="spotify_missing_scope.length > 0" class="help is-danger">
-              <span v-text="$t('page.settings.services.spotify.reauthorize')" />
-              <code v-text="spotify_missing_scope.join()" />
-            </p>
           <div
-              v-if="
+            class="notification help"
-                !spotify.webapi_token_valid || spotify_missing_scope.length > 0
+            v-text="
+              $t('page.settings.services.spotify.requirements', {
+                scopes: servicesStore.requiredSpotifyScopes.join(', ')
+              })
             "
-              class="field"
+          />
-            >
+          <div v-if="servicesStore.isSpotifyActive">
-              <div class="control">
+            <div
+              v-text="
+                $t('page.settings.services.spotify.user', {
+                  user: servicesStore.spotify.webapi_user
+                })
+              "
+            />
+            <div
+              v-if="servicesStore.hasMissingSpotifyScopes"
+              class="notification help is-danger is-light"
+              v-text="
+                $t('page.settings.services.spotify.reauthorize', {
+                  scopes: servicesStore.missingSpotifyScopes.join(', ')
+                })
+              "
+            />
+          </div>
+          <div class="field is-grouped mt-5">
+            <div v-if="servicesStore.isAuthorizationRequired" class="control">
               <a
                 class="button"
-                  :href="spotify.oauth_uri"
+                :href="servicesStore.spotify.oauth_uri"
                 v-text="$t('page.settings.services.spotify.authorize')"
               />
             </div>
-            </div>
+            <div v-if="servicesStore.isSpotifyActive" class="control">
-            <div v-if="spotify.webapi_token_valid" class="field">
+              <button
-              <div class="control">
-                <a
                 class="button is-danger"
                 @click="logoutSpotify"
                 v-text="$t('actions.logout')"
@@ -50,7 +53,6 @@
             </div>
           </div>
         </div>
-        </div>
         <div v-else v-text="$t('page.settings.services.spotify.no-support')" />
       </template>
     </content-with-heading>
@@ -61,19 +63,13 @@
         />
       </template>
       <template #content>
-        <div v-if="lastfm.enabled">
+        <div v-if="servicesStore.isLastfmEnabled">
-          <p
+          <div v-text="$t('page.settings.services.lastfm.grant-access')" />
-            class="content"
+          <div
-            v-text="$t('page.settings.services.lastfm.grant-access')"
+            class="notification help"
+            v-text="$t('page.settings.services.lastfm.info')"
           />
-          <div v-if="lastfm.scrobbling_enabled">
+          <div v-if="!servicesStore.isLastfmActive">
-            <a
-              class="button is-danger"
-              @click="logoutLastfm"
-              v-text="$t('actions.logout')"
-            />
-          </div>
-          <div v-if="!lastfm.scrobbling_enabled">
             <form @submit.prevent="loginLastfm">
               <div class="field is-grouped">
                 <div class="control">
@@ -83,7 +79,10 @@
                     type="text"
                     :placeholder="$t('page.settings.services.username')"
                   />
-                  <p class="help is-danger" v-text="lastfm_login.errors.user" />
+                  <div
+                    class="help is-danger"
+                    v-text="lastfm_login.errors.user"
+                  />
                 </div>
                 <div class="control">
                   <input
@@ -92,7 +91,7 @@
                     type="password"
                     :placeholder="$t('page.settings.services.password')"
                   />
-                  <p
+                  <div
                     class="help is-danger"
                     v-text="lastfm_login.errors.password"
                   />
@@ -105,13 +104,16 @@
                   />
                 </div>
               </div>
-              <p class="help is-danger" v-text="lastfm_login.errors.error" />
+              <div class="help is-danger" v-text="lastfm_login.errors.error" />
-              <p
-                class="help"
-                v-text="$t('page.settings.services.lastfm.info')"
-              />
             </form>
           </div>
+          <div v-else>
+            <button
+              class="button is-danger"
+              @click="logoutLastfm"
+              v-text="$t('actions.logout')"
+            />
+          </div>
         </div>
         <div v-else v-text="$t('page.settings.services.lastfm.no-support')" />
       </template>
@@ -141,32 +143,6 @@ export default {
       }
     }
   },
-  computed: {
-    lastfm() {
-      return this.servicesStore.lastfm
-    },
-    spotify() {
-      return this.servicesStore.spotify
-    },
-    spotify_missing_scope() {
-      if (
-        this.spotify.webapi_token_valid &&
-        this.spotify.webapi_granted_scope &&
-        this.spotify.webapi_required_scope
-      ) {
-        return this.spotify.webapi_required_scope
-          .split(' ')
-          .filter((scope) => !this.spotify.webapi_granted_scope.includes(scope))
-      }
-      return []
-    },
-    spotify_required_scope() {
-      if (this.spotify.webapi_required_scope) {
-        return this.spotify.webapi_required_scope.split(' ')
-      }
-      return []
-    }
-  },
   methods: {
     loginLastfm() {
       webapi.lastfm_login(this.lastfm_login).then((response) => {
@@ -175,7 +151,6 @@ export default {
         this.lastfm_login.errors.user = ''
         this.lastfm_login.errors.password = ''
         this.lastfm_login.errors.error = ''
-
         if (!response.data.success) {
           this.lastfm_login.errors.user = response.data.errors.user
           this.lastfm_login.errors.password = response.data.errors.password

web-src/src/stores/services.js

@@ -1,10 +1,24 @@
 import { defineStore } from 'pinia'
 
 export const useServicesStore = defineStore('ServicesStore', {
-  actions: {
+  getters: {
-    isSpotifyEnabled() {
+    hasMissingSpotifyScopes: (state) => state.missingSpotifyScopes.length > 0,
-      return this.spotify.webapi_token_valid
+    isAuthorizationRequired: (state) =>
-    }
+      !state.isSpotifyActive || state.hasMissingSpotifyScopes,
+    isLastfmActive: (state) => state.lastfm.scrobbling_enabled,
+    isLastfmEnabled: (state) => state.lastfm.enabled,
+    isSpotifyActive: (state) => state.spotify.webapi_token_valid,
+    isSpotifyEnabled: (state) => state.spotify.spotify_installed,
+    grantedSpotifyScopes: (state) =>
+      state.spotify.webapi_granted_scope?.split(' ') ?? [],
+    missingSpotifyScopes(state) {
+      const scopes = new Set(state.grantedSpotifyScopes)
+      return (
+        state.requiredSpotifyScopes.filter((scope) => !scopes.has(scope)) ?? []
+      )
+    },
+    requiredSpotifyScopes: (state) =>
+      state.spotify.webapi_required_scope?.split(' ') ?? []
   },
   state: () => ({
     lastfm: {},