From f563eb7cb7be314c59e228379e8a0812ff41464c Mon Sep 17 00:00:00 2001
From: CybAtax <62847599+CybAtax@users.noreply.github.com>
Date: Sun, 17 Nov 2024 20:46:08 +0100
Subject: [PATCH 1/6] wip: first draft cert request

---
 frontend/src/components/Home.vue    |  1 +
 frontend/src/pages/cert-request.vue | 95 +++++++++++++++++++++++++++++
 frontend/src/types/certificate.d.ts | 24 ++++++++
 frontend/src/types/util.d.ts        |  5 ++
 frontend/tsconfig.json              |  1 +
 frontend/typed-router.d.ts          |  1 +
 6 files changed, 127 insertions(+)
 create mode 100644 frontend/src/pages/cert-request.vue
 create mode 100644 frontend/src/types/certificate.d.ts
 create mode 100644 frontend/src/types/util.d.ts

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index 6af172d..0982a85 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -39,6 +39,7 @@
             rounded="lg"
             title="Manage your certificates"
             variant="text"
+            to="/cert-request"
           />
         </v-col>
 
diff --git a/frontend/src/pages/cert-request.vue b/frontend/src/pages/cert-request.vue
new file mode 100644
index 0000000..1689c10
--- /dev/null
+++ b/frontend/src/pages/cert-request.vue
@@ -0,0 +1,95 @@
+<template>
+    <v-form v-model="valid">
+      <v-container>
+        <v-row>
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="country"
+              :rules="countryRules"
+              label="Country"
+              required
+            />
+          </v-col>
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="state"
+              :counter="10"
+              :rules="stateRules"
+              label="State"
+              required
+            />
+          </v-col>
+
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="city"
+              :rules="cityRules"
+              label="City"
+              required
+            />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="organization"
+              :rules="organizationRules"
+              label="Organization"
+              required
+            />
+          </v-col>
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="orgUnit"
+              :rules="orgUnitRules"
+              label="Organization Unit"
+              required
+            />
+          </v-col>
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="commonName"
+              :counter="10"
+              :rules="commonNameRules"
+              label="Common name"
+              required
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-form>
+</template>
+
+<script lang="ts">
+import type { Valid } from "@/types/util";
+
+type FormData = {
+  country: string;
+  state: string;
+  city: string;
+  organization: string;
+  orgUnit: string;
+  commonName: string;
+}
+
+const requiredValidation = (fieldName: string) => {
+  return (val: string) => {
+    if (val) return true;
+    return fieldName + " is required"
+  }
+}
+
+export default {
+  data: (): Partial<Valid<FormData>> & Required<FormData> => ({
+    valid: false,
+    country: '',
+    countryRules: [requiredValidation("Country")],
+    state: '',
+    city: '',
+    organization: '',
+    orgUnit: '',
+    commonName: '',
+    commonNameRules: [requiredValidation("Common Name")],
+  }),
+}
+</script>
diff --git a/frontend/src/types/certificate.d.ts b/frontend/src/types/certificate.d.ts
new file mode 100644
index 0000000..1fbaf20
--- /dev/null
+++ b/frontend/src/types/certificate.d.ts
@@ -0,0 +1,24 @@
+export interface Subject {
+  commonName: string;
+  organization: string;
+  orgUnit: string;
+  country: string;
+  state: string;
+  city: string
+}
+
+export interface Validity {
+  from: Date;
+  to: Date;
+}
+
+export interface Extensions {
+
+}
+
+export interface Certificate {
+  issuer: Subject;
+  validity: Validity;
+  subject: Subject;
+  extensions: Extensions;
+}
diff --git a/frontend/src/types/util.d.ts b/frontend/src/types/util.d.ts
new file mode 100644
index 0000000..eefe08e
--- /dev/null
+++ b/frontend/src/types/util.d.ts
@@ -0,0 +1,5 @@
+export type Valid<T> = {
+  [K in keyof T as `${K}Rules`]: ((val: string) => true | string)[]
+} & {
+  valid: boolean;
+} & T;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 66b5e57..416e35a 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "files": [],
+  "include": ["./typed-router.d.ts"],
   "references": [
     {
       "path": "./tsconfig.node.json"
diff --git a/frontend/typed-router.d.ts b/frontend/typed-router.d.ts
index 331ee51..8d7445f 100644
--- a/frontend/typed-router.d.ts
+++ b/frontend/typed-router.d.ts
@@ -19,5 +19,6 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/cert-request': RouteRecordInfo<'/cert-request', '/cert-request', Record<never, never>, Record<never, never>>,
   }
 }
-- 
2.45.3


From 92b39998e86dcdd251950a9394930716e347bfd2 Mon Sep 17 00:00:00 2001
From: CybAtax <62847599+CybAtax@users.noreply.github.com>
Date: Sun, 17 Nov 2024 20:59:47 +0100
Subject: [PATCH 2/6] feat: form for cert request

---
 frontend/src/pages/cert-request.vue | 131 ++++++++++++++++------------
 1 file changed, 73 insertions(+), 58 deletions(-)

diff --git a/frontend/src/pages/cert-request.vue b/frontend/src/pages/cert-request.vue
index 1689c10..3efd277 100644
--- a/frontend/src/pages/cert-request.vue
+++ b/frontend/src/pages/cert-request.vue
@@ -1,66 +1,77 @@
 <template>
-    <v-form v-model="valid">
-      <v-container>
-        <v-row>
-          <v-col cols="12" md="4">
-            <v-text-field
-              v-model="country"
-              :rules="countryRules"
-              label="Country"
-              required
-            />
-          </v-col>
-          <v-col cols="12" md="4">
-            <v-text-field
-              v-model="state"
-              :counter="10"
-              :rules="stateRules"
-              label="State"
-              required
-            />
-          </v-col>
+  <v-card class="ma-5">
+    <v-card-title>Request a certificate</v-card-title>
+    <v-card-item>
+      <v-form v-model="valid">
+        <v-container>
+          <v-row>
+            <v-col cols="12" md="4">
+              <v-text-field
+                v-model="country"
+                :rules="countryRules"
+                label="Country"
+                required
+              />
+            </v-col>
+            <v-col cols="12" md="4">
+              <v-text-field
+                v-model="state"
+                :counter="10"
+                :rules="stateRules"
+                label="State"
+                required
+              />
+            </v-col>
 
-          <v-col cols="12" md="4">
-            <v-text-field
-              v-model="city"
-              :rules="cityRules"
-              label="City"
-              required
-            />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12" md="4">
-            <v-text-field
-              v-model="organization"
-              :rules="organizationRules"
-              label="Organization"
-              required
-            />
-          </v-col>
-          <v-col cols="12" md="4">
-            <v-text-field
-              v-model="orgUnit"
-              :rules="orgUnitRules"
-              label="Organization Unit"
-              required
-            />
-          </v-col>
-          <v-col cols="12" md="4">
-            <v-text-field
-              v-model="commonName"
-              :counter="10"
-              :rules="commonNameRules"
-              label="Common name"
-              required
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-form>
+            <v-col cols="12" md="4">
+              <v-text-field
+                v-model="city"
+                :rules="cityRules"
+                label="City"
+                required
+              />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="12" md="4">
+              <v-text-field
+                v-model="organization"
+                :rules="organizationRules"
+                label="Organization"
+                required
+              />
+            </v-col>
+            <v-col cols="12" md="4">
+              <v-text-field
+                v-model="orgUnit"
+                :rules="orgUnitRules"
+                label="Organization Unit"
+                required
+              />
+            </v-col>
+            <v-col cols="12" md="4">
+              <v-text-field
+                v-model="commonName"
+                :counter="10"
+                :rules="commonNameRules"
+                label="Common name"
+                required
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-form>
+    </v-card-item>
+    <v-card-actions>
+      <v-col class="text-right">
+        <v-btn onclick="requestCertificate()" text="Request certificate" prepend-icon="mdi-certificate"/>
+      </v-col>
+    </v-card-actions>
+  </v-card>
 </template>
 
 <script lang="ts">
+
 import type { Valid } from "@/types/util";
 
 type FormData = {
@@ -92,4 +103,8 @@ export default {
     commonNameRules: [requiredValidation("Common Name")],
   }),
 }
+
+export function requestCertificate() {
+  throw new Error("Not supported yet");
+}
 </script>
-- 
2.45.3


From 9af14d26a752a5200a5f5f97c7ec80537b437276 Mon Sep 17 00:00:00 2001
From: CybAtax <62847599+CybAtax@users.noreply.github.com>
Date: Sun, 17 Nov 2024 22:11:35 +0100
Subject: [PATCH 3/6] fix: add missing fields

---
 frontend/src/pages/cert-request.vue | 128 +++++++++++++++++++---------
 frontend/src/types/certificate.d.ts |   1 +
 frontend/src/types/util.d.ts        |   4 +-
 3 files changed, 92 insertions(+), 41 deletions(-)

diff --git a/frontend/src/pages/cert-request.vue b/frontend/src/pages/cert-request.vue
index 3efd277..78c2f04 100644
--- a/frontend/src/pages/cert-request.vue
+++ b/frontend/src/pages/cert-request.vue
@@ -7,17 +7,17 @@
           <v-row>
             <v-col cols="12" md="4">
               <v-text-field
-                v-model="country"
-                :rules="countryRules"
+                v-model="subject.country"
+                :rules="subject.countryRules"
                 label="Country"
                 required
               />
             </v-col>
             <v-col cols="12" md="4">
               <v-text-field
-                v-model="state"
+                v-model="subject.state"
                 :counter="10"
-                :rules="stateRules"
+                :rules="subject.stateRules"
                 label="State"
                 required
               />
@@ -25,8 +25,8 @@
 
             <v-col cols="12" md="4">
               <v-text-field
-                v-model="city"
-                :rules="cityRules"
+                v-model="subject.city"
+                :rules="subject.cityRules"
                 label="City"
                 required
               />
@@ -35,53 +35,81 @@
           <v-row>
             <v-col cols="12" md="4">
               <v-text-field
-                v-model="organization"
-                :rules="organizationRules"
+                v-model="subject.organization"
+                :rules="subject.organizationRules"
                 label="Organization"
                 required
               />
             </v-col>
             <v-col cols="12" md="4">
               <v-text-field
-                v-model="orgUnit"
-                :rules="orgUnitRules"
+                v-model="subject.orgUnit"
+                :rules="subject.orgUnitRules"
                 label="Organization Unit"
                 required
               />
             </v-col>
             <v-col cols="12" md="4">
               <v-text-field
-                v-model="commonName"
+                v-model="subject.commonName"
                 :counter="10"
-                :rules="commonNameRules"
+                :rules="subject.commonNameRules"
                 label="Common name"
                 required
               />
             </v-col>
           </v-row>
+          <v-row>
+            <v-col cols="12" md="4">
+              <v-text-field type="number" v-model="validity.duration" label="Duration for validity in Days"/>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="12" md="6">
+              <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"/>
+                </template>
+              </v-text-field>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-combobox
+                v-model="subject.altNames"
+                :items="subject.altNames"
+                label="Alternative Names"
+                multiple
+              >
+                <template v-slot:selection="data">
+                  <v-chip
+                    :key="JSON.stringify(data.item)"
+                    v-bind="data"
+                    size="small"
+                  >
+                    {{ data.item.title }}
+                  </v-chip>
+                </template>
+              </v-combobox>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="12" md="12">
+              <v-textarea v-model="trustingAuthority" label="Trusting Authority"/>
+            </v-col>
+          </v-row>
         </v-container>
       </v-form>
     </v-card-item>
     <v-card-actions>
       <v-col class="text-right">
-        <v-btn onclick="requestCertificate()" text="Request certificate" prepend-icon="mdi-certificate"/>
+        <v-btn :disabled="!valid" @click="requestCertificate" text="Request certificate" prepend-icon="mdi-certificate"/>
       </v-col>
     </v-card-actions>
   </v-card>
 </template>
 
 <script lang="ts">
-
-import type { Valid } from "@/types/util";
-
-type FormData = {
-  country: string;
-  state: string;
-  city: string;
-  organization: string;
-  orgUnit: string;
-  commonName: string;
-}
+import type { Validated } from "@/types/util";
+import type { Certificate, Subject, Validity } from "@/types/certificate";
 
 const requiredValidation = (fieldName: string) => {
   return (val: string) => {
@@ -90,21 +118,45 @@ const requiredValidation = (fieldName: string) => {
   }
 }
 
-export default {
-  data: (): Partial<Valid<FormData>> & Required<FormData> => ({
-    valid: false,
-    country: '',
-    countryRules: [requiredValidation("Country")],
-    state: '',
-    city: '',
-    organization: '',
-    orgUnit: '',
-    commonName: '',
-    commonNameRules: [requiredValidation("Common Name")],
-  }),
+type SubjectInput = Partial<Validated<Subject>> & Required<Subject>;
+type ValidityInput = Validated<{duration: number}>;//Partial<Valid<Validity>> & Required<Validity>;
+type UiInput = {
+  altName: string;
 }
 
-export function requestCertificate() {
-  throw new Error("Not supported yet");
+export default {
+  data: (): {valid: boolean, subject: SubjectInput; validity: ValidityInput; trustingAuthority: string; ui: UiInput} => ({
+    valid: false,
+    subject: {
+      country: '',
+      countryRules: [requiredValidation("Country")],
+      state: '',
+      city: '',
+      organization: '',
+      orgUnit: '',
+      commonName: '',
+      commonNameRules: [requiredValidation("Common Name")],
+      altNames: [],
+    },
+    validity: {
+      duration: undefined as unknown as number,
+      durationRules: [
+        requiredValidation("Validity duration"),
+      ]
+    },
+    trustingAuthority: '',
+    ui: {
+      altName: '',
+    },
+  }),
+  methods: {
+    addAltName() {
+      this.subject.altNames.push(this.ui.altName)
+      this.ui.altName = ''
+    },
+    requestCertificate(): Certificate {
+      throw new Error("Not supported yet");
+    },
+  }
 }
 </script>
diff --git a/frontend/src/types/certificate.d.ts b/frontend/src/types/certificate.d.ts
index 1fbaf20..5e576da 100644
--- a/frontend/src/types/certificate.d.ts
+++ b/frontend/src/types/certificate.d.ts
@@ -5,6 +5,7 @@ export interface Subject {
   country: string;
   state: string;
   city: string
+  altNames: string[];
 }
 
 export interface Validity {
diff --git a/frontend/src/types/util.d.ts b/frontend/src/types/util.d.ts
index eefe08e..8599ffa 100644
--- a/frontend/src/types/util.d.ts
+++ b/frontend/src/types/util.d.ts
@@ -1,5 +1,3 @@
-export type Valid<T> = {
+export type Validated<T> = {
   [K in keyof T as `${K}Rules`]: ((val: string) => true | string)[]
-} & {
-  valid: boolean;
 } & T;
-- 
2.45.3


From 5ca3b5e9c60596c9dd04439d1ce110e5bfaec45a Mon Sep 17 00:00:00 2001
From: CybAtax <62847599+CybAtax@users.noreply.github.com>
Date: Sun, 17 Nov 2024 22:34:27 +0100
Subject: [PATCH 4/6] add app bar

---
 frontend/src/App.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6ceb9da..2bda13a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,8 @@
 <template>
   <v-app>
+    <v-app-bar>
+      <v-app-bar-nav-icon icon="mdi-home" to="/"/>
+    </v-app-bar>
     <v-main>
       <router-view />
     </v-main>
-- 
2.45.3


From 58a71b7908a6defdfb710483e2ea2819ec1b5237 Mon Sep 17 00:00:00 2001
From: CybAtax <62847599+CybAtax@users.noreply.github.com>
Date: Sun, 17 Nov 2024 22:35:08 +0100
Subject: [PATCH 5/6] Give alt names list more space

---
 frontend/src/pages/cert-request.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/cert-request.vue b/frontend/src/pages/cert-request.vue
index 78c2f04..ca6375e 100644
--- a/frontend/src/pages/cert-request.vue
+++ b/frontend/src/pages/cert-request.vue
@@ -65,14 +65,14 @@
             </v-col>
           </v-row>
           <v-row>
-            <v-col cols="12" md="6">
+            <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"/>
                 </template>
               </v-text-field>
             </v-col>
-            <v-col cols="12" md="6">
+            <v-col cols="12" md="8">
               <v-combobox
                 v-model="subject.altNames"
                 :items="subject.altNames"
-- 
2.45.3


From daa5ff3541714bc0f298cff16af68caab507584f Mon Sep 17 00:00:00 2001
From: CybAtax <62847599+CybAtax@users.noreply.github.com>
Date: Sun, 17 Nov 2024 22:40:18 +0100
Subject: [PATCH 6/6] add missing rules

---
 frontend/src/pages/cert-request.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/cert-request.vue b/frontend/src/pages/cert-request.vue
index ca6375e..1a7f060 100644
--- a/frontend/src/pages/cert-request.vue
+++ b/frontend/src/pages/cert-request.vue
@@ -61,7 +61,7 @@
           </v-row>
           <v-row>
             <v-col cols="12" md="4">
-              <v-text-field type="number" v-model="validity.duration" label="Duration for validity in Days"/>
+              <v-text-field type="number" v-model="validity.duration" :rules="validity.durationRules" label="Duration for validity in Days"/>
             </v-col>
           </v-row>
           <v-row>
-- 
2.45.3