daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages 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
Download Patch File Download Diff File Expand all files Collapse all files

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;