Sprint/2021 2022

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>