frontend/src/components/Home.vue

@@ -39,6 +39,7 @@
             rounded="lg"
             title="Manage your certificates"
             variant="text"
+            to="/cert-request"
           />
         </v-col>
 

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>

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;
+}

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;

frontend/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "files": [],
+  "include": ["./typed-router.d.ts"],
   "references": [
     {
       "path": "./tsconfig.node.json"

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>>,
   }
 }