feat:#4 updated for custom ical links

frontend/src/view/UserCalendar.vue

@@ -2,8 +2,35 @@
 
 import CalendarViewer from "@/components/CalendarViewer.vue";
 import DynamicPage from "@/view/DynamicPage.vue";
+import { useI18n } from "vue-i18n";
+import { ref } from "vue";
+import { extractToken } from "@/helpers/token.ts";
+import { useToast } from "primevue/usetoast";
+import moduleStore from "@/store/moduleStore.ts";
+import tokenStore from "@/store/tokenStore.ts";
 
+const { t } = useI18n({ useScope: "global" });
+const toast = useToast();
 
+const token = ref("");
+
+function loadCalendar() {
+  try {
+    token.value = extractToken(token.value);
+  } catch (e) {
+    console.error(e);
+    toast.add({
+      severity: "error",
+      summary: t("editCalendarView.error"),
+      detail: t("editCalendarView.invalidToken"),
+      life: 3000,
+    });
+    return;
+  }
+
+  moduleStore().removeAllModules();
+  tokenStore().setToken(token.value);
+}
 
 
 </script>
@@ -16,16 +43,20 @@ import DynamicPage from "@/view/DynamicPage.vue";
   >
       <template #selection="{ flexSpecs }">
       <InputText
+        v-model="token"
         :placeholder="$t('userCalender.searchPlaceholder')"
         :class="flexSpecs"
+        @keyup.enter="loadCalendar()"
       />
       <Button
         :label="$t('userCalender.searchButton')"
         icon="pi pi-refresh"
+        @click="loadCalendar()"
       />
       </template>
       <template #content>
       <CalendarViewer
+        :token="tokenStore().token"
       />
       </template>
 </DynamicPage>