Fix KeyUsageExtensions for certificate creation presets (#204)

Co-authored-by: alex-slobodian <[email protected]>
PeculiarVentures · Sep 2, 2024 · cbff9b3 · cbff9b3
1 parent 88938ac
commit cbff9b3
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 8 deletions.
diff --git a/src/components/certificate-create-by-cname/CertificateCreateByCname.tsx b/src/components/certificate-create-by-cname/CertificateCreateByCname.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { ExtendedKeyUsageType } from "@peculiar/x509";
 import { Button, TextField } from "@peculiar/react-components";
 import { CertificateAlgorithmInfo } from "../certificate-algorithm-info";
 import { Card } from "../card";
@@ -16,18 +17,20 @@ export interface ICertificateCreateByCnameData {
     CN: string;
   };
   algorithm: CertificateAlgorithmProps;
+  extendedKeyUsages?: ExtendedKeyUsageType[];
   type: CertificateType;
 }
 
 interface CertificateCreateByCnameProps {
   type: CertificateType;
+  extendedKeyUsages?: ExtendedKeyUsageType[];
   onCreateButtonClick: (data: ICertificateCreateByCnameData) => void;
 }
 
 export const CertificateCreateByCname: React.FunctionComponent<
   CertificateCreateByCnameProps
 > = (props) => {
-  const { type = "x509", onCreateButtonClick } = props;
+  const { type = "x509", extendedKeyUsages, onCreateButtonClick } = props;
 
   const { t } = useTranslation();
   const [isFormValid, setIsFormValid] = useState(false);
@@ -46,6 +49,7 @@ export const CertificateCreateByCname: React.FunctionComponent<
         CN: formData.get("CN") as string,
       },
       algorithm,
+      extendedKeyUsages,
       type,
     });
   };

diff --git a/src/components/certificate-create-by-email/CertificateCreateByEmail.tsx b/src/components/certificate-create-by-email/CertificateCreateByEmail.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { ExtendedKeyUsageType } from "@peculiar/x509";
 import { Button, TextField } from "@peculiar/react-components";
 import { CertificateAlgorithmInfo } from "../certificate-algorithm-info";
 import { Card } from "../card";
@@ -17,18 +18,20 @@ export interface ICertificateCreateByEmailData {
     CN: string;
   };
   algorithm: CertificateAlgorithmProps;
+  extendedKeyUsages?: ExtendedKeyUsageType[];
   type: CertificateType;
 }
 
 interface CertificateCreateByEmailProps {
   type: CertificateType;
+  extendedKeyUsages?: ExtendedKeyUsageType[];
   onCreateButtonClick: (data: ICertificateCreateByEmailData) => void;
 }
 
 export const CertificateCreateByEmail: React.FunctionComponent<
   CertificateCreateByEmailProps
 > = (props) => {
-  const { type = "x509", onCreateButtonClick } = props;
+  const { type = "x509", extendedKeyUsages, onCreateButtonClick } = props;
 
   const { t } = useTranslation();
 
@@ -66,6 +69,7 @@ export const CertificateCreateByEmail: React.FunctionComponent<
         E: emailAddress,
       },
       algorithm,
+      extendedKeyUsages,
       type,
     });
   };

diff --git a/src/components/certificate-create-dialog/CertificateCreateDialog.tsx b/src/components/certificate-create-dialog/CertificateCreateDialog.tsx
@@ -28,6 +28,7 @@ import {
 } from "../certificate-create-by-custom";
 import { CertificatesProvidersSelectList } from "../certificates-providers-select-list";
 import { CertificateType } from "../../types";
+import { certificateKeyUsageExtensions } from "../../config/data";
 
 import styles from "./styles/index.module.scss";
 
@@ -67,24 +68,55 @@ export const CertificateCreateDialog: React.FunctionComponent<
 
   const renderContent = () => {
     if (currentTypeSelect) {
-      if (
-        ["emailProtection", "codeSigning", "documentSigning"].includes(
-          currentTypeSelect.value
-        )
-      ) {
+      if (currentTypeSelect.value === "codeSigning") {
         return (
           <CertificateCreateByEmail
             type={type}
             onCreateButtonClick={onCreateButtonClick}
+            extendedKeyUsages={[certificateKeyUsageExtensions.codeSigning]}
           />
         );
       }
 
-      if (["clientAuth", "serverAuth"].includes(currentTypeSelect.value)) {
+      if (currentTypeSelect.value === "emailProtection") {
+        return (
+          <CertificateCreateByEmail
+            type={type}
+            onCreateButtonClick={onCreateButtonClick}
+            extendedKeyUsages={[
+              certificateKeyUsageExtensions.emailProtection,
+              certificateKeyUsageExtensions.clientAuth,
+            ]}
+          />
+        );
+      }
+
+      if (currentTypeSelect.value === "documentSigning") {
+        return (
+          <CertificateCreateByEmail
+            type={type}
+            onCreateButtonClick={onCreateButtonClick}
+            extendedKeyUsages={[certificateKeyUsageExtensions.documentSigning]}
+          />
+        );
+      }
+
+      if (currentTypeSelect.value === "clientAuth") {
+        return (
+          <CertificateCreateByCname
+            type={type}
+            onCreateButtonClick={onCreateButtonClick}
+            extendedKeyUsages={[certificateKeyUsageExtensions.clientAuth]}
+          />
+        );
+      }
+
+      if (currentTypeSelect.value === "serverAuth") {
         return (
           <CertificateCreateByCname
             type={type}
             onCreateButtonClick={onCreateButtonClick}
+            extendedKeyUsages={[certificateKeyUsageExtensions.serverAuth]}
           />
         );
       }