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

all: sync with master; upd chlog

Browse Source
This commit is contained in:
Ainar Garipov
2023-04-12 14:48:42 +03:00
parent 0dad53b5f7
commit d9c57cdd9a
181 changed files with 6992 additions and 3430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/components/App/index.js
View File

@@ -43,6 +43,7 @@ import DnsRewrites from '../../containers/DnsRewrites';
import CustomRules from '../../containers/CustomRules';
import Services from '../Filters/Services';
import Logs from '../Logs';
import ProtectionTimer from '../ProtectionTimer';
const ROUTES = [
{
@@ -164,8 +165,7 @@ const App = () => {
}
const colorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
const prefersDark = colorSchemeMedia.matches;
setUITheme(prefersDark ? THEMES.dark : THEMES.light);
setUITheme(theme);
if (colorSchemeMedia.addEventListener !== undefined) {
colorSchemeMedia.addEventListener('change', (e) => {
@@ -191,6 +191,7 @@ const App = () => {
{!processingEncryption && <EncryptionTopline />}
<LoadingBar className="loading-bar" updateTime={1000} />
<Header />
<ProtectionTimer />
<div className="container container--wrap pb-5">
{processing && <Loading />}
{!isCoreRunning && <div className="row row-cards">

15
client/src/components/Dashboard/Dashboard.css
View File

@@ -1,3 +1,9 @@
.dashboard-protection-button.btn-gray {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-color: #a4a4a4;
}
.stats__table .popover__body {
left: -10px;
min-width: 270px;
@@ -34,20 +40,11 @@
align-items: center;
}
.dashboard-title__button {
margin: 0 0.5rem;
}
@media (max-width: 767.98px) {
.page-title--dashboard {
flex-direction: column;
align-items: flex-start;
}
.dashboard-title__button {
margin: 0.5rem 0;
display: block;
}
}
.counters__row {

114
client/src/components/Dashboard/index.js
View File

@@ -9,18 +9,25 @@ import Counters from './Counters';
import Clients from './Clients';
import QueriedDomains from './QueriedDomains';
import BlockedDomains from './BlockedDomains';
import { SETTINGS_URLS } from '../../helpers/constants';
import { DISABLE_PROTECTION_TIMINGS, ONE_SECOND_IN_MS, SETTINGS_URLS } from '../../helpers/constants';
import {
msToSeconds,
msToMinutes,
msToHours,
msToDays,
} from '../../helpers/helpers';
import PageTitle from '../ui/PageTitle';
import Loading from '../ui/Loading';
import './Dashboard.css';
import Dropdown from '../ui/Dropdown';
const Dashboard = ({
getAccessList,
getStats,
getStatsConfig,
dashboard,
dashboard: { protectionEnabled, processingProtection },
dashboard: { protectionEnabled, processingProtection, protectionDisabledDuration },
toggleProtection,
stats,
access,
@@ -36,20 +43,20 @@ const Dashboard = ({
useEffect(() => {
getAllStats();
}, []);
const getSubtitle = () => {
if (stats.interval === 0) {
const ONE_DAY = 1;
const intervalInDays = msToDays(stats.interval);
if (intervalInDays < ONE_DAY) {
return t('stats_disabled_short');
}
return stats.interval === 1
return intervalInDays === ONE_DAY
? t('for_last_24_hours')
: t('for_last_days', { count: stats.interval });
: t('for_last_days', { count: msToDays(stats.interval) });
};
const buttonText = protectionEnabled ? 'disable_protection' : 'enable_protection';
const buttonClass = classNames('btn btn-sm dashboard-title__button', {
const buttonClass = classNames('btn btn-sm dashboard-protection-button', {
'btn-gray': protectionEnabled,
'btn-success': !protectionEnabled,
});
@@ -71,16 +78,87 @@ const Dashboard = ({
const subtitle = getSubtitle();
const DISABLE_PROTECTION_ITEMS = [
{
text: t('disable_for_seconds', { count: msToSeconds(DISABLE_PROTECTION_TIMINGS.HALF_MINUTE) }),
disableTime: DISABLE_PROTECTION_TIMINGS.HALF_MINUTE,
},
{
text: t('disable_for_minutes', { count: msToMinutes(DISABLE_PROTECTION_TIMINGS.MINUTE) }),
disableTime: DISABLE_PROTECTION_TIMINGS.MINUTE,
},
{
text: t('disable_for_minutes', { count: msToMinutes(DISABLE_PROTECTION_TIMINGS.TEN_MINUTES) }),
disableTime: DISABLE_PROTECTION_TIMINGS.TEN_MINUTES,
},
{
text: t('disable_for_hours', { count: msToHours(DISABLE_PROTECTION_TIMINGS.HOUR) }),
disableTime: DISABLE_PROTECTION_TIMINGS.HOUR,
},
{
text: t('disable_until_tomorrow'),
disableTime: DISABLE_PROTECTION_TIMINGS.TOMORROW,
},
];
const getDisableProtectionItems = () => (
Object.values(DISABLE_PROTECTION_ITEMS)
.map((item, index) => (
<div
key={`disable_timings_${index}`}
className="dropdown-item"
onClick={() => {
toggleProtection(protectionEnabled, item.disableTime - ONE_SECOND_IN_MS);
}}
>
{item.text}
</div>
))
);
const getRemaningTimeText = (milliseconds) => {
if (!milliseconds) {
return '';
}
const date = new Date(milliseconds);
const hh = date.getUTCHours();
const mm = `0${date.getUTCMinutes()}`.slice(-2);
const ss = `0${date.getUTCSeconds()}`.slice(-2);
const formattedHH = `0${hh}`.slice(-2);
return hh ? `${formattedHH}:${mm}:${ss}` : `${mm}:${ss}`;
};
const getProtectionBtnText = (status) => (status ? t('disable_protection') : t('enable_protection'));
return <>
<PageTitle title={t('dashboard')} containerClass="page-title--dashboard">
<button
type="button"
className={buttonClass}
onClick={() => toggleProtection(protectionEnabled)}
disabled={processingProtection}
>
<Trans>{buttonText}</Trans>
</button>
<div className="page-title__protection">
<button
type="button"
className={buttonClass}
onClick={() => {
toggleProtection(protectionEnabled);
}}
disabled={processingProtection}
>
{protectionDisabledDuration
? `${t('enable_protection_timer')} ${getRemaningTimeText(protectionDisabledDuration)}`
: getProtectionBtnText(protectionEnabled)
}
</button>
{protectionEnabled && <Dropdown
label=""
baseClassName="dropdown-protection"
icon="arrow-down"
controlClassName="dropdown-protection__toggle"
menuClassName="dropdown-menu dropdown-menu-arrow dropdown-menu--protection"
>
{getDisableProtectionItems()}
</Dropdown>}
</div>
<button
type="button"
className="btn btn-outline-primary btn-sm"
@@ -107,7 +185,7 @@ const Dashboard = ({
</div>
)}
<Statistics
interval={stats.interval}
interval={msToDays(stats.interval)}
dnsQueries={stats.dnsQueries}
blockedFiltering={stats.blockedFiltering}
replacedSafebrowsing={stats.replacedSafebrowsing}

10
client/src/components/Filters/DnsBlocklist.js
View File

@@ -12,7 +12,6 @@ import { MODAL_TYPE } from '../../helpers/constants';
import {
getCurrentFilter,
getObjDiff,
} from '../../helpers/helpers';
import filtersCatalog from '../../helpers/filters/filters';
@@ -22,7 +21,7 @@ class DnsBlocklist extends Component {
this.props.getFilteringStatus();
}
handleSubmit = (values, _, { initialValues }) => {
handleSubmit = (values) => {
const { modalFilterUrl, modalType } = this.props.filtering;
switch (modalType) {
@@ -35,7 +34,12 @@ class DnsBlocklist extends Component {
break;
}
case MODAL_TYPE.CHOOSE_FILTERING_LIST: {
const changedValues = getObjDiff(initialValues, values);
const changedValues = Object.entries(values)?.reduce((acc, [key, value]) => {
if (value && key in filtersCatalog.filters) {
acc[key] = value;
}
return acc;
}, {});
Object.keys(changedValues)
.forEach((fieldName) => {

52
client/src/components/ProtectionTimer/index.js Normal file
View File

@@ -0,0 +1,52 @@
import { useEffect } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { ONE_SECOND_IN_MS } from '../../helpers/constants';
import { setProtectionTimerTime, toggleProtectionSuccess } from '../../actions';
let interval = null;
const ProtectionTimer = ({
protectionDisabledDuration,
toggleProtectionSuccess,
setProtectionTimerTime,
}) => {
useEffect(() => {
if (protectionDisabledDuration !== null && protectionDisabledDuration < ONE_SECOND_IN_MS) {
toggleProtectionSuccess({ disabledDuration: null });
}
if (protectionDisabledDuration) {
interval = setInterval(() => {
setProtectionTimerTime(protectionDisabledDuration - ONE_SECOND_IN_MS);
}, ONE_SECOND_IN_MS);
}
return () => {
clearInterval(interval);
};
}, [protectionDisabledDuration]);
return null;
};
ProtectionTimer.propTypes = {
setProtectionTimerTime: PropTypes.func.isRequired,
};
const mapStateToProps = (state) => {
const { dashboard } = state;
const { protectionEnabled, protectionDisabledDuration } = dashboard;
return { protectionEnabled, protectionDisabledDuration };
};
const mapDispatchToProps = {
toggleProtectionSuccess,
setProtectionTimerTime,
};
export default connect(
mapStateToProps,
mapDispatchToProps,
)(ProtectionTimer);

6
client/src/components/Settings/Clients/ClientsTable/ClientsTable.js
View File

@@ -7,6 +7,7 @@ import { useDispatch, useSelector } from 'react-redux';
import ReactTable from 'react-table';
import { getAllBlockedServices } from '../../../../actions/services';
import { initSettings } from '../../../../actions';
import {
splitByNewLine,
countClientsStatistics,
@@ -38,9 +39,13 @@ const ClientsTable = ({
const [t] = useTranslation();
const dispatch = useDispatch();
const services = useSelector((store) => store?.services);
const globalSettings = useSelector((store) => store?.settings.settingsList) || {};
const { safesearch } = globalSettings;
useEffect(() => {
dispatch(getAllBlockedServices());
dispatch(initSettings());
}, []);
const handleFormAdd = (values) => {
@@ -107,6 +112,7 @@ const ClientsTable = ({
tags: [],
use_global_settings: true,
use_global_blocked_services: true,
safe_search: { ...(safesearch || {}) },
};
};

33
client/src/components/Settings/Clients/Form.js
View File

@@ -11,7 +11,7 @@ import Select from 'react-select';
import i18n from '../../../i18n';
import Tabs from '../../ui/Tabs';
import Examples from '../Dns/Upstream/Examples';
import { toggleAllServices, trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
import { toggleAllServices, trimLinesAndRemoveEmpty, captitalizeWords } from '../../../helpers/helpers';
import {
renderInputField,
renderGroupField,
@@ -40,10 +40,6 @@ const settingsCheckboxes = [
name: 'parental_enabled',
placeholder: 'use_adguard_parental',
},
{
name: 'safesearch_enabled',
placeholder: 'enforce_safe_search',
},
];
const validate = (values) => {
const errors = {};
@@ -139,8 +135,12 @@ let Form = (props) => {
processingUpdating,
invalid,
tagsOptions,
initialValues,
} = props;
const services = useSelector((store) => store?.services);
const { safe_search } = initialValues;
const safeSearchServices = { ...safe_search };
delete safeSearchServices.enabled;
const [activeTabLabel, setActiveTabLabel] = useState('settings');
@@ -163,6 +163,28 @@ let Form = (props) => {
/>
</div>
))}
<div className="form__group">
<Field
name="safe_search.enabled"
type="checkbox"
component={CheckboxField}
placeholder={t('enforce_safe_search')}
disabled={useGlobalSettings}
/>
</div>
<div className='form__group--inner'>
{Object.keys(safeSearchServices).map((searchKey) => (
<div key={searchKey}>
<Field
name={`safe_search.${searchKey}`}
type="checkbox"
component={CheckboxField}
placeholder={captitalizeWords(searchKey)}
disabled={useGlobalSettings}
/>
</div>
))}
</div>
</div>,
},
block_services: {
@@ -358,6 +380,7 @@ Form.propTypes = {
processingUpdating: PropTypes.bool.isRequired,
invalid: PropTypes.bool.isRequired,
tagsOptions: PropTypes.array.isRequired,
initialValues: PropTypes.object,
};
const selector = formValueSelector(FORM_NAME.CLIENT);

35
client/src/components/Settings/Dhcp/Leases.js
View File

@@ -1,9 +1,11 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ReactTable from 'react-table';
import { Trans, withTranslation } from 'react-i18next';
import { LEASES_TABLE_DEFAULT_PAGE_SIZE } from '../../../helpers/constants';
import { sortIp } from '../../../helpers/helpers';
import { toggleLeaseModal } from '../../../actions';
class Leases extends Component {
cellWrap = ({ value }) => (
@@ -14,6 +16,30 @@ class Leases extends Component {
</div>
);
convertToStatic = (data) => () => {
const { dispatch } = this.props;
dispatch(toggleLeaseModal(data));
}
makeStatic = ({ row }) => {
const { t, disabledLeasesButton } = this.props;
return (
<div className="logs__row logs__row--center">
<button
type="button"
className="btn btn-icon btn-icon--green btn-outline-secondary btn-sm"
title={t('make_static')}
onClick={this.convertToStatic(row)}
disabled={disabledLeasesButton}
>
<svg className="icons icon12">
<use xlinkHref="#plus" />
</svg>
</button>
</div>
);
}
render() {
const { leases, t } = this.props;
return (
@@ -39,8 +65,11 @@ class Leases extends Component {
}, {
Header: <Trans>dhcp_table_expires</Trans>,
accessor: 'expires',
minWidth: 130,
minWidth: 220,
Cell: this.cellWrap,
}, {
Header: <Trans>actions_table_header</Trans>,
Cell: this.makeStatic,
},
]}
pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
@@ -57,6 +86,8 @@ class Leases extends Component {
Leases.propTypes = {
leases: PropTypes.array,
t: PropTypes.func,
dispatch: PropTypes.func,
disabledLeasesButton: PropTypes.bool,
};
export default withTranslation()(Leases);
export default withTranslation()(connect(() => ({}), (dispatch) => ({ dispatch }))(Leases));

5
client/src/components/Settings/Dhcp/StaticLeases/Form.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Trans, useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import { renderInputField, normalizeMac } from '../../../../helpers/form';
import {
@@ -25,6 +25,7 @@ const Form = ({
}) => {
const { t } = useTranslation();
const dispatch = useDispatch();
const dynamicLease = useSelector((store) => store.dhcp.leaseModalConfig, shallowEqual);
const onClick = () => {
reset();
@@ -87,7 +88,7 @@ const Form = ({
<button
type="submit"
className="btn btn-success btn-standard"
disabled={submitting || pristine || processingAdding}
disabled={submitting || processingAdding || (pristine && !dynamicLease)}
>
<Trans>save_btn</Trans>
</button>

11
client/src/components/Settings/Dhcp/StaticLeases/Modal.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Trans, withTranslation } from 'react-i18next';
import ReactModal from 'react-modal';
import { useDispatch } from 'react-redux';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import Form from './Form';
import { toggleLeaseModal } from '../../../../actions';
@@ -18,6 +18,9 @@ const Modal = ({
const dispatch = useDispatch();
const toggleModal = () => dispatch(toggleLeaseModal());
const leaseInitialData = useSelector(
(state) => state.dhcp.leaseModalConfig, shallowEqual,
) || {};
return (
<ReactModal
@@ -37,9 +40,9 @@ const Modal = ({
</div>
<Form
initialValues={{
mac: '',
ip: '',
hostname: '',
mac: leaseInitialData.mac ?? '',
ip: leaseInitialData.ip ?? '',
hostname: leaseInitialData.hostname ?? '',
cidr,
rangeStart,
rangeEnd,

6
client/src/components/Settings/Dhcp/index.js
View File

@@ -188,8 +188,8 @@ const Dhcp = () => {
const inputtedIPv4values = dhcp?.values?.v4?.gateway_ip && dhcp?.values?.v4?.subnet_mask;
const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {}).some(Boolean);
const disabledLeasesButton = dhcp?.syncErrors || interfaces?.syncErrors
|| !isInterfaceIncludesIpv4 || isEmptyConfig || processingConfig || !inputtedIPv4values;
const disabledLeasesButton = Boolean(dhcp?.syncErrors || interfaces?.syncErrors
|| !isInterfaceIncludesIpv4 || isEmptyConfig || processingConfig || !inputtedIPv4values);
const cidr = inputtedIPv4values ? `${dhcp?.values?.v4?.gateway_ip}/${subnetMaskToBitMask(dhcp?.values?.v4?.subnet_mask)}` : '';
return <>
@@ -260,7 +260,7 @@ const Dhcp = () => {
>
<div className="row">
<div className="col">
<Leases leases={leases} />
<Leases leases={leases} disabledLeasesButton={disabledLeasesButton}/>
</div>
</div>
</Card>}

41
client/src/components/Settings/Dns/Config/Form.js
View File

@@ -13,15 +13,11 @@ import {
validateIpv4,
validateIpv6,
validateRequiredValue,
validateIp,
} from '../../../../helpers/validators';
import { BLOCKING_MODES, FORM_NAME, UINT32_RANGE } from '../../../../helpers/constants';
const checkboxes = [
{
name: 'edns_cs_enabled',
placeholder: 'edns_enable',
subtitle: 'edns_cs_desc',
},
{
name: 'dnssec_enabled',
placeholder: 'dnssec_enable',
@@ -66,6 +62,8 @@ const Form = ({
const { t } = useTranslation();
const {
blocking_mode,
edns_cs_enabled,
edns_cs_use_custom,
} = useSelector((state) => state.form[FORM_NAME.BLOCKING_MODE].values ?? {}, shallowEqual);
return <form onSubmit={handleSubmit}>
@@ -92,6 +90,39 @@ const Form = ({
/>
</div>
</div>
<div className="col-12">
<div className="form__group form__group--settings">
<Field
name="edns_cs_enabled"
type="checkbox"
component={CheckboxField}
placeholder={t('edns_enable')}
disabled={processing}
subtitle={t('edns_cs_desc')}
/>
</div>
</div>
<div className="col-12 form__group form__group--inner">
<div className="form__group ">
<Field
name="edns_cs_use_custom"
type="checkbox"
component={CheckboxField}
placeholder={t('edns_use_custom_ip')}
disabled={processing || !edns_cs_enabled}
subtitle={t('edns_use_custom_ip_desc')}
/>
</div>
{edns_cs_use_custom && (<Field
name="edns_cs_custom_ip"
component={renderInputField}
className="form-control"
placeholder={t('form_enter_ip')}
validate={[validateIp, validateRequiredValue]}
/>)}
</div>
{checkboxes.map(({ name, placeholder, subtitle }) => <div className="col-12" key={name}>
<div className="form__group form__group--settings">
<Field

4
client/src/components/Settings/Dns/Config/index.js
View File

@@ -14,6 +14,8 @@ const Config = () => {
blocking_ipv4,
blocking_ipv6,
edns_cs_enabled,
edns_cs_use_custom,
edns_cs_custom_ip,
dnssec_enabled,
disable_ipv6,
processingSetConfig,
@@ -39,6 +41,8 @@ const Config = () => {
edns_cs_enabled,
disable_ipv6,
dnssec_enabled,
edns_cs_use_custom,
edns_cs_custom_ip,
}}
onSubmit={handleFormSubmit}
processing={processingSetConfig}

36
client/src/components/Settings/LogsConfig/Form.js
View File

@@ -4,18 +4,28 @@ import { Field, reduxForm } from 'redux-form';
import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow';
import { CheckboxField, renderRadioField, toFloatNumber } from '../../../helpers/form';
import { FORM_NAME, QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
import {
CheckboxField,
renderRadioField,
toFloatNumber,
renderTextareaField,
} from '../../../helpers/form';
import {
FORM_NAME,
QUERY_LOG_INTERVALS_DAYS,
HOUR,
DAY,
} from '../../../helpers/constants';
import '../FormButton.css';
const getIntervalTitle = (interval, t) => {
switch (interval) {
case 0.25:
case 6 * HOUR:
return t('interval_6_hour');
case 1:
case DAY:
return t('interval_24_hour');
default:
return t('interval_days', { count: interval });
return t('interval_days', { count: interval / DAY });
}
};
@@ -66,6 +76,22 @@ const Form = (props) => {
{getIntervalFields(processing, t, toFloatNumber)}
</div>
</div>
<label className="form__label form__label--with-desc">
<Trans>ignore_domains_title</Trans>
</label>
<div className="form__desc form__desc--top">
<Trans>ignore_domains_desc_query</Trans>
</div>
<div className="form__group form__group--settings">
<Field
name="ignored"
type="textarea"
className="form-control form-control--textarea font-monospace text-input"
component={renderTextareaField}
placeholder={t('ignore_domains')}
disabled={processing}
/>
</div>
<div className="mt-5">
<button
type="submit"

10
client/src/components/Settings/LogsConfig/index.js
View File

@@ -10,13 +10,15 @@ class LogsConfig extends Component {
const { t, interval: prevInterval } = this.props;
const { interval } = values;
const data = { ...values, ignored: values.ignored ? values.ignored.split('\n') : [] };
if (interval !== prevInterval) {
// eslint-disable-next-line no-alert
if (window.confirm(t('query_log_retention_confirm'))) {
this.props.setLogsConfig(values);
this.props.setLogsConfig(data);
}
} else {
this.props.setLogsConfig(values);
this.props.setLogsConfig(data);
}
};
@@ -30,7 +32,7 @@ class LogsConfig extends Component {
render() {
const {
t, enabled, interval, processing, processingClear, anonymize_client_ip,
t, enabled, interval, processing, processingClear, anonymize_client_ip, ignored,
} = this.props;
return (
@@ -45,6 +47,7 @@ class LogsConfig extends Component {
enabled,
interval,
anonymize_client_ip,
ignored: ignored.join('\n'),
}}
onSubmit={this.handleFormSubmit}
processing={processing}
@@ -62,6 +65,7 @@ LogsConfig.propTypes = {
enabled: PropTypes.bool.isRequired,
anonymize_client_ip: PropTypes.bool.isRequired,
processing: PropTypes.bool.isRequired,
ignored: PropTypes.array.isRequired,
processingClear: PropTypes.bool.isRequired,
setLogsConfig: PropTypes.func.isRequired,
clearLogs: PropTypes.func.isRequired,

8
client/src/components/Settings/Settings.css
View File

@@ -22,6 +22,14 @@
margin-bottom: 25px;
}
.form__group--inner .form__group--checkbox {
margin-bottom: 12px;
}
.form__group--inner .form__group--checkbox:last-child {
margin-bottom: 0;
}
.form__inline {
display: flex;
justify-content: flex-start;

48
client/src/components/Settings/StatsConfig/Form.js
View File

@@ -4,23 +4,31 @@ import { Field, reduxForm } from 'redux-form';
import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow';
import { renderRadioField, toNumber, CheckboxField } from '../../../helpers/form';
import { FORM_NAME, STATS_INTERVALS_DAYS, DISABLED_STATS_INTERVAL } from '../../../helpers/constants';
import {
renderRadioField,
toNumber,
CheckboxField,
renderTextareaField,
} from '../../../helpers/form';
import {
FORM_NAME,
STATS_INTERVALS_DAYS,
DAY,
} from '../../../helpers/constants';
import '../FormButton.css';
const getIntervalTitle = (interval, t) => {
switch (interval) {
const getIntervalTitle = (intervalMs, t) => {
switch (intervalMs / DAY) {
case 1:
return t('interval_24_hour');
default:
return t('interval_days', { count: interval });
return t('interval_days', { count: intervalMs / DAY });
}
};
const Form = (props) => {
const {
handleSubmit,
change,
processing,
submitting,
invalid,
@@ -38,13 +46,6 @@ const Form = (props) => {
component={CheckboxField}
placeholder={t('statistics_enable')}
disabled={processing}
onChange={(event) => {
if (event.target.checked) {
change('interval', STATS_INTERVALS_DAYS[0]);
} else {
change('interval', DISABLED_STATS_INTERVAL);
}
}}
/>
</div>
<label className="form__label form__label--with-desc">
@@ -65,15 +66,26 @@ const Form = (props) => {
placeholder={getIntervalTitle(interval, t)}
normalize={toNumber}
disabled={processing}
onChange={(event) => {
if (event.target.checked) {
change('enabled', true);
}
}}
/>
))}
</div>
</div>
<label className="form__label form__label--with-desc">
<Trans>ignore_domains_title</Trans>
</label>
<div className="form__desc form__desc--top">
<Trans>ignore_domains_desc_stats</Trans>
</div>
<div className="form__group form__group--settings">
<Field
name="ignored"
type="textarea"
className="form-control form-control--textarea font-monospace text-input"
component={renderTextareaField}
placeholder={t('ignore_domains')}
disabled={processing}
/>
</div>
<div className="mt-5">
<button
type="submit"

15
client/src/components/Settings/StatsConfig/index.js
View File

@@ -6,9 +6,13 @@ import Card from '../../ui/Card';
import Form from './Form';
class StatsConfig extends Component {
handleFormSubmit = (values) => {
handleFormSubmit = ({ enabled, interval, ignored }) => {
const { t, interval: prevInterval } = this.props;
const config = { interval: values.interval };
const config = {
enabled,
interval,
ignored: ignored ? ignored.split('\n') : [],
};
if (config.interval < prevInterval) {
if (window.confirm(t('statistics_retention_confirm'))) {
@@ -29,7 +33,7 @@ class StatsConfig extends Component {
render() {
const {
t, interval, processing, processingReset,
t, interval, processing, processingReset, ignored, enabled,
} = this.props;
return (
@@ -42,7 +46,8 @@ class StatsConfig extends Component {
<Form
initialValues={{
interval,
enabled: !!interval,
enabled,
ignored: ignored.join('\n'),
}}
onSubmit={this.handleFormSubmit}
processing={processing}
@@ -57,6 +62,8 @@ class StatsConfig extends Component {
StatsConfig.propTypes = {
interval: PropTypes.number.isRequired,
ignored: PropTypes.array.isRequired,
enabled: PropTypes.bool.isRequired,
processing: PropTypes.bool.isRequired,
processingReset: PropTypes.bool.isRequired,
setStatsConfig: PropTypes.func.isRequired,

46
client/src/components/Settings/index.js
View File

@@ -10,7 +10,7 @@ import Checkbox from '../ui/Checkbox';
import Loading from '../ui/Loading';
import PageTitle from '../ui/PageTitle';
import Card from '../ui/Card';
import { getObjectKeysSorted } from '../../helpers/helpers';
import { getObjectKeysSorted, captitalizeWords } from '../../helpers/helpers';
import './Settings.css';
const ORDER_KEY = 'order';
@@ -28,12 +28,6 @@ const SETTINGS = {
subtitle: 'use_adguard_parental_hint',
[ORDER_KEY]: 1,
},
safesearch: {
enabled: false,
title: 'enforce_safe_search',
subtitle: 'enforce_save_search_hint',
[ORDER_KEY]: 2,
},
};
class Settings extends Component {
@@ -44,7 +38,7 @@ class Settings extends Component {
this.props.getFilteringStatus();
}
renderSettings = (settings) => getObjectKeysSorted(settings, ORDER_KEY)
renderSettings = (settings) => getObjectKeysSorted(SETTINGS, ORDER_KEY)
.map((key) => {
const setting = settings[key];
const { enabled } = setting;
@@ -55,6 +49,35 @@ class Settings extends Component {
/>;
});
renderSafeSearch = () => {
const { settings: { settingsList: { safesearch } } } = this.props;
const { enabled } = safesearch || {};
const searches = { ...(safesearch || {}) };
delete searches.enabled;
return (
<>
<Checkbox
enabled={enabled}
title='enforce_safe_search'
subtitle='enforce_save_search_hint'
handleChange={({ target: { checked: enabled } }) => this.props.toggleSetting('safesearch', { ...safesearch, enabled })}
/>
<div className='form__group--inner'>
{Object.keys(searches).map((searchKey) => (
<Checkbox
key={searchKey}
enabled={searches[searchKey]}
title={captitalizeWords(searchKey)}
subtitle=''
disabled={!safesearch.enabled}
handleChange={({ target: { checked } }) => this.props.toggleSetting('safesearch', { ...safesearch, [searchKey]: checked })}
/>
))}
</div>
</>
);
};
render() {
const {
settings,
@@ -92,12 +115,14 @@ class Settings extends Component {
setFiltersConfig={setFiltersConfig}
/>
{this.renderSettings(settings.settingsList)}
{this.renderSafeSearch()}
</div>
</Card>
</div>
<div className="col-md-12">
<LogsConfig
enabled={queryLogs.enabled}
ignored={queryLogs.ignored}
interval={queryLogs.interval}
anonymize_client_ip={queryLogs.anonymize_client_ip}
processing={queryLogs.processingSetConfig}
@@ -109,6 +134,8 @@ class Settings extends Component {
<div className="col-md-12">
<StatsConfig
interval={stats.interval}
ignored={stats.ignored}
enabled={stats.enabled}
processing={stats.processingSetConfig}
processingReset={stats.processingReset}
setStatsConfig={setStatsConfig}
@@ -139,6 +166,8 @@ Settings.propTypes = {
stats: PropTypes.shape({
processingGetConfig: PropTypes.bool,
interval: PropTypes.number,
enabled: PropTypes.bool,
ignored: PropTypes.array,
processingSetConfig: PropTypes.bool,
processingReset: PropTypes.bool,
}),
@@ -149,6 +178,7 @@ Settings.propTypes = {
processingSetConfig: PropTypes.bool,
processingClear: PropTypes.bool,
processingGetConfig: PropTypes.bool,
ignored: PropTypes.array,
}),
filtering: PropTypes.shape({
interval: PropTypes.number,

5
client/src/components/Toasts/Toast.css
View File

@@ -54,6 +54,11 @@
cursor: pointer;
}
.toast__dismiss:hover,
.toast__dismiss:focus {
outline: none;
}
.toast-enter {
opacity: 0.01;
}

4
client/src/components/ui/Checkbox.js
View File

@@ -11,13 +11,14 @@ class Checkbox extends Component {
subtitle,
enabled,
handleChange,
disabled,
t,
} = this.props;
return (
<div className="form__group form__group--checkbox">
<label className="checkbox checkbox--settings">
<span className="checkbox__marker"/>
<input type="checkbox" className="checkbox__input" onChange={handleChange} checked={enabled}/>
<input type="checkbox" className="checkbox__input" onChange={handleChange} checked={enabled} disabled={disabled}/>
<span className="checkbox__label">
<span className="checkbox__label-text">
<span className="checkbox__label-title">{ t(title) }</span>
@@ -35,6 +36,7 @@ Checkbox.propTypes = {
subtitle: PropTypes.string.isRequired,
enabled: PropTypes.bool.isRequired,
handleChange: PropTypes.func.isRequired,
disabled: PropTypes.bool,
t: PropTypes.func,
};

56
client/src/components/ui/Dropdown.css
View File

@@ -1,3 +1,7 @@
.dropdown-item {
cursor: pointer;
}
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--btn-success-bgcolor);
@@ -6,3 +10,55 @@
.dropdown-menu {
cursor: default;
}
.dropdown-menu.dropdown-menu--protection {
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
}
.dropdown-menu.dropdown-menu-arrow.dropdown-menu--protection::before,
.dropdown-menu.dropdown-menu-arrow.dropdown-menu--protection::after {
left: 50%;
transform: translateX(-50%);
}
.dropdown-protection {
align-self: stretch;
width: 26px;
display: flex;
position: relative;
border: 1px solid #868e96;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: none;
cursor: pointer;
}
.dropdown-protection__toggle {
width: 100%;
display: block;
position: relative;
background-color: #868e96;
transition: background-color 0.15s ease-in-out;
}
.dropdown-protection__toggle:hover {
background-color: #727b84;
}
.dropdown-protection__toggle .nav-icon {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
color: var(--white);
transition: 0.15s ease-in-out transform;
transform-origin: center;
}
.dropdown-protection.show .nav-icon {
transform: rotate(180deg);
}

35
client/src/components/ui/Footer.css
View File

@@ -71,3 +71,38 @@
margin: 0 20px 0 0;
}
}
.btn-secondary.footer__theme-button,
[data-theme="dark"] .btn-secondary.footer__theme-button {
height: 38px;
border-color: var(--ctrl-select-bgcolor);
}
.footer__theme-icon {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
color: var(--gray-ac);
}
[data-theme="dark"] .footer__theme-icon {
color: var(--mcolor);
}
.footer__theme-icon--active,
[data-theme="dark"] .footer__theme-icon--active {
color: var(--btn-success-bgcolor);
}
.footer__themes {
margin: 0 auto 24px;
text-align: center;
}
@media screen and (min-width: 768px) {
.footer__themes {
margin: 0;
text-align: left;
}
}

102
client/src/components/ui/Footer.js
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import classNames from 'classnames';
import cn from 'classnames';
import { REPOSITORY, PRIVACY_POLICY_LINK, THEMES } from '../../helpers/constants';
import { LANGUAGES } from '../../helpers/twosky';
@@ -33,14 +33,18 @@ const Footer = () => {
const { t } = useTranslation();
const dispatch = useDispatch();
const currentTheme = useSelector((state) => (state.dashboard ? state.dashboard.theme : 'auto'));
const profileName = useSelector((state) => (state.dashboard ? state.dashboard.name : ''));
const currentTheme = useSelector((state) => (
state.dashboard ? state.dashboard.theme : THEMES.auto
));
const profileName = useSelector((state) => (
state.dashboard ? state.dashboard.name : ''
));
const isLoggedIn = profileName !== '';
const [currentThemeLocal, setCurrentThemeLocal] = useState('auto');
const [currentThemeLocal, setCurrentThemeLocal] = useState(THEMES.auto);
useEffect(() => {
if (!isLoggedIn) {
setUITheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? THEMES.dark : THEMES.light);
setUITheme(currentThemeLocal);
}
}, []);
@@ -55,15 +59,13 @@ const Footer = () => {
setHtmlLangAttr(value);
};
const onThemeChanged = (event) => {
const { value } = event.target;
dispatch(changeTheme(value));
};
const onThemeChangedLocal = (event) => {
const { value } = event.target;
setUITheme(value);
setCurrentThemeLocal(value);
const onThemeChange = (value) => {
if (isLoggedIn) {
dispatch(changeTheme(value));
} else {
setUITheme(value);
setCurrentThemeLocal(value);
}
};
const renderCopyright = () => <div className="footer__column">
@@ -76,41 +78,53 @@ const Footer = () => {
const renderLinks = (linksData) => linksData.map(({ name, href, className = '' }) => <a
key={name}
href={href}
className={classNames('footer__link', className)}
className={cn('footer__link', className)}
target="_blank"
rel="noopener noreferrer"
>
{t(name)}
</a>);
const themeSelectOptions = () => (
Object.values(THEMES)
.map((theme) => (
<option key={theme} value={theme}>
{t(`theme_${theme}`)}
</option>
))
);
const renderThemeButtons = () => {
const currentValue = isLoggedIn ? currentTheme : currentThemeLocal;
const renderThemeSelect = () => (
<select
className="form-control select select--theme"
value={currentTheme}
onChange={onThemeChanged}
>
{themeSelectOptions()}
</select>
);
const content = {
auto: {
desc: t('theme_auto_desc'),
icon: '#auto',
},
dark: {
desc: t('theme_dark_desc'),
icon: '#dark',
},
light: {
desc: t('theme_light_desc'),
icon: '#light',
},
};
const renderThemeSelectLocal = () => (
<select
className="form-control select select--theme"
value={currentThemeLocal}
onChange={onThemeChangedLocal}
>
{themeSelectOptions()}
</select>
);
return (
Object.values(THEMES)
.map((theme) => (
<button
key={theme}
type="button"
className="btn btn-sm btn-secondary footer__theme-button"
onClick={() => onThemeChange(theme)}
title={content[theme].desc}
>
<svg
className={cn(
'footer__theme-icon',
{ 'footer__theme-icon--active': currentValue === theme },
)}
>
<use xlinkHref={content[theme].icon} />
</svg>
</button>
))
);
};
return (
<>
@@ -121,7 +135,11 @@ const Footer = () => {
{renderLinks(linksData)}
</div>
<div className="footer__column footer__column--theme">
{isLoggedIn ? renderThemeSelect() : renderThemeSelectLocal()}
<div className="footer__themes">
<div className="btn-group">
{renderThemeButtons()}
</div>
</div>
</div>
<div className="footer__column footer__column--language">
<select

2
client/src/components/ui/Guide/Guide.js
View File

@@ -7,7 +7,6 @@ import { useSelector } from 'react-redux';
import { MOBILE_CONFIG_LINKS } from '../../../helpers/constants';
import Tabs from '../Tabs';
import Icons from '../Icons';
import MobileConfigForm from './MobileConfigForm';
const renderLi = ({ label, components }) => <li key={label}>
@@ -341,7 +340,6 @@ const Guide = ({ dnsAddresses }) => {
>
{activeTab}
</Tabs>
<Icons />
</div>
);
};

23
client/src/components/ui/Icons.js
View File

@@ -181,6 +181,12 @@ const Icons = () => (
</svg>
</symbol>
<symbol id="arrow-down" viewBox="0 0 24 24" fill="currentColor">
<svg xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" d="M6.2 8.2a.64.64 0 0 1 .94 0L12 13.32l4.86-5.1a.64.64 0 0 1 .94 0c.27.27.27.71 0 .98l-5.33 5.6a.64.64 0 0 1-.94 0L6.2 9.2a.72.72 0 0 1 0-.98Z" clipRule="evenodd"/>
</svg>
</symbol>
<symbol id="arrow-right" viewBox="0 0 24 24" stroke="currentColor"
strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
@@ -198,11 +204,24 @@ const Icons = () => (
</svg>
</symbol>
<symbol id="auto" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fillRule="evenodd" clipRule="evenodd" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z" stroke="currentColor" strokeWidth="1.5" />
<path fillRule="evenodd" clipRule="evenodd" d="M12 3V21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" fill="currentColor" stroke="currentColor" strokeWidth="1.5" />
</symbol>
<symbol id="dark" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3.80737 15.731L3.9895 15.0034C3.71002 14.9335 3.41517 15.0298 3.23088 15.2512C3.0466 15.4727 3.00545 15.7801 3.12501 16.0422L3.80737 15.731ZM14.1926 3.26892L14.3747 2.54137C14.0953 2.47141 13.8004 2.56772 13.6161 2.78917C13.4318 3.01062 13.3907 3.31806 13.5102 3.58018L14.1926 3.26892ZM12 20.2499C8.66479 20.2499 5.79026 18.2708 4.48974 15.4197L3.12501 16.0422C4.66034 19.4081 8.05588 21.7499 12 21.7499V20.2499ZM20.25 11.9999C20.25 16.5563 16.5563 20.2499 12 20.2499V21.7499C17.3848 21.7499 21.75 17.3847 21.75 11.9999H20.25ZM14.0105 3.99647C17.5955 4.89391 20.25 8.13787 20.25 11.9999H21.75C21.75 7.43347 18.6114 3.60193 14.3747 2.54137L14.0105 3.99647ZM13.5102 3.58018C13.9851 4.6211 14.25 5.77857 14.25 6.99995H15.75C15.75 5.5595 15.4371 4.1901 14.875 2.95766L13.5102 3.58018ZM14.25 6.99995C14.25 11.5563 10.5563 15.2499 5.99999 15.2499V16.7499C11.3848 16.7499 15.75 12.3847 15.75 6.99995H14.25ZM5.99999 15.2499C5.30559 15.2499 4.63225 15.1643 3.9895 15.0034L3.62525 16.4585C4.38616 16.649 5.18181 16.7499 5.99999 16.7499V15.2499Z" fill="currentColor" />
</symbol>
<symbol id="light" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 3.75C16.5563 3.75 20.25 7.44365 20.25 12H21.75C21.75 6.61522 17.3848 2.25 12 2.25V3.75ZM20.25 12C20.25 16.5563 16.5563 20.25 12 20.25V21.75C17.3848 21.75 21.75 17.3848 21.75 12H20.25ZM12 20.25C7.44365 20.25 3.75 16.5563 3.75 12H2.25C2.25 17.3848 6.61522 21.75 12 21.75V20.25ZM3.75 12C3.75 7.44365 7.44365 3.75 12 3.75V2.25C6.61522 2.25 2.25 6.61522 2.25 12H3.75Z" fill="currentColor" />
<path fillRule="evenodd" clipRule="evenodd" d="M12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C13.9987 10.896 13.104 10.0013 12 10Z" fill="currentColor" />
</symbol>
<symbol id="chevron-down" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fillRule="evenodd">
<path d="M0 0h24v24H0z" fill="#878787" fillOpacity=".01" />
<path stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
d="M8.036 10.93l3.93 4.07 4.068-3.93" />
<path stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" d="M8.036 10.93l3.93 4.07 4.068-3.93" />
</g>
</symbol>
</svg>

3
client/src/components/ui/Line.js
View File

@@ -9,11 +9,12 @@ import round from 'lodash/round';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import './Line.css';
import { msToDays } from '../../helpers/helpers';
const Line = ({
data, color = 'black',
}) => {
const interval = useSelector((state) => state.stats.interval);
const interval = msToDays(useSelector((state) => state.stats.interval));
return <ResponsiveLine
enableArea

12
client/src/components/ui/Tabler.css
View File

@@ -10216,6 +10216,18 @@ body.fixed-header .page {
line-height: 2.5rem;
}
.page-title__protection {
display: flex;
align-items: stretch;
margin: 0 0.5rem;
}
@media (max-width: 767.98px) {
.page-title__protection {
margin: 0.5rem 0;
}
}
.page-title-icon {
color: #9aa0ac;
font-size: 1.25rem;