Pull request: 4927-imp-ui

Updates #4927.

Squashed commit of the following:

commit 510143325805133e379ebc207cdc6bff59c94ade
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Tue Nov 22 15:00:13 2022 +0300

    home: imp err

commit fd65a9914494b6dccdee7c0f0aa08bce80ce0945
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Mon Nov 21 18:53:39 2022 +0300

    client: imp validation ui

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",

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">