feat: implement unauthorized error handling and login popup

public/src/views/PlanView.vue

@@ -2,7 +2,7 @@
 
 import {computed, onMounted, reactive, ref, toRaw, watch} from "vue";
 import TablePlan from "@/components/TablePlan.vue";
-import {API} from "@/services/api";
+import {API, UnauthorizedError} from "@/services/api";
 import type {Gottesdienst, GottesdienstGroup, Mark, SimplifiedMinistrant} from "@/models/models";
 import MobilePlan from "@/components/MobilePlan.vue";
 import PlanActionBar from "@/components/PlanActionBar.vue";
@@ -17,6 +17,7 @@ import {useRoute, useRouter} from "vue-router";
 import debounce from "underscore/modules/debounce.js"
 import SavingIndicator from "@/components/SavingIndicator.vue";
 import ImportZelebrationsplanDialog from "@/components/dialog/ImportZelebrationsplanDialog.vue";
+import {LoginService} from "@/services/LoginService";
 
 const MAX_WIDTH_MOBILE = 600;
 
@@ -56,11 +57,23 @@ watch(() => route.params.id, async (value, oldValue) => {
 })
 
 async function loadPlan() {
-    const { ministranten, gottesdienste, marks} = await API.getPlan(planId.value)
-    plan.ministranten = ministranten
-    plan.gottesdienste = gottesdienste
-    plan.marks = marks
-    Auth.checkForToken()
+    try {
+        const { ministranten, gottesdienste, marks} = await API.getPlan(planId.value)
+        plan.ministranten = ministranten
+        plan.gottesdienste = gottesdienste
+        plan.marks = marks
+        Auth.checkForToken()
+    } catch (e: any) {
+        if(e instanceof UnauthorizedError) {
+            LoginService.showLoginPopup()
+            let subscription = Auth.loggedInSubject.subscribe((loggedIn) => {
+                subscription.unsubscribe()
+                if(loggedIn) {
+                    loadPlan()
+                }
+            })
+        }
+    }
 }
 
 Auth.loggedInSubject.subscribe(async (loggedIn) => {