New: Add Newfeed to loginApp (coscine/issues#1014)

package.json

@@ -17,11 +17,14 @@
     "@itcenter-layout/masterpage": "^1.2.9",
     "@types/jquery": "^3.5.1",
     "@types/jsonp": "^0.2.0",
+    "@types/vue-markdown": "^2.2.1",
+    "babel-runtime": "^6.26.0",
     "bootstrap-vue": "^2.16.0",
     "jquery": "^3.5.1",
     "jsonp": "^0.2.1",
     "vue": "^2.6.11",
-    "vue-i18n": "^8.21.0"
+    "vue-i18n": "^8.21.0",
+    "vue-markdown": "^2.2.4"
   },
   "devDependencies": {
     "@hutson/semantic-delivery-gitlab": "^9.1.0",

src/LoginApp.vue

@@ -23,12 +23,8 @@
               </div>
               <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>
                   <p class="card-text">
-                      {{ $t('description_help') }}
-                      <a href="mailto:servicedesk@itc.rwth-aachen.de">Servicedesk</a>
+                    <vue-markdown :source="news"></vue-markdown>
                   </p>
                 </div>
               </div>
@@ -60,6 +56,19 @@
                   id="signup-toggle"
                 >{{ $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>
+                    <p class="card-text">
+                      {{ $t('description_help') }}
+                      <a href="mailto:servicedesk@itc.rwth-aachen.de">Servicedesk</a>
+                    </p>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div v-else class="row">
@@ -79,6 +88,7 @@
 
 <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';
@@ -93,6 +103,8 @@ 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';
+
 let scriptPath = '';
 let imageEnabled = false;
 if (document.currentScript !== undefined) {
@@ -170,6 +182,7 @@ export default Vue.extend({
     TOS,
     RWTHHeader,
     RWTHFooter,
+    VueMarkdown,
   },
   computed: {
     cssProps() {
@@ -198,9 +211,22 @@ export default Vue.extend({
       currentInputCard: 'LoginMain',
       logoutComponent: 'LogoutMain',
       tos: getIsTOS(),
+      news: '',
     };
   },
+  watch: {
+    '$i18n.locale'() {
+      this.retrieveNotices();
+    },
+  },
   methods: {
+    retrieveNotices() {
+      NoticeApi.getNotices('changelog', this.$i18n.locale, (response: any) => {
+        let splitArray = response.data.data.body.split(/\s(?:#{3})\s/g, 5);
+        splitArray = splitArray.join('### ');
+        this.news = splitArray.toString();
+      });
+    },
     loginBack() {
       this.currentInputCard = 'LoginMain';
     },
@@ -211,6 +237,9 @@ export default Vue.extend({
       this.logoutState = !this.logoutState;
     },
   },
+  created() {
+    this.retrieveNotices();
+  },
 });
 </script>
 

src/shims-vue.d.ts

@@ -4,13 +4,14 @@ declare module '*.vue' {
 }
 
 declare module '@coscine/api-connection';
+declare module 'vue-markdown';
 
-declare module '@itcenter-layout/bootstrap'
-declare module "*.png" {
+declare module '@itcenter-layout/bootstrap';
+declare module '*.png' {
   const value: any;
   export default value;
 }
-declare module "*.svg" {
+declare module '*.svg' {
   const value: any;
   export default value;
 }