Commits (3)
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint",
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"@typescript-eslint/no-this-alias": [
"error",
{
allowDestructuring: false,
allowedNames: ["app", "me"],
},
],
},
};
{
"name": "@coscine/login",
"version": "1.18.1",
"version": "1.19.0",
"private": true,
"directories": {
"doc": "docs"
......@@ -39,14 +39,21 @@
"@semantic-release/npm": "^7.0.6",
"@semantic-release/release-notes-generator": "^9.0.1",
"@types/node": "^14.14.20",
"@typescript-eslint/eslint-plugin": "^4.12.0",
"@typescript-eslint/parser": "^4.12.0",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "^4.5.7",
"@vue/cli-service": "^4.5.11",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"conventional-changelog-eslint": "3.0.9",
"core-js": "^3.8.2",
"eslint": "^7.20.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"fast-xml-parser": "^3.18.0",
"lint-staged": "^9.5.0",
"prettier": "^2.2.1",
"semantic-release": "^17.3.1",
"typescript": "~4.4.4",
"vue-template-compiler": "^2.6.12"
......@@ -55,6 +62,15 @@
"type": "git",
"url": "https://git.rwth-aachen.de/coscine/frontend/apps/login.git"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [
"vue-cli-service lint",
"git add"
]
},
"license": "MIT",
"packageManager": "yarn@3.1.0"
"packageManager": "yarn@3.1.1"
}
......@@ -3,8 +3,9 @@
<coscine-page-header
:coscineImage="coscineImage"
:locale="this.$root.$i18n.locale"
@changeLocale="changeLocale"/>
<br/>
@changeLocale="changeLocale"
/>
<br />
<coscine-notification-banner
v-show="displayMaintenceNotice"
id="notificationBanner"
......@@ -20,16 +21,20 @@
<div class="col-xl-2"></div>
<div class="col-xl-8">
<h1 class="headline">
{{ $t('headline') }}
{{ $t("headline") }}
<img class="logo" :src="coscineImageBlue" v-if="imageEnabled" alt />
</h1>
<div v-if="!tos" class="row">
<div class="col-sm-12 col-md-7">
<div class="alert alert-warning" role="alert">
<h5 class="alert-heading">{{ $t('alert_headline') }}</h5>
<p class="alert-title">{{ $t('alert_text1') }}
<a href="mailto:servicedesk@rwth-aachen.de?subject=Coscine%20Pilot%20Program">Servicedesk</a>
{{ $t('alert_text2') }}
<h5 class="alert-heading">{{ $t("alert_headline") }}</h5>
<p class="alert-title">
{{ $t("alert_text1") }}
<a
href="mailto:servicedesk@rwth-aachen.de?subject=Coscine%20Pilot%20Program"
>Servicedesk</a
>
{{ $t("alert_text2") }}
</p>
</div>
<div class="card bg-light mb-3 w-100">
......@@ -46,7 +51,7 @@
<div class="card-body">
<transition name="component-fade" mode="out-in">
<component
:is="(logoutState) ? logoutComponent : currentInputCard"
:is="logoutState ? logoutComponent : currentInputCard"
:returnUrl="this.returnUrl"
:idpUrl="this.idpUrl"
:loggedInWithShibboleth="this.loggedInWithShibboleth"
......@@ -64,17 +69,23 @@
hidden
class="btn btn-secondary dropdown-toggle w-100"
id="signup-toggle"
>{{ $t('signup') }}</button>
>
{{ $t("signup") }}
</button>
</div>
<div class="row">
<div class="card bg-light mb-3 w-100">
<div class="card-body">
<h5 class="card-title">{{ $t('description_headline') }}</h5>
<p class="card-text">{{ $t('description_text') }}</p>
<h5 class="card-title">{{ $t('description_help_headline') }}</h5>
<h5 class="card-title">{{ $t("description_headline") }}</h5>
<p class="card-text">{{ $t("description_text") }}</p>
<h5 class="card-title">
{{ $t("description_help_headline") }}
</h5>
<p class="card-text">
{{ $t('description_help') }}
<a href="mailto:servicedesk@rwth-aachen.de">Servicedesk</a>
{{ $t("description_help") }}
<a href="mailto:servicedesk@rwth-aachen.de"
>Servicedesk</a
>
</p>
</div>
</div>
......@@ -83,17 +94,15 @@
</div>
<div v-else class="row">
<div class="col-sm-12 col-md-12">
<TOS
:tosReturnUrl="this.tosReturnUrl"
/>
<TOS :tosReturnUrl="this.tosReturnUrl" />
</div>
</div>
</div>
</div>
<div class="col-xl-2"></div>
</div>
</div>
<coscine-page-footer
:contact="$t('contact')"
:contact="$t('contact')"
:disclaimer="$t('disclaimer')"
:help="$t('help')"
:imprint="$t('imprint')"
......@@ -102,34 +111,42 @@
</template>
<script lang="ts">
import Vue from 'vue';
import VueMarkdown from 'vue-markdown';
import LoginMain from './components/LoginMain.vue';
import LogoutMain from './components/LogoutMain.vue';
import TOS from './components/TOS.vue';
import { CoscinePageHeader, CoscinePageFooter, CoscineNotificationBanner } from '@coscine/component-library';
import '@coscine/component-library/dist/index.css';
import coscineImageBluePath from './assets/rwth_coscine_rgb.svg';
import coscineImagePath from './assets/rwth_coscine_weiss_rgb.svg';
import linkWhitePath from './assets/link_white.svg';
import mailGreyPath from './assets/mail_grey.svg';
import phoneGreyPath from './assets/phone_grey.svg';
import faxGreyPath from './assets/fax_grey.svg';
import Vue from "vue";
import VueMarkdown from "vue-markdown";
import LoginMain from "./components/LoginMain.vue";
import LogoutMain from "./components/LogoutMain.vue";
import TOS from "./components/TOS.vue";
import {
CoscinePageHeader,
CoscinePageFooter,
CoscineNotificationBanner,
} from "@coscine/component-library";
import "@coscine/component-library/dist/index.css";
import coscineImageBluePath from "./assets/rwth_coscine_rgb.svg";
import coscineImagePath from "./assets/rwth_coscine_weiss_rgb.svg";
import linkWhitePath from "./assets/link_white.svg";
import mailGreyPath from "./assets/mail_grey.svg";
import phoneGreyPath from "./assets/phone_grey.svg";
import faxGreyPath from "./assets/fax_grey.svg";
import { NoticeApi } from '@coscine/api-connection';
import * as linkUtil from './util/linkUtil';
import { NoticeApi } from "@coscine/api-connection";
import * as linkUtil from "./util/linkUtil";
let scriptPath = '';
let scriptPath = "";
let imageEnabled = false;
if (document.currentScript !== undefined) {
scriptPath = (document.currentScript as any).src as string;
imageEnabled = true;
}
const scriptUrl = (scriptPath === '') ? '/' : scriptPath.substring(0, scriptPath.indexOf('app.js'));
const rootUrl = (scriptPath.indexOf('/js') !== -1) ? scriptUrl.replace('/js', '') : scriptUrl;
const scriptUrl =
scriptPath === ""
? "/"
: scriptPath.substring(0, scriptPath.indexOf("app.js"));
const rootUrl =
scriptPath.indexOf("/js") !== -1 ? scriptUrl.replace("/js", "") : scriptUrl;
export default Vue.extend({
name: 'loginapp',
name: "loginapp",
components: {
LoginMain,
LogoutMain,
......@@ -142,17 +159,17 @@ export default Vue.extend({
computed: {
cssProps() {
return {
'--linkWhite': 'url(' + rootUrl + linkWhitePath + ') 1px 9px no-repeat',
'--mailGrey': 'url(' + rootUrl + mailGreyPath + ') 0px 6px no-repeat',
'--phoneGrey': 'url(' + rootUrl + phoneGreyPath + ') 0px 6px no-repeat',
'--faxGrey': 'url(' + rootUrl + faxGreyPath + ') 0px 6px no-repeat',
"--linkWhite": "url(" + rootUrl + linkWhitePath + ") 1px 9px no-repeat",
"--mailGrey": "url(" + rootUrl + mailGreyPath + ") 0px 6px no-repeat",
"--phoneGrey": "url(" + rootUrl + phoneGreyPath + ") 0px 6px no-repeat",
"--faxGrey": "url(" + rootUrl + faxGreyPath + ") 0px 6px no-repeat",
};
},
},
data() {
return {
bannerLink: '',
maintenanceNotices: '',
bannerLink: "",
maintenanceNotices: "",
coscineImageBlue: rootUrl + coscineImageBluePath,
coscineImage: rootUrl + coscineImagePath,
imageEnabled,
......@@ -163,63 +180,71 @@ export default Vue.extend({
orcidUrl: linkUtil.getORCiDUrl(),
logoutState: linkUtil.getIsLogout(),
loggedInWithShibboleth: linkUtil.getLoggedInWithShibboleth(),
currentInputCard: 'LoginMain',
logoutComponent: 'LogoutMain',
currentInputCard: "LoginMain",
logoutComponent: "LogoutMain",
tos: linkUtil.getIsTOS(),
news: '',
news: "",
storedUrl: {} as any,
displayMaintenceNotice: false
displayMaintenceNotice: false,
};
},
watch: {
'$i18n.locale'() {
"$i18n.locale"() {
this.retrieveNotices();
this.retrieveMaintenanceNotices();
},
},
methods: {
retrieveNotices() {
NoticeApi.getNotices('changelog', this.$i18n.locale, (response: any) => {
NoticeApi.getNotices("changelog", this.$i18n.locale, (response: any) => {
let splitArray = response.data.data.body.split(/\s(?:#{3})\s/g, 5);
splitArray = splitArray.join('##### ');
splitArray = splitArray.join("##### ");
this.news = splitArray.toString();
this.news= this.news.replace('## ', '##### ');
this.news = this.news.replace("## ", "##### ");
});
},
retrieveMaintenanceNotices() {
NoticeApi.GetMaintenance((response: any) => {
if (response.data.startsDate !== null && response.data.startsDate !== undefined) {
if (
response.data.startsDate !== null &&
response.data.startsDate !== undefined
) {
this.displayMaintenceNotice = true;
var now = new Date(Date.now());
var startDate = new Date(response.data.startsDate);
var now = new Date(Date.now());
var startDate = new Date(response.data.startsDate);
var endDate = response.data.endsDate;
if (startDate <= now && (endDate === null || new Date(endDate) >= now)) {
if (
startDate <= now &&
(endDate === null || new Date(endDate) >= now)
) {
this.bannerLink = response.data.url;
this.maintenanceNotices = this.createNotificationText(response.data.type);
this.maintenanceNotices = this.createNotificationText(
response.data.type
);
}
}
}
});
},
createNotificationText(type: any): any {
switch (type) {
case 'Störung':
return this.$t('banner.maintenance.notificationMaintenance');
case 'Teilstörung':
return this.$t('banner.maintenance.notificationPartiaMulfunction');
case 'Unterbrechung':
return this.$t('banner.maintenance.notificationInteruption');
case 'eingeschränkt betriebsfähig':
return this.$t('banner.maintenance.notificationLimitedOperability');
case 'Wartung':
return this.$t('banner.maintenance.notificationMaintenance');
case 'Teilwartung':
return this.$t('banner.maintenance.notificationPartialMaintenance');
case "Störung":
return this.$t("banner.maintenance.notificationMaintenance");
case "Teilstörung":
return this.$t("banner.maintenance.notificationPartiaMulfunction");
case "Unterbrechung":
return this.$t("banner.maintenance.notificationInteruption");
case "eingeschränkt betriebsfähig":
return this.$t("banner.maintenance.notificationLimitedOperability");
case "Wartung":
return this.$t("banner.maintenance.notificationMaintenance");
case "Teilwartung":
return this.$t("banner.maintenance.notificationPartialMaintenance");
default:
return this.$t('banner.maintenance.notificationDefaultText');
return this.$t("banner.maintenance.notificationDefaultText");
}
},
loginBack() {
this.currentInputCard = 'LoginMain';
this.currentInputCard = "LoginMain";
},
getORCiDForm() {
window.location.href = this.orcidUrl;
......@@ -228,38 +253,37 @@ export default Vue.extend({
this.logoutState = !this.logoutState;
},
changeLocale() {
if (this.$root.$i18n.locale === 'en') {
this.$root.$i18n.locale = 'de';
if (this.$root.$i18n.locale === "en") {
this.$root.$i18n.locale = "de";
} else {
this.$root.$i18n.locale = 'en';
this.$root.$i18n.locale = "en";
}
},
},
created() {
this.retrieveNotices();
this.retrieveMaintenanceNotices();
}
},
});
</script>
<style>
.list-group-item-action {
background: var(--linkWhite)!important;
background: var(--linkWhite) !important;
}
#mail.list-group-item-action{
background: var(--mailGrey)!important;
#mail.list-group-item-action {
background: var(--mailGrey) !important;
}
#phone.list-group-item {
background: var(--phoneGrey)!important;
background: var(--phoneGrey) !important;
}
#fax.list-group-item {
background: var(--faxGrey)!important;
background: var(--faxGrey) !important;
}
#wrap .navbar .lang {
padding-top: .5rem!important;
padding-top: 0.5rem !important;
}
.siteIcon {
......@@ -275,7 +299,7 @@ export default Vue.extend({
height: 0px;
width: 0px;
overflow: visible;
line-height: 0px;
line-height: 0px;
}
.coscineSiteIcon img {
......@@ -340,7 +364,8 @@ export default Vue.extend({
transition: opacity 0.3s ease;
}
.component-fade-enter, .component-fade-leave-to {
.component-fade-enter,
.component-fade-leave-to {
opacity: 0;
}
......@@ -350,11 +375,11 @@ export default Vue.extend({
.alert-heading {
text-align: left;
border-radius: .2rem;
border-radius: 0.2rem;
}
.alert-title {
text-align: left;
border-radius: .2rem;
border-radius: 0.2rem;
}
#notificationBanner {
margin-bottom: 4px;
......@@ -362,10 +387,10 @@ export default Vue.extend({
}
.multiselect__option--highlight {
background:#00549f;
background: #00549f;
}
.multiselect__option--selected.multiselect__option--highlight {
background: #00549f;
background: #00549f;
}
.multiselect__content-wrapper {
overflow-x: hidden;
......
<template>
<div class="institutes">
<b-form class="w-100" method="post">
<v-multiselect
id="instituteSelection"
v-model="selected"
:placeholder="$t('InstituteSelection')"
:options="options"
label="DisplayName"
<v-multiselect
id="instituteSelection"
v-model="selected"
:placeholder="$t('InstituteSelection')"
:options="options"
label="DisplayName"
track-by="DisplayName"
:multiple="false"
:multiple="false"
select-label=""
selected-label=""
deselect-label=""
/>
<b-form-group>
<b-button
id="backBtn"
name="back"
@click.prevent="clickBack"
>{{ $t('back') }}</b-button>
<b-button id="backBtn" name="back" @click.prevent="clickBack">{{
$t("back")
}}</b-button>
<b-button
id="continueBtn"
variant="primary"
name="continue"
@click="changePage"
:disabled = "selected.length === 0"
>{{ $t('continue') }}</b-button>
:disabled="selected.length === 0"
>{{ $t("continue") }}</b-button
>
</b-form-group>
</b-form>
</div>
</template>
<script lang='ts'>
import Vue from 'vue';
<script lang="ts">
import Vue from "vue";
import {BootstrapVue, BootstrapVueIcons} from 'bootstrap-vue';
import Institutes from '@/data/dfnaai.json';
import * as linkUtil from '@/util/linkUtil';
import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
import Institutes from "@/data/dfnaai.json";
import * as linkUtil from "@/util/linkUtil";
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css';
Vue.component('v-multiselect', Multiselect);
import Multiselect from "vue-multiselect";
import "vue-multiselect/dist/vue-multiselect.min.css";
Vue.component("v-multiselect", Multiselect);
Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);
export default Vue.extend({
name: 'LoginInstitute',
name: "LoginInstitute",
data() {
return {
devMachine: false,
selected: [] as any,
instituteList: Institutes,
options: [] as object [],
options: [] as Array<unknown>,
};
},
created() {
this.devMachine = window.location.href.toString().indexOf('d-sp') !== -1;
this.devMachine = window.location.href.toString().indexOf("d-sp") !== -1;
},
mounted() {
this.fillInstituteList();
},
watch: {
'$i18n.locale'() {
"$i18n.locale"() {
this.fillInstituteList();
},
},
......@@ -72,11 +71,11 @@ export default Vue.extend({
const institutes = JSON.parse(JSON.stringify(this.instituteList));
if (this.devMachine === true) {
this.options.push({
entityID: 'https://login-test.rz.rwth-aachen.de/shibboleth',
DisplayName: 'Test Shibboleth',
Logo: '',
entityID: "https://login-test.rz.rwth-aachen.de/shibboleth",
DisplayName: "Test Shibboleth",
Logo: "",
});
};
}
for (let institute in institutes) {
this.options.push({
entityID: institute,
......@@ -84,16 +83,25 @@ export default Vue.extend({
Logo: institutes[institute].Logo,
});
}
this.options.sort((a:any, b:any) => (a.DisplayName > b.DisplayName) ? 1 : ((b.DisplayName > a.DisplayName) ? -1 : 0))
this.options.sort((a: any, b: any) =>
a.DisplayName > b.DisplayName
? 1
: b.DisplayName > a.DisplayName
? -1
: 0
);
},
changePage(){
localStorage.setItem('coscine.login.storedData', JSON.stringify(this.selected));
changePage() {
localStorage.setItem(
"coscine.login.storedData",
JSON.stringify(this.selected)
);
const entityId = this.selected.entityID;
const returnUrl = linkUtil.getReturnUrl('Shibboleth', entityId);
const returnUrl = linkUtil.getReturnUrl("Shibboleth", entityId);
window.location.replace(returnUrl);
},
clickBack() {
this.$emit('closeInstituteSelection');
this.$emit("closeInstituteSelection");
},
},
});
......@@ -116,4 +124,4 @@ export default Vue.extend({
.multiselect {
margin-bottom: 0.75rem;
}
</style>
\ No newline at end of file
</style>
<template>
<div>
<h5 class="card-title">{{ $t('login_headline') }}</h5>
<h5 class="card-title">{{ $t("login_headline") }}</h5>
<div v-if="showInstitutes">
<login-institute @closeInstituteSelection="changeInstitutesVisibility"></login-institute>
<login-institute
@closeInstituteSelection="changeInstitutesVisibility"
></login-institute>
</div>
<div v-else>
<div>
<button class="btn btn-primary w-100" name="getORCiDForm" @click.prevent="clickGetORCiDForm">
<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" />
<img
alt="ORCID logo"
id="orcid-id-logo"
src="@/assets/orcid_24x24.png"
width="23"
height="20"
/>
</span>
<span> {{ $t('login_button_orcid') }}</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>
<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>
<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';
<script lang="ts">
import Vue from "vue";
import LoginInstitute from "./LoginInstitute.vue";
import * as linkUtil from "@/util/linkUtil";
export default Vue.extend({
name: 'LoginMain',
name: "LoginMain",
components: {
LoginInstitute,
},
......@@ -38,14 +57,14 @@ export default Vue.extend({
return {
wasPreviouslyAuthenticated: false,
showInstitutes: false,
storedValue: null as Object | null,
storedValue: null as Record<string, unknown> | null,
};
},
props: {
returnUrl: String,
},
created() {
const storedValue = localStorage.getItem('coscine.login.storedData');
const storedValue = localStorage.getItem("coscine.login.storedData");
if (storedValue !== null) {
this.storedValue = JSON.parse(storedValue);
this.wasPreviouslyAuthenticated = true;
......@@ -55,11 +74,11 @@ export default Vue.extend({
loginInstitutePage() {
const entityId = (this.storedValue as any).entityID;
if (entityId !== null) {
window.location.href = linkUtil.getReturnUrl('Shibboleth', entityId);
window.location.href = linkUtil.getReturnUrl("Shibboleth", entityId);
}
},
clickGetORCiDForm() {
this.$emit('clickGetORCiDForm');
this.$emit("clickGetORCiDForm");
},
changeInstitutesVisibility() {
this.showInstitutes = !this.showInstitutes;
......@@ -74,4 +93,4 @@ export default Vue.extend({
overflow: hidden;
text-overflow: ellipsis;
}
</style>
\ No newline at end of file
</style>
<template>
<div>
<h5 class="card-title">{{ $t('login_headline') }}</h5>
<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='@/assets/orcid_24x24.png' width="25" height="25" />
<img
alt="ORCID logo"
id="orcid-id-logo"
src="@/assets/orcid_24x24.png"
width="25"
height="25"
/>
</span>
<span> {{ $t('logout_button_orcid') }}</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
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>
<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';
<script lang="ts">
import Vue from "vue";
import jsonp from "jsonp";
export default Vue.extend({
name: 'LogoutMain',
name: "LogoutMain",
data() {
return {
orcidLoggedIn: false,
};
},
mounted() {
if (document.cookie.indexOf('coscine.mergetoken') !== -1) {
if (document.cookie.indexOf("coscine.mergetoken") !== -1) {
window.location.href = this.mergeReturnUrl;
return;
}
......@@ -48,14 +62,16 @@ export default Vue.extend({
this.getOrcidState(true);
},
clickLogoutShibboleth() {
window.location.href = this.idpUrl + '/idp/profile/Logout';
window.location.href = this.idpUrl + "/idp/profile/Logout";
},
changeLogoutState() {
this.$emit('changeLogoutState');
this.$emit("changeLogoutState");
},
getOrcidState(logout = false) {
const me = this;
jsonp('https://orcid.org/userStatus.json' + ((logout) ? '?logUserOut=true' : ''),
jsonp(
"https://orcid.org/userStatus.json" +
(logout ? "?logUserOut=true" : ""),
undefined,
(err: any, data: any) => {
if (err) {
......@@ -63,11 +79,11 @@ export default Vue.extend({
} else {
me.orcidLoggedIn = data.loggedIn;
}
});
}
);
},
},
});
</script>
<style scoped>
</style>
\ No newline at end of file
<style scoped></style>
......@@ -2,21 +2,41 @@
<div>
<div id="TOSAndPP" class="card bg-light w-100">
<div class="card-body">
<h5 class="card-title">{{ $t('tosppTitle') }}</h5>
<p class="card-text">{{ $t('tosBodyStart') }}<a href="https://git.rwth-aachen.de/coscine/docs/public/terms/-/blob/master/TermsOfUse.md">Link</a>{{ $t('tosBodyEnd') }}</p>
<b-form-checkbox id="checkboxTOS" v-model="checkedTOS">{{ $t('tosBodyCheckBox') }}</b-form-checkbox>
<p class="card-text">{{ $t('ppBodyStart') }}<a href="https://git.rwth-aachen.de/coscine/docs/public/terms/-/blob/master/PrivacyPolicy.md">Link</a>{{ $t('ppBodyEnd') }}</p>
<b-form-checkbox id="checkboxPP" v-model="checkedPP">{{ $t('ppBodyCheckBox') }}</b-form-checkbox>
<h5 class="card-title">{{ $t("tosppTitle") }}</h5>
<p class="card-text">
{{ $t("tosBodyStart")
}}<a
href="https://git.rwth-aachen.de/coscine/docs/public/terms/-/blob/master/TermsOfUse.md"
>Link</a
>{{ $t("tosBodyEnd") }}
</p>
<b-form-checkbox id="checkboxTOS" v-model="checkedTOS">{{
$t("tosBodyCheckBox")
}}</b-form-checkbox>
<p class="card-text">
{{ $t("ppBodyStart")
}}<a
href="https://git.rwth-aachen.de/coscine/docs/public/terms/-/blob/master/PrivacyPolicy.md"
>Link</a
>{{ $t("ppBodyEnd") }}
</p>
<b-form-checkbox id="checkboxPP" v-model="checkedPP">{{
$t("ppBodyCheckBox")
}}</b-form-checkbox>
<button
class="btn btn-primary w-100"
name="tosppContinue"
@click.prevent="accept()"
:disabled="!checkedTOS || !checkedPP"
>
{{ $t('tosppContinue') }}
{{ $t("tosppContinue") }}
</button>
<button class="btn btn-secondary w-100" name="tosppCancel" @click.prevent="cancel()">
{{ $t('tosppCancel') }}
<button
class="btn btn-secondary w-100"
name="tosppCancel"
@click.prevent="cancel()"
>
{{ $t("tosppCancel") }}
</button>
</div>
</div>
......@@ -24,11 +44,11 @@
</template>
<script lang="ts">
import Vue from 'vue';
import { TOSApi } from '@coscine/api-connection';
import Vue from "vue";
import { TOSApi } from "@coscine/api-connection";
export default Vue.extend({
name: 'TOSAndPP',
name: "TOSAndPP",
data() {
return {
checkedTOS: false,
......@@ -41,33 +61,34 @@ export default Vue.extend({
methods: {
accept() {
if (this.checkedTOS && this.checkedPP) {
TOSApi.acceptCurrentTOSVersion(this.getJWT(), (response: any) => {
location.href = this.tosReturnUrl;
});
TOSApi.acceptCurrentTOSVersion(this.getJWT(), (response: any) => {
location.href = this.tosReturnUrl;
});
}
},
cancel() {
window.location.href = '/coscine/api/Coscine.Api.STS/account/logout';
window.location.href = "/coscine/api/Coscine.Api.STS/account/logout";
},
getJWT() {
const urlParams = new URLSearchParams(window.location.search);
const jwt = urlParams.get('jwt');
return jwt !== null ? jwt : '';
const jwt = urlParams.get("jwt");
return jwt !== null ? jwt : "";
},
removeParam(key: string, sourceURL: string) {
let rtn = sourceURL.split('?')[0];
let param = '';
let rtn = sourceURL.split("?")[0];
let param = "";
let paramsArr = [];
const queryString = sourceURL.indexOf('?') !== -1 ? sourceURL.split('?')[1] : '';
if (queryString !== '') {
paramsArr = queryString.split('&');
const queryString =
sourceURL.indexOf("?") !== -1 ? sourceURL.split("?")[1] : "";
if (queryString !== "") {
paramsArr = queryString.split("&");
for (let i = paramsArr.length - 1; i >= 0; i -= 1) {
param = paramsArr[i].split('=')[0];
param = paramsArr[i].split("=")[0];
if (param === key) {
paramsArr.splice(i, 1);
}
}
rtn = rtn + '?' + paramsArr.join('&');
rtn = rtn + "?" + paramsArr.join("&");
}
return rtn;
},
......@@ -76,7 +97,7 @@ export default Vue.extend({
</script>
<style scoped>
.custom-checkbox{
.custom-checkbox {
margin-left: 1em;
margin-bottom: 0.5em;
margin-top: -0.7em;
......
declare var coscine: {
i18n: {
login: {},
},
declare const coscine: {
i18n: {
login: VueI18n.LocaleMessages | undefined;
};
};
{
"https://idp.hrz.tu-darmstadt.de/idp/shibboleth": {
"DisplayName": {
"de": "Technische Universität Darmstadt",
"en": "Technische Universität Darmstadt"
}
},
"https://idp.uni-duisburg-essen.de/idp/shibboleth": {
"DisplayName": {
"de": "Universität Duisburg-Essen",
......
import Vue from 'vue';
import LoginApp from './LoginApp.vue';
import jQuery from 'jquery';
import BootstrapVue from 'bootstrap-vue';
import '@itcenter-layout/bootstrap/dist/css/rwth-theme.css';
import '@itcenter-layout/bootstrap/dist/css/material-icons.css';
import '@itcenter-layout/masterpage/dist/css/itcenter-masterdesign-masterpage.css';
import VueI18n from 'vue-i18n';
import Vue from "vue";
import LoginApp from "./LoginApp.vue";
import jQuery from "jquery";
import BootstrapVue from "bootstrap-vue";
import "@itcenter-layout/bootstrap/dist/css/rwth-theme.css";
import "@itcenter-layout/bootstrap/dist/css/material-icons.css";
import "@itcenter-layout/masterpage/dist/css/itcenter-masterdesign-masterpage.css";
import VueI18n from "vue-i18n";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(VueI18n);
Vue.use(VueI18n);
let localeValue = ((navigator as any).language || (navigator as any).userLanguage) as string;
if (localeValue.indexOf('de') !== -1) {
localeValue = 'de';
let localeValue = ((navigator as any).language ||
(navigator as any).userLanguage) as string;
if (localeValue.indexOf("de") !== -1) {
localeValue = "de";
} else {
localeValue = 'en';
localeValue = "en";
}
jQuery(() => {
......@@ -29,5 +30,5 @@ jQuery(() => {
new Vue({
render: (h) => h(LoginApp),
i18n,
}).$mount('#loginpage');
}).$mount("#loginpage");
});
import Vue, { VNode } from 'vue';
import Vue, { VNode } from "vue";
declare global {
namespace JSX {
......
declare module '*.vue' {
import Vue from 'vue';
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
declare module '@coscine/api-connection';
declare module '@coscine/component-library';
declare module 'vue-markdown';
declare module 'vue-multiselect';
declare module '@itcenter-layout/bootstrap';
declare module '*.png' {
declare module "@coscine/api-connection";
declare module "@coscine/component-library";
declare module "vue-markdown";
declare module "vue-multiselect";
declare module "@itcenter-layout/bootstrap";
declare module "*.png" {
const value: any;
export default value;
}
declare module '*.svg' {
declare module "*.svg" {
const value: any;
export default value;
}
\ No newline at end of file
}
function getReturnUrlParam() {
const hookupElement = document.getElementById('loginpage');
const hookupElement = document.getElementById("loginpage");
const returnUrlParameters =
hookupElement != null ? hookupElement.getAttribute('returnUrl') : '';
hookupElement != null ? hookupElement.getAttribute("returnUrl") : "";
return returnUrlParameters;
}
const returnUrlParams = getReturnUrlParam();
export function getReturnUrl(method: string, entityId: string = '') {
let returnUrl = '/coscine/api/Coscine.Api.STS/' + method + '/login?returnUrl=' + returnUrlParams;
if (entityId !== '') {
returnUrl += '&entityId=' + entityId;
export function getReturnUrl(method: string, entityId = "") {
let returnUrl =
"/coscine/api/Coscine.Api.STS/" +
method +
"/login?returnUrl=" +
returnUrlParams;
if (entityId !== "") {
returnUrl += "&entityId=" + entityId;
}
return encodeURI(returnUrl);
}
export function getMergeReturnUrl() {
return getReturnUrl('Merge');
return getReturnUrl("Merge");
}
export function getTOSReturnUrl() {
return encodeURI('' + getReturnUrlParam());
return encodeURI("" + getReturnUrlParam());
}
export function getAccountReturnUrl() {
return getReturnUrl('Account');
return getReturnUrl("Account");
}
export function getIdpUrl() {
const hookupElement = document.getElementById('loginpage');
const hookupElement = document.getElementById("loginpage");
const idpUrl =
hookupElement != null ? hookupElement.getAttribute('IdpUrl') : '';
hookupElement != null ? hookupElement.getAttribute("IdpUrl") : "";
return idpUrl;
}
export function getORCiDUrl() {
const hookupElement = document.getElementById('loginpage');
const orcidUrlString =
(hookupElement != null ? hookupElement.getAttribute('orcidUrl') : '') as string;
const hookupElement = document.getElementById("loginpage");
const orcidUrlString = (
hookupElement != null ? hookupElement.getAttribute("orcidUrl") : ""
) as string;
const orcidUrl = encodeURI(orcidUrlString);
return orcidUrl;
}
export function getIsLogout() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.has('logout');
return urlParams.has("logout");
}
export function getIsTOS() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.has('tos');
return urlParams.has("tos");
}
export function getLoggedInWithShibboleth() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.has('loggedInWithShibboleth');
return urlParams.has("loggedInWithShibboleth");
}
module.exports = {
devServer: {
disableHostCheck: true,
},
publicPath: "./",
configureWebpack: {
devtool: "source-map",
devServer: {
disableHostCheck: true,
port: 9432,
},
publicPath: './',
configureWebpack: {
devtool: 'source-map',
devServer: {
port: 9432,
}
},
filenameHashing: false,
chainWebpack: config => {
config.optimization.delete('splitChunks')
},
css: {
extract: false,
},
}
\ No newline at end of file
},
filenameHashing: false,
chainWebpack: (config) => {
config.optimization.delete("splitChunks");
},
css: {
extract: false,
},
};
This diff is collapsed.