Commits (3)
This diff is collapsed.
{ {
"name": "@coscine/login", "name": "@coscine/login",
"version": "1.3.1", "version": "1.4.0",
"private": true, "private": true,
"directories": { "directories": {
"doc": "docs" "doc": "docs"
...@@ -14,30 +14,32 @@ ...@@ -14,30 +14,32 @@
"dependencies": { "dependencies": {
"@itcenter-layout/bootstrap": "^1.5.5", "@itcenter-layout/bootstrap": "^1.5.5",
"@itcenter-layout/masterpage": "^1.2.9", "@itcenter-layout/masterpage": "^1.2.9",
"@types/jquery": "^3.3.31", "@types/jquery": "^3.3.32",
"bootstrap-vue": "^2.4.0", "@types/jsonp": "^0.2.0",
"bootstrap-vue": "^2.4.1",
"jquery": "^3.4.1", "jquery": "^3.4.1",
"jsonp": "^0.2.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-i18n": "^8.15.3" "vue-i18n": "^8.15.3"
}, },
"devDependencies": { "devDependencies": {
"@hutson/semantic-delivery-gitlab": "^9.1.0",
"@semantic-release/commit-analyzer": "^8.0.1", "@semantic-release/commit-analyzer": "^8.0.1",
"@semantic-release/git": "^9.0.0", "@semantic-release/git": "^9.0.0",
"@semantic-release/gitlab": "^6.0.2", "@semantic-release/gitlab": "^6.0.2",
"@semantic-release/npm": "^7.0.2", "@semantic-release/npm": "^7.0.3",
"@semantic-release/release-notes-generator": "^9.0.0", "@semantic-release/release-notes-generator": "^9.0.0",
"@types/chai": "^4.1.0", "@types/chai": "^4.2.9",
"@types/mocha": "^5.2.4", "@types/mocha": "^7.0.1",
"@vue/cli-plugin-babel": "^3.5.0", "@vue/cli-plugin-babel": "^4.2.2",
"@vue/cli-plugin-typescript": "^3.5.0", "@vue/cli-plugin-typescript": "^4.2.2",
"@vue/cli-plugin-unit-mocha": "^3.5.0", "@vue/cli-plugin-unit-mocha": "^4.2.2",
"@vue/cli-service": "^3.5.0", "@vue/cli-service": "^4.2.2",
"@vue/test-utils": "1.0.0-beta.29", "@vue/test-utils": "1.0.0-beta.31",
"chai": "^4.2.0", "chai": "^4.2.0",
"semantic-release": "^17.0.3",
"typescript": "^3.7.5", "typescript": "^3.7.5",
"vue-template-compiler": "^2.5.21", "vue-template-compiler": "^2.6.11"
"semantic-release": "^17.0.2",
"@hutson/semantic-delivery-gitlab": "^9.1.0"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
......
...@@ -54,12 +54,15 @@ ...@@ -54,12 +54,15 @@
<div class="card-body"> <div class="card-body">
<transition name="component-fade" mode="out-in"> <transition name="component-fade" mode="out-in">
<component <component
:is="currentInputCard" :is="(logoutState) ? logoutComponent : currentInputCard"
:returnUrl="this.returnUrl" :returnUrl="this.returnUrl"
:shibbolethReturnUrl="this.shibbolethReturnUrl" :shibbolethReturnUrl="this.shibbolethReturnUrl"
:idpUrl="this.idpUrl"
:loggedInWithShibboleth="this.loggedInWithShibboleth"
@back="loginBack" @back="loginBack"
@clickGetLoginForm="getLoginForm" @clickGetLoginForm="getLoginForm"
@clickGetORCiDForm="getORCiDForm" @clickGetORCiDForm="getORCiDForm"
@changeLogoutState="changeLogoutState"
/> />
</transition> </transition>
</div> </div>
...@@ -113,6 +116,7 @@ ...@@ -113,6 +116,7 @@
import Vue from 'vue'; import Vue from 'vue';
import LoginMain from './components/LoginMain.vue'; import LoginMain from './components/LoginMain.vue';
import LoginForm from './components/LoginForm.vue'; import LoginForm from './components/LoginForm.vue';
import LogoutMain from './components/LogoutMain.vue';
import coscineImageBlackPath from './assets/logo-coscine-black.png'; import coscineImageBlackPath from './assets/logo-coscine-black.png';
import coscineImageBluePath from './assets/logo-coscine-blue.png'; import coscineImageBluePath from './assets/logo-coscine-blue.png';
...@@ -131,24 +135,33 @@ if (document.currentScript !== undefined) { ...@@ -131,24 +135,33 @@ if (document.currentScript !== undefined) {
const scriptUrl = (scriptPath === '') ? '/' : scriptPath.substring(0, scriptPath.indexOf('app.js')); const scriptUrl = (scriptPath === '') ? '/' : scriptPath.substring(0, scriptPath.indexOf('app.js'));
const rootUrl = (scriptPath.indexOf('/js') !== -1) ? scriptUrl.replace('/js', '') : scriptUrl; const rootUrl = (scriptPath.indexOf('/js') !== -1) ? scriptUrl.replace('/js', '') : scriptUrl;
function getReturnUrl() { function getReturnUrlParam() {
const hookupElement = document.getElementById('loginpage'); const hookupElement = document.getElementById('loginpage');
const returnUrlParameters = const returnUrlParameters =
hookupElement != null ? hookupElement.getAttribute('returnUrl') : ''; hookupElement != null ? hookupElement.getAttribute('returnUrl') : '';
return returnUrlParameters;
}
function getReturnUrl(method: string) {
const returnUrl = encodeURI( const returnUrl = encodeURI(
'/coscine/api/Coscine.STS/Account/login?returnUrl=' + returnUrlParameters, '/coscine/api/Coscine.STS/' + method + '/login?returnUrl=' + getReturnUrlParam(),
); );
return returnUrl; return returnUrl;
} }
function getAccountReturnUrl() {
return getReturnUrl('Account');
}
function getShibbolethReturnUrl() { function getShibbolethReturnUrl() {
return getReturnUrl('Shibboleth');
}
function getIdpUrl() {
const hookupElement = document.getElementById('loginpage'); const hookupElement = document.getElementById('loginpage');
const returnUrlParameters = const idpUrl =
hookupElement != null ? hookupElement.getAttribute('returnUrl') : ''; hookupElement != null ? hookupElement.getAttribute('IdpUrl') : '';
const returnUrl = encodeURI( return idpUrl;
'/coscine/api/Coscine.STS/Shibboleth/login?returnUrl=' + returnUrlParameters,
);
return returnUrl;
} }
function getORCiDUrl() { function getORCiDUrl() {
...@@ -159,11 +172,22 @@ function getORCiDUrl() { ...@@ -159,11 +172,22 @@ function getORCiDUrl() {
return orcidUrl; 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({ export default Vue.extend({
name: 'app', name: 'app',
components: { components: {
LoginMain, LoginMain,
LoginForm, LoginForm,
LogoutMain,
}, },
computed: { computed: {
cssProps() { cssProps() {
...@@ -181,10 +205,14 @@ export default Vue.extend({ ...@@ -181,10 +205,14 @@ export default Vue.extend({
coscineImageBlue: rootUrl + coscineImageBluePath, coscineImageBlue: rootUrl + coscineImageBluePath,
rwthImage: rootUrl + rwthImagePath, rwthImage: rootUrl + rwthImagePath,
imageEnabled, imageEnabled,
returnUrl: getReturnUrl(), returnUrl: getAccountReturnUrl(),
shibbolethReturnUrl: getShibbolethReturnUrl(), shibbolethReturnUrl: getShibbolethReturnUrl(),
idpUrl: getIdpUrl(),
orcidUrl: getORCiDUrl(), orcidUrl: getORCiDUrl(),
logoutState: getIsLogout(),
loggedInWithShibboleth: getLoggedInWithShibboleth(),
currentInputCard: 'LoginMain', currentInputCard: 'LoginMain',
logoutComponent: 'LogoutMain',
}; };
}, },
methods: { methods: {
...@@ -204,6 +232,9 @@ export default Vue.extend({ ...@@ -204,6 +232,9 @@ export default Vue.extend({
this.$root.$i18n.locale = 'en'; this.$root.$i18n.locale = 'en';
} }
}, },
changeLogoutState() {
this.logoutState = !this.logoutState;
},
}, },
}); });
</script> </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 { ...@@ -8,10 +8,12 @@ export default {
description_help: 'Schreiben Sie an ', description_help: 'Schreiben Sie an ',
login_headline: 'Login', login_headline: 'Login',
login_button_with_account: 'Login-Zugang', 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_button_form: 'Anmelden mit User ID',
login_shibboleth: 'Anmelden mit Shibboleth', login_shibboleth: 'Anmelden mit Shibboleth',
login_button_without_account: 'Weiter ohne Login', login_button_without_account: 'Weiter ohne Login',
logout_button_orcid: 'Logout von ORCID',
logout_shibboleth: 'Logout von Shibboleth',
signup: 'Anmelden', signup: 'Anmelden',
back: 'Zurück', back: 'Zurück',
login_form_headline: 'Login mit Nutzer-ID', login_form_headline: 'Login mit Nutzer-ID',
......
...@@ -8,11 +8,13 @@ export default { ...@@ -8,11 +8,13 @@ export default {
description_help: 'Write us at ', description_help: 'Write us at ',
login_headline: 'Login', login_headline: 'Login',
login_button_with_account: 'Login Access', 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_button_form: 'Sign in with a User ID',
login_shibboleth: 'Sign in with Shibboleth', login_shibboleth: 'Sign in with Shibboleth',
login_button_without_account: 'Continue without Login', login_button_without_account: 'Continue without Login',
signup: 'signup', logout_button_orcid: 'Logout from ORCID',
logout_shibboleth: 'Logout from Shibboleth',
signup: 'Signup',
back: 'Back', back: 'Back',
login_form_headline: 'Login with user ID', login_form_headline: 'Login with user ID',
login_form_submit: 'Submit', login_form_submit: 'Submit',
......