add csr query

ui/src/app/certificate_requests/page.tsx

@@ -2,8 +2,8 @@
 
 import { useQuery } from "react-query"
 import { CertificateRequestsTable } from "./table"
-import { getCertificateRequests } from "./queries"
-import { CSREntry } from "./types"
+import { getCertificateRequests } from "../queries"
+import { CSREntry } from "../types"
 
 function Error({ msg }: { msg: string }) {
     return (

ui/src/app/certificate_requests/table.tsx

@@ -1,7 +1,7 @@
 import { useContext, useState } from "react"
 import { AsideContext } from "../nav"
 import Row from "./row"
-import { CSREntry } from "./types"
+import { CSREntry } from "../types"
 
 
 type TableProps = {

ui/src/app/nav.tsx

@@ -1,8 +1,10 @@
 "use client"
 
 import { SetStateAction, Dispatch, useState, createContext, useEffect, ChangeEvent } from "react"
-import { QueryClient, QueryClientProvider } from "react-query";
+import { QueryClient, QueryClientProvider, useMutation } from "react-query";
 import Image from "next/image";
+import { postCSR } from "./queries";
+import { extractCSR } from "./utils";
 
 type AsideContextType = {
     isOpen: boolean,
@@ -11,10 +13,16 @@ type AsideContextType = {
 export const AsideContext = createContext<AsideContextType>({ isOpen: false, setIsOpen: () => { } });
 
 export function Aside({ isOpen, setIsOpen }: { isOpen: boolean, setIsOpen: Dispatch<SetStateAction<boolean>> }) {
+    const mutation = useMutation(postCSR, {
+        onSuccess: () => {
+            queryClient.invalidateQueries('csrs')
+        },
+    })
+
     const [CSRPEMString, setCSRPEMString] = useState<string>("")
     const handleTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
         setCSRPEMString(event.target.value);
-    };
+    }
     const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
         const file = event.target.files?.[0]
         if (file) {
@@ -29,8 +37,16 @@ export function Aside({ isOpen, setIsOpen }: { isOpen: boolean, setIsOpen: Dispa
             reader.readAsText(file);
         }
     };
+    const CSRValidationElement = function () {
+        try {
+            extractCSR(CSRPEMString)
+        } catch (e) {
+            return <div><i className="p-icon--error"></i>Invalid CSR</div>
+        }
+        return <div><i className="p-icon--success"></i>Valid CSR</div>
+    }()
     return (
-        <aside className={"l-aside" + (isOpen ? "" : " is-collapsed")} id="aside-panel" aria-label="aside-panel">
+        <aside className={"l-aside" + (isOpen ? "" : " is-collapsed")} id="aside-panel" aria-label="aside-panel" >
             <div className="p-panel">
                 <div className="p-panel__header">
                     <h4 className="p-panel__title">Add New CSR</h4>
@@ -50,7 +66,10 @@ export function Aside({ isOpen, setIsOpen }: { isOpen: boolean, setIsOpen: Dispa
                             <input type="file" name="upload" accept=".pem" onChange={handleFileChange}></input>
                         </div>
                         <div className="p-form__group row">
-                            <button className="p-button--positive u-float-right" name="submit">Submit</button>
+                            {CSRValidationElement}
+                            <button className="p-button--positive u-float-right" name="submit" onClick={() => mutation.mutate(CSRPEMString)} >
+                                Submit
+                            </button>
                         </div>
                     </form>
                 </div>

ui/src/app/queries.ts

@@ -0,0 +1,23 @@
+import { CSREntry } from "./types"
+
+export async function getCertificateRequests(): Promise<CSREntry[]> {
+    const response = await fetch("/api/v1/certificate_requests")
+    if (!response.ok) {
+        throw new Error('Network response was not ok')
+    }
+    return response.json()
+}
+
+export async function postCSR(csr: string) {
+    const response = await fetch("/api/v1/certificate_requests", {
+        method: 'post',
+        headers: {
+            'Content-Type': 'text/plain',
+        },
+        body: csr
+    })
+    if (!response.ok) {
+        throw new Error('Network response was not ok')
+    }
+    return response.json()
+}