owntone-server/web-src/src/pages/SettingsPageOnlineServices.vue

<template>
  <div class="fd-page-with-tabs">
    <tabs-settings />
    <content-with-heading>
      <template #heading-left>
        <div class="title is-4" v-text="$t('page.settings.services.spotify.title')" />
      </template>
      <template #content>
        <div v-if="!spotify.spotify_installed" class="notification is-size-7">
          <p v-text="$t('page.settings.services.spotify.no-support')" />
        </div>
        <div v-if="spotify.spotify_installed">
          <div class="notification is-size-7">
            <b v-text="$t('page.settings.services.spotify.requirements')" />
            <span v-if="use_libspotity" v-text="$t('page.settings.services.spotify.help')" />
          </div>
          <div v-if="use_libspotity">
            <p class="content">
              <b v-text="$t('page.settings.services.spotify')" />
              <span v-text="$t('page.settings.services.spotify.credentials')" />
            </p>
            <p v-if="spotify.libspotify_logged_in" class="fd-has-margin-bottom">
              <span v-text="$t('page.settings.services.spotify.logged-as')" />
              <b><code v-text="spotify.libspotify_user" /></b>
            </p>
            <form v-if="spotify.spotify_installed && !spotify.libspotify_logged_in" @submit.prevent="login_libspotify">
              <div class="field is-grouped">
                <div class="control is-expanded">
                  <input v-model="libspotify.user" class="input" type="text" placeholder="Username" />
                  <p class="help is-danger" v-text="libspotify.errors.user" />
                </div>
                <div class="control is-expanded">
                  <input v-model="libspotify.password" class="input" type="password" placeholder="Password" />
                  <p class="help is-danger" v-text="libspotify.errors.password" />
                </div>
                <div class="control">
                  <button class="button is-info" v-text="$t('page.settings.services.login')" />
                </div>
              </div>
            </form>
            <p class="help is-danger" v-text="libspotify.errors.error" />
            <p class="help" v-text="$t('page.settings.services.spotify.help-1')" />
            <p class="help" v-text="$t('page.settings.services.spotify.help-2')" />
          </div>
          <div class="fd-has-margin-top">
            <p class="content" v-html="$t('page.settings.services.spotify.grant-access')" />
            <p v-if="spotify.webapi_token_valid">
              <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 class="field fd-has-margin-top">
              <div class="control">
                <a class="button" :class="{ 'is-info': !spotify.webapi_token_valid || spotify_missing_scope.length > 0 }" :href="spotify.oauth_uri" v-text="$t('page.settings.services.spotify.authorize')" />
              </div>
            </div>
            <p class="help">
              <span v-text="$t('page.settings.services.spotify.scopes')" />
              <code v-text="spotify_required_scope.join()" />
            </p>
            <div v-if="spotify.webapi_token_valid" class="field fd-has-margin-top">
              <div class="control">
                <a class="button is-danger" @click="logout_spotify" v-text="$t('page.settings.services.logout')" />
              </div>
            </div>
          </div>
        </div>
      </template>
    </content-with-heading>
    <content-with-heading>
      <template #heading-left>
        <div class="title is-4" v-text="$t('page.settings.services.lastfm.title')" />
      </template>
      <template #content>
        <div v-if="!lastfm.enabled" class="notification is-size-7">
          <p v-text="$t('page.settings.services.lastfm.no-support')" />
        </div>
        <div v-if="lastfm.enabled">
          <p class="content" v-html="$t('page.settings.services.lastfm.grant-access')" />
          <div v-if="lastfm.scrobbling_enabled">
            <a class="button" @click="logoutLastfm" v-text="$t('page.settings.services.lastfm.stop-scrobbling')" />
          </div>
          <div v-if="!lastfm.scrobbling_enabled">
            <form @submit.prevent="login_lastfm">
              <div class="field is-grouped">
                <div class="control is-expanded">
                  <input v-model="lastfm_login.user" class="input" type="text" placeholder="Username" />
                  <p class="help is-danger" v-text="lastfm_login.errors.user" />
                </div>
                <div class="control is-expanded">
                  <input v-model="lastfm_login.password" class="input" type="password" placeholder="Password" />
                  <p class="help is-danger" v-text="lastfm_login.errors.password" />
                </div>
                <div class="control">
                  <button class="button is-info" type="submit" v-text="$t('page.settings.services.login')" />
                </div>
              </div>
              <p class="help is-danger" v-text="lastfm_login.errors.error" />
              <p class="help" v-text="$t('page.settings.services.lastfm.info')" />
            </form>
          </div>
        </div>
      </template>
    </content-with-heading>
  </div>
</template>

<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import TabsSettings from '@/components/TabsSettings.vue'
import webapi from '@/webapi'

export default {
  name: 'SettingsPageOnlineServices',
  components: { ContentWithHeading, TabsSettings },

  filters: {
    join(array) {
      return array.join(', ')
    }
  },

  data() {
    return {
      libspotify: {
        user: '',
        password: '',
        errors: { user: '', password: '', error: '' }
      },
      lastfm_login: {
        user: '',
        password: '',
        errors: { user: '', password: '', error: '' }
      }
    }
  },

  computed: {
    lastfm() {
      return this.$store.state.lastfm
    },

    spotify() {
      return this.$store.state.spotify
    },

    spotify_required_scope() {
      if (this.spotify.webapi_required_scope) {
        return this.spotify.webapi_required_scope.split(' ')
      }
      return []
    },

    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.indexOf(scope) < 0
          )
      }
      return []
    },

    use_libspotify() {
      return this.$store.state.config.use_libspotify
    }
  },

  methods: {
    login_libspotify() {
      webapi.spotify_login(this.libspotify).then((response) => {
        this.libspotify.user = ''
        this.libspotify.password = ''
        this.libspotify.errors.user = ''
        this.libspotify.errors.password = ''
        this.libspotify.errors.error = ''

        if (!response.data.success) {
          this.libspotify.errors.user = response.data.errors.user
          this.libspotify.errors.password = response.data.errors.password
          this.libspotify.errors.error = response.data.errors.error
        }
      })
    },

    logout_spotify() {
      webapi.spotify_logout()
    },

    login_lastfm() {
      webapi.lastfm_login(this.lastfm_login).then((response) => {
        this.lastfm_login.user = ''
        this.lastfm_login.password = ''
        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
          this.lastfm_login.errors.error = response.data.errors.error
        }
      })
    },

    logoutLastfm() {
      webapi.lastfm_logout()
    }
  }
}
</script>

<style></style>