From b27623db26ab62d6e97a80d77ee4de21d8de9bc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20Le=C3=9Fmann=20=28=40MarkL4YG=29?=
 <github@m-lessmann.de>
Date: Tue, 7 Jan 2025 12:56:39 +0100
Subject: [PATCH] feat: Add frontend mocking using MockServiceWorker

---
 frontend/src/components/Home.vue            | 11 ++++++++++-
 frontend/src/main.ts                        |  7 ++++++-
 frontend/src/plugins/mock-service-worker.ts | 19 +++++++++++++++++++
 frontend/vite.config.mts                    |  4 ----
 4 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/plugins/mock-service-worker.ts

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index 0982a85..64c98ce 100644
--- a/frontend/src/components/Home.vue
+++ b/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>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 0201f18..16d988c 100644
--- a/frontend/src/main.ts
+++ b/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)
diff --git a/frontend/src/plugins/mock-service-worker.ts b/frontend/src/plugins/mock-service-worker.ts
new file mode 100644
index 0000000..bc155fa
--- /dev/null
+++ b/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);
+}
diff --git a/frontend/vite.config.mts b/frontend/vite.config.mts
index b4bfa86..3443fa9 100644
--- a/frontend/vite.config.mts
+++ b/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 },