daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ client: Refactor DHCP settings

Browse Source
This commit is contained in:
Artem Baskal
2020-08-19 18:23:05 +03:00
committed by Simon Zolin
parent c9f58ce4a7
commit 1d35d73fc5
49 changed files with 2953 additions and 1660 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
client/src/install/Setup/AddressList.js
View File

@@ -4,50 +4,40 @@ import PropTypes from 'prop-types';
import { getIpList, getDnsAddress, getWebAddress } from '../../helpers/helpers';
import { ALL_INTERFACES_IP } from '../../helpers/constants';
const AddressList = (props) => {
let webAddress = getWebAddress(props.address, props.port);
let dnsAddress = getDnsAddress(props.address, props.port);
const renderItem = ({
ip, port, isDns,
}) => {
const webAddress = getWebAddress(ip, port);
const dnsAddress = getDnsAddress(ip, port);
if (props.address === ALL_INTERFACES_IP) {
return getIpList(props.interfaces).map((ip) => {
webAddress = getWebAddress(ip, props.port);
dnsAddress = getDnsAddress(ip, props.port);
if (props.isDns) {
return (
<li key={ip}>
<strong>
{dnsAddress}
</strong>
</li>
);
}
return (
<li key={ip}>
<a href={webAddress}>
{webAddress}
</a>
</li>
);
});
return <li key={ip}>{isDns
? <strong>{dnsAddress}</strong>
: <a href={webAddress}>{webAddress}</a>
}
if (props.isDns) {
return (
<strong>
{dnsAddress}
</strong>
);
}
return (
<a href={webAddress}>
{webAddress}
</a>
);
</li>;
};
const AddressList = ({
address,
interfaces,
port,
isDns,
}) => <ul className="list-group pl-4">{
address === ALL_INTERFACES_IP
? getIpList(interfaces)
.map((ip) => renderItem({
ip,
port,
isDns,
}))
: renderItem({
ip: address,
port,
isDns,
})
}
</ul>;
AddressList.propTypes = {
interfaces: PropTypes.object.isRequired,
address: PropTypes.string.isRequired,
@@ -58,4 +48,10 @@ AddressList.propTypes = {
isDns: PropTypes.bool,
};
renderItem.propTypes = {
ip: PropTypes.string.isRequired,
port: PropTypes.string.isRequired,
isDns: PropTypes.bool.isRequired,
};
export default AddressList;

2
client/src/install/Setup/Devices.js
View File

@@ -26,7 +26,7 @@ let Devices = (props) => (
interfaces={props.interfaces}
address={props.dnsIp}
port={props.dnsPort}
isDns={true}
isDns
/>
</div>
</div>

129
client/src/install/Setup/Settings.js
View File

@@ -10,51 +10,36 @@ import AddressList from './AddressList';
import { getInterfaceIp } from '../../helpers/helpers';
import {
ALL_INTERFACES_IP, FORM_NAME, ADDRESS_IN_USE_TEXT, PORT_53_FAQ_LINK, UBUNTU_SYSTEM_PORT,
ALL_INTERFACES_IP,
FORM_NAME,
ADDRESS_IN_USE_TEXT,
PORT_53_FAQ_LINK,
STATUS_RESPONSE,
STANDARD_DNS_PORT,
STANDARD_WEB_PORT,
} from '../../helpers/constants';
import { renderInputField, toNumber } from '../../helpers/form';
import { validateRequiredValue, validateInstallPort } from '../../helpers/validators';
const STATIC_STATUS = {
ENABLED: 'yes',
DISABLED: 'no',
ERROR: 'error',
};
const renderInterfaces = (interfaces) => Object.values(interfaces)
.map((option) => {
const {
name,
ip_addresses,
flags,
} = option;
const renderInterfaces = ((interfaces) => (
Object.keys(interfaces)
.map((item) => {
const option = interfaces[item];
const {
name,
ip_addresses,
flags,
} = option;
if (option && ip_addresses?.length > 0) {
const ip = getInterfaceIp(option);
const isDown = flags?.includes('down');
if (option && ip_addresses?.length > 0) {
const ip = getInterfaceIp(option);
const isDown = flags?.includes('down');
return <option value={ip} key={name} disabled={isDown}>
{name} - {ip} {isDown && `(${<Trans>down</Trans>})`}
</option>;
}
if (isDown) {
return (
<option value={ip} key={name} disabled>
<>
{name} - {ip} (<Trans>down</Trans>)
</>
</option>
);
}
return (
<option value={ip} key={name}>
{name} - {ip}
</option>
);
}
return false;
})
));
return null;
});
class Settings extends Component {
componentDidMount() {
@@ -77,42 +62,36 @@ class Settings extends Component {
getStaticIpMessage = (staticIp) => {
const { static: status, ip } = staticIp;
if (!status) {
return '';
}
return (
<>
{status === STATIC_STATUS.DISABLED && (
<>
<div className="mb-2">
<Trans values={{ ip }} components={[<strong key="0">text</strong>]}>
install_static_configure
</Trans>
</div>
<button
type="button"
className="btn btn-outline-primary btn-sm"
onClick={() => this.handleStaticIp(ip)}
>
<Trans>set_static_ip</Trans>
</button>
</>
)}
{status === STATIC_STATUS.ERROR && (
<div className="text-danger">
<Trans>install_static_error</Trans>
</div>
)}
{status === STATIC_STATUS.ENABLED && (
<div className="text-success">
<Trans>
install_static_ok
switch (status) {
case STATUS_RESPONSE.NO: {
return <>
<div className="mb-2">
<Trans values={{ ip }} components={[<strong key="0">text</strong>]}>
install_static_configure
</Trans>
</div>
)}
</>
);
<button
type="button"
className="btn btn-outline-primary btn-sm"
onClick={() => this.handleStaticIp(ip)}
>
<Trans>set_static_ip</Trans>
</button>
</>;
}
case STATUS_RESPONSE.ERROR: {
return <div className="text-danger">
<Trans>install_static_error</Trans>
</div>;
}
case STATUS_RESPONSE.YES: {
return <div className="text-success">
<Trans>install_static_ok</Trans>
</div>;
}
default:
return null;
}
};
handleAutofix = (type) => {
@@ -229,7 +208,7 @@ class Settings extends Component {
component={renderInputField}
type="number"
className="form-control"
placeholder="80"
placeholder={STANDARD_WEB_PORT.toString()}
validate={[validateInstallPort, validateRequiredValue]}
normalize={toNumber}
onChange={handleChange}
@@ -297,7 +276,7 @@ class Settings extends Component {
component={renderInputField}
type="number"
className="form-control"
placeholder="80"
placeholder={STANDARD_WEB_PORT.toString()}
validate={[validateInstallPort, validateRequiredValue]}
normalize={toNumber}
onChange={handleChange}
@@ -332,7 +311,7 @@ class Settings extends Component {
</p>
</div>}
</>}
{dnsPort === UBUNTU_SYSTEM_PORT && !isDnsFixAvailable
{dnsPort === STANDARD_DNS_PORT && !isDnsFixAvailable
&& dnsStatus.includes(ADDRESS_IN_USE_TEXT)
&& <Trans
components={[<a href={PORT_53_FAQ_LINK} key="0">link</a>]}>

2
client/src/install/Setup/Setup.css
View File

@@ -107,7 +107,7 @@
}
.form__message--error {
color: #cd201f;
color: var(--red);
}
.setup__button {