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] 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>