added error recorder component and updated dependencies

package.json

@@ -23,6 +23,7 @@
     "npm": "^6.13.1",
     "npm-sass": "^2.3.0",
     "popper.js": "^1.15.0",
+    "sass": "^1.26.10",
     "socket.io-client": "^2.3.0",
     "vee-validate": "^2.2.4",
     "vue": "^2.6.10",

src/components/ErroneousRecorders.vue

@@ -0,0 +1,46 @@
+<template>
+    <div v-if="authenticated">
+        <p>List of recorders in error state... ;)</p>
+    </div>
+    <div v-else>
+        <p>You must be signed in in order to see recorders!</p>
+    </div>
+</template>
+
+<script lang="ts">
+  import {Component, Prop, Vue} from 'vue-property-decorator';
+
+  @Component
+  export default class ErroneousRecorders extends Vue {
+    @Prop() private msg!: string;
+
+    get authenticated() {
+      return this.$store.getters.isAuthenticated;
+    }
+
+    get recorders() {
+      return this.$store.state.recorders;
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+    h3 {
+        margin: 40px 0 0;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    li {
+        display: inline-block;
+        margin: 0 10px;
+    }
+
+    a {
+        color: #42b983;
+    }
+</style>

src/views/Home.vue

@@ -7,6 +7,9 @@
                     <h1>Welcome <span v-if="profile.last_seen!=null">back</span> {{$store.getters.getUserName}}! <span
                             v-if="profile.last_seen!=null">(Last seen: {{profile.last_seen | moment("dddd, MMMM Do YYYY")}})</span>
                     </h1>
+
+                    <ErroneousRecorders/>
+
                     <p>{{$t('Add favorite recorder:')}}</p>
                     <SelectRecorder @recorderSelected="addFavoriteRecorderToProfile"/>
 
@@ -29,6 +32,7 @@
     import {Component, Vue} from 'vue-property-decorator';
     import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
     import i18n from '@/plugins/i18n';
+    import ErroneousRecorders from '@/components/ErroneousRecorders.vue';
     import SelectRecorder from '@/components/SelectRecorder.vue';
     import RecorderState from '@/components/RecorderState.vue';
     import getRepository from '@/api/RepositoryFactory';
@@ -37,6 +41,7 @@
 
     @Component({
         components: {
+            ErroneousRecorders,
             RecorderState,
             SelectRecorder,
             HelloWorld,