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 (
- {active.error}
+
dhcp_error
+
);
}
@@ -90,6 +94,18 @@ class Dhcp extends Component {
return '';
}
+ getDhcpWarning = (active) => {
+ if (active && active.found === false) {
+ return '';
+ }
+
+ return (
+
+ dhcp_warning
+
+ );
+ }
+
render() {
const { t, dhcp } = this.props;
const statusButtonClass = classnames({
@@ -138,10 +154,8 @@ class Dhcp extends Component {
check_dhcp_servers
- {this.getActiveDhcpMessage()}
-
- dhcp_warning
-
+ {this.getActiveDhcpMessage(t, dhcp.active)}
+ {this.getDhcpWarning(dhcp.active)}
}
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 (
+
+
+ {this.props.label}
+
+ {this.state.isOpen && (
+
+ {this.props.children}
+
+ )}
+
+ );
+ }
+}
+
+Accordion.propTypes = {
+ children: PropTypes.node.isRequired,
+ label: PropTypes.string.isRequired,
+};
+
+export default Accordion;