Fix ExtendedKeyUsages

PeculiarVentures · May 30, 2024 · b097873 · b097873
1 parent 26a8576
commit b097873
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 42 deletions.
diff --git a/src/components/certificate-create-by-custom/CertificateCreateByCustom.tsx b/src/components/certificate-create-by-custom/CertificateCreateByCustom.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   CertificateAlgorithmProps,
@@ -15,15 +15,15 @@ import { CertificateKeyPropertiesSelect } from "../certificate-key-properties-se
 import { Card } from "../card";
 import { KeyUsagesCheckboxGroup } from "../key-usages-checkbox-group";
 
-import { ICertificateKeyUsageExtensions } from "../../config/data";
+import { ICertificateExtendedKeyUsages } from "../../config/data";
 import { countries } from "../../config/data";
 
 import styles from "./styles/index.module.scss";
 
 export interface ICertificateCreateByCustomData {
   subject: CertificateSubjectProps;
   algorithm?: CertificateAlgorithmProps;
-  extensions: ICertificateKeyUsageExtensions[];
+  extendedKeyUsages: ICertificateExtendedKeyUsages[];
   type: CertificateType;
 }
 
@@ -44,10 +44,6 @@ export const CertificateCreateByCustom: React.FunctionComponent<
     string | undefined
   >(undefined);
 
-  const extendedKeyUsageExtension = useRef<ICertificateKeyUsageExtensions[]>(
-    []
-  );
-
   const validateEmailAddress = (
     event: React.SyntheticEvent<HTMLInputElement>
   ) => {
@@ -63,9 +59,13 @@ export const CertificateCreateByCustom: React.FunctionComponent<
   const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
     event.preventDefault();
     const formData = new FormData(event.currentTarget);
-    const { hashAlgorithm, signatureAlgorithm, C, ...subject } =
+    const { hashAlgorithm, signatureAlgorithm, C, keyUsage, ...subject } =
       Object.fromEntries(formData);
 
+    const extendedKeyUsages = keyUsage
+      ? (formData.getAll("keyUsage") as ICertificateExtendedKeyUsages[])
+      : [];
+
     const hash = hashAlgorithm
       .toString()
       .replace(/"/g, "") as CertificateAlgorithmProps["hash"];
@@ -80,7 +80,7 @@ export const CertificateCreateByCustom: React.FunctionComponent<
         ...(subject as unknown as ICertificateCreateByCustomData["subject"]),
         C: country,
       },
-      extensions: extendedKeyUsageExtension.current,
+      extendedKeyUsages,
       type,
       algorithm: {
         hash,
@@ -166,11 +166,7 @@ export const CertificateCreateByCustom: React.FunctionComponent<
           </div>
         </div>
         <div className={styles.divider}></div>
-        <KeyUsagesCheckboxGroup
-          onChange={(val) => {
-            extendedKeyUsageExtension.current = val;
-          }}
-        />
+        <KeyUsagesCheckboxGroup />
         <div className={styles.divider}></div>
         <CertificateKeyPropertiesSelect
           className={styles.key_properties_select}

diff --git a/src/components/certificate-type-select/CertificateTypeSelect.tsx b/src/components/certificate-type-select/CertificateTypeSelect.tsx
@@ -2,17 +2,17 @@ import React, { ComponentProps } from "react";
 import { Autocomplete, useControllableState } from "@peculiar/react-components";
 import { useTranslation } from "react-i18next";
 import {
-  ICertificateKeyUsageExtensions,
+  ICertificateExtendedKeyUsages,
   certificateKeyUsageExtensions,
 } from "../../config/data";
 import { CertificateType } from "../../types";
 
 import styles from "./styles/index.module.scss";
 
-type IKeyUsageExtensions = ICertificateKeyUsageExtensions | "custom";
+type IExtendedKeyUsages = ICertificateExtendedKeyUsages | "custom";
 
 export type ICertificateTypeSelectValue = {
-  value: IKeyUsageExtensions;
+  value: IExtendedKeyUsages;
   label: string;
 };
 
@@ -33,7 +33,7 @@ export const CertificateTypeSelect: React.FunctionComponent<
   const { t } = useTranslation();
   const list: ICertificateTypeSelectValue[] = [
     ...Object.keys(certificateKeyUsageExtensions).map((key) => ({
-      value: key as IKeyUsageExtensions,
+      value: key as IExtendedKeyUsages,
       label: t(`certificates.key-usage-extension.${key}`),
     })),
     {

diff --git a/src/components/key-usages-checkbox-group/KeyUsagesCheckboxGroup.tsx b/src/components/key-usages-checkbox-group/KeyUsagesCheckboxGroup.tsx
@@ -1,31 +1,20 @@
 import React, { ComponentProps } from "react";
 import clsx from "clsx";
-import {
-  Checkbox,
-  Typography,
-  useControllableState,
-} from "@peculiar/react-components";
+import { Checkbox, Typography } from "@peculiar/react-components";
 import { useTranslation } from "react-i18next";
-import {
-  certificateKeyUsageExtensions,
-  ICertificateKeyUsageExtensions,
-} from "../../config/data";
+import { certificateKeyUsageExtensions } from "../../config/data";
 
 import styles from "./styles/index.module.scss";
 
 interface KeyUsagesCheckboxGroupProps {
-  onChange: (extensions: ICertificateKeyUsageExtensions[]) => void;
   className?: ComponentProps<"div">["className"];
 }
 
 export const KeyUsagesCheckboxGroup: React.FunctionComponent<
   KeyUsagesCheckboxGroupProps
 > = (props) => {
-  const { onChange, className } = props;
+  const { className } = props;
   const { t } = useTranslation();
-  const [extensions, setExtensions] = useControllableState<
-    ICertificateKeyUsageExtensions[]
-  >({ defaultValue: [], onChange });
 
   return (
     <div className={clsx(styles.key_usages_checkbox_group_box, className)}>
@@ -39,15 +28,9 @@ export const KeyUsagesCheckboxGroup: React.FunctionComponent<
             className={styles.key_usages_checkbox}
           >
             <Checkbox
-              onChange={(event) => {
-                setExtensions(
-                  event.target.checked &&
-                    !extensions.includes(
-                      value as ICertificateKeyUsageExtensions
-                    )
-                    ? [...extensions, value as ICertificateKeyUsageExtensions]
-                    : extensions.filter((e) => e !== value)
-                );
+              name="keyUsage"
+              inputProps={{
+                value,
               }}
             />
             <Typography variant="b2" color="black">

diff --git a/src/config/data/certificate-key-usage-extensions.ts b/src/config/data/certificate-key-usage-extensions.ts
@@ -9,5 +9,5 @@ export const certificateKeyUsageExtensions = {
   serverAuth: ExtendedKeyUsage.serverAuth,
 };
 
-export type ICertificateKeyUsageExtensions =
+export type ICertificateExtendedKeyUsages =
   keyof typeof certificateKeyUsageExtensions;