LoginMain.vue

<template>
  <div>
    <h5 class="card-title">{{ $t('login_headline') }}</h5>
    <div class="row">
      <button class="btn btn-primary w-100" name="getORCiDForm" @click.prevent="clickGetORCiDForm">
        <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('login_button_orcid') }}</span>
      </button>
    </div>
    <div class="row">
      <button class="btn btn-primary w-100" name="getLoginForm" @click.prevent="clickGetLoginForm">
        {{ $t('login_button_form') }}
      </button>
    </div>
    <div class="row">
      <button class="btn btn-secondary w-100" disabled>{{ $t('login_button_without_account') }}</button>
    </div>
  </div>
</template>

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

export default Vue.extend({
  name: 'LoginMain',
  props: {
    returnUrl: String,
  },
  methods: {
    clickGetLoginForm() {
      this.$emit('clickGetLoginForm');
    },
    clickGetORCiDForm() {
      this.$emit('clickGetORCiDForm');
    },
  },
});
</script>

<style scoped>
</style>