fix(frontend): fix last vue-tsc errors and enable typechecking on bui…

…ld and dev

frontend/.gitignore

@@ -7,3 +7,4 @@ node_modules
 .nuxt
 src/server/middleware/@proxy/proxy.ts
 .output
+tsconfig.tsbuildinfo

frontend/nuxt.config.ts

@@ -68,8 +68,7 @@ export default defineNuxtConfig({
     writeEarlyHints: false,
   },
   typescript: {
-    // typeCheck: "build", // TODO enable typechecking on build
-    // typeCheck: true, // uncomment to run it at dev
+    typeCheck: true,
   },
   nitro: {
     compressPublicAssets: true,

frontend/src/components/Footer.vue

@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <footer class="relative flex items-end mt-10 background-default px-8 pb-2 text-light-10 min-h-10">
+  <footer class="flex items-end mt-10 background-default px-8 pb-2 text-light-10 min-h-10">
     <div class="w-screen">
       <div class="flex flex-col gap-4 md:(flex-row-reverse gap-0) items-center justify-around mt-4 max-w-1200px m-auto text-sm">
         <div class="flex flex-col md:flex-row">

frontend/src/components/Header.vue

@@ -15,6 +15,7 @@ import Button from "~/lib/components/design/Button.vue";
 import { useAuthStore } from "~/store/useAuthStore";
 import { useSettingsStore } from "~/store/useSettingsStore";
 import { computed, useRuntimeConfig } from "#imports";
+import { useKratos } from "~/plugins/kratos";
 
 const { t } = useI18n();
 const authStore = useAuthStore();
@@ -27,6 +28,8 @@ type NavLink = {
   icon: Component;
 };
 
+const kratos = useKratos();
+
 // if we are logged in, we can trigger a login
 const hangarLink = computed(() =>
   authStore.user ? `${runtimeConfig.public.hangarHost}/login?returnUrl=${runtimeConfig.public.hangarHost}` : runtimeConfig.public.hangarHost
@@ -97,7 +100,7 @@ const navBarMenuLinksMoreFromPaper: ComputedRef<NavLink[]> = computed(() => [
           <icon-mdi-weather-night v-if="settings.darkMode" class="text-[1.2em]"></icon-mdi-weather-night>
           <icon-mdi-white-balance-sunny v-else class="text-[1.2em]"></icon-mdi-white-balance-sunny>
         </button>
-        <Button v-if="authStore.user" button-type="primary" size="small" @click="$kratos.logout()">{{ t("general.logout") }}</Button>
+        <Button v-if="authStore.user" button-type="primary" size="small" @click="kratos.logout()">{{ t("general.logout") }}</Button>
       </div>
     </nav>
   </header>

frontend/src/components/form/Form.vue

@@ -72,6 +72,10 @@ const otherNodesWithGroup = computed<UiNode[]>(() =>
 const otherNodesWithoutGroup = computed<UiNode[]>(() =>
   props.ui.nodes.filter((el) => !filteredNodes.value.includes(el) && !props.includeGroups.includes(el.group))
 );
+if (process.client && window?.location?.hash?.includes("debug")) {
+  console.log("otherNodesWithGroup", otherNodesWithGroup);
+  console.log("otherNodesWithoutGroup", otherNodesWithoutGroup);
+}
 
 const empty = computed(() => {
   if (filteredNodes.value.length === 0) {

frontend/src/components/form/FormContainer.vue

@@ -38,12 +38,11 @@
 <script lang="ts" setup>
 import { UiNode } from "@ory/kratos-client";
 import { computed, ref } from "vue";
-import Tabs, { Tab } from "~/lib/components/design/Tabs.vue";
+import Tabs from "~/lib/components/design/Tabs.vue";
+import { Tab } from "~/lib/types/components/design/Tabs";
 
 export interface FormTab extends Tab {
-  value: string;
   groups: string[];
-  header: string;
 }
 
 const props = defineProps<{

frontend/src/layouts/default.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="background-body text-[#262626] dark:text-[#E0E6f0]">
+  <div class="background-body text-[#262626] dark:text-[#E0E6f0] min-h-screen">
     <Header />
-    <Container class="mb-24 md:mb-16">
-      <slot />
-    </Container>
-    <Notifications />
-    <Footer />
+    <div class="flex flex-col justify-between">
+      <Container class="mb-24 md:mb-16">
+        <slot />
+      </Container>
+      <Notifications />
+      <Footer />
+    </div>
   </div>
 </template>
 

frontend/src/middleware/settings.global.ts

@@ -2,11 +2,12 @@ import { RouteMiddleware } from "nuxt/app";
 import { useSettingsStore } from "~/store/useSettingsStore";
 import { authLog } from "~/lib/composables/useLog";
 import { defineNuxtRouteMiddleware, useNuxtApp } from "#imports";
+import { useKratos } from "~/plugins/kratos";
 
 export default defineNuxtRouteMiddleware((async (to) => {
   const loginRequired = (to.meta?.loginRequired as boolean) || false;
   authLog("middleware... loading user (login required " + loginRequired + ")", to.fullPath);
-  await useNuxtApp().$kratos.loadUser(loginRequired);
+  await useKratos().loadUser(loginRequired);
   authLog("loaded");
   if (process.server) {
     const event = useNuxtApp().ssrContext?.event;

frontend/src/pages/account/login.vue

@@ -5,8 +5,8 @@
     <Form v-else-if="is2fa" title="Second Factor" :ui="data.ui" />
     <Form v-else :title="t('login.title')" :ui="data.ui" :tabs="tabs">
       <template #additional-buttons>
-        <Button button-type="secondary" size="medium" @click.prevent="$kratos.register()">Register</Button>
-        <Button button-type="secondary" size="medium" @click.prevent="$kratos.reset()">Forgot</Button>
+        <Button button-type="secondary" size="medium" @click.prevent="kratos.register()">Register</Button>
+        <Button button-type="secondary" size="medium" @click.prevent="kratos.reset()">Forgot</Button>
       </template>
     </Form>
   </Card>

frontend/src/pages/account/settings.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <Alert v-if="!verified" type="info" class="mb-2 cursor-pointer">
-      <a class="block" @click="$kratos.verify()">
+      <a class="block" @click="kratos.verify()">
         Your account is not verified yet, check your email!<br />
         Haven't received an email? Click here to resend!
       </a>
     </Alert>
-    <Alert v-if="verified && !aal2" type="info" class="mb-2"> You haven't set up 2FA yet! </Alert>
+    <Alert v-if="verified && !aal2" type="info" class="mb-2"> You haven't set up 2FA yet!</Alert>
     <Alert v-if="newAccount" type="info" class="mb-2">
       <a :href="runtimeConfig.public.hangarHost + '/login?returnUrl=/'">Account created! Click here to go to Hangar!</a>
     </Alert>
@@ -53,7 +53,7 @@ import { useAuthStore } from "~/store/useAuthStore";
 import AvatarChangeModal from "~/lib/components/modals/AvatarChangeModal.vue";
 import Alert from "~/lib/components/design/Alert.vue";
 import { useSettingsStore } from "~/store/useSettingsStore";
-import { computed, useAsyncData, useHead, useRuntimeConfig, watch, definePageMeta } from "#imports";
+import { computed, definePageMeta, useAsyncData, useHead, useRuntimeConfig, watch } from "#imports";
 import { useKratos } from "~/plugins/kratos";
 
 definePageMeta({

frontend/src/pages/error.vue

@@ -23,9 +23,9 @@
 
 <script lang="ts" setup>
 import Card from "~/lib/components/design/Card.vue";
-import { useHead, useNuxtApp, useRoute, useState } from "#imports";
+import { useHead, useRoute, useState } from "#imports";
+import { useKratos } from "~/plugins/kratos";
 
-const { $kratos } = useNuxtApp();
 const route = useRoute();
 
 const errorDetails = useState<object>("errorDetails");
@@ -34,7 +34,7 @@ const errorDescription = useState<string>("errorDescription");
 
 const errorId = route.query.id;
 if (errorId) {
-  errorDetails.value = await $kratos.getErrorDetails(errorId as string);
+  errorDetails.value = useKratos().getErrorDetails(errorId as string);
 } else if (route.query.error) {
   errorName.value = route.query.error as string;
   errorDescription.value = route.query.error_description as string;

frontend/src/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Card v-if="!currentUser">
     <h1 class="text-xl mb-4">You are currently not logged in.</h1>
-    <Button button-type="primary" size="medium" @click="$kratos.login()">{{ t("general.login") }}</Button>
+    <Button button-type="primary" size="medium" @click="kratos.login()">{{ t("general.login") }}</Button>
   </Card>
 </template>
 
@@ -11,10 +11,11 @@ import { useRouter } from "vue-router";
 import Card from "~/lib/components/design/Card.vue";
 import Button from "~/lib/components/design/Button.vue";
 import { useAuthStore } from "~/store/useAuthStore";
-import { computed, useHead, useNuxtApp } from "#imports";
+import { computed, useHead } from "#imports";
+import { useKratos } from "~/plugins/kratos";
 
 const { t } = useI18n();
-const { $kratos } = useNuxtApp();
+const kratos = useKratos();
 const authStore = useAuthStore();
 const router = useRouter();
 
@@ -33,7 +34,7 @@ if (currentUser.value) {
   // we don't want to cause infinite loops on auth errors
   if (authStore.error.error?.id === "session_aal2_required") {
     // but if its all2 required, we know a 2fa flow was aborted and we can just trigger it again
-    await $kratos.aal2();
+    await kratos.aal2();
   } else if (authStore.error.error.reason === "No valid session cookie found.") {
     // no chance of loop, you wanna go to login
     await router.replace("/account/login");

frontend/src/plugins/kratos.ts

@@ -1,6 +1,6 @@
 import * as https from "https";
-import { UiContainer, FrontendApiFactory, Session } from "@ory/kratos-client";
-import { AuthenticatorAssuranceLevel, SessionAuthenticationMethod, FrontendApiFp, FlowError, LogoutFlow } from "@ory/kratos-client/api";
+import { FrontendApiFactory, Session, UiContainer } from "@ory/kratos-client";
+import { AuthenticatorAssuranceLevel, FlowError, FrontendApiFp, LogoutFlow, SessionAuthenticationMethod } from "@ory/kratos-client/api";
 import axios, { AxiosError, AxiosInstance, AxiosPromise, AxiosResponse } from "axios";
 import { type H3Event, sendRedirect } from "h3";
 import { NuxtApp } from "nuxt/app";
@@ -226,12 +226,6 @@ export default defineNuxtPlugin((nuxtApp: NuxtApp) => {
   };
 });
 
-declare module "#app" {
-  interface NuxtApp {
-    $kratos: Kratos;
-  }
-}
-
 declare module "@vue/runtime-core" {
   interface ComponentCustomProperties {
     $kratos: Kratos;