From 26a8576fe2c4f271b761e9bbcae360a353af9c31 Mon Sep 17 00:00:00 2001
From: alex-slobodian <alexx.slobodyan@gmail.com>
Date: Thu, 30 May 2024 17:12:17 +0300
Subject: [PATCH] Fix CertificateCreateByCustom

---
 .../CertificateCreateByCustom.tsx             | 24 ++++++-------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/components/certificate-create-by-custom/CertificateCreateByCustom.tsx b/src/components/certificate-create-by-custom/CertificateCreateByCustom.tsx
index d74f5f4d..89b60106 100644
--- a/src/components/certificate-create-by-custom/CertificateCreateByCustom.tsx
+++ b/src/components/certificate-create-by-custom/CertificateCreateByCustom.tsx
@@ -39,8 +39,7 @@ export const CertificateCreateByCustom: React.FunctionComponent<
 
   const { t } = useTranslation();
 
-  const [isCnameValid, setIsCnameValid] = useState(false);
-  const [isEmailAddresValid, setIsEmailAddresValid] = useState(false);
+  const [isFormValid, setIsFormValid] = useState(false);
   const [emailAddressErrorMessage, setEmailAddressErrorMessage] = useState<
     string | undefined
   >(undefined);
@@ -49,20 +48,15 @@ export const CertificateCreateByCustom: React.FunctionComponent<
     []
   );
 
-  const isCreateButtonDisabled =
-    !isCnameValid || !isEmailAddresValid || !!emailAddressErrorMessage;
-
   const validateEmailAddress = (
     event: React.SyntheticEvent<HTMLInputElement>
   ) => {
     if (!event.currentTarget.checkValidity()) {
-      setIsEmailAddresValid(false);
       setEmailAddressErrorMessage(
         t("certificates.subject.email-address.error.type")
       );
       return;
     }
-    setIsEmailAddresValid(true);
     setEmailAddressErrorMessage(undefined);
   };
 
@@ -97,7 +91,11 @@ export const CertificateCreateByCustom: React.FunctionComponent<
   };
 
   return (
-    <form className={styles.form_box} onSubmit={handleSubmit}>
+    <form
+      className={styles.form_box}
+      onSubmit={handleSubmit}
+      onChange={(event) => setIsFormValid(event.currentTarget.checkValidity())}
+    >
       <Card className={styles.card}>
         <div className={styles.general_box}>
           <Typography variant="s2" color="black">
@@ -120,9 +118,6 @@ export const CertificateCreateByCustom: React.FunctionComponent<
             <TextField
               className="required_text_field"
               name="CN"
-              onChange={(event) =>
-                setIsCnameValid(event.currentTarget.checkValidity())
-              }
               label={t("certificates.subject.cname.label")}
               placeholder={t("certificates.subject.cname.placeholder-2")}
               required
@@ -186,13 +181,8 @@ export const CertificateCreateByCustom: React.FunctionComponent<
         <Button
           variant="contained"
           color="primary"
-          disabled={isCreateButtonDisabled}
+          disabled={!isFormValid}
           type="submit"
-          title={
-            isCreateButtonDisabled
-              ? t("certificates.button-create.title")
-              : undefined
-          }
         >
           {t(`certificates.button-create.text.${type}`)}
         </Button>