client: imp validation ui

heyxkhoa · Nov 21, 2022 · fd65a99 · fd65a99
1 parent 93882d6
commit fd65a99
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
@@ -393,6 +393,7 @@
     "encryption_issuer": "Issuer",
     "encryption_hostnames": "Hostnames",
     "encryption_reset": "Are you sure you want to reset encryption settings?",
+    "encryption_warning": "Warning",
     "topline_expiring_certificate": "Your SSL certificate is about to expire. Update <0>Encryption settings</0>.",
     "topline_expired_certificate": "Your SSL certificate is expired. Update <0>Encryption settings</0>.",
     "form_error_port_range": "Enter port number in the range of 80-65535",

diff --git a/client/src/components/Settings/Encryption/Form.js b/client/src/components/Settings/Encryption/Form.js
@@ -56,6 +56,26 @@ const clearFields = (change, setTlsConfig, t) => {
     }
 };
 
+const validationMessage = (warningValidation, isWarning) => {
+    if (!warningValidation) {
+        return null;
+    }
+
+    if (isWarning) {
+        return (
+            <div className="col-12">
+                <p><Trans>encryption_warning</Trans>: {warningValidation}</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="col-12">
+            <p className="text-danger">{warningValidation}</p>
+        </div>
+    );
+};
+
 let Form = (props) => {
     const {
         t,
@@ -95,6 +115,8 @@ let Form = (props) => {
         || !valid_cert
         || !valid_pair;
 
+    const isWarning = valid_key && valid_cert && valid_pair;
+
     return (
         <form onSubmit={handleSubmit}>
             <div className="row">
@@ -382,11 +404,7 @@ let Form = (props) => {
                         )}
                     </div>
                 </div>
-                {warning_validation && (
-                    <div className="col-12">
-                        <p className="text-danger">{warning_validation}</p>
-                    </div>
-                )}
+                {validationMessage(warning_validation, isWarning)}
             </div>
 
             <div className="btn-list mt-2">