From b997a5c273fbe348a6535d15d45a6f79508eab7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20Le=C3=9Fmann=20=28=40Mark=2ETwoFive=29?=
 <mark.twofive@forsaken-ashbirds.net>
Date: Sun, 22 Jun 2025 13:44:14 +0200
Subject: [PATCH] wip: Create basic form for certificate creation

---
 frontend/src/App.vue                          |   5 +-
 frontend/src/components/CertificateEditor.vue |  84 +++++++++++++
 frontend/src/components/Home.vue              |  12 +-
 frontend/src/pages/cert-request.vue           |  87 ++++++++++---
 frontend/src/pages/certificates/index.vue     | 116 ++++++++++++++----
 frontend/src/pages/certificates/new.vue       |   6 +-
 frontend/src/types/certificate.d.ts           |   4 +-
 7 files changed, 261 insertions(+), 53 deletions(-)
 create mode 100644 frontend/src/components/CertificateEditor.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2bda13a..6f6e9f1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,10 @@
 <template>
   <v-app>
     <v-app-bar>
-      <v-app-bar-nav-icon icon="mdi-home" to="/"/>
+      <v-app-bar-nav-icon
+        icon="mdi-home"
+        to="/"
+      />
     </v-app-bar>
     <v-main>
       <router-view />
diff --git a/frontend/src/components/CertificateEditor.vue b/frontend/src/components/CertificateEditor.vue
new file mode 100644
index 0000000..6ddab90
--- /dev/null
+++ b/frontend/src/components/CertificateEditor.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref, useId, useTemplateRef } from "vue";
+
+const formModel = ref(false);
+const formRef = useTemplateRef("form");
+
+const domainInputId = useId();
+const domainValue = ref("");
+const primaryDomain = ref("");
+const domains = ref<string[]>([]);
+
+const domainRules = [
+  (value: string) => !!value || "A value must be provided to add the domain.",
+  (value: string) => new RegExp("^[a-z0-9][a-z0-9.]+$").test(value) || "Invalid domain characters provided. (To use some characters, convert the domain to xn-domain format.)",
+]
+
+function addDomain() {
+  if (formRef.value?.errors.some(({id}) => domainInputId === id)) {
+    return;
+  }
+
+  if (!primaryDomain.value) {
+    primaryDomain.value = domainValue.value;
+  }
+  domains.value.push(domainValue.value);
+  domainValue.value = "";
+}
+
+const isSubmitting = ref(false);
+async function submitNewCertificate() {
+
+}
+
+</script>
+
+<template>
+  <v-form
+    ref="form"
+    v-model="formModel"
+    :disabled="isSubmitting"
+    @submit="submitNewCertificate"
+  >
+    <h2>New certificate</h2>
+    <fieldset>
+      <legend>Subject details</legend>
+      <v-text-field
+        :id="domainInputId"
+        v-model="domainValue"
+        label="Domain(s)"
+        :rules="domainRules"
+        @keydown.enter="addDomain"
+      />
+      <ul v-if="domains.length">
+        <li
+          v-for="domain in domains"
+          :key="domain"
+        >
+          <span>{{ domain }}</span>
+          <v-tooltip
+            v-if="primaryDomain === domain"
+            text="This is the primary domain for this certificate. It will be used for the certificate common name."
+          >
+            <template #activator="{ props }">
+              <v-icon
+                v-bind="props"
+                icon="mdi-start-circle-outline"
+              />
+            </template>
+          </v-tooltip>
+        </li>
+      </ul>
+    </fieldset>
+    <v-btn
+      class="w-100 w-md-auto ml-md-auto"
+      type="submit"
+    >
+      Send certificate request
+    </v-btn>
+  </v-form>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index 4906cef..5d9040e 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -5,8 +5,12 @@
       max-width="900"
     >
       <div class="text-center">
-        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-        <h1 class="text-h2 font-weight-bold">home-cert-manager</h1>
+        <div class="text-body-2 font-weight-light mb-n1">
+          Welcome to
+        </div>
+        <h1 class="text-h2 font-weight-bold">
+          home-cert-manager
+        </h1>
       </div>
 
       <div class="py-4" />
@@ -26,7 +30,9 @@
             </template>
 
             <template #title>
-              <h2 class="text-h5 font-weight-bold">Get started</h2>
+              <h2 class="text-h5 font-weight-bold">
+                Get started
+              </h2>
             </template>
           </v-card>
         </v-col>
diff --git a/frontend/src/pages/cert-request.vue b/frontend/src/pages/cert-request.vue
index 1a7f060..7ecb95e 100644
--- a/frontend/src/pages/cert-request.vue
+++ b/frontend/src/pages/cert-request.vue
@@ -5,7 +5,10 @@
       <v-form v-model="valid">
         <v-container>
           <v-row>
-            <v-col cols="12" md="4">
+            <v-col
+              cols="12"
+              md="4"
+            >
               <v-text-field
                 v-model="subject.country"
                 :rules="subject.countryRules"
@@ -13,7 +16,10 @@
                 required
               />
             </v-col>
-            <v-col cols="12" md="4">
+            <v-col
+              cols="12"
+              md="4"
+            >
               <v-text-field
                 v-model="subject.state"
                 :counter="10"
@@ -23,7 +29,10 @@
               />
             </v-col>
 
-            <v-col cols="12" md="4">
+            <v-col
+              cols="12"
+              md="4"
+            >
               <v-text-field
                 v-model="subject.city"
                 :rules="subject.cityRules"
@@ -33,7 +42,10 @@
             </v-col>
           </v-row>
           <v-row>
-            <v-col cols="12" md="4">
+            <v-col
+              cols="12"
+              md="4"
+            >
               <v-text-field
                 v-model="subject.organization"
                 :rules="subject.organizationRules"
@@ -41,7 +53,10 @@
                 required
               />
             </v-col>
-            <v-col cols="12" md="4">
+            <v-col
+              cols="12"
+              md="4"
+            >
               <v-text-field
                 v-model="subject.orgUnit"
                 :rules="subject.orgUnitRules"
@@ -49,7 +64,10 @@
                 required
               />
             </v-col>
-            <v-col cols="12" md="4">
+            <v-col
+              cols="12"
+              md="4"
+            >
               <v-text-field
                 v-model="subject.commonName"
                 :counter="10"
@@ -60,26 +78,48 @@
             </v-col>
           </v-row>
           <v-row>
-            <v-col cols="12" md="4">
-              <v-text-field type="number" v-model="validity.duration" :rules="validity.durationRules" label="Duration for validity in Days"/>
+            <v-col
+              cols="12"
+              md="4"
+            >
+              <v-text-field
+                v-model="validity.duration"
+                type="number"
+                :rules="validity.durationRules"
+                label="Duration for validity in Days"
+              />
             </v-col>
           </v-row>
           <v-row>
-            <v-col cols="12" md="4">
-              <v-text-field label="Alternative Names" v-model="ui.altName">
-                <template v-slot:append>
-                  <v-btn icon="mdi-plus" color="green" :disabled="!ui.altName" @click="addAltName"/>
+            <v-col
+              cols="12"
+              md="4"
+            >
+              <v-text-field
+                v-model="ui.altName"
+                label="Alternative Names"
+              >
+                <template #append>
+                  <v-btn
+                    icon="mdi-plus"
+                    color="green"
+                    :disabled="!ui.altName"
+                    @click="addAltName"
+                  />
                 </template>
               </v-text-field>
             </v-col>
-            <v-col cols="12" md="8">
+            <v-col
+              cols="12"
+              md="8"
+            >
               <v-combobox
                 v-model="subject.altNames"
                 :items="subject.altNames"
                 label="Alternative Names"
                 multiple
               >
-                <template v-slot:selection="data">
+                <template #selection="data">
                   <v-chip
                     :key="JSON.stringify(data.item)"
                     v-bind="data"
@@ -92,8 +132,14 @@
             </v-col>
           </v-row>
           <v-row>
-            <v-col cols="12" md="12">
-              <v-textarea v-model="trustingAuthority" label="Trusting Authority"/>
+            <v-col
+              cols="12"
+              md="12"
+            >
+              <v-textarea
+                v-model="trustingAuthority"
+                label="Trusting Authority"
+              />
             </v-col>
           </v-row>
         </v-container>
@@ -101,7 +147,12 @@
     </v-card-item>
     <v-card-actions>
       <v-col class="text-right">
-        <v-btn :disabled="!valid" @click="requestCertificate" text="Request certificate" prepend-icon="mdi-certificate"/>
+        <v-btn
+          :disabled="!valid"
+          text="Request certificate"
+          prepend-icon="mdi-certificate"
+          @click="requestCertificate"
+        />
       </v-col>
     </v-card-actions>
   </v-card>
@@ -109,7 +160,7 @@
 
 <script lang="ts">
 import type { Validated } from "@/types/util";
-import type { Certificate, Subject, Validity } from "@/types/certificate";
+import type { Certificate, Subject } from "@/types/certificate";
 
 const requiredValidation = (fieldName: string) => {
   return (val: string) => {
diff --git a/frontend/src/pages/certificates/index.vue b/frontend/src/pages/certificates/index.vue
index 924b91b..a4d42f3 100644
--- a/frontend/src/pages/certificates/index.vue
+++ b/frontend/src/pages/certificates/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { fetchClient, type Schemas } from "@/plugins/client.ts";
+import { useRouter } from "vue-router";
 
 const certificates = ref<Schemas["Certificate"][]>([]);
 
@@ -13,35 +14,98 @@ onMounted(() => {
   getCertificates();
 });
 
+const router = useRouter();
+
+function navigateToNew() {
+  router.push("/certificates/new");
+}
+
+function navigateToImport() {
+  router.push("/certificates/import");
+}
+
 </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>
+  <v-container>
+    <article>
+      <h2>Currently known certificates</h2>
+      <section
+        v-if="certificates.length === 0"
+        id="no-certs-found"
+      >
+        <v-row>
+          <v-col
+            cols="12"
+            class="text-center pt-4"
+          >
+            <p class="font-weight-bold">
+              There seems to be nothing in here.
+            </p>
+            <p>Why don't you start with one of the following options.</p>
+            <v-row class="mt-4">
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-btn
+                  color="primary"
+                  @click="navigateToNew"
+                >
+                  Request new certificate
+                </v-btn>
+              </v-col>
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-btn
+                  color="primary"
+                  @click="navigateToImport"
+                >
+                  Import an existing certificate
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </section>
+      <section
+        v-if="certificates.length > 0"
+        id="known-certificates"
+      >
+        <ul>
+          <li
+            v-for="cert in certificates"
+            :key="cert.fingerprint"
+          >
+            <p>{{ cert.fingerprint }}</p>
+          </li>
+        </ul>
+        <v-row>
+          <v-col
+            cols="12"
+            md="6"
+          >
+            <v-btn @click="navigateToNew">
+              Request a new certificate
+            </v-btn>
+          </v-col>
+          <v-col
+            cols="12"
+            md="6"
+          >
+            <v-btn
+              color="primary"
+              @click="navigateToImport"
+            >
+              Import an existing certificate
+            </v-btn>
+          </v-col>
+        </v-row>
+      </section>
+    </article>
+  </v-container>
 </template>
 
 <style scoped>
diff --git a/frontend/src/pages/certificates/new.vue b/frontend/src/pages/certificates/new.vue
index 1837583..22969d5 100644
--- a/frontend/src/pages/certificates/new.vue
+++ b/frontend/src/pages/certificates/new.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-
+import CertificateEditor from "@/components/CertificateEditor.vue";
 </script>
 
 <template>
-  <h2>New certificate</h2>
+  <v-container>
+    <CertificateEditor />
+  </v-container>
 </template>
 
 <style scoped>
diff --git a/frontend/src/types/certificate.d.ts b/frontend/src/types/certificate.d.ts
index 5e576da..4013a9a 100644
--- a/frontend/src/types/certificate.d.ts
+++ b/frontend/src/types/certificate.d.ts
@@ -13,9 +13,7 @@ export interface Validity {
   to: Date;
 }
 
-export interface Extensions {
-
-}
+export type Extensions = object;
 
 export interface Certificate {
   issuer: Subject;