Commits (3)
This diff is collapsed.
......@@ -54,12 +54,15 @@
<div class="card-body">
<transition name="component-fade" mode="out-in">
<component
:is="currentInputCard"
:is="(logoutState) ? logoutComponent : currentInputCard"
:returnUrl="this.returnUrl"
:shibbolethReturnUrl="this.shibbolethReturnUrl"
:idpUrl="this.idpUrl"
:loggedInWithShibboleth="this.loggedInWithShibboleth"
@back="loginBack"
@clickGetLoginForm="getLoginForm"
@clickGetORCiDForm="getORCiDForm"
@changeLogoutState="changeLogoutState"
/>
</transition>
</div>
......@@ -113,6 +116,7 @@
import Vue from 'vue';
import LoginMain from './components/LoginMain.vue';
import LoginForm from './components/LoginForm.vue';
import LogoutMain from './components/LogoutMain.vue';
import coscineImageBlackPath from './assets/logo-coscine-black.png';
import coscineImageBluePath from './assets/logo-coscine-blue.png';
......@@ -131,24 +135,33 @@ if (document.currentScript !== undefined) {
const scriptUrl = (scriptPath === '') ? '/' : scriptPath.substring(0, scriptPath.indexOf('app.js'));
const rootUrl = (scriptPath.indexOf('/js') !== -1) ? scriptUrl.replace('/js', '') : scriptUrl;
function getReturnUrl() {
function getReturnUrlParam() {
const hookupElement = document.getElementById('loginpage');
const returnUrlParameters =
hookupElement != null ? hookupElement.getAttribute('returnUrl') : '';
return returnUrlParameters;
}
function getReturnUrl(method: string) {
const returnUrl = encodeURI(
'/coscine/api/Coscine.STS/Account/login?returnUrl=' + returnUrlParameters,
'/coscine/api/Coscine.STS/' + method + '/login?returnUrl=' + getReturnUrlParam(),
);
return returnUrl;
}
function getAccountReturnUrl() {
return getReturnUrl('Account');
}
function getShibbolethReturnUrl() {
return getReturnUrl('Shibboleth');
}
function getIdpUrl() {
const hookupElement = document.getElementById('loginpage');
const returnUrlParameters =
hookupElement != null ? hookupElement.getAttribute('returnUrl') : '';
const returnUrl = encodeURI(
'/coscine/api/Coscine.STS/Shibboleth/login?returnUrl=' + returnUrlParameters,
);
return returnUrl;
const idpUrl =
hookupElement != null ? hookupElement.getAttribute('IdpUrl') : '';
return idpUrl;
}
function getORCiDUrl() {
......@@ -159,11 +172,22 @@ function getORCiDUrl() {
return orcidUrl;
}
function getIsLogout() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.has('logout');
}
function getLoggedInWithShibboleth() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.has('loggedInWithShibboleth');
}
export default Vue.extend({
name: 'app',
components: {
LoginMain,
LoginForm,
LogoutMain,
},
computed: {
cssProps() {
......@@ -181,10 +205,14 @@ export default Vue.extend({
coscineImageBlue: rootUrl + coscineImageBluePath,
rwthImage: rootUrl + rwthImagePath,
imageEnabled,
returnUrl: getReturnUrl(),
returnUrl: getAccountReturnUrl(),
shibbolethReturnUrl: getShibbolethReturnUrl(),
idpUrl: getIdpUrl(),
orcidUrl: getORCiDUrl(),
logoutState: getIsLogout(),
loggedInWithShibboleth: getLoggedInWithShibboleth(),
currentInputCard: 'LoginMain',
logoutComponent: 'LogoutMain',
};
},
methods: {
......@@ -204,6 +232,9 @@ export default Vue.extend({
this.$root.$i18n.locale = 'en';
}
},
changeLogoutState() {
this.logoutState = !this.logoutState;
},
},
});
</script>
......
<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
......@@ -8,10 +8,12 @@ export default {
description_help: 'Schreiben Sie an ',
login_headline: 'Login',
login_button_with_account: 'Login-Zugang',
login_button_orcid: 'Anmelden mit ORCID ID',
login_button_orcid: 'Anmelden mit ORCID',
login_button_form: 'Anmelden mit User ID',
login_shibboleth: 'Anmelden mit Shibboleth',
login_button_without_account: 'Weiter ohne Login',
logout_button_orcid: 'Logout von ORCID',
logout_shibboleth: 'Logout von Shibboleth',
signup: 'Anmelden',
back: 'Zurück',
login_form_headline: 'Login mit Nutzer-ID',
......
......@@ -8,11 +8,13 @@ export default {
description_help: 'Write us at ',
login_headline: 'Login',
login_button_with_account: 'Login Access',
login_button_orcid: 'Sign in with ORCID ID',
login_button_orcid: 'Sign in with ORCID',
login_button_form: 'Sign in with a User ID',
login_shibboleth: 'Sign in with Shibboleth',
login_button_without_account: 'Continue without Login',
signup: 'signup',
logout_button_orcid: 'Logout from ORCID',
logout_shibboleth: 'Logout from Shibboleth',
signup: 'Signup',
back: 'Back',
login_form_headline: 'Login with user ID',
login_form_submit: 'Submit',
......