Merge branch 'Product/505-pidPage' into 'Sprint/2020-19'

Product/505 pid page

See merge request coscine/app/login!47

.gitlab-ci.yml

@@ -14,6 +14,7 @@ test:
     - npm test
   except:
     refs:
+      - master
       - tags
     variables:
       - $GITLAB_USER_ID == $GIT_BOT_USER_ID
@@ -22,6 +23,7 @@ publish:
   stage: publish
   script:
     - npm run build
+    - npm test
     - npx semantic-release
   only:
     - master

package-lock.json

@@ -1200,6 +1200,21 @@
         "file-saver": "^2.0.2"
       }
     },
+    "@coscine/component-library": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@coscine/component-library/-/component-library-1.1.0.tgz",
+      "integrity": "sha512-FkaHE0dPPyg52fdK17rygRJ6EiN99gx0acawOC6Ws7vHIFvCIvvFdwD2KenbBbH2ue3qiZtwY+7EPOF6v5g+Aw==",
+      "requires": {
+        "@types/jquery": "^3.5.1",
+        "bootstrap-vue": "^2.16.0",
+        "jquery": "^3.5.1",
+        "vue": "^2.6.11",
+        "vue-i18n": "^8.21.0",
+        "vue-loading-overlay": "^3.3.3",
+        "vue-material-design-icons": "^4.8.0",
+        "vue-runtime-helpers": "^1.1.2"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -21892,6 +21907,11 @@
         }
       }
     },
+    "vue-loading-overlay": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-3.4.2.tgz",
+      "integrity": "sha512-xcB+NPjl76eA0uggm707x3ZFgrNosZXpynHipyS3K+rrK1NztOV49R1LY+/4ij5W1KYANp7eRI2EIHrxCpmWAw=="
+    },
     "vue-markdown": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/vue-markdown/-/vue-markdown-2.2.4.tgz",
@@ -21912,6 +21932,16 @@
         "markdown-it-toc-and-anchor": "^4.1.2"
       }
     },
+    "vue-material-design-icons": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.9.0.tgz",
+      "integrity": "sha512-g+4dKL2Dk0oHljLoUoeeu41z1moHaUcjEIz5H+ml52KTzimPA86W/kj9/kfbI7Ex24lEMGFAxpD6jU3rEJvlwg=="
+    },
+    "vue-runtime-helpers": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vue-runtime-helpers/-/vue-runtime-helpers-1.1.2.tgz",
+      "integrity": "sha512-pZfGp+PW/IXEOyETE09xQHR1CKkR9HfHZdnMD/FVLUNI+HxYTa82evx5WrF6Kz4s82qtqHvMZ8MZpbk2zT2E1Q=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@coscine/api-connection": "^1.21.0",
+    "@coscine/component-library": "^1.1.0",
     "@itcenter-layout/bootstrap": "^1.5.5",
     "@itcenter-layout/masterpage": "^1.3.0",
     "@types/jquery": "^3.5.2",

src/LoginApp.vue

 <template>
   <div id="wrap" :style="cssProps">
-    <RWTHHeader
+    <coscine-page-header
       :rwthImage="rwthImage"
-      :coscineImageBlack="coscineImageBlack"/>
+      :coscineImageBlack="coscineImageBlack"
+      :locale="this.$root.$i18n.locale"
+      @changeLocale="changeLocale"/>
     <div class="container-fluid app-content">
       <div class="row">
         <div class="col-xl-2"></div>
@@ -82,7 +84,12 @@
       </div>
       <div class="col-xl-2"></div>
     </div>   
-    <RWTHFooter/>
+    <coscine-page-footer
+    :contact="$t('contact')"    
+    :disclaimer="$t('disclaimer')"
+    :help="$t('help')"
+    :imprint="$t('imprint')"
+    />
   </div>
 </template>
 
@@ -92,8 +99,7 @@ import VueMarkdown from 'vue-markdown';
 import LoginMain from './components/LoginMain.vue';
 import LogoutMain from './components/LogoutMain.vue';
 import TOS from './components/TOS.vue';
-import RWTHHeader from './components/RWTHHeader.vue';
-import RWTHFooter from './components/RWTHFooter.vue';
+import { CoscinePageHeader, CoscinePageFooter } from '@coscine/component-library';
 
 import coscineImageBlackPath from './assets/logo-coscine-black.png';
 import coscineImageBluePath from './assets/logo-coscine-blue.png';
@@ -180,9 +186,9 @@ export default Vue.extend({
     LoginMain,
     LogoutMain,
     TOS,
-    RWTHHeader,
-    RWTHFooter,
     VueMarkdown,
+    CoscinePageHeader,
+    CoscinePageFooter,
   },
   computed: {
     cssProps() {
@@ -236,6 +242,13 @@ export default Vue.extend({
     changeLogoutState() {
       this.logoutState = !this.logoutState;
     },
+    changeLocale() {
+      if (this.$root.$i18n.locale === 'en') {
+        this.$root.$i18n.locale = 'de';
+      } else {
+        this.$root.$i18n.locale = 'en';
+      }
+    },
   },
   created() {
     this.retrieveNotices();
@@ -341,8 +354,7 @@ export default Vue.extend({
   transition: opacity 0.3s ease;
 }
 
-.component-fade-enter, .component-fade-leave-to
-/* .component-fade-leave-active below version 2.1.8 */ {
+.component-fade-enter, .component-fade-leave-to {
   opacity: 0;
 }
 

src/components/RWTHFooter.vue

-<template>    
-  <footer id="footer">
-    <div class="row container">
-      <div id="servicecol" class="col-xs-12 col-sm-6">
-        <div class="list-group">
-          <h2>Service</h2>
-          <a href="https://help.itc.rwth-aachen.de/service/7ab6210773b04ef28a1a8cb33628be67" class="list-group-item list-group-item-action">{{ $t('help') }}</a>
-          <a href="https://git.rwth-aachen.de/coscine/terms/-/blob/master/PrivacyPolicy.md" class="list-group-item list-group-item-action">{{ $t('disclaimer') }}</a>
-          <a href="http://www.itc.rwth-aachen.de/cms/IT-Center/Footer/Service/~epvv/Impressum/" class="list-group-item list-group-item-action">{{ $t('imprint') }}</a>
-        </div>
-      </div>
-      <div id="contactcol" class="col-xs-12 col-sm-6">
-        <div id="contact-list" class="list-group">
-          <h2 id="footerContact">{{ $t('contact') }}</h2>
-          <a id="mail" href="mailto:servicedesk@itc.rwth-aachen.de" class="list-group-item list-group-item-action">
-            servicedesk@itc.rwth-aachen.de
-          </a>
-          <span id="phone" class="list-group-item">
-            +49 241 / 80-24680
-          </span>
-          <span id="fax" class="list-group-item">
-            +49 241 / 80-22981
-          </span>
-        </div>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-  name: 'rwthfooter',
-});
-</script>
-
-<style scoped></style>

src/components/RWTHHeader.vue

-<template>    
-  <header id="header">
-    <nav id="nav-global" class="navbar rwth-black navbar-dark navbar-expand-md">
-      <div class="app-header-container">
-        <div id="DeltaSiteLogo">
-          <a id="ctl00_onetidProjectPropertyTitleGraphic" title="Team Site" class="ms-siteicon-a" href="/">
-            <img id="ctl00_onetidHeadbnnr2" class="ms-siteicon-img" name="onetidHeadbnnr0" :src="rwthImage" alt="RWTH Aachen University" data-themekey="#">
-          </a>
-        </div>      
-      </div>                        
-      <div id="DeltaCoScInESiteLogo">
-        <a id="ctl00_SPSimpleSiteLink1" title="Team Site" class="ms-siteicon-a coscineSiteIcon" href="/">
-          <img id="ctl00_SiteLogoImage1" class="ms-siteicon-img" name="onetidHeadbnnr0" :src="coscineImageBlack" alt="Coscine" data-themekey="#">
-        </a>
-        <span class="coscineSiteIconLabel">CoScInE</span>        
-      </div>
-      <ul id="nav-langsearch" class="navbar-nav ml-auto">
-        <li id="langToggle" class="next-lang" tabindex="0" aria-label="toggle language">
-          <a class="nav-link lang" href="#" id="Lang" v-on:click="changeLocale()">
-            <span id="langBox" class="language-box">{{ $t('otherLocale') }}</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </header>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-  name: 'rwthHeader',
-  props: {
-      rwthImage: String,
-      coscineImageBlack: String,
-  },
-  methods: {
-    changeLocale() {
-      if (this.$root.$i18n.locale === 'en') {
-        this.$root.$i18n.locale = 'de';
-      } else {
-        this.$root.$i18n.locale = 'en';
-      }
-    },
-  },
-});
-</script>
-
-<style scoped></style>

src/shims-vue.d.ts

@@ -4,6 +4,7 @@ declare module '*.vue' {
 }
 
 declare module '@coscine/api-connection';
+declare module '@coscine/component-library';
 declare module 'vue-markdown';
 
 declare module '@itcenter-layout/bootstrap';