Initial components for encryption settings

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"
 }

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());
+    }
+};

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);
+    }
 }

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';
+import { renderField, required, ipv4, isPositive, toNumber } from '../../../helpers/form';
-
-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>
-);
 
 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"

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"

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);

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);

client/src/components/Settings/Settings.css

@@ -7,8 +7,8 @@
     margin-bottom: 0;
 }
 
-.form__group--dhcp:last-child {
+.form__group--settings:last-child {
-    margin-bottom: 15px;
+    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;
+}

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}

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;

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 {
-    const props = { settings, dashboard, dhcp };
+        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(

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);

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,
 });

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