From b8c0ed9335e98ba7fe013576eed3e21168941889 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Tue, 19 Feb 2019 13:05:16 +0300
Subject: [PATCH] Reset fields on click

---
 .../components/Settings/Encryption/Form.js    | 19 ++++++++++++++++---
 client/src/components/ui/Checkbox.css         |  9 +++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Settings/Encryption/Form.js b/client/src/components/Settings/Encryption/Form.js
index bffe61a9..f3d83e29 100644
--- a/client/src/components/Settings/Encryption/Form.js
+++ b/client/src/components/Settings/Encryption/Form.js
@@ -23,6 +23,19 @@ const validate = (values) => {
     return errors;
 };
 
+const clearFields = (change) => {
+    const fields = {
+        private_key: '',
+        certificate_chain: '',
+        port_https: '',
+        port_dns_over_tls: '',
+        server_name: '',
+        force_https: false,
+        enabled: false,
+    };
+    Object.keys(fields).forEach(field => change(field, fields[field]));
+};
+
 let Form = (props) => {
     const {
         t,
@@ -31,7 +44,7 @@ let Form = (props) => {
         isEnabled,
         certificateChain,
         privateKey,
-        reset,
+        change,
         invalid,
         submitting,
         processing,
@@ -269,7 +282,7 @@ let Form = (props) => {
                     type="button"
                     className="btn btn-secondary btn-standart"
                     disabled={submitting || processing}
-                    onClick={reset}
+                    onClick={() => clearFields(change)}
                 >
                     <Trans>reset_settings</Trans>
                 </button>
@@ -284,7 +297,7 @@ Form.propTypes = {
     isEnabled: PropTypes.bool.isRequired,
     certificateChain: PropTypes.string.isRequired,
     privateKey: PropTypes.string.isRequired,
-    reset: PropTypes.func.isRequired,
+    change: PropTypes.func.isRequired,
     submitting: PropTypes.bool.isRequired,
     invalid: PropTypes.bool.isRequired,
     initialValues: PropTypes.object.isRequired,
diff --git a/client/src/components/ui/Checkbox.css b/client/src/components/ui/Checkbox.css
index 1778a93c..87e71793 100644
--- a/client/src/components/ui/Checkbox.css
+++ b/client/src/components/ui/Checkbox.css
@@ -73,14 +73,19 @@
     opacity: 0;
 }
 
-.checkbox__input:checked+.checkbox__label:before {
+.checkbox__input:checked + .checkbox__label:before {
     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4zIDkuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0xMS44IDAuNUw1LjMgOC41IDAuNSA0LjIiLz48L3N2Zz4=);
 }
 
-.checkbox__input:focus+.checkbox__label:before {
+.checkbox__input:focus + .checkbox__label:before {
     box-shadow: 0 0 1px 1px rgba(74, 74, 74, 0.32);
 }
 
+.checkbox__input:disabled + .checkbox__label {
+    opacity: 0.7;
+    cursor: default;
+}
+
 .checkbox__label-text {
     max-width: 515px;
     line-height: 1.5;