Fix form

src/components/certificate-create-by-cname/CertificateCreateByCname.tsx

@@ -13,7 +13,7 @@ import styles from "./styles/index.module.scss";
 
 export interface ICertificateCreateByCnameData {
   subject: {
-    commonName: string;
+    CN: string;
   };
   algorithm: CertificateAlgorithmProps;
   type: CertificateType;
@@ -73,7 +73,7 @@ export const CertificateCreateByCname: React.FunctionComponent<
           onClick={() =>
             onCreateButtonClick({
               subject: {
-                commonName: cname,
+                CN: cname,
               },
               algorithm,
               type,

src/components/certificate-create-by-custom/CertificateCreateByCustom.tsx

@@ -5,21 +5,26 @@ import {
   CertificateSubjectProps,
   CertificateType,
 } from "../../types";
-import { Button, TextField, Typography } from "@peculiar/react-components";
+import {
+  Autocomplete,
+  Button,
+  TextField,
+  Typography,
+} from "@peculiar/react-components";
 import { CertificateKeyPropertiesSelect } from "../certificate-key-properties-select";
 import { Card } from "../card";
 import { KeyUsagesCheckboxGroup } from "../key-usages-checkbox-group";
-import { CountrySelect } from "../country-select";
 
 import { validateEmail } from "../../utils/validators";
 import { ICertificateKeyUsageExtensions } from "../../config/data";
+import { countries } from "../../config/data";
 
 import styles from "./styles/index.module.scss";
 
 export interface ICertificateCreateByCustomData {
   subject: CertificateSubjectProps;
   algorithm?: CertificateAlgorithmProps;
-  extendedKeyUsageExtension: ICertificateKeyUsageExtensions[];
+  extensions: ICertificateKeyUsageExtensions[];
   type: CertificateType;
 }
 
@@ -51,24 +56,44 @@ export const CertificateCreateByCustom: React.FunctionComponent<
     []
   );
 
-  const algorithm = useRef<ICertificateCreateByCustomData["algorithm"]>();
-  const organizationName =
-    useRef<CertificateSubjectProps["organizationName"]>();
-  const organizationalUnitName =
-    useRef<CertificateSubjectProps["organizationalUnitName"]>();
-  const localityName = useRef<CertificateSubjectProps["localityName"]>();
-  const stateOrProvinceName =
-    useRef<CertificateSubjectProps["stateOrProvinceName"]>();
-  const countryName = useRef<CertificateSubjectProps["countryName"]>();
-
   const isCreateButtonDisabled =
     !emailAddress.length ||
     isEmailAddressError ||
     !cname.length ||
     isCnameError;
 
+  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const { hashAlgorithm, signatureAlgorithm, C, ...subject } =
+      Object.fromEntries(formData);
+
+    const hash = hashAlgorithm
+      .toString()
+      .replace(/"/g, "") as CertificateAlgorithmProps["hash"];
+    const signature = signatureAlgorithm
+      .toString()
+      .replace(/"/g, "") as CertificateAlgorithmProps["signature"];
+
+    const country = C ? JSON.parse(C as string)?.code : "";
+
+    const submitedData: ICertificateCreateByCustomData = {
+      subject: {
+        ...(subject as unknown as ICertificateCreateByCustomData["subject"]),
+        C: country,
+      },
+      extensions: extendedKeyUsageExtension.current,
+      type,
+      algorithm: {
+        hash,
+        signature,
+      },
+    };
+    onCreateButtonClick(submitedData);
+  };
+
   return (
-    <div className={styles.form_box}>
+    <form className={styles.form_box} onSubmit={handleSubmit}>
       <Card className={styles.card}>
         <div className={styles.general_box}>
           <Typography variant="s2" color="black">
@@ -91,6 +116,7 @@ export const CertificateCreateByCustom: React.FunctionComponent<
             <TextField
               className="required_text_field"
               value={cname}
+              name="CN"
               onChange={(event) => {
                 setCname(event.target.value);
                 if (!isDirty) {
@@ -106,6 +132,7 @@ export const CertificateCreateByCustom: React.FunctionComponent<
             <TextField
               className="required_text_field"
               value={emailAddress}
+              name="E"
               onChange={(event) => {
                 setEmailAddress(event.target.value);
                 if (!isDirty) {
@@ -137,38 +164,30 @@ export const CertificateCreateByCustom: React.FunctionComponent<
               type="email"
             />
             <TextField
-              onChange={(event) => {
-                organizationName.current = event.target.value;
-              }}
+              name="O"
               label={t("certificates.subject.organization-name.label")}
               placeholder={t(
                 "certificates.subject.organization-name.placeholder"
               )}
             />
             <TextField
-              onChange={(event) => {
-                organizationalUnitName.current = event.target.value;
-              }}
+              name="OU"
               label={t("certificates.subject.organization-unit-name.label")}
             />
-            <CountrySelect
-              label={t("certificates.subject.country-name.label")}
+            <Autocomplete
+              getOptionLabel={({ value }) => value}
+              options={countries}
+              name="C"
               placeholder={t("certificates.subject.country-name.placeholder")}
-              onSelect={(code) => {
-                countryName.current = code;
-              }}
+              label={t("certificates.subject.country-name.label")}
             />
             <TextField
-              onChange={(event) => {
-                localityName.current = event.target.value;
-              }}
+              name="L"
               label={t("certificates.subject.locality-name.label")}
               placeholder={t("certificates.subject.locality-name.placeholder")}
             />
             <TextField
-              onChange={(event) => {
-                stateOrProvinceName.current = event.target.value;
-              }}
+              name="ST"
               label={t("certificates.subject.state-or-province-name.label")}
               placeholder={t(
                 "certificates.subject.state-or-province-name.placeholder"
@@ -185,9 +204,6 @@ export const CertificateCreateByCustom: React.FunctionComponent<
         <div className={styles.divider}></div>
         <CertificateKeyPropertiesSelect
           className={styles.key_properties_select}
-          onSelect={(val) => {
-            algorithm.current = val;
-          }}
         />
       </Card>
 
@@ -196,34 +212,7 @@ export const CertificateCreateByCustom: React.FunctionComponent<
           variant="contained"
           color="primary"
           disabled={isCreateButtonDisabled}
-          onClick={() => {
-            const data: ICertificateCreateByCustomData = {
-              type,
-              subject: {
-                commonName: cname,
-                emailAddress,
-              },
-              algorithm: algorithm.current,
-              extendedKeyUsageExtension: extendedKeyUsageExtension.current,
-            };
-            if (organizationName?.current) {
-              data.subject.organizationName = organizationName.current;
-            }
-            if (organizationalUnitName?.current) {
-              data.subject.organizationalUnitName =
-                organizationalUnitName.current;
-            }
-            if (localityName?.current) {
-              data.subject.localityName = localityName.current;
-            }
-            if (stateOrProvinceName?.current) {
-              data.subject.stateOrProvinceName = stateOrProvinceName.current;
-            }
-            if (countryName?.current) {
-              data.subject.countryName = countryName.current;
-            }
-            onCreateButtonClick(data);
-          }}
+          type="submit"
           title={
             isCreateButtonDisabled
               ? t("certificates.button-create.title")
@@ -233,6 +222,6 @@ export const CertificateCreateByCustom: React.FunctionComponent<
           {t(`certificates.button-create.text.${type}`)}
         </Button>
       </div>
-    </div>
+    </form>
   );
 };

src/components/certificate-create-by-email/CertificateCreateByEmail.tsx

@@ -14,8 +14,8 @@ import styles from "./styles/index.module.scss";
 
 export interface ICertificateCreateByEmailData {
   subject: {
-    emailAddress: string;
-    commonName: string;
+    E: string;
+    CN: string;
   };
   algorithm: CertificateAlgorithmProps;
   type: CertificateType;
@@ -96,8 +96,8 @@ export const CertificateCreateByEmail: React.FunctionComponent<
           onClick={() =>
             onCreateButtonClick({
               subject: {
-                commonName: emailAddress,
-                emailAddress,
+                CN: emailAddress,
+                E: emailAddress,
               },
               algorithm,
               type,

src/components/certificate-key-properties-select/CertificateKeyPropertiesSelect.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
 import { CertificateKeyPropertiesSelect } from "./CertificateKeyPropertiesSelect";
 
 const meta: Meta<typeof CertificateKeyPropertiesSelect> = {
@@ -10,8 +9,4 @@ const meta: Meta<typeof CertificateKeyPropertiesSelect> = {
 export default meta;
 type Story = StoryObj<typeof CertificateKeyPropertiesSelect>;
 
-export const Default: Story = {
-  args: {
-    onSelect: fn(),
-  },
-};
+export const Default: Story = {};

src/components/certificate-key-properties-select/CertificateKeyPropertiesSelect.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, useEffect, useState } from "react";
+import React, { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import {
@@ -7,39 +7,21 @@ import {
 } from "@peculiar/fortify-client-core";
 import { Autocomplete, Typography } from "@peculiar/react-components";
 
-import { CertificateAlgorithmProps } from "../../types";
-
 import styles from "./styles/index.module.scss";
 
 interface CertificateKeyPropertiesSelectProps {
   className?: ComponentProps<"select">["className"];
-  onSelect: (value: CertificateAlgorithmProps) => void;
 }
 
 export const CertificateKeyPropertiesSelect: React.FunctionComponent<
   CertificateKeyPropertiesSelectProps
 > = (props) => {
-  const { className, onSelect } = props;
+  const { className } = props;
   const { t } = useTranslation();
 
   const signatureAlgorithm = Object.values(ESignatureAlgorithm);
   const hashAlgorithm = Object.values(EHashAlgorithm);
 
-  const [currentHashAlgorithm, setCurrentHashAlgorithm] = useState(
-    hashAlgorithm[0]
-  );
-  const [currentSignatureAlgorithm, setCurrentSignatureAlgorithm] = useState(
-    signatureAlgorithm[0]
-  );
-
-  useEffect(() => {
-    const algorithmData: CertificateAlgorithmProps = {
-      hash: currentHashAlgorithm,
-      signature: currentSignatureAlgorithm,
-    };
-    onSelect(algorithmData);
-  }, [currentSignatureAlgorithm, currentHashAlgorithm]);
-
   return (
     <div className={clsx(styles.certificate_key_prop_select_box, className)}>
       <Typography variant="s2" color="black">
@@ -48,22 +30,18 @@ export const CertificateKeyPropertiesSelect: React.FunctionComponent<
       <div className={styles.certificate_key_prop_selects}>
         <Autocomplete
           className={styles.certificate_key_prop_select}
-          value={currentSignatureAlgorithm}
+          name="signatureAlgorithm"
+          defaultValue={signatureAlgorithm[0]}
           disableSearch={true}
           options={signatureAlgorithm}
-          onChange={(_, value) =>
-            setCurrentSignatureAlgorithm(value as ESignatureAlgorithm)
-          }
           label={t("certificates.signature-algorithm")}
         />
         <Autocomplete
           className={styles.certificate_key_prop_select}
-          value={currentHashAlgorithm}
+          defaultValue={hashAlgorithm[0]}
+          name="hashAlgorithm"
           disableSearch={true}
           options={hashAlgorithm}
-          onChange={(_, value) =>
-            setCurrentHashAlgorithm(value as EHashAlgorithm)
-          }
           label={t("certificates.hash-algorithm")}
         />
       </div>

src/types.ts

@@ -8,13 +8,13 @@ export interface CertificateProps extends ICertificate {
   label?: string;
 }
 export interface CertificateSubjectProps {
-  commonName: string;
-  emailAddress?: string;
-  organizationName?: string;
-  organizationalUnitName?: string;
-  localityName?: string;
-  stateOrProvinceName?: string;
-  countryName?: string;
+  CN: string;
+  E?: string;
+  O?: string;
+  OU?: string;
+  L?: string;
+  ST?: string;
+  C?: string;
 }
 
 export type CertificateAlgorithmProps = {