wip: Create some frontend components to test API generation

frontend/src/pages/certificates/[fingerprint].vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+
+import { onMounted, ref } from "vue";
+import { fetchClient, type Schemas } from "@/plugins/client.ts";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const certificate = ref<Schemas["Certificate"] | null>(null);
+
+async function getCertificate() {
+  const fingerprint = route.params.fingerprint as string;
+  const response = await fetchClient.GET("/api/certificates/{fingerprint}", {
+    params: {
+      path: {
+        fingerprint,
+      }
+    }
+  });
+  certificate.value = response.data ?? null;
+}
+
+onMounted(() => {
+  getCertificate()
+});
+
+</script>
+
+<template>
+  <main>
+    <form v-if="certificate">
+      <h2>Details des Zertifikats: {{ certificate.fingerprint }}</h2>
+    </form>
+  </main>
+</template>

frontend/src/pages/certificates/index.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { fetchClient, type Schemas } from "@/plugins/client.ts";
+
+const certificates = ref<Schemas["Certificate"][]>([]);
+
+async function getCertificates() {
+  const response = await fetchClient.GET("/api/certificates");
+  certificates.value = response.data?.content ?? [];
+}
+
+onMounted(() => {
+  getCertificates();
+});
+
+</script>
+
+<template>
+  <main>
+    <h2>Currently known certificates</h2>
+    <section id="no-certs-found" v-if="certificates.length === 0">
+      <v-row>
+        <v-col cols="12" class="text-center">
+          <h3>There seems to be nothing in here.</h3>
+          <p>Why don't you start with one of the following options.</p>
+          <v-row>
+            <v-col cols="12" md="6">
+              <v-btn primary>Request new certificate</v-btn>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-btn>Import an existing certificate</v-btn>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </section>
+    <section aria-label="Bekannte Zertifikate">
+      <ul v-if="certificates.length > 0">
+        <li v-for="cert in certificates" :key="cert.fingerprint">
+          <p>{{ cert.fingerprint }}</p>
+        </li>
+      </ul>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/pages/certificates/new.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <h2>New certificate</h2>
+</template>
+
+<style scoped>
+
+</style>