+ client: handle per-client settings

client/src/helpers/constants.js

@@ -1,5 +1,6 @@
 export const R_URL_REQUIRES_PROTOCOL = /^https?:\/\/\w[\w_\-.]*\.[a-z]{2,8}[^\s]*$/;
 export const R_IPV4 = /^(?:(?:^|\.)(?:2(?:5[0-5]|[0-4]\d)|1?\d?\d)){4}$/g;
+export const R_MAC = /^((([a-fA-F0-9][a-fA-F0-9]+[-]){5}|([a-fA-F0-9][a-fA-F0-9]+[:]){5})([a-fA-F0-9][a-fA-F0-9])$)|(^([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]+[.]){2}([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]))$/g;
 
 export const STATS_NAMES = {
     avg_processing_time: 'average_processing_time',
@@ -19,7 +20,8 @@ export const STATUS_COLORS = {
 
 export const REPOSITORY = {
     URL: 'https://github.com/AdguardTeam/AdGuardHome',
-    TRACKERS_DB: 'https://github.com/AdguardTeam/AdGuardHome/tree/master/client/src/helpers/trackers/adguard.json',
+    TRACKERS_DB:
+        'https://github.com/AdguardTeam/AdGuardHome/tree/master/client/src/helpers/trackers/adguard.json',
 };
 
 export const PRIVACY_POLICY_LINK = 'https://adguard.com/privacy/home.html';
@@ -165,3 +167,13 @@ export const DHCP_STATUS_RESPONSE = {
     NO: 'no',
     ERROR: 'error',
 };
+
+export const MODAL_TYPE = {
+    ADD: 'add',
+    EDIT: 'edit',
+};
+
+export const CLIENT_ID = {
+    MAC: 'mac',
+    IP: 'ip',
+};

client/src/helpers/form.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { Trans } from 'react-i18next';
 
-import { R_IPV4, UNSAFE_PORTS } from '../helpers/constants';
+import { R_IPV4, R_MAC, UNSAFE_PORTS } from '../helpers/constants';
 
 export const renderField = ({
     input, id, className, placeholder, type, disabled, meta: { touched, error },
@@ -55,6 +55,13 @@ export const ipv4 = (value) => {
     return false;
 };
 
+export const mac = (value) => {
+    if (value && !new RegExp(R_MAC).test(value)) {
+        return <Trans>form_error_mac_format</Trans>;
+    }
+    return false;
+};
+
 export const isPositive = (value) => {
     if ((value || value === 0) && (value <= 0)) {
         return <Trans>form_error_positive</Trans>;

client/src/helpers/helpers.js

@@ -208,3 +208,21 @@ export const getClientName = (clients, ip) => {
     const client = clients.find(item => ip === item.ip);
     return (client && client.name) || '';
 };
+
+export const sortClients = (clients) => {
+    const compare = (a, b) => {
+        const nameA = a.name.toUpperCase();
+        const nameB = b.name.toUpperCase();
+        let comparison = 0;
+
+        if (nameA > nameB) {
+            comparison = 1;
+        } else if (nameA < nameB) {
+            comparison = -1;
+        }
+
+        return comparison;
+    };
+
+    return clients.sort(compare);
+};