LogoutMain.vue

<template>
  <div>
    <h5 class="card-title">{{ $t('login_headline') }}</h5>
    <div class="row" v-show="orcidLoggedIn">
      <button class="btn btn-primary w-100" @click.prevent="clickLogoutOrcid">
        <span>
          <img alt="ORCID logo" id="orcid-id-logo" src="https://orcid.org/sites/default/files/images/orcid_24x24.png" width="25" height="25" />
        </span>
        <span>  {{ $t('logout_button_orcid') }}</span>
      </button>
    </div>
    <div class="row" v-show="this.loggedInWithShibboleth">
      <button class="btn btn-primary w-100" @click.prevent="clickLogoutShibboleth">
        <span>{{ $t('logout_shibboleth') }}</span>
      </button>
    </div>
    <div class="row">
      <button class="btn btn-secondary w-100" @click.prevent="changeLogoutState">{{ $t('signup') }}</button>
    </div>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue';
import jsonp from 'jsonp';

export default Vue.extend({
  name: 'LogoutMain',
  data() {
    return {
      orcidLoggedIn: false,
    };
  },
  mounted() {
    this.getOrcidState();
  },
  props: {
    idpUrl: String,
    loggedInWithShibboleth: Boolean,
  },
  methods: {
    clickLogoutOrcid() {
      this.getOrcidState(true);
    },
    clickLogoutShibboleth() {
      window.location.href = this.idpUrl + '/idp/profile/Logout';
    },
    changeLogoutState() {
      this.$emit('changeLogoutState');
    },
    getOrcidState(logout = false) {
      const me = this;
      jsonp('https://orcid.org/userStatus.json' + ((logout) ? '?logUserOut=true' : ''),
        undefined,
        (err: any, data: any) => {
          if (err) {
            me.orcidLoggedIn = false;
          } else {
            me.orcidLoggedIn = data.loggedIn;
          }
        });
    },
  },
});
</script>

<style scoped>
</style>