Show failure icon on ServerCard and show error message

elan-ev · Nov 2, 2023 · 3e2314b · 3e2314b
1 parent fab8d18
commit 3e2314b
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 5 deletions.
diff --git a/assets/css/opencast.scss b/assets/css/opencast.scss
@@ -718,6 +718,11 @@ h2.oc--loadingbar, .oc--loadingbar-title {
             text-align: right;
             margin-right: 10px;
         }
+
+        .oc--admin--server-icons {
+            float: left;
+            margin-top: 8px;
+        }
     }
 
     .oc--admin--server-data {

diff --git a/vueapp/components/Config/ServerCard.vue b/vueapp/components/Config/ServerCard.vue
@@ -2,10 +2,13 @@
     <div class="oc--admin--server-card">
         <div class="oc--admin--server-image">
             <OpencastIcon />
-            <span v-if="config" class="oc--admin--server-id">
+            <span v-if="!isAddCard" class="oc--admin--server-id">
                 #{{ config.id }}
             </span>
-            <span v-else class="oc--admin--server-id">
+            <span v-if="!isAddCard && checkFailed" class="oc--admin--server-icons">
+                <studip-icon shape="exclaim-circle" role="status-red" :size="32"/>
+            </span>
+            <span v-if="isAddCard" class="oc--admin--server-id">
                 +
             </span>
         </div>
@@ -27,13 +30,16 @@
         <EditServer v-if="isShow"
             :id="config ? config.id : 'new'"
             :config="config"
-            @close="isShow = false"
+            @close="closeEditServer"
         />
     </div>
 </template>
 
 <script>
+import { mapGetters } from "vuex";
+
 import OpencastIcon from "@/components/OpencastIcon";
+import StudipIcon from '@studip/StudipIcon.vue';
 import EditServer from "@/components/Config/EditServer";
 
 export default {
@@ -52,18 +58,69 @@ export default {
 
     data() {
         return {
-            isShow: false
+            isShow: false,
+            checkFailed: false,
+            error_msg: this.$gettext('Überprüfung der LTI Verbindung fehlgeschlagen! '
+                + 'Kontrollieren Sie die eingetragenen Daten und stellen Sie sicher, '
+                + 'dass Cross-Origin Aufrufe von dieser Domain aus möglich sind! '
+                + 'Denken sie auch daran, in Opencast die korrekten access-control-allow-* '
+                + 'Header zu setzen.'
+            )
         }
     },
 
     components: {
         OpencastIcon,
         EditServer,
+        StudipIcon
+    },
+
+    computed: {
+        ...mapGetters([
+            'isLTIAuthenticated',
+            'errors'
+        ])
     },
 
     methods: {
         showEditServer() {
-            this.isShow = true
+            this.isShow = true;
+
+            if (!this.errors.find((e) => e === this.error_msg)) {
+                this.$store.dispatch('errorCommit', this.error_msg);
+            }
+        },
+
+        closeEditServer() {
+            this.$store.dispatch('errorRemove', this.error_msg);
+            this.isShow = false;
+        },
+
+        checkLTIPeriodically() {
+            let view = this;
+
+            // periodically check, if lti is authenticated
+            view.interval = setInterval(async () => {
+                await view.$store.dispatch('checkLTIAuthentication', {id: view.config.id, name: view.config.service_url});
+                // Make sure error is removed when authenticated
+                if (view.isLTIAuthenticated[view.config.id]) {
+                    view.$store.dispatch('errorRemove', this.error_msg);
+                    clearInterval(view.interval);
+                } else {
+                    view.checkFailed = true;
+                }
+
+                view.interval_counter++;
+                if (view.interval_counter > 10) {
+                    clearInterval(view.interval);
+                }
+            }, 2000);
+        }
+    },
+
+    mounted() {
+        if (!this.isAddCard) {
+            this.checkLTIPeriodically();
         }
     }
 }