+ client: add multiple fields client form
This commit is contained in:
Ildar Kamalov
Simon Zolin
parent
fd26af2677
commit
a6d6e9ec9e
|
|
@ -299,9 +299,10 @@
|
|||
"client_edit": "Edit Client",
|
||||
"client_identifier": "Identifier",
|
||||
"ip_address": "IP address",
|
||||
"client_identifier_desc": "Clients can be identified by the IP address or MAC address. Please note, that using MAC as identifier is possible only if AdGuard Home is also a <0>DHCP server</0>",
|
||||
"client_identifier_desc": "Clients can be identified by the IP address, MAC address, CIDR. Please note, that using MAC as identifier is possible only if AdGuard Home is also a <0>DHCP server</0>",
|
||||
"form_enter_ip": "Enter IP",
|
||||
"form_enter_mac": "Enter MAC",
|
||||
"form_enter_id": "Enter identifier",
|
||||
"form_client_name": "Enter client name",
|
||||
"client_global_settings": "Use global settings",
|
||||
"client_deleted": "Client \"{{key}}\" successfully deleted",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { createAction } from 'redux-actions';
|
|||
import { t } from 'i18next';
|
||||
import apiClient from '../api/Api';
|
||||
import { addErrorToast, addSuccessToast, getClients } from './index';
|
||||
import { CLIENT_ID } from '../helpers/constants';
|
||||
|
||||
export const toggleClientModal = createAction('TOGGLE_CLIENT_MODAL');
|
||||
|
||||
|
|
@ -13,18 +12,7 @@ export const addClientSuccess = createAction('ADD_CLIENT_SUCCESS');
|
|||
export const addClient = config => async (dispatch) => {
|
||||
dispatch(addClientRequest());
|
||||
try {
|
||||
let data;
|
||||
if (config.identifier === CLIENT_ID.MAC) {
|
||||
const { ip, identifier, ...values } = config;
|
||||
|
||||
data = { ...values };
|
||||
} else {
|
||||
const { mac, identifier, ...values } = config;
|
||||
|
||||
data = { ...values };
|
||||
}
|
||||
|
||||
await apiClient.addClient(data);
|
||||
await apiClient.addClient(config);
|
||||
dispatch(addClientSuccess());
|
||||
dispatch(toggleClientModal());
|
||||
dispatch(addSuccessToast(t('client_added', { key: config.name })));
|
||||
|
|
@ -59,16 +47,7 @@ export const updateClientSuccess = createAction('UPDATE_CLIENT_SUCCESS');
|
|||
export const updateClient = (config, name) => async (dispatch) => {
|
||||
dispatch(updateClientRequest());
|
||||
try {
|
||||
let data;
|
||||
if (config.identifier === CLIENT_ID.MAC) {
|
||||
const { ip, identifier, ...values } = config;
|
||||
|
||||
data = { name, data: { ...values } };
|
||||
} else {
|
||||
const { mac, identifier, ...values } = config;
|
||||
|
||||
data = { name, data: { ...values } };
|
||||
}
|
||||
const data = { name, data: { ...config } };
|
||||
|
||||
await apiClient.updateClient(data);
|
||||
dispatch(updateClientSuccess());
|
||||
|
|
|
|||
|
|
@ -353,6 +353,7 @@ class Api {
|
|||
|
||||
// Per-client settings
|
||||
GET_CLIENTS = { path: 'clients', method: 'GET' };
|
||||
FIND_CLIENTS = { path: 'clients/find', method: 'GET' };
|
||||
ADD_CLIENT = { path: 'clients/add', method: 'POST' };
|
||||
DELETE_CLIENT = { path: 'clients/delete', method: 'POST' };
|
||||
UPDATE_CLIENT = { path: 'clients/update', method: 'POST' };
|
||||
|
|
@ -389,6 +390,12 @@ class Api {
|
|||
return this.makeRequest(path, method, parameters);
|
||||
}
|
||||
|
||||
findClients(params) {
|
||||
const { path, method } = this.FIND_CLIENTS;
|
||||
const url = getPathWithQueryString(path, params);
|
||||
return this.makeRequest(url, method);
|
||||
}
|
||||
|
||||
// DNS access settings
|
||||
ACCESS_LIST = { path: 'access/list', method: 'GET' };
|
||||
ACCESS_SET = { path: 'access/set', method: 'POST' };
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
|||
import { Trans, withNamespaces } from 'react-i18next';
|
||||
import ReactTable from 'react-table';
|
||||
|
||||
import { MODAL_TYPE, CLIENT_ID } from '../../../helpers/constants';
|
||||
import { MODAL_TYPE } from '../../../helpers/constants';
|
||||
import Card from '../../ui/Card';
|
||||
import Modal from './Modal';
|
||||
import WrapCell from './WrapCell';
|
||||
|
|
@ -40,10 +40,7 @@ class ClientsTable extends Component {
|
|||
const client = clients.find(item => name === item.name);
|
||||
|
||||
if (client) {
|
||||
const identifier = client.mac ? CLIENT_ID.MAC : CLIENT_ID.IP;
|
||||
|
||||
return {
|
||||
identifier,
|
||||
use_global_settings: true,
|
||||
use_global_blocked_services: true,
|
||||
...client,
|
||||
|
|
@ -51,7 +48,7 @@ class ClientsTable extends Component {
|
|||
}
|
||||
|
||||
return {
|
||||
identifier: CLIENT_ID.IP,
|
||||
ids: [''],
|
||||
use_global_settings: true,
|
||||
use_global_blocked_services: true,
|
||||
};
|
||||
|
|
@ -76,28 +73,22 @@ class ClientsTable extends Component {
|
|||
columns = [
|
||||
{
|
||||
Header: this.props.t('table_client'),
|
||||
accessor: 'ip',
|
||||
accessor: 'ids',
|
||||
minWidth: 150,
|
||||
Cell: (row) => {
|
||||
if (row.original && row.original.mac) {
|
||||
return (
|
||||
<div className="logs__row logs__row--overflow">
|
||||
<span className="logs__text" title={row.original.mac}>
|
||||
{row.original.mac} <em>(MAC)</em>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
} else if (row.value) {
|
||||
return (
|
||||
<div className="logs__row logs__row--overflow">
|
||||
<span className="logs__text" title={row.value}>
|
||||
{row.value} <em>(IP)</em>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const { value } = row;
|
||||
|
||||
return '';
|
||||
return (
|
||||
<div className="logs__row logs__row--overflow">
|
||||
<span className="logs__text">
|
||||
{value.map(address => (
|
||||
<div key={address} title={address}>
|
||||
{address}
|
||||
</div>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -119,9 +110,7 @@ class ClientsTable extends Component {
|
|||
|
||||
return (
|
||||
<div className="logs__row logs__row--overflow">
|
||||
<div className="logs__text" title={title}>
|
||||
{title}
|
||||
</div>
|
||||
<div className="logs__text">{title}</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Field, reduxForm, formValueSelector } from 'redux-form';
|
||||
import { Field, FieldArray, reduxForm, formValueSelector } from 'redux-form';
|
||||
import { Trans, withNamespaces } from 'react-i18next';
|
||||
import flow from 'lodash/flow';
|
||||
|
||||
import i18n from '../../../i18n';
|
||||
import Tabs from '../../ui/Tabs';
|
||||
import { toggleAllServices } from '../../../helpers/helpers';
|
||||
import { renderField, renderRadioField, renderSelectField, renderServiceField, ip, mac, required } from '../../../helpers/form';
|
||||
import { CLIENT_ID, SERVICES } from '../../../helpers/constants';
|
||||
import {
|
||||
renderField,
|
||||
renderGroupField,
|
||||
renderSelectField,
|
||||
renderServiceField,
|
||||
} from '../../../helpers/form';
|
||||
import { SERVICES } from '../../../helpers/constants';
|
||||
import './Service.css';
|
||||
|
||||
const settingsCheckboxes = [
|
||||
|
|
@ -34,6 +40,67 @@ const settingsCheckboxes = [
|
|||
},
|
||||
];
|
||||
|
||||
const validate = (values) => {
|
||||
const errors = {};
|
||||
const { name, ids } = values;
|
||||
|
||||
if (!name || !name.length) {
|
||||
errors.name = i18n.t('form_error_required');
|
||||
}
|
||||
|
||||
if (ids && ids.length) {
|
||||
const idArrayErrors = [];
|
||||
ids.forEach((id, idx) => {
|
||||
if (!id || !id.length) {
|
||||
idArrayErrors[idx] = i18n.t('form_error_required');
|
||||
}
|
||||
});
|
||||
|
||||
if (idArrayErrors.length) {
|
||||
errors.ids = idArrayErrors;
|
||||
}
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
const renderFields = (placeholder, buttonTitle) =>
|
||||
function cell(row) {
|
||||
const {
|
||||
fields,
|
||||
meta: { error },
|
||||
} = row;
|
||||
|
||||
return (
|
||||
<div className="form__group">
|
||||
{fields.map((ip, index) => (
|
||||
<div key={index} className="mb-1">
|
||||
<Field
|
||||
name={ip}
|
||||
component={renderGroupField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={placeholder}
|
||||
isActionAvailable={index !== 0}
|
||||
removeField={() => fields.remove(index)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link btn-block btn-sm"
|
||||
onClick={() => fields.push()}
|
||||
title={buttonTitle}
|
||||
>
|
||||
<svg className="icon icon--close">
|
||||
<use xlinkHref="#plus" />
|
||||
</svg>
|
||||
</button>
|
||||
{error && <div className="error">{error}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
let Form = (props) => {
|
||||
const {
|
||||
t,
|
||||
|
|
@ -42,92 +109,53 @@ let Form = (props) => {
|
|||
change,
|
||||
pristine,
|
||||
submitting,
|
||||
clientIdentifier,
|
||||
useGlobalSettings,
|
||||
useGlobalServices,
|
||||
toggleClientModal,
|
||||
processingAdding,
|
||||
processingUpdating,
|
||||
invalid,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="modal-body">
|
||||
<div className="form__group">
|
||||
<div className="form__inline mb-2">
|
||||
<strong className="mr-3">
|
||||
<Trans>client_identifier</Trans>
|
||||
</strong>
|
||||
<div className="custom-controls-stacked">
|
||||
<Field
|
||||
name="identifier"
|
||||
component={renderRadioField}
|
||||
type="radio"
|
||||
className="form-control mr-2"
|
||||
value="ip"
|
||||
placeholder={t('ip_address')}
|
||||
/>
|
||||
<Field
|
||||
name="identifier"
|
||||
component={renderRadioField}
|
||||
type="radio"
|
||||
className="form-control mr-2"
|
||||
value="mac"
|
||||
placeholder="MAC"
|
||||
/>
|
||||
<div className="form__group mb-0">
|
||||
<div className="form__group">
|
||||
<Field
|
||||
id="name"
|
||||
name="name"
|
||||
component={renderField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('form_client_name')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form__group">
|
||||
<div className="form__label">
|
||||
<strong className="mr-3">
|
||||
<Trans>client_identifier</Trans>
|
||||
</strong>
|
||||
</div>
|
||||
<div className="form__desc mt-0">
|
||||
<Trans
|
||||
components={[
|
||||
<a href="#dhcp" key="0">
|
||||
link
|
||||
</a>,
|
||||
]}
|
||||
>
|
||||
client_identifier_desc
|
||||
</Trans>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col col-sm-6">
|
||||
{clientIdentifier === CLIENT_ID.IP && (
|
||||
<div className="form__group">
|
||||
<Field
|
||||
id="ip"
|
||||
name="ip"
|
||||
component={renderField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_ip')}
|
||||
validate={[ip, required]}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{clientIdentifier === CLIENT_ID.MAC && (
|
||||
<div className="form__group">
|
||||
<Field
|
||||
id="mac"
|
||||
name="mac"
|
||||
component={renderField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_mac')}
|
||||
validate={[mac, required]}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col col-sm-6">
|
||||
<Field
|
||||
id="name"
|
||||
name="name"
|
||||
component={renderField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('form_client_name')}
|
||||
validate={[required]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form__desc">
|
||||
<Trans
|
||||
components={[
|
||||
<a href="#dhcp" key="0">
|
||||
link
|
||||
</a>,
|
||||
]}
|
||||
>
|
||||
client_identifier_desc
|
||||
</Trans>
|
||||
|
||||
<div className="form__group">
|
||||
<FieldArray
|
||||
name="ids"
|
||||
component={renderFields(t('form_enter_id'), t('form_add_id'))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -140,7 +168,11 @@ let Form = (props) => {
|
|||
type="checkbox"
|
||||
component={renderSelectField}
|
||||
placeholder={t(setting.placeholder)}
|
||||
disabled={setting.name !== 'use_global_settings' ? useGlobalSettings : false}
|
||||
disabled={
|
||||
setting.name !== 'use_global_settings'
|
||||
? useGlobalSettings
|
||||
: false
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -210,7 +242,13 @@ let Form = (props) => {
|
|||
<button
|
||||
type="submit"
|
||||
className="btn btn-success btn-standard"
|
||||
disabled={submitting || pristine || processingAdding || processingUpdating}
|
||||
disabled={
|
||||
submitting ||
|
||||
invalid ||
|
||||
pristine ||
|
||||
processingAdding ||
|
||||
processingUpdating
|
||||
}
|
||||
>
|
||||
<Trans>save_btn</Trans>
|
||||
</button>
|
||||
|
|
@ -227,22 +265,20 @@ Form.propTypes = {
|
|||
change: PropTypes.func.isRequired,
|
||||
submitting: PropTypes.bool.isRequired,
|
||||
toggleClientModal: PropTypes.func.isRequired,
|
||||
clientIdentifier: PropTypes.string,
|
||||
useGlobalSettings: PropTypes.bool,
|
||||
useGlobalServices: PropTypes.bool,
|
||||
t: PropTypes.func.isRequired,
|
||||
processingAdding: PropTypes.bool.isRequired,
|
||||
processingUpdating: PropTypes.bool.isRequired,
|
||||
invalid: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const selector = formValueSelector('clientForm');
|
||||
|
||||
Form = connect((state) => {
|
||||
const clientIdentifier = selector(state, 'identifier');
|
||||
const useGlobalSettings = selector(state, 'use_global_settings');
|
||||
const useGlobalServices = selector(state, 'use_global_blocked_services');
|
||||
return {
|
||||
clientIdentifier,
|
||||
useGlobalSettings,
|
||||
useGlobalServices,
|
||||
};
|
||||
|
|
@ -253,5 +289,6 @@ export default flow([
|
|||
reduxForm({
|
||||
form: 'clientForm',
|
||||
enableReinitialize: true,
|
||||
validate,
|
||||
}),
|
||||
])(Form);
|
||||
|
|
|
|||
|
|
@ -3,3 +3,8 @@
|
|||
vertical-align: middle;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon--close {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -167,6 +167,14 @@ const Icons = () => (
|
|||
<symbol id="location" viewBox="0 0 24 24" fill="currentColor" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M12,2C8.134,2,5,5.134,5,9c0,5,7,13,7,13s7-8,7-13C19,5.134,15.866,2,12,2z M12,11.5c-1.381,0-2.5-1.119-2.5-2.5 c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5C14.5,10.381,13.381,11.5,12,11.5z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="cross" viewBox="0 0 24 24" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</symbol>
|
||||
|
||||
<symbol id="plus" viewBox="0 0 24 24" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</symbol>
|
||||
</svg>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,50 @@ export const renderField = ({
|
|||
</Fragment>
|
||||
);
|
||||
|
||||
export const renderGroupField = ({
|
||||
input,
|
||||
id,
|
||||
className,
|
||||
placeholder,
|
||||
type,
|
||||
disabled,
|
||||
autoComplete,
|
||||
isActionAvailable,
|
||||
removeField,
|
||||
meta: { touched, error },
|
||||
}) => (
|
||||
<Fragment>
|
||||
<div className="input-group">
|
||||
<input
|
||||
{...input}
|
||||
id={id}
|
||||
placeholder={placeholder}
|
||||
type={type}
|
||||
className={className}
|
||||
disabled={disabled}
|
||||
autoComplete={autoComplete}
|
||||
/>
|
||||
{isActionAvailable &&
|
||||
<span className="input-group-append">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-icon"
|
||||
onClick={removeField}
|
||||
>
|
||||
<svg className="icon icon--close">
|
||||
<use xlinkHref="#cross" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
{!disabled &&
|
||||
touched &&
|
||||
(error && <span className="form__message form__message--error">{error}</span>)}
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
export const renderRadioField = ({
|
||||
input, placeholder, disabled, meta: { touched, error },
|
||||
}) => (
|
||||
|
|
@ -102,6 +146,7 @@ export const renderServiceField = ({
|
|||
</Fragment>
|
||||
);
|
||||
|
||||
// Validation functions
|
||||
export const required = (value) => {
|
||||
if (value || value === 0) {
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Fragment } from 'react';
|
||||
import { getClientInfo, normalizeWhois } from './helpers';
|
||||
import { getClientInfo, getAutoClientInfo, normalizeWhois } from './helpers';
|
||||
import { WHOIS_ICONS } from './constants';
|
||||
|
||||
const getFormattedWhois = (whois, t) => {
|
||||
|
|
@ -23,7 +23,7 @@ const getFormattedWhois = (whois, t) => {
|
|||
};
|
||||
|
||||
export const formatClientCell = (value, clients, autoClients, t) => {
|
||||
const clientInfo = getClientInfo(clients, value) || getClientInfo(autoClients, value);
|
||||
const clientInfo = getClientInfo(clients, value) || getAutoClientInfo(autoClients, value);
|
||||
const { name, whois } = clientInfo;
|
||||
let whoisContainer = '';
|
||||
let nameContainer = value;
|
||||
|
|
|
|||
|
|
@ -248,6 +248,20 @@ export const redirectToCurrentProtocol = (values, httpPort = 80) => {
|
|||
export const normalizeTextarea = text => text && text.replace(/[;, ]/g, '\n').split('\n').filter(n => n);
|
||||
|
||||
export const getClientInfo = (clients, ip) => {
|
||||
const client = clients
|
||||
.find(item => item.ip_addrs && item.ip_addrs.find(clientIp => clientIp === ip));
|
||||
|
||||
if (!client) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const { name, whois_info } = client;
|
||||
const whois = Object.keys(whois_info).length > 0 ? whois_info : '';
|
||||
|
||||
return { name, whois };
|
||||
};
|
||||
|
||||
export const getAutoClientInfo = (clients, ip) => {
|
||||
const client = clients.find(item => ip === item.ip);
|
||||
|
||||
if (!client) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue