Commit 2522433c authored by Hanna Führ's avatar Hanna Führ Committed by Petar Hristov
Browse files

New: TUDa login page

parent d0c2c372
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"],
},
],
},
};
...@@ -39,14 +39,21 @@ ...@@ -39,14 +39,21 @@
"@semantic-release/npm": "^7.0.6", "@semantic-release/npm": "^7.0.6",
"@semantic-release/release-notes-generator": "^9.0.1", "@semantic-release/release-notes-generator": "^9.0.1",
"@types/node": "^14.14.20", "@types/node": "^14.14.20",
"@typescript-eslint/eslint-plugin": "^4.12.0", "@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.12.0", "@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "^4.5.7", "@vue/cli-plugin-typescript": "^4.5.7",
"@vue/cli-service": "^4.5.11", "@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", "conventional-changelog-eslint": "3.0.9",
"core-js": "^3.8.2", "core-js": "^3.8.2",
"eslint": "^7.20.0", "eslint": "^7.20.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"fast-xml-parser": "^3.18.0", "fast-xml-parser": "^3.18.0",
"lint-staged": "^9.5.0",
"prettier": "^2.2.1",
"semantic-release": "^17.3.1", "semantic-release": "^17.3.1",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"vue-template-compiler": "^2.6.12" "vue-template-compiler": "^2.6.12"
...@@ -55,6 +62,15 @@ ...@@ -55,6 +62,15 @@
"type": "git", "type": "git",
"url": "https://git.rwth-aachen.de/coscine/frontend/apps/login.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", "license": "MIT",
"packageManager": "yarn@3.1.0" "packageManager": "yarn@3.1.0"
} }
...@@ -3,8 +3,9 @@ ...@@ -3,8 +3,9 @@
<coscine-page-header <coscine-page-header
:coscineImage="coscineImage" :coscineImage="coscineImage"
:locale="this.$root.$i18n.locale" :locale="this.$root.$i18n.locale"
@changeLocale="changeLocale"/> @changeLocale="changeLocale"
<br/> />
<br />
<coscine-notification-banner <coscine-notification-banner
v-show="displayMaintenceNotice" v-show="displayMaintenceNotice"
id="notificationBanner" id="notificationBanner"
...@@ -20,16 +21,20 @@ ...@@ -20,16 +21,20 @@
<div class="col-xl-2"></div> <div class="col-xl-2"></div>
<div class="col-xl-8"> <div class="col-xl-8">
<h1 class="headline"> <h1 class="headline">
{{ $t('headline') }} {{ $t("headline") }}
<img class="logo" :src="coscineImageBlue" v-if="imageEnabled" alt /> <img class="logo" :src="coscineImageBlue" v-if="imageEnabled" alt />
</h1> </h1>
<div v-if="!tos" class="row"> <div v-if="!tos" class="row">
<div class="col-sm-12 col-md-7"> <div class="col-sm-12 col-md-7">
<div class="alert alert-warning" role="alert"> <div class="alert alert-warning" role="alert">
<h5 class="alert-heading">{{ $t('alert_headline') }}</h5> <h5 class="alert-heading">{{ $t("alert_headline") }}</h5>
<p class="alert-title">{{ $t('alert_text1') }} <p class="alert-title">
<a href="mailto:servicedesk@rwth-aachen.de?subject=Coscine%20Pilot%20Program">Servicedesk</a> {{ $t("alert_text1") }}
{{ $t('alert_text2') }} <a
href="mailto:servicedesk@rwth-aachen.de?subject=Coscine%20Pilot%20Program"
>Servicedesk</a
>
{{ $t("alert_text2") }}
</p> </p>
</div> </div>
<div class="card bg-light mb-3 w-100"> <div class="card bg-light mb-3 w-100">
...@@ -46,7 +51,7 @@ ...@@ -46,7 +51,7 @@
<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="(logoutState) ? logoutComponent : currentInputCard" :is="logoutState ? logoutComponent : currentInputCard"
:returnUrl="this.returnUrl" :returnUrl="this.returnUrl"
:idpUrl="this.idpUrl" :idpUrl="this.idpUrl"
:loggedInWithShibboleth="this.loggedInWithShibboleth" :loggedInWithShibboleth="this.loggedInWithShibboleth"
...@@ -64,17 +69,23 @@ ...@@ -64,17 +69,23 @@
hidden hidden
class="btn btn-secondary dropdown-toggle w-100" class="btn btn-secondary dropdown-toggle w-100"
id="signup-toggle" id="signup-toggle"
>{{ $t('signup') }}</button> >
{{ $t("signup") }}
</button>
</div> </div>
<div class="row"> <div class="row">
<div class="card bg-light mb-3 w-100"> <div class="card bg-light mb-3 w-100">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ $t('description_headline') }}</h5> <h5 class="card-title">{{ $t("description_headline") }}</h5>
<p class="card-text">{{ $t('description_text') }}</p> <p class="card-text">{{ $t("description_text") }}</p>
<h5 class="card-title">{{ $t('description_help_headline') }}</h5> <h5 class="card-title">
{{ $t("description_help_headline") }}
</h5>
<p class="card-text"> <p class="card-text">
{{ $t('description_help') }} {{ $t("description_help") }}
<a href="mailto:servicedesk@rwth-aachen.de">Servicedesk</a> <a href="mailto:servicedesk@rwth-aachen.de"
>Servicedesk</a
>
</p> </p>
</div> </div>
</div> </div>
...@@ -83,17 +94,15 @@ ...@@ -83,17 +94,15 @@
</div> </div>
<div v-else class="row"> <div v-else class="row">
<div class="col-sm-12 col-md-12"> <div class="col-sm-12 col-md-12">
<TOS <TOS :tosReturnUrl="this.tosReturnUrl" />
:tosReturnUrl="this.tosReturnUrl"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xl-2"></div> <div class="col-xl-2"></div>
</div> </div>
<coscine-page-footer <coscine-page-footer
:contact="$t('contact')" :contact="$t('contact')"
:disclaimer="$t('disclaimer')" :disclaimer="$t('disclaimer')"
:help="$t('help')" :help="$t('help')"
:imprint="$t('imprint')" :imprint="$t('imprint')"
...@@ -102,34 +111,42 @@ ...@@ -102,34 +111,42 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from "vue";
import VueMarkdown from 'vue-markdown'; import VueMarkdown from "vue-markdown";
import LoginMain from './components/LoginMain.vue'; import LoginMain from "./components/LoginMain.vue";
import LogoutMain from './components/LogoutMain.vue'; import LogoutMain from "./components/LogoutMain.vue";
import TOS from './components/TOS.vue'; import TOS from "./components/TOS.vue";
import { CoscinePageHeader, CoscinePageFooter, CoscineNotificationBanner } from '@coscine/component-library'; import {
import '@coscine/component-library/dist/index.css'; CoscinePageHeader,
import coscineImageBluePath from './assets/rwth_coscine_rgb.svg'; CoscinePageFooter,
import coscineImagePath from './assets/rwth_coscine_weiss_rgb.svg'; CoscineNotificationBanner,
import linkWhitePath from './assets/link_white.svg'; } from "@coscine/component-library";
import mailGreyPath from './assets/mail_grey.svg'; import "@coscine/component-library/dist/index.css";
import phoneGreyPath from './assets/phone_grey.svg'; import coscineImageBluePath from "./assets/rwth_coscine_rgb.svg";
import faxGreyPath from './assets/fax_grey.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 { NoticeApi } from "@coscine/api-connection";
import * as linkUtil from './util/linkUtil'; import * as linkUtil from "./util/linkUtil";
let scriptPath = ''; let scriptPath = "";
let imageEnabled = false; let imageEnabled = false;
if (document.currentScript !== undefined) { if (document.currentScript !== undefined) {
scriptPath = (document.currentScript as any).src as string; scriptPath = (document.currentScript as any).src as string;
imageEnabled = true; imageEnabled = true;
} }
const scriptUrl = (scriptPath === '') ? '/' : scriptPath.substring(0, scriptPath.indexOf('app.js')); const scriptUrl =
const rootUrl = (scriptPath.indexOf('/js') !== -1) ? scriptUrl.replace('/js', '') : scriptUrl; scriptPath === ""
? "/"
: scriptPath.substring(0, scriptPath.indexOf("app.js"));
const rootUrl =
scriptPath.indexOf("/js") !== -1 ? scriptUrl.replace("/js", "") : scriptUrl;
export default Vue.extend({ export default Vue.extend({
name: 'loginapp', name: "loginapp",
components: { components: {
LoginMain, LoginMain,
LogoutMain, LogoutMain,
...@@ -142,17 +159,17 @@ export default Vue.extend({ ...@@ -142,17 +159,17 @@ export default Vue.extend({
computed: { computed: {
cssProps() { cssProps() {
return { return {
'--linkWhite': 'url(' + rootUrl + linkWhitePath + ') 1px 9px no-repeat', "--linkWhite": "url(" + rootUrl + linkWhitePath + ") 1px 9px no-repeat",
'--mailGrey': 'url(' + rootUrl + mailGreyPath + ') 0px 6px no-repeat', "--mailGrey": "url(" + rootUrl + mailGreyPath + ") 0px 6px no-repeat",
'--phoneGrey': 'url(' + rootUrl + phoneGreyPath + ') 0px 6px no-repeat', "--phoneGrey": "url(" + rootUrl + phoneGreyPath + ") 0px 6px no-repeat",
'--faxGrey': 'url(' + rootUrl + faxGreyPath + ') 0px 6px no-repeat', "--faxGrey": "url(" + rootUrl + faxGreyPath + ") 0px 6px no-repeat",
}; };
}, },
}, },
data() { data() {
return { return {
bannerLink: '', bannerLink: "",
maintenanceNotices: '', maintenanceNotices: "",
coscineImageBlue: rootUrl + coscineImageBluePath, coscineImageBlue: rootUrl + coscineImageBluePath,
coscineImage: rootUrl + coscineImagePath, coscineImage: rootUrl + coscineImagePath,
imageEnabled, imageEnabled,
...@@ -163,63 +180,71 @@ export default Vue.extend({ ...@@ -163,63 +180,71 @@ export default Vue.extend({
orcidUrl: linkUtil.getORCiDUrl(), orcidUrl: linkUtil.getORCiDUrl(),
logoutState: linkUtil.getIsLogout(), logoutState: linkUtil.getIsLogout(),
loggedInWithShibboleth: linkUtil.getLoggedInWithShibboleth(), loggedInWithShibboleth: linkUtil.getLoggedInWithShibboleth(),
currentInputCard: 'LoginMain', currentInputCard: "LoginMain",
logoutComponent: 'LogoutMain', logoutComponent: "LogoutMain",
tos: linkUtil.getIsTOS(), tos: linkUtil.getIsTOS(),
news: '', news: "",
storedUrl: {} as any, storedUrl: {} as any,
displayMaintenceNotice: false displayMaintenceNotice: false,
}; };
}, },
watch: { watch: {
'$i18n.locale'() { "$i18n.locale"() {
this.retrieveNotices(); this.retrieveNotices();
this.retrieveMaintenanceNotices(); this.retrieveMaintenanceNotices();
}, },
}, },
methods: { methods: {
retrieveNotices() { 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); let splitArray = response.data.data.body.split(/\s(?:#{3})\s/g, 5);
splitArray = splitArray.join('##### '); splitArray = splitArray.join("##### ");
this.news = splitArray.toString(); this.news = splitArray.toString();
this.news= this.news.replace('## ', '##### '); this.news = this.news.replace("## ", "##### ");
}); });
}, },
retrieveMaintenanceNotices() { retrieveMaintenanceNotices() {
NoticeApi.GetMaintenance((response: any) => { 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; this.displayMaintenceNotice = true;
var now = new Date(Date.now()); var now = new Date(Date.now());
var startDate = new Date(response.data.startsDate); var startDate = new Date(response.data.startsDate);
var endDate = response.data.endsDate; 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.bannerLink = response.data.url;
this.maintenanceNotices = this.createNotificationText(response.data.type); this.maintenanceNotices = this.createNotificationText(
response.data.type
);
} }
} }
}); });
}, },
createNotificationText(type: any): any { createNotificationText(type: any): any {
switch (type) { switch (type) {
case 'Störung': case "Störung":
return this.$t('banner.maintenance.notificationMaintenance'); return this.$t("banner.maintenance.notificationMaintenance");
case 'Teilstörung': case "Teilstörung":
return this.$t('banner.maintenance.notificationPartiaMulfunction'); return this.$t("banner.maintenance.notificationPartiaMulfunction");
case 'Unterbrechung': case "Unterbrechung":
return this.$t('banner.maintenance.notificationInteruption'); return this.$t("banner.maintenance.notificationInteruption");
case 'eingeschränkt betriebsfähig': case "eingeschränkt betriebsfähig":
return this.$t('banner.maintenance.notificationLimitedOperability'); return this.$t("banner.maintenance.notificationLimitedOperability");
case 'Wartung': case "Wartung":
return this.$t('banner.maintenance.notificationMaintenance'); return this.$t("banner.maintenance.notificationMaintenance");
case 'Teilwartung': case "Teilwartung":
return this.$t('banner.maintenance.notificationPartialMaintenance'); return this.$t("banner.maintenance.notificationPartialMaintenance");
default: default:
return this.$t('banner.maintenance.notificationDefaultText'); return this.$t("banner.maintenance.notificationDefaultText");
} }
}, },
loginBack() { loginBack() {
this.currentInputCard = 'LoginMain'; this.currentInputCard = "LoginMain";
}, },
getORCiDForm() { getORCiDForm() {
window.location.href = this.orcidUrl; window.location.href = this.orcidUrl;
...@@ -228,38 +253,37 @@ export default Vue.extend({ ...@@ -228,38 +253,37 @@ export default Vue.extend({
this.logoutState = !this.logoutState; this.logoutState = !this.logoutState;
}, },
changeLocale() { changeLocale() {
if (this.$root.$i18n.locale === 'en') { if (this.$root.$i18n.locale === "en") {
this.$root.$i18n.locale = 'de'; this.$root.$i18n.locale = "de";
} else { } else {
this.$root.$i18n.locale = 'en'; this.$root.$i18n.locale = "en";
} }
}, },
}, },
created() { created() {
this.retrieveNotices(); this.retrieveNotices();
this.retrieveMaintenanceNotices(); this.retrieveMaintenanceNotices();
} },
}); });
</script> </script>
<style> <style>
.list-group-item-action { .list-group-item-action {
background: var(--linkWhite)!important; background: var(--linkWhite) !important;
} }
#mail.list-group-item-action{ #mail.list-group-item-action {
background: var(--mailGrey)!important; background: var(--mailGrey) !important;
} }
#phone.list-group-item { #phone.list-group-item {
background: var(--phoneGrey)!important; background: var(--phoneGrey) !important;
} }
#fax.list-group-item { #fax.list-group-item {
background: var(--faxGrey)!important; background: var(--faxGrey) !important;
} }
#wrap .navbar .lang { #wrap .navbar .lang {
padding-top: .5rem!important; padding-top: 0.5rem !important;
} }
.siteIcon { .siteIcon {
...@@ -275,7 +299,7 @@ export default Vue.extend({ ...@@ -275,7 +299,7 @@ export default Vue.extend({
height: 0px; height: 0px;
width: 0px; width: 0px;
overflow: visible; overflow: visible;
line-height: 0px; line-height: 0px;
} }
.coscineSiteIcon img { .coscineSiteIcon img {
...@@ -340,7 +364,8 @@ export default Vue.extend({ ...@@ -340,7 +364,8 @@ export default Vue.extend({
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.component-fade-enter, .component-fade-leave-to { .component-fade-enter,
.component-fade-leave-to {
opacity: 0; opacity: 0;
} }
...@@ -350,11 +375,11 @@ export default Vue.extend({ ...@@ -350,11 +375,11 @@ export default Vue.extend({
.alert-heading { .alert-heading {
text-align: left; text-align: left;
border-radius: .2rem; border-radius: 0.2rem;
} }
.alert-title { .alert-title {
text-align: left; text-align: left;
border-radius: .2rem; border-radius: 0.2rem;
} }
#notificationBanner { #notificationBanner {
margin-bottom: 4px; margin-bottom: 4px;
...@@ -362,10 +387,10 @@ export default Vue.extend({ ...@@ -362,10 +387,10 @@ export default Vue.extend({
} }
.multiselect__option--highlight { .multiselect__option--highlight {
background:#00549f; background: #00549f;
} }
.multiselect__option--selected.multiselect__option--highlight { .multiselect__option--selected.multiselect__option--highlight {
background: #00549f; background: #00549f;
} }
.multiselect__content-wrapper { .multiselect__content-wrapper {
overflow-x: hidden; overflow-x: hidden;
......
<template> <template>
<div class="institutes"> <div class="institutes">
<b-form class="w-100" method="post"> <b-form class="w-100" method="post">
<v-multiselect <v-multiselect
id="instituteSelection" id="instituteSelection"
v-model="selected" v-model="selected"
:placeholder="$t('InstituteSelection')" :placeholder="$t('InstituteSelection')"
:options="options" :options="options"
label="DisplayName" label="DisplayName"
track-by="DisplayName" track-by="DisplayName"
:multiple="false" :multiple="false"
select-label="" select-label=""
selected-label="" selected-label=""
deselect-label="" deselect-label=""
/> />
<b-form-group> <b-form-group>
<b-button <b-button id="backBtn" name="back" @click.prevent="clickBack">{{
id="backBtn" $t("back")
name="back" }}</b-button>
@click.prevent="clickBack"
>{{ $t('back') }}</b-button>
<b-button <b-button
id="continueBtn"