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

Initial components for encryption settings

Browse Source
This commit is contained in:
Ildar Kamalov 2019-01-24 18:51:50 +03:00 committed by Eugene Bujak
parent 8725c1df7a
commit 7451eb1346
14 changed files with 471 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -210,5 +210,27 @@
"next": "Next",
"open_dashboard": "Open Dashboard",
"install_saved": "All settings saved",
"encryption_title": "Encryption",
"encryption_desc": "Encryption (HTTPS/TLS) support for both DNS and admin web interface",
"encryption_config_saved": "Encryption config saved",
"encryption_server": "Server name",
"encryption_server_enter": "Enter your domain name",
"encryption_server_desc": "In order to use HTTPS, you need yo enter the server name that matches your SSL certificate.",
"encryption_redirect": "Redirect to HTTPS automatically",
"encryption_redirect_desc": "If checked, AdGuard Home will automatically redirect you from HTTP to HTTPS addresses.",
"encryption_https": "HTTPS port",
"encryption_https_desc": "If HTTPS port is configured, AdGuard Home admin interface will be accessible via HTTPS, and it will also provide DNS-over-HTTPS on '\\dns-query' location.",
"encryption_dot": "DNS-over-TLS port",
"encryption_dot_desc": "If this port is configured, AdGuard Home will run a DNS-over-TLS server on this port.",
"encryption_certificates": "Certificates",
"encryption_certificates_desc": "In order to use encryption, you need to provide a valid SSL certificates chain for your domain. You can get a free certificate on letsencrypt.org or you can buy it from one of the trusted Certificate Authorities.",
"encryption_certificates_input": "Copy/paste your PEM-encoded cerificates here.",
"encryption_status": "Status",
"encryption_certificates_for": "Certificates for {{domains}}",
"encryption_expire": "Expire on {{date}}",
"encryption_key": "Private key",
"encryption_key_input": "Copy/paste your PEM-encoded private key for your cerficate here.",
"form_error_port_range": "Enter port value in the range of 80-65535",
"form_error_equal": "Shouldn't be equal",
"form_error_password": "Password mismatched"
}

31
client/src/actions/index.js
View File

@ -650,3 +650,34 @@ export const toggleDhcp = config => async (dispatch) => {
}
}
};
export const getTlsStatusRequest = createAction('GET_TLS_STATUS_REQUEST');
export const getTlsStatusFailure = createAction('GET_TLS_STATUS_FAILURE');
export const getTlsStatusSuccess = createAction('GET_TLS_STATUS_SUCCESS');
export const getTlsStatus = () => async (dispatch) => {
dispatch(getTlsStatusRequest());
try {
const status = await apiClient.getTlsStatus();
dispatch(getTlsStatusSuccess(status));
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(getTlsStatusFailure());
}
};
export const setTlsConfigRequest = createAction('SET_TLS_CONFIG_REQUEST');
export const setTlsConfigFailure = createAction('SET_TLS_CONFIG_FAILURE');
export const setTlsConfigSuccess = createAction('SET_TLS_CONFIG_SUCCESS');
export const setTlsConfig = config => async (dispatch) => {
dispatch(setTlsConfigRequest());
try {
await apiClient.setTlsConfig(config);
dispatch(setTlsConfigSuccess(config));
dispatch(addSuccessToast('encryption_config_saved'));
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(setTlsConfigFailure());
}
};

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

@ -354,4 +354,22 @@ export default class Api {
};
return this.makeRequest(path, method, parameters);
}
// DNS-over-HTTPS and DNS-over-TLS
TLS_STATUS = { path: 'tls/status', method: 'GET' };
TLS_CONFIG = { path: 'tls/configure', method: 'POST' };
getTlsStatus() {
const { path, method } = this.TLS_STATUS;
return this.makeRequest(path, method);
}
setTlsConfig(config) {
const { path, method } = this.TLS_CONFIG;
const parameters = {
data: config,
headers: { 'Content-Type': 'application/json' },
};
return this.makeRequest(path, method, parameters);
}
}

52
client/src/components/Settings/Dhcp/Form.js
View File

@ -1,48 +1,10 @@
import React, { Fragment } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { withNamespaces, Trans } from 'react-i18next';
import { withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
import { R_IPV4 } from '../../../helpers/constants';
const required = (value) => {
if (value || value === 0) {
return false;
}
return <Trans>form_error_required</Trans>;
};
const ipv4 = (value) => {
if (value && !new RegExp(R_IPV4).test(value)) {
return <Trans>form_error_ip_format</Trans>;
}
return false;
};
const isPositive = (value) => {
if ((value || value === 0) && (value <= 0)) {
return <Trans>form_error_positive</Trans>;
}
return false;
};
const toNumber = value => value && parseInt(value, 10);
const renderField = ({
input, className, placeholder, type, disabled, meta: { touched, error },
}) => (
<Fragment>
<input
{...input}
placeholder={placeholder}
type={type}
className={className}
disabled={disabled}
/>
{!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
</Fragment>
);
import { renderField, required, ipv4, isPositive, toNumber } from '../../../helpers/form';
const Form = (props) => {
const {
@ -57,7 +19,7 @@ const Form = (props) => {
<form onSubmit={handleSubmit}>
<div className="row">
<div className="col-lg-6">
<div className="form__group form__group--dhcp">
<div className="form__group form__group--settings">
<label>{t('dhcp_form_gateway_input')}</label>
<Field
name="gateway_ip"
@ -68,7 +30,7 @@ const Form = (props) => {
validate={[ipv4, required]}
/>
</div>
<div className="form__group form__group--dhcp">
<div className="form__group form__group--settings">
<label>{t('dhcp_form_subnet_input')}</label>
<Field
name="subnet_mask"
@ -81,7 +43,7 @@ const Form = (props) => {
</div>
</div>
<div className="col-lg-6">
<div className="form__group form__group--dhcp">
<div className="form__group form__group--settings">
<div className="row">
<div className="col-12">
<label>{t('dhcp_form_range_title')}</label>
@ -108,7 +70,7 @@ const Form = (props) => {
</div>
</div>
</div>
<div className="form__group form__group--dhcp">
<div className="form__group form__group--settings">
<label>{t('dhcp_form_lease_title')}</label>
<Field
name="lease_duration"

2
client/src/components/Settings/Dhcp/Interface.js
View File

@ -63,7 +63,7 @@ let Interface = (props) => {
{!processing && interfaces &&
<div className="row">
<div className="col-sm-12 col-md-6">
<div className="form__group form__group--dhcp">
<div className="form__group form__group--settings">
<label>{t('dhcp_interface_select')}</label>
<Field
name="interface_name"

195
client/src/components/Settings/Encryption/Form.js Normal file
View File

@ -0,0 +1,195 @@
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';
import { renderField, renderSelectField, required, toNumber, port } from '../../../helpers/form';
import i18n from '../../../i18n';
const validate = (values) => {
const errors = {};
if (values.port_dns_over_tls === values.port_https) {
errors.port_dns_over_tls = i18n.t('form_error_equal');
errors.port_https = i18n.t('form_error_equal');
}
return errors;
};
const Form = (props) => {
const {
t,
handleSubmit,
invalid,
submitting,
processing,
} = props;
return (
<form onSubmit={handleSubmit}>
<div className="row">
<div className="col-12">
<label className="form__label" htmlFor="server_name">
<Trans>encryption_server</Trans>
</label>
</div>
<div className="col-lg-6">
<div className="form__group form__group--settings">
<Field
id="server_name"
name="server_name"
component={renderField}
type="text"
className="form-control"
placeholder={t('encryption_server_enter')}
validate={[required]}
/>
<div className="form__desc">
<Trans>encryption_server_desc</Trans>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="form__group form__group--settings">
<Field
name="force_https"
type="checkbox"
component={renderSelectField}
placeholder={t('encryption_redirect')}
/>
<div className="form__desc">
<Trans>encryption_redirect_desc</Trans>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<div className="form__group form__group--settings">
<label className="form__label" htmlFor="port_https">
<Trans>encryption_https</Trans>
</label>
<Field
id="port_https"
name="port_https"
component={renderField}
type="number"
className="form-control"
placeholder={t('encryption_https')}
validate={[required, port]}
normalize={toNumber}
/>
<div className="form__desc">
<Trans>encryption_https_desc</Trans>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="form__group form__group--settings">
<label className="form__label" htmlFor="port_dns_over_tls">
<Trans>encryption_dot</Trans>
</label>
<Field
id="port_dns_over_tls"
name="port_dns_over_tls"
component={renderField}
type="number"
className="form-control"
placeholder={t('encryption_dot')}
validate={[required, port]}
normalize={toNumber}
/>
<div className="form__desc">
<Trans>encryption_dot_desc</Trans>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="form__group form__group--settings">
<label className="form__label form__label--bold" htmlFor="certificate_chain">
<Trans>encryption_certificates</Trans>
</label>
<div className="form__desc form__desc--top">
<Trans>encryption_certificates_desc</Trans>
</div>
<Field
id="certificate_chain"
name="certificate_chain"
component="textarea"
type="text"
className="form-control form-control--textarea"
placeholder={t('encryption_certificates_input')}
validate={[required]}
/>
<div className="form__status">
<div className="form__label form__label--bold">
<Trans>encryption_status</Trans>:
</div>
<div>
<Trans>encryption_certificates_for</Trans>
*.example.org, example.org
</div>
<div>
<Trans>encryption_expire</Trans>
2022-01-01
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="form__group form__group--settings">
<label className="form__label form__label--bold" htmlFor="private_key">
<Trans>encryption_key</Trans>
</label>
<Field
id="private_key"
name="private_key"
component="textarea"
type="text"
className="form-control form-control--textarea"
placeholder="Copy/paste your PEM-encoded private key for your cerficate here."
validate={[required]}
/>
<div className="form__status">
<div className="form__label form__label--bold">
<Trans>encryption_status</Trans>:
</div>
<div>Valid RSA private key</div>
</div>
</div>
</div>
</div>
<button
type="submit"
className="btn btn-success btn-standart"
disabled={invalid || submitting || processing}
>
{t('save_config')}
</button>
</form>
);
};
Form.propTypes = {
handleSubmit: PropTypes.func.isRequired,
submitting: PropTypes.bool.isRequired,
invalid: PropTypes.bool.isRequired,
initialValues: PropTypes.object.isRequired,
processing: PropTypes.bool.isRequired,
t: PropTypes.func.isRequired,
};
export default flow([
withNamespaces(),
reduxForm({
form: 'encryptionForm',
validate,
}),
])(Form);

47
client/src/components/Settings/Encryption/index.js Normal file
View File

@ -0,0 +1,47 @@
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 Encryption extends Component {
handleFormSubmit = (values) => {
this.props.setTlsConfig(values);
};
render() {
const { encryption, t } = this.props;
const {
processing,
processingConfig,
...values
} = encryption;
return (
<div className="encryption">
{encryption && !encryption.processing &&
<Card
title={t('encryption_title')}
subtitle={t('encryption_desc')}
bodyType="card-body box-body--settings"
>
<Form
initialValues={{ ...values }}
processing={encryption.processingConfig}
onSubmit={this.handleFormSubmit}
/>
</Card>
}
</div>
);
}
}
Encryption.propTypes = {
setTlsConfig: PropTypes.func.isRequired,
encryption: PropTypes.object.isRequired,
t: PropTypes.func.isRequired,
};
export default withNamespaces()(Encryption);

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

@ -7,8 +7,8 @@
margin-bottom: 0;
}
.form__group--dhcp:last-child {
margin-bottom: 15px;
.form__group--settings:last-child {
margin-bottom: 20px;
}
.btn-standard {
@ -48,3 +48,23 @@
.dhcp {
min-height: 450px;
}
.form__desc {
margin-top: 10px;
font-size: 13px;
color: rgba(74, 74, 74, 0.7);
}
.form__desc--top {
margin: 0 0 8px;
}
.form__label--bold {
font-weight: 700;
}
.form__status {
margin-top: 10px;
font-size: 14px;
line-height: 1.7;
}

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

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { withNamespaces, Trans } from 'react-i18next';
import Upstream from './Upstream';
import Dhcp from './Dhcp';
import Encryption from './Encryption';
import Checkbox from '../ui/Checkbox';
import Loading from '../ui/Loading';
import PageTitle from '../ui/PageTitle';
@ -37,6 +38,7 @@ class Settings extends Component {
this.props.initSettings(this.settings);
this.props.getDhcpStatus();
this.props.getDhcpInterfaces();
this.props.getTlsStatus();
}
handleUpstreamChange = (value) => {
@ -95,6 +97,10 @@ class Settings extends Component {
handleUpstreamSubmit={this.handleUpstreamSubmit}
handleUpstreamTest={this.handleUpstreamTest}
/>
<Encryption
encryption={this.props.encryption}
setTlsConfig={this.props.setTlsConfig}
/>
<Dhcp
dhcp={this.props.dhcp}
toggleDhcp={this.props.toggleDhcp}

5
client/src/components/ui/Checkbox.css
View File

@ -22,6 +22,11 @@
font-weight: 600;
}
.checkbox--form .checkbox__label:before {
top: 2px;
margin-right: 10px;
}
.checkbox__label {
position: relative;
display: flex;

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

@ -11,12 +11,24 @@ import {
getDhcpInterfaces,
setDhcpConfig,
findActiveDhcp,
getTlsStatus,
setTlsConfig,
} from '../actions';
import Settings from '../components/Settings';
const mapStateToProps = (state) => {
const { settings, dashboard, dhcp } = state;
const props = { settings, dashboard, dhcp };
const {
settings,
dashboard,
dhcp,
encryption,
} = state;
const props = {
settings,
dashboard,
dhcp,
encryption,
};
return props;
};
@ -32,6 +44,8 @@ const mapDispatchToProps = {
getDhcpInterfaces,
setDhcpConfig,
findActiveDhcp,
getTlsStatus,
setTlsConfig,
};
export default connect(

72
client/src/helpers/form.js Normal file
View File

@ -0,0 +1,72 @@
import React, { Fragment } from 'react';
import { Trans } from 'react-i18next';
import { R_IPV4 } from '../helpers/constants';
export const renderField = ({
input, id, className, placeholder, type, disabled, meta: { touched, error },
}) => (
<Fragment>
<input
{...input}
id={id}
placeholder={placeholder}
type={type}
className={className}
disabled={disabled}
/>
{!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
</Fragment>
);
export const renderSelectField = ({
input, placeholder, disabled, meta: { touched, error },
}) => (
<Fragment>
<label className="checkbox checkbox--form">
<span className="checkbox__marker"/>
<input
{...input}
type="checkbox"
className="checkbox__input"
disabled={disabled}
/>
<span className="checkbox__label">
<span className="checkbox__label-text">
<span className="checkbox__label-title">{placeholder}</span>
</span>
</span>
</label>
{!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
</Fragment>
);
export const required = (value) => {
if (value || value === 0) {
return false;
}
return <Trans>form_error_required</Trans>;
};
export const ipv4 = (value) => {
if (value && !new RegExp(R_IPV4).test(value)) {
return <Trans>form_error_ip_format</Trans>;
}
return false;
};
export const isPositive = (value) => {
if ((value || value === 0) && (value <= 0)) {
return <Trans>form_error_positive</Trans>;
}
return false;
};
export const port = (value) => {
if (value < 80 || value > 65535) {
return <Trans>form_error_port_range</Trans>;
}
return false;
};
export const toNumber = value => value && parseInt(value, 10);

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

@ -302,6 +302,33 @@ const dhcp = handleActions({
leases: [],
});
const encryption = handleActions({
[actions.getTlsStatusRequest]: state => ({ ...state, processing: true }),
[actions.getTlsStatusFailure]: state => ({ ...state, processing: false }),
[actions.getTlsStatusSuccess]: (state, { payload }) => {
const newState = {
...state,
...payload,
processing: false,
};
return newState;
},
[actions.setTlsConfigRequest]: state => ({ ...state, processingConfig: true }),
[actions.setTlsConfigFailure]: state => ({ ...state, processingConfig: false }),
[actions.setTlsConfigSuccess]: (state, { payload }) => {
const newState = {
...state,
...payload,
processingConfig: false,
};
return newState;
},
}, {
processing: true,
processingConfig: false,
});
export default combineReducers({
settings,
dashboard,
@ -309,6 +336,7 @@ export default combineReducers({
filtering,
toasts,
dhcp,
encryption,
loadingBar: loadingBarReducer,
form: formReducer,
});

2
control.go
View File

@ -1038,7 +1038,7 @@ func handleTLSStatus(w http.ResponseWriter, r *http.Request) {
func handleTLSConfigure(w http.ResponseWriter, r *http.Request) {
newconfig := tlsConfig{}
err := json.NewDecoder(r.body).Decode(&newconfig)
err := json.NewDecoder(r.Body).Decode(&newconfig)
if err != nil {
httpError(w, http.StatusBadRequest, "Failed to parse new TLS config json: %s", err)
return