Added validation on change and enable encryption checkbox

client/src/components/Settings/Encryption/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withNamespaces } from 'react-i18next';
+import debounce from 'lodash/debounce';
 
 import Form from './Form';
 import Card from '../../ui/Card';
@@ -10,14 +11,20 @@ class Encryption extends Component {
         this.props.setTlsConfig(values);
     };
 
+    handleFormChange = debounce((values) => {
+        this.props.validateTlsConfig(values);
+    }, 300);
+
     render() {
         const { encryption, t } = this.props;
         const {
-            processing,
-            processingConfig,
-            status_cert: statusCert,
-            status_key: statusKey,
-            ...values
+            enabled,
+            server_name,
+            force_https,
+            port_https,
+            port_dns_over_tls,
+            certificate_chain,
+            private_key,
         } = encryption;
 
         return (
@@ -29,11 +36,19 @@ class Encryption extends Component {
                         bodyType="card-body box-body--settings"
                     >
                         <Form
-                            initialValues={{ ...values }}
+                            initialValues={{
+                                enabled,
+                                server_name,
+                                force_https,
+                                port_https,
+                                port_dns_over_tls,
+                                certificate_chain,
+                                private_key,
+                            }}
                             processing={encryption.processingConfig}
-                            statusCert={statusCert}
-                            statusKey={statusKey}
                             onSubmit={this.handleFormSubmit}
+                            onChange={this.handleFormChange}
+                            {...this.props.encryption}
                         />
                     </Card>
                 }
@@ -44,6 +59,7 @@ class Encryption extends Component {
 
 Encryption.propTypes = {
     setTlsConfig: PropTypes.func.isRequired,
+    validateTlsConfig: PropTypes.func.isRequired,
     encryption: PropTypes.object.isRequired,
     t: PropTypes.func.isRequired,
 };