feat: Add frontend mocking using MockServiceWorker

frontend/src/components/Home.vue

@@ -73,7 +73,9 @@
             rounded="lg"
             title="Internet certificate support"
             variant="text"
-          />
+          >
+            {{ loggedInUser?.name }}
+          </v-card>
         </v-col>
       </v-row>
     </v-responsive>
@@ -81,5 +83,12 @@
 </template>
 
 <script setup lang="ts">
+import {onMounted, ref} from "vue";
+
+const loggedInUser = ref<{name: string} | null>(null);
+
+onMounted(async () => {
+  loggedInUser.value = await (await fetch('http://localhost:8080/api/v1/users/self')).json();
+})
   //
 </script>

frontend/src/main.ts

@@ -1,9 +1,14 @@
 import { registerPlugins } from '@/plugins'
-
+import { setupBackendMocking } from '@/plugins/mock-service-worker';
 import App from './App.vue'
 
 import { createApp } from 'vue'
 
+
+if (import.meta.env.DEV) {
+    setupBackendMocking().then(worker => worker.start());
+}
+
 const app = createApp(App)
 
 registerPlugins(app)

frontend/src/plugins/mock-service-worker.ts

@@ -0,0 +1,19 @@
+import {http, HttpResponse} from "msw";
+import {setupWorker} from "msw/browser";
+
+export const MOCK_BASEURL = "http://localhost:8080";
+
+const setupHandlers = async () => {
+  return [
+    http.get(`${MOCK_BASEURL}/api/v1/users/self`, () => HttpResponse.json({
+      id: window.crypto.randomUUID(),
+      name: 'Max Mustermann',
+      mail: 'testmail@example.com',
+    })),
+  ]
+}
+
+export async function setupBackendMocking() {
+  const handlers = await setupHandlers();
+  return setupWorker(...handlers);
+}

frontend/vite.config.mts

@@ -1,7 +1,6 @@
 import Components from 'unplugin-vue-components/vite'
 import Vue from '@vitejs/plugin-vue'
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
-import basicSSL from "@vitejs/plugin-basic-ssl";
 import ViteFonts from 'unplugin-fonts/vite'
 
 import VueRouter from 'unplugin-vue-router/vite'
@@ -10,9 +9,6 @@ import { fileURLToPath, URL } from 'node:url'
 
 export default defineConfig({
   plugins: [
-    basicSSL({
-      name: 'dev-cert'
-    }),
     VueRouter(),
     Vue({
       template: { transformAssetUrls },