From ffd9f1aaa9f2c0c8007c40e27c03f48d4a97697e Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Thu, 28 Mar 2019 16:30:22 +0300
Subject: [PATCH] * client: fix DHCP error message

---
 client/src/__locales/en.json                 |  4 +-
 client/src/components/Settings/Dhcp/index.js | 30 ++++++++++----
 client/src/components/ui/Accordion.css       | 29 ++++++++++++++
 client/src/components/ui/Accordion.js        | 41 ++++++++++++++++++++
 4 files changed, 95 insertions(+), 9 deletions(-)
 create mode 100644 client/src/components/ui/Accordion.css
 create mode 100644 client/src/components/ui/Accordion.js

diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index f8eecedb..b2f4850c 100644
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@@ -32,7 +32,9 @@
     "dhcp_ip_addresses": "IP addresses",
     "dhcp_table_hostname": "Hostname",
     "dhcp_table_expires": "Expires",
-    "dhcp_warning": "If you want to enable the built-in DHCP server, make sure that there is no other active DHCP server. Otherwise, it can break the internet for connected devices!",
+    "dhcp_warning": "If you want to enable DHCP server anyway, make sure that there is no other active DHCP server in your network. Otherwise, it can break the Internet for connected devices!",
+    "dhcp_error": "We couldn't determine whether an another DHCP server exists in the network.",
+    "error_details": "Error details",
     "back": "Back",
     "dashboard": "Dashboard",
     "settings": "Settings",
diff --git a/client/src/components/Settings/Dhcp/index.js b/client/src/components/Settings/Dhcp/index.js
index 5335586b..af74b8d7 100644
--- a/client/src/components/Settings/Dhcp/index.js
+++ b/client/src/components/Settings/Dhcp/index.js
@@ -7,6 +7,7 @@ import Form from './Form';
 import Leases from './Leases';
 import Interface from './Interface';
 import Card from '../../ui/Card';
+import Accordion from '../../ui/Accordion';
 
 class Dhcp extends Component {
     handleFormSubmit = (values) => {
@@ -60,14 +61,17 @@ class Dhcp extends Component {
         );
     }
 
-    getActiveDhcpMessage = () => {
-        const { active } = this.props.dhcp;
-
+    getActiveDhcpMessage = (t, active) => {
         if (active) {
             if (active.error) {
                 return (
                     <div className="text-danger mb-2">
-                        {active.error}
+                        <Trans>dhcp_error</Trans>
+                        <div className="mt-2 mb-2">
+                            <Accordion label={t('error_details')}>
+                                <span>{active.error}</span>
+                            </Accordion>
+                        </div>
                     </div>
                 );
             }
@@ -90,6 +94,18 @@ class Dhcp extends Component {
         return '';
     }
 
+    getDhcpWarning = (active) => {
+        if (active && active.found === false) {
+            return '';
+        }
+
+        return (
+            <div className="text-danger">
+                <Trans>dhcp_warning</Trans>
+            </div>
+        );
+    }
+
     render() {
         const { t, dhcp } = this.props;
         const statusButtonClass = classnames({
@@ -138,10 +154,8 @@ class Dhcp extends Component {
                                         <Trans>check_dhcp_servers</Trans>
                                     </button>
                                 </div>
-                                {this.getActiveDhcpMessage()}
-                                <div className="text-danger">
-                                    <Trans>dhcp_warning</Trans>
-                                </div>
+                                {this.getActiveDhcpMessage(t, dhcp.active)}
+                                {this.getDhcpWarning(dhcp.active)}
                             </Fragment>
                         }
                     </div>
diff --git a/client/src/components/ui/Accordion.css b/client/src/components/ui/Accordion.css
new file mode 100644
index 00000000..8644f08a
--- /dev/null
+++ b/client/src/components/ui/Accordion.css
@@ -0,0 +1,29 @@
+.accordion__label {
+    position: relative;
+    display: inline-block;
+    padding-left: 25px;
+    color: #495057;
+    cursor: pointer;
+}
+
+.accordion__label:after {
+    content: "";
+    position: absolute;
+    top: 7px;
+    left: 0;
+    width: 17px;
+    height: 10px;
+    background-image: url("./svg/chevron-down.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+}
+
+.accordion__label--open:after {
+    transform: rotate(180deg);
+}
+
+.accordion__content {
+    padding-top: 5px;
+    color: #495057;
+}
diff --git a/client/src/components/ui/Accordion.js b/client/src/components/ui/Accordion.js
new file mode 100644
index 00000000..df94b179
--- /dev/null
+++ b/client/src/components/ui/Accordion.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './Accordion.css';
+
+class Accordion extends Component {
+    state = {
+        isOpen: false,
+    }
+
+    handleClick = () => {
+        this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+    };
+
+    render() {
+        const accordionClass = this.state.isOpen ? 'accordion__label--open' : '';
+
+        return (
+            <div className="accordion">
+                <div
+                    className={`accordion__label ${accordionClass}`}
+                    onClick={this.handleClick}
+                >
+                    {this.props.label}
+                </div>
+                {this.state.isOpen && (
+                    <div className="accordion__content">
+                        {this.props.children}
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+Accordion.propTypes = {
+    children: PropTypes.node.isRequired,
+    label: PropTypes.string.isRequired,
+};
+
+export default Accordion;