New: TUDa login page

.eslintrc.js

+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"],
+      },
+    ],
+  },
+};

package.json

@@ -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"
 }

src/LoginApp.vue

@@ -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

 <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

 <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>