Skip to content
GitLab
Commit 2fd3f70b authored by Hanna Führ's avatar Hanna Führ
Browse files

Issue/1872 adding tu da to login page

parent d0c2c372
Expand all Hide whitespace changes
Inline Side-by-side
.eslintrc.js 0 → 100644
View file @ 2fd3f70b
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"],
},
],
},
};
src/LoginApp.vue
View file @ 2fd3f70b
......@@ -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;
......
src/components/LoginInstitute.vue
View file @ 2fd3f70b
<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>
src/components/LoginMain.vue
View file @ 2fd3f70b
<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/orci