a
/
badguardhome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

+ client: handle access settings

This commit is contained in:
Ildar Kamalov 2019-05-30 17:26:19 +03:00
parent 821ad3edd9
commit 02db488b30
11 changed files with 259 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/__locales/en.json
View File

@ -298,5 +298,14 @@
"clients_not_found": "No clients found",
"client_confirm_delete": "Are you sure you want to delete client \"{{key}}\"?",
"auto_clients_title": "Clients (runtime)",
"auto_clients_desc": "Data on the clients that use AdGuard Home, but not stored in the configuration"
}
"auto_clients_desc": "Data on the clients that use AdGuard Home, but not stored in the configuration",
"access_title": "Access settings",
"access_desc": "Here you can configure access rules for the AdGuard Home DNS server.",
"access_allowed_title": "Allowed clients",
"access_allowed_desc": "A list of CIDR or IP addresses. If configured, AdGuard Home will accept requests from these IP addresses only.",
"access_disallowed_title": "Disallowed clients",
"access_disallowed_desc": "A list of CIDR or IP addresses. If configured, AdGuard Home will drop requests from these IP addresses.",
"access_blocked_title": "Blocked domains",
"access_blocked_desc": "Don't confuse this with filters. AdGuard Home will drop DNS queries with these domains in query's question.",
"access_settings_saved": "Access settings successfully saved"
}

45
client/src/actions/access.js Normal file
View File

@ -0,0 +1,45 @@
import { createAction } from 'redux-actions';
import Api from '../api/Api';
import { addErrorToast, addSuccessToast } from './index';
import { normalizeTextarea } from '../helpers/helpers';
const apiClient = new Api();
export const getAccessListRequest = createAction('GET_ACCESS_LIST_REQUEST');
export const getAccessListFailure = createAction('GET_ACCESS_LIST_FAILURE');
export const getAccessListSuccess = createAction('GET_ACCESS_LIST_SUCCESS');
export const getAccessList = () => async (dispatch) => {
dispatch(getAccessListRequest());
try {
const data = await apiClient.getAccessList();
dispatch(getAccessListSuccess(data));
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(getAccessListFailure());
}
};
export const setAccessListRequest = createAction('SET_ACCESS_LIST_REQUEST');
export const setAccessListFailure = createAction('SET_ACCESS_LIST_FAILURE');
export const setAccessListSuccess = createAction('SET_ACCESS_LIST_SUCCESS');
export const setAccessList = config => async (dispatch) => {
dispatch(setAccessListRequest());
try {
const { allowed_clients, disallowed_clients, blocked_hosts } = config;
const values = {
allowed_clients: (allowed_clients && normalizeTextarea(allowed_clients)) || [],
disallowed_clients: (disallowed_clients && normalizeTextarea(disallowed_clients)) || [],
blocked_hosts: (blocked_hosts && normalizeTextarea(blocked_hosts)) || [],
};
await apiClient.setAccessList(values);
dispatch(setAccessListSuccess());
dispatch(addSuccessToast('access_settings_saved'));
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(setAccessListFailure());
}
};

18
client/src/api/Api.js
View File

@ -460,4 +460,22 @@ export default class Api {
};
return this.makeRequest(path, method, parameters);
}
// DNS access settings
ACCESS_LIST = { path: 'access/list', method: 'GET' };
ACCESS_SET = { path: 'access/set', method: 'POST' };
getAccessList() {
const { path, method } = this.ACCESS_LIST;
return this.makeRequest(path, method);
}
setAccessList(config) {
const { path, method } = this.ACCESS_SET;
const parameters = {
data: config,
headers: { 'Content-Type': 'application/json' },
};
return this.makeRequest(path, method, parameters);
}
}

80
client/src/components/Settings/Access/Form.js Normal file
View File

@ -0,0 +1,80 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
const Form = (props) => {
const { handleSubmit, submitting, invalid } = props;
return (
<form onSubmit={handleSubmit}>
<div className="form__group mb-5">
<label className="form__label form__label--with-desc" htmlFor="allowed_clients">
<Trans>access_allowed_title</Trans>
</label>
<div className="form__desc form__desc--top">
<Trans>access_allowed_desc</Trans>
</div>
<Field
id="allowed_clients"
name="allowed_clients"
component="textarea"
type="text"
className="form-control form-control--textarea"
/>
</div>
<div className="form__group mb-5">
<label className="form__label form__label--with-desc" htmlFor="disallowed_clients">
<Trans>access_disallowed_title</Trans>
</label>
<div className="form__desc form__desc--top">
<Trans>access_disallowed_desc</Trans>
</div>
<Field
id="disallowed_clients"
name="disallowed_clients"
component="textarea"
type="text"
className="form-control form-control--textarea"
/>
</div>
<div className="form__group mb-5">
<label className="form__label form__label--with-desc" htmlFor="blocked_hosts">
<Trans>access_blocked_title</Trans>
</label>
<div className="form__desc form__desc--top">
<Trans>access_blocked_desc</Trans>
</div>
<Field
id="blocked_hosts"
name="blocked_hosts"
component="textarea"
type="text"
className="form-control form-control--textarea"
/>
</div>
<div className="card-actions">
<div className="btn-list">
<button
type="submit"
className="btn btn-success btn-standard"
disabled={submitting || invalid}
>
<Trans>save_config</Trans>
</button>
</div>
</div>
</form>
);
};
Form.propTypes = {
handleSubmit: PropTypes.func,
submitting: PropTypes.bool,
invalid: PropTypes.bool,
initialValues: PropTypes.object,
t: PropTypes.func,
};
export default flow([withNamespaces(), reduxForm({ form: 'accessForm' })])(Form);

43
client/src/components/Settings/Access/index.js Normal file
View File

@ -0,0 +1,43 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withNamespaces } from 'react-i18next';
import Form from './Form';
import Card from '../../ui/Card';
class Access extends Component {
handleFormSubmit = (values) => {
this.props.setAccessList(values);
};
render() {
const { t, access } = this.props;
const {
processing,
processingSet,
...values
} = access;
return (
<Card
title={t('access_title')}
subtitle={t('access_desc')}
bodyType="card-body box-body--settings"
>
<Form
initialValues={values}
onSubmit={this.handleFormSubmit}
/>
</Card>
);
}
}
Access.propTypes = {
access: PropTypes.object.isRequired,
setAccessList: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
};
export default withNamespaces()(Access);

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

@ -63,6 +63,10 @@
font-weight: 700;
}
.form__label--with-desc {
margin-bottom: 0;
}
.form__status {
margin-top: 10px;
font-size: 14px;

2
client/src/components/Settings/Upstream/Form.js
View File

@ -62,7 +62,7 @@ let Form = (props) => {
</div>
<div className="col-12">
<div className="form__group">
<label className="form__label" htmlFor="bootstrap_dns">
<label className="form__label form__label--with-desc" htmlFor="bootstrap_dns">
<Trans>bootstrap_dns</Trans>
</label>
<div className="form__desc form__desc--top">

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

@ -7,6 +7,7 @@ import Dhcp from './Dhcp';
import Encryption from './Encryption';
import Clients from './Clients';
import AutoClients from './Clients/AutoClients';
import Access from './Access';
import Checkbox from '../ui/Checkbox';
import Loading from '../ui/Loading';
import PageTitle from '../ui/PageTitle';
@ -43,6 +44,7 @@ class Settings extends Component {
this.props.getDhcpStatus();
this.props.getDhcpInterfaces();
this.props.getTlsStatus();
this.props.getAccessList();
}
renderSettings = (settings) => {
@ -68,7 +70,7 @@ class Settings extends Component {
render() {
const {
settings, dashboard, clients, t,
settings, dashboard, clients, access, t,
} = this.props;
return (
<Fragment>
@ -117,6 +119,7 @@ class Settings extends Component {
/>
</Fragment>
)}
<Access access={access} setAccessList={this.props.setAccessList} />
<Encryption
encryption={this.props.encryption}
setTlsConfig={this.props.setTlsConfig}

8
client/src/containers/Settings.js
View File

@ -26,6 +26,10 @@ import {
deleteClient,
toggleClientModal,
} from '../actions/clients';
import {
getAccessList,
setAccessList,
} from '../actions/access';
import Settings from '../components/Settings';
const mapStateToProps = (state) => {
@ -35,6 +39,7 @@ const mapStateToProps = (state) => {
dhcp,
encryption,
clients,
access,
} = state;
const props = {
settings,
@ -42,6 +47,7 @@ const mapStateToProps = (state) => {
dhcp,
encryption,
clients,
access,
};
return props;
};
@ -68,6 +74,8 @@ const mapDispatchToProps = {
addStaticLease,
removeStaticLease,
toggleLeaseModal,
getAccessList,
setAccessList,
};
export default connect(

43
client/src/reducers/access.js Normal file
View File

@ -0,0 +1,43 @@
import { handleActions } from 'redux-actions';
import * as actions from '../actions/access';
const access = handleActions(
{
[actions.getAccessListRequest]: state => ({ ...state, processing: true }),
[actions.getAccessListFailure]: state => ({ ...state, processing: false }),
[actions.getAccessListSuccess]: (state, { payload }) => {
const {
allowed_clients,
disallowed_clients,
blocked_hosts,
} = payload;
const newState = {
...state,
allowed_clients: allowed_clients.join('\n'),
disallowed_clients: disallowed_clients.join('\n'),
blocked_hosts: blocked_hosts.join('\n'),
};
return newState;
},
[actions.setAccessListRequest]: state => ({ ...state, processingSet: true }),
[actions.setAccessListFailure]: state => ({ ...state, processingSet: false }),
[actions.setAccessListSuccess]: (state) => {
const newState = {
...state,
processingSet: false,
};
return newState;
},
},
{
processing: true,
processingSet: false,
allowed_clients: null,
disallowed_clients: null,
blocked_hosts: null,
},
);
export default access;

2
client/src/reducers/index.js
View File

@ -8,6 +8,7 @@ import * as actions from '../actions';
import toasts from './toasts';
import encryption from './encryption';
import clients from './clients';
import access from './access';
const settings = handleActions({
[actions.initSettingsRequest]: state => ({ ...state, processing: true }),
@ -418,6 +419,7 @@ export default combineReducers({
dhcp,
encryption,
clients,
access,
loadingBar: loadingBarReducer,
form: formReducer,
});