From 26c47e59dd63317bdb959cb416e7c1c0bfdf7dc1 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Fri, 7 Feb 2020 18:08:56 +0300
Subject: [PATCH] - client: fix static ip description

---
 client/src/__locales/en.json         |  7 ++-
 client/src/install/Setup/Settings.js | 75 ++++++++++++++++------------
 2 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index 3d93a7de..88442ac8 100644
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@@ -463,7 +463,10 @@
     "client_confirm_unblock": "Are you sure you want to unblock the client \"{{ip}}\"?",
     "client_blocked": "Client \"{{ip}}\" successfully blocked",
     "client_unblocked": "Client \"{{ip}}\" successfully unblocked",
+    "static_ip": "Static IP Address",
+    "static_ip_desc": "AdGuard Home is a server so it needs a static IP address to function properly. Otherwise, at some point, your router may assign a different IP address to this device.",
     "set_static_ip": "Set a static IP address",
-    "install_static_error": "We failed to determine if this network interface is configured by using a static IP address. Please set the static IP address manually.",
-    "install_static_configure": "We have detected that a dynamic IP address is used — {{ip}}. We suggest you to set this IP address as static."
+    "install_static_ok": "Good news, Static IP already configured",
+    "install_static_error": "AdGuard Home cannot configure it automatically for your OS. Please look for an instruction on how to do this manually",
+    "install_static_configure": "We have detected that a dynamic IP address is used — <0>{{ip}}</0>. Do you want to use your it as a static address?"
 }
diff --git a/client/src/install/Setup/Settings.js b/client/src/install/Setup/Settings.js
index 0b3120b2..22685ca5 100644
--- a/client/src/install/Setup/Settings.js
+++ b/client/src/install/Setup/Settings.js
@@ -7,7 +7,6 @@ import flow from 'lodash/flow';
 
 import Controls from './Controls';
 import AddressList from './AddressList';
-import Accordion from '../../components/ui/Accordion';
 
 import { getInterfaceIp } from '../../helpers/helpers';
 import { ALL_INTERFACES_IP } from '../../helpers/constants';
@@ -72,44 +71,41 @@ class Settings extends Component {
     }
 
     getStaticIpMessage = (staticIp, handleStaticIp) => {
-        const { static: status, ip, error } = staticIp;
+        const { static: status, ip } = staticIp;
 
-        if (!status || status === STATIC_STATUS.ENABLED) {
+        if (!status) {
             return '';
         }
 
         return (
-            <div className="col-12">
-                <Fragment>
+            <Fragment>
+                {status === STATIC_STATUS.DISABLED && (
+                    <Fragment>
+                        <Trans values={{ ip }} components={[<strong key="0">text</strong>]}>
+                            install_static_configure
+                        </Trans>
+                        <button
+                            type="button"
+                            className="btn btn-secondary btn-sm ml-2"
+                            onClick={() => handleStaticIp()}
+                        >
+                            <Trans>set_static_ip</Trans>
+                        </button>
+                    </Fragment>
+                )}
+                {status === STATIC_STATUS.ERROR && (
                     <div className="text-danger">
-                        {status === STATIC_STATUS.DISABLED && (
-                            <Fragment>
-                                <Trans values={{ ip }}>
-                                    install_static_configure
-                                </Trans>
-                                <button
-                                    type="button"
-                                    className="btn btn-secondary btn-sm ml-2"
-                                    onClick={() => handleStaticIp()}
-                                >
-                                    <Trans>set_static_ip</Trans>
-                                </button>
-                            </Fragment>
-                        )}
-                        {status === STATIC_STATUS.ERROR && (
-                            <Fragment>
-                                <Trans>install_static_error</Trans>
-                                <div className="mt-2 mb-2">
-                                    <Accordion label={this.props.t('error_details')}>
-                                        <span>{error}</span>
-                                    </Accordion>
-                                </div>
-                            </Fragment>
-                        )}
-                        <hr className="divider divider--small" />
+                        <Trans>install_static_error</Trans>
                     </div>
-                </Fragment>
-            </div>
+                )}
+                {status === STATIC_STATUS.ENABLED && (
+                    <div className="text-success">
+                        <Trans>
+                            install_static_ok
+                        </Trans>
+                    </div>
+                )}
+            </Fragment>
         );
     };
 
@@ -208,6 +204,7 @@ class Settings extends Component {
                         </div>
                     </div>
                 </div>
+
                 <div className="setup__group">
                     <div className="setup__subtitle">
                         <Trans>install_settings_dns</Trans>
@@ -248,7 +245,6 @@ class Settings extends Component {
                                 />
                             </div>
                         </div>
-                        {this.getStaticIpMessage(staticIp, handleStaticIp)}
                         <div className="col-12">
                             {dnsStatus &&
                                 <Fragment>
@@ -292,6 +288,19 @@ class Settings extends Component {
                         </div>
                     </div>
                 </div>
+
+                <div className="setup__group">
+                    <div className="setup__subtitle">
+                        <Trans>static_ip</Trans>
+                    </div>
+
+                    <div className="mb-2">
+                        <Trans>static_ip_desc</Trans>
+                    </div>
+
+                    {this.getStaticIpMessage(staticIp, handleStaticIp)}
+                </div>
+
                 <Controls invalid={invalid} />
             </form>
         );