Merge branch 'Topic/231-ORCiDIntegration' into 'Product/224-loginPage'

Update: ORCiD Button used (coscine/issues#231)

See merge request coscine/app/login!1

src/App.vue

@@ -33,6 +33,7 @@
                         :returnUrl="this.returnUrl"
                         @back="loginBack"
                         @clickGetLoginForm="getLoginForm"
+                        @clickGetORCiDForm="getORCiDForm"
                       />
                     </transition>
                   </div>
@@ -79,6 +80,14 @@ function getReturnUrl() {
   return returnUrl;
 }
 
+function getORCiDUrl() {
+  const hookupElement = document.getElementById('loginpage');
+  const orcidUrlString =
+    (hookupElement != null ? hookupElement.getAttribute('orcidUrl') : '') as string;
+  const orcidUrl = encodeURI(orcidUrlString);
+  return orcidUrl;
+}
+
 export default Vue.extend({
   name: 'app',
   components: {
@@ -90,6 +99,7 @@ export default Vue.extend({
       coscineImage: scriptUrl + imagePath.substring(1),
       imageEnabled,
       returnUrl: getReturnUrl(),
+      orcidUrl: getORCiDUrl(),
       currentInputCard: 'LoginMain',
     };
   },
@@ -100,6 +110,9 @@ export default Vue.extend({
     getLoginForm() {
       this.currentInputCard = 'LoginForm';
     },
+    getORCiDForm() {
+      window.location.href = this.orcidUrl;
+    },
   },
 });
 </script>

src/components/LoginMain.vue

@@ -2,13 +2,18 @@
   <div>
     <h5 class="card-title">{{ $t('login_headline') }}</h5>
     <div class="row">
-      <button class="btn btn-primary w-100" name="getLoginForm" @click.prevent="clickGetLoginForm">
+      <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>
@@ -27,6 +32,9 @@ export default Vue.extend({
     clickGetLoginForm() {
       this.$emit('clickGetLoginForm');
     },
+    clickGetORCiDForm() {
+      this.$emit('clickGetORCiDForm');
+    },
   },
 });
 </script>

src/locale/de.ts

@@ -9,6 +9,7 @@ export default {
     login_headline: 'Login',
     login_button_with_account: 'Login-Zugang',
     login_button_orcid: 'Anmelden mit ORCID ID',
+    login_button_form: 'Anmelden mit User ID',
     login_button_without_account: 'Weiter ohne Login',
     signup: 'Anmelden',
     back: 'Zurück',

src/locale/en.ts

@@ -9,6 +9,7 @@ export default {
     login_headline: 'Login',
     login_button_with_account: 'Login Access',
     login_button_orcid: 'Sign in with ORCID ID',
+    login_button_form: 'Sign in with a User ID',
     login_button_without_account: 'Continue without Login',
     signup: 'signup',
     back: 'Back',