diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index 2bae1d12..36bd3501 100644
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@@ -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"
}
\ No newline at end of file
diff --git a/client/src/actions/index.js b/client/src/actions/index.js
index 1bb99064..da33f0fe 100644
--- a/client/src/actions/index.js
+++ b/client/src/actions/index.js
@@ -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());
+ }
+};
diff --git a/client/src/api/Api.js b/client/src/api/Api.js
index 0dac781a..1971fe4a 100644
--- a/client/src/api/Api.js
+++ b/client/src/api/Api.js
@@ -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);
+ }
}
diff --git a/client/src/components/Settings/Dhcp/Form.js b/client/src/components/Settings/Dhcp/Form.js
index 5b810c7b..af7c1931 100644
--- a/client/src/components/Settings/Dhcp/Form.js
+++ b/client/src/components/Settings/Dhcp/Form.js
@@ -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"
diff --git a/client/src/components/Settings/Dhcp/Interface.js b/client/src/components/Settings/Dhcp/Interface.js
index fe4206a7..e5814205 100644
--- a/client/src/components/Settings/Dhcp/Interface.js
+++ b/client/src/components/Settings/Dhcp/Interface.js
@@ -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"
diff --git a/client/src/components/Settings/Encryption/Form.js b/client/src/components/Settings/Encryption/Form.js
new file mode 100644
index 00000000..3c814fad
--- /dev/null
+++ b/client/src/components/Settings/Encryption/Form.js
@@ -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);
diff --git a/client/src/components/Settings/Encryption/index.js b/client/src/components/Settings/Encryption/index.js
new file mode 100644
index 00000000..b4f876a7
--- /dev/null
+++ b/client/src/components/Settings/Encryption/index.js
@@ -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);
diff --git a/client/src/components/Settings/Settings.css b/client/src/components/Settings/Settings.css
index 9530ef36..b364be6e 100644
--- a/client/src/components/Settings/Settings.css
+++ b/client/src/components/Settings/Settings.css
@@ -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;
+}
diff --git a/client/src/components/Settings/index.js b/client/src/components/Settings/index.js
index 24e56329..d3d0706b 100644
--- a/client/src/components/Settings/index.js
+++ b/client/src/components/Settings/index.js
@@ -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}
diff --git a/client/src/components/ui/Checkbox.css b/client/src/components/ui/Checkbox.css
index b99ef71c..1778a93c 100644
--- a/client/src/components/ui/Checkbox.css
+++ b/client/src/components/ui/Checkbox.css
@@ -22,6 +22,11 @@
font-weight: 600;
}
+.checkbox--form .checkbox__label:before {
+ top: 2px;
+ margin-right: 10px;
+}
+
.checkbox__label {
position: relative;
display: flex;
diff --git a/client/src/containers/Settings.js b/client/src/containers/Settings.js
index 7d46b751..870bc1b1 100644
--- a/client/src/containers/Settings.js
+++ b/client/src/containers/Settings.js
@@ -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(
diff --git a/client/src/helpers/form.js b/client/src/helpers/form.js
new file mode 100644
index 00000000..055d1138
--- /dev/null
+++ b/client/src/helpers/form.js
@@ -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);
diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js
index 19bbbf63..b80f7f37 100644
--- a/client/src/reducers/index.js
+++ b/client/src/reducers/index.js
@@ -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,
});
diff --git a/control.go b/control.go
index 71bb3dd5..7199ff11 100644
--- a/control.go
+++ b/control.go
@@ -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