LoginMain.vue

<template>
  <div>
    <h5 class="card-title">{{ $t('login_headline') }}</h5>
    <div v-if="showInstitutes">
      <login-institute @closeInstituteSelection="changeInstitutesVisibility"></login-institute>
    </div>
    <div v-else>
      <div>
        <button class="btn btn-primary w-100" name="getORCiDForm" @click.prevent="clickGetORCiDForm">
          <span>
            <img alt="ORCID logo" id="orcid-id-logo" src='@/assets/orcid_24x24.png'  width="23" height="20" />
          </span>
          <span>  {{ $t('login_button_orcid') }}</span>
        </button>
      </div>
      <div v-if="wasPreviouslyAuthenticated">
        <b-button class="w-100" variant="primary" @click="loginInstitutePage">{{ storedValue.DisplayName }}</b-button>
        <input type="hidden" name="wa" value="wsignin1.0" />
      </div>
      <div>
        <b-button class="w-100" variant="primary" @click="changeInstitutesVisibility">{{ $t('other_institutes') }}</b-button>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue';
import LoginInstitute from './LoginInstitute.vue';
import * as linkUtil from '@/util/linkUtil';

export default Vue.extend({
  name: 'LoginMain',
  components: {
    LoginInstitute,
  },
  data() {
    return {
      wasPreviouslyAuthenticated: false,
      showInstitutes: false,
      storedValue: null as Object | null,
    };
  },
  props: {
    returnUrl: String,
  },
  created() {
    const storedValue = localStorage.getItem('coscine.login.storedData');
    if (storedValue !== null) {
      this.storedValue = JSON.parse(storedValue);
      this.wasPreviouslyAuthenticated = true;
    }
  },
  methods: {
    loginInstitutePage() {
      const entityId = (this.storedValue as any).entityID;
      if (entityId !== null) {
        window.location.href = linkUtil.getReturnUrl('Shibboleth', entityId);
      }
    },
    clickGetORCiDForm() {
      this.$emit('clickGetORCiDForm');
    },
    changeInstitutesVisibility() {
      this.showInstitutes = !this.showInstitutes;
    },
  },
});
</script>

<style scoped>
.btn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>