frontend/src/pages/cert-request.vue

@@ -7,17 +7,17 @@
           <v-row>
             <v-col cols="12" md="4">
               <v-text-field
-                v-model="country"
+                v-model="subject.country"
-                :rules="countryRules"
+                :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"
+                v-model="subject.city"
-                :rules="cityRules"
+                :rules="subject.cityRules"
                 label="City"
                 required
               />
@@ -35,53 +35,81 @@
           <v-row>
             <v-col cols="12" md="4">
               <v-text-field
-                v-model="organization"
+                v-model="subject.organization"
-                :rules="organizationRules"
+                :rules="subject.organizationRules"
                 label="Organization"
                 required
               />
             </v-col>
             <v-col cols="12" md="4">
               <v-text-field
-                v-model="orgUnit"
+                v-model="subject.orgUnit"
-                :rules="orgUnitRules"
+                :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 { Validated } from "@/types/util";
-import type { Valid } from "@/types/util";
+import type { Certificate, Subject, Validity } from "@/types/certificate";
-
-type FormData = {
-  country: string;
-  state: string;
-  city: string;
-  organization: string;
-  orgUnit: string;
-  commonName: string;
-}
 
 const requiredValidation = (fieldName: string) => {
   return (val: string) => {
@@ -90,21 +118,45 @@ const requiredValidation = (fieldName: string) => {
   }
 }
 
-export default {
+type SubjectInput = Partial<Validated<Subject>> & Required<Subject>;
-  data: (): Partial<Valid<FormData>> & Required<FormData> => ({
+type ValidityInput = Validated<{duration: number}>;//Partial<Valid<Validity>> & Required<Validity>;
-    valid: false,
+type UiInput = {
-    country: '',
+  altName: string;
-    countryRules: [requiredValidation("Country")],
-    state: '',
-    city: '',
-    organization: '',
-    orgUnit: '',
-    commonName: '',
-    commonNameRules: [requiredValidation("Common Name")],
-  }),
 }
 
-export function requestCertificate() {
+export default {
-  throw new Error("Not supported yet");
+  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>

frontend/src/types/certificate.d.ts

@@ -5,6 +5,7 @@ export interface Subject {
   country: string;
   state: string;
   city: string
+  altNames: string[];
 }
 
 export interface Validity {

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;