Add OfflineOverlay to filemanager

dashboard/src/components/FileManager.vue

@@ -1,19 +1,53 @@
-<script>
+<script setup>
 
-export default {
-  data() {
-    return {
-    };
-  },
-  mounted() {
-    if (!localStorage.token) console.error('Set localStorage.token');
+import { ref, useTemplateRef, onMounted } from 'vue';
+import { fetcher } from 'pankow';
+import OfflineOverlay from '../components/OfflineOverlay.vue';
+import ProfileModel from '../models/ProfileModel.js';
+
+const profileModel = ProfileModel.create();
+
+const offlineOverlay = useTemplateRef('offlineOverlay');
+const ready = ref(false);
+
+function onOnline() {
+  ready.value = true;
+}
+
+fetcher.globalOptions.errorHook = (error) => {
+  // network error, request killed by browser
+  if (error instanceof TypeError) {
+    ready.value = false;
+    return offlineOverlay.value.open();
+  }
+
+  // re-login will make the code get a new token
+  if (error.status === 401) return profileModel.logout();
+
+  if (error.status === 500 || error.status === 501) {
+    // actual internal server error, most likely a bug or timeout log to console only to not alert the user
+    if (!ready.value) {
+      console.error(error);
+      console.log('------\nCloudron Internal Error\n\nIf you see this, please send a mail with above log to support@cloudron.io\n------\n');
+    }
+  }
+
+  if (error.status >= 502) {
+    // This means the box service is not reachable. We just show offline banner for now
+    ready.value = false;
+    return offlineOverlay.value.open();
   }
 };
 
+onMounted(() => {
+  ready.value = true;
+});
+
 </script>
 
 <template>
-  <!-- router-view needs some fake node first for some unknown reason -->
-  <span></span>
-  <router-view></router-view>
+  <div style="height: 100%;">
+    <OfflineOverlay ref="offlineOverlay" @online="onOnline()"/>
+    <router-view v-if="ready"></router-view>
+  </div>
 </template>