feat: displaying error message for images when there is no vpn

src/App.vue

@@ -26,6 +26,7 @@
         :contentindex="contentindex"
         :contenttypes="contentTypes"
         :contenturls="contentUrls"
+        :errormessage="errormessage"
         :fontsize="fontsize"
         :imageurl="imageurl"
         :isloading="isLoading"
@@ -66,6 +67,7 @@ export default {
       contentindex: 0,
       contentTypes: [],
       contentUrls: [],
+      errormessage: false,
       fontsize: 16,
       imageurl: '',
       isCollection: false,
@@ -271,6 +273,18 @@ export default {
           if (data.annotationCollection) {
             this.getAnnotations(data.annotationCollection);
           }
+
+          fetch(this.imageurl).then((response) => {
+            if (response.status === 200 || response.status === 201) {
+              this.errormessage = false;
+            } else {
+              // for vpn error.
+              this.errormessage = true;
+            }
+          }).catch(() => {
+            // for CORS error.
+            this.errormessage = true;
+          });
         });
     },
     /**

src/components/notification.vue

@@ -16,7 +16,8 @@
     <q-separator inset />
 
     <q-card-section class="text-body2 text-center">
-      {{ message }}
+      <!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
+      <span v-html="message" />
     </q-card-section>
   </q-card>
 </template>

src/components/openseadragon.vue

 <template>
+  <div
+    v-if="errormessage"
+    class="q-pa-sm"
+  >
+    <Notification
+      :message="$t(messages.none)"
+      :notification-colors="config.notificationColors"
+      title-key="imageErrorTitle"
+      type="warning"
+    />
+  </div>
   <figure
+    v-else
     id="openseadragon"
     class="item"
   >
@@ -35,9 +47,22 @@ import {
   fasCompressArrowsAlt,
 } from '@quasar/extras/fontawesome-v5';
 
+import Notification from '@/components/notification.vue';
+
 export default {
   name: 'OpenSeadragon',
+  components: {
+    Notification,
+  },
   props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+    errormessage: {
+      type: Boolean,
+      default: () => false,
+    },
     imageurl: {
       type: String,
       default: () => '',
@@ -63,9 +88,16 @@ export default {
         homeButton: 'default',
         fullPageButton: 'fullscreen',
       },
+      messages: {
+        none: 'imageErrorMessage',
+      },
     };
   },
   mounted() {
+    if (this.errormessage) {
+      return;
+    }
+
     const viewer = new OpenSeadragon.Viewer(this.options);
     viewer.controlsFadeDelay = 1000;
 

src/i18n/de/index.js

@@ -18,6 +18,12 @@ export default {
   Editors: 'Herausgeber',
   hide: 'Verstecke',
   Image: 'Digitalisat',
+  imageErrorMessage: 'Einige Bilder stehen Ihnen außerhalb des Netzwerks der'
+  + ' Georg-August-Universität Göttingen nicht ohne VPN-Zugang zur Verfügung. '
+  + 'Wenn Sie Zugang erhalten möchten, nutzen Sie bitte die Anleitung der GWDG zum'
+  + ' <a href="https://docs.gwdg.de/doku.php?id=en:services:network_services:vpn:start"'
+  + 'target="_blank"> Netzwerk-Service VPN</a>.',
+  imageErrorTitle: 'Keine Bild Verfügbar',
   imageLicense: 'Bildlizenz',
   imageNotes: 'Bildnotizen',
   Increase: 'Vergrössern',

src/i18n/en-us/index.js

@@ -18,6 +18,11 @@ export default {
   Editors: 'Editors',
   hide: 'Hide',
   Image: 'Image',
+  imageErrorMessage: 'Some images are not available outside of the VPN (Virtual Private Network)'
+  + ' of the Georg-August-University Goettingen. If you like to get access please refer to the'
+  + 'guide at <a href="https://docs.gwdg.de/doku.php?id=en:services:network_services:vpn:start"'
+  + 'target="_blank"> Network Services VPN</a>.',
+  imageErrorTitle: 'No Image Available',
   imageLicense: 'Image License',
   imageNotes: 'Image Notes',
   Increase: 'Increase',

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-			"entrypoint": "",
+			"entrypoint": "https://ahikar.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
       "annotations": {
         "show": true,
         "types": [

src/views/mainview.vue

@@ -113,6 +113,10 @@ export default {
       type: String,
       default: () => '',
     },
+    errormessage: {
+      type: Boolean,
+      default: () => false,
+    },
     isloading: {
       type: Boolean,
       default: false,