feat: show certificate validity

SocialGouv · Feb 26, 2021 · c91cd10 · c91cd10
1 parent 3c0ad26
commit c91cd10
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git a/src/App.js b/src/App.js
@@ -19,6 +19,8 @@ const Editor = () => {
   const [yaml, setYaml] = useState(null);
   const onSubmit = (data) => {
     console.log("onSubmit2", data);
+    setEncrypted("");
+    setYaml("");
     makeSecret(data)
       .then((value) => {
         setEncrypted(value);

diff --git a/src/Form.js b/src/Form.js
@@ -3,6 +3,8 @@ import React from "react";
 import { Row, Col, Form as BsForm, Button } from "react-bootstrap";
 import { useForm, Controller } from "react-hook-form";
 
+import { isValidKey } from "./makeSecret";
+
 const RadioChoice = React.forwardRef(({ name, value, ...props }, ref) => (
   <BsForm.Check
     inline
@@ -20,6 +22,8 @@ const certificatePlaceholder = `-----BEGIN CERTIFICATE-----
 ...
 -----END CERTIFICATE-----`;
 
+const certificateSample = ``;
+
 export const Form = ({ onSubmit }) => {
   const {
     register,
@@ -29,46 +33,56 @@ export const Form = ({ onSubmit }) => {
     setValue,
     trigger,
   } = useForm({
-    mode: "onChange",
+    mode: "all",
     defaultValues: {
-      pemKey: "",
+      pemKey: certificateSample,
       value: "",
       namespace: "",
       name: "",
       scope: "cluster",
     },
   });
   const _onSubmit = (data) => {
-    console.log("onSubmit", data);
+    //console.log("onSubmit", data);
     onSubmit(data);
   };
   const scope = getValues("scope");
-  //console.log("scope", scope);
+  const pemKey = getValues("pemKey");
+  const validKey = formState.isDirty
+    ? isValidKey(pemKey)
+    : isValidKey(certificateSample);
   return (
     <BsForm onSubmit={handleSubmit(_onSubmit)}>
       <Row>
         <Col>
-          <BsForm.Label>Server public certificate (PEM key) :</BsForm.Label>
+          <BsForm.Label>
+            Server public certificate (PEM key) :{" "}
+            {(!validKey && "❌ Provided key is invalid") || ""}
+          </BsForm.Label>
           <BsForm.Group>
             <BsForm.Control
               as="textarea"
               name="pemKey"
-              defaultValue={certificatePlaceholder}
               style={{
                 marginTop: 10,
                 fontSize: "0.8rem",
                 fontFamily: "Courier",
               }}
               rows={8}
+              onChange={(e) => {
+                setValue("pemKey", e.target.value);
+                trigger();
+              }}
               ref={register({ required: true })}
               placeholder={certificatePlaceholder}
+              defaultValue={certificateSample}
             />
           </BsForm.Group>
         </Col>
       </Row>
       <Row>
         <Col xs={12} sm={3}>
-          <BsForm.Label>Scope</BsForm.Label>
+          <BsForm.Label>Scope :</BsForm.Label>
         </Col>
         <Col sm={9}>
           <RadioChoice
@@ -102,7 +116,7 @@ export const Form = ({ onSubmit }) => {
       </Row>
       {(scope === "namespace" || scope === "strict") && (
         <BsForm.Group as={Row}>
-          <BsForm.Label column>Namespace</BsForm.Label>
+          <BsForm.Label column>Namespace :</BsForm.Label>
           <Col sm="9">
             <BsForm.Control
               name="namespace"
@@ -116,7 +130,7 @@ export const Form = ({ onSubmit }) => {
       )}
       {scope === "strict" && (
         <BsForm.Group as={Row}>
-          <BsForm.Label column>Secret name</BsForm.Label>
+          <BsForm.Label column>Secret name :</BsForm.Label>
           <Col sm="9">
             <BsForm.Control
               name="name"
@@ -131,6 +145,10 @@ export const Form = ({ onSubmit }) => {
         <BsForm.Control
           as="textarea"
           name="value"
+          onChange={(e) => {
+            setValue("value", e.target.value);
+            trigger();
+          }}
           style={{ marginTop: 10 }}
           rows={4}
           ref={register({ required: true })}

diff --git a/src/makeSecret.js b/src/makeSecret.js
@@ -22,3 +22,14 @@ export const makeSecret = async ({ pemKey, scope, namespace, name, value }) => {
   const result = await HybridEncrypt(publicKey, value, label);
   return Buffer.from(result).toString("base64");
 };
+
+export const isValidKey = (key) => {
+  let isValid = false;
+  try {
+    pki.certificateFromPem(key);
+    isValid = true;
+  } catch (e) {
+    console.log("e", e);
+  }
+  return isValid;
+};