Sprint/2020-02

src/components/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>
\ No newline at end of file