* call debug.FreeOSMemory() once in 5 minutes

* commit 'f04acaf92e59b0249912b8e6464d1f9c2f9ccc68':
  * Makefile: run 'npm ci' for 'lint-js' target
  * Update URLs for default filters

.github/workflows/lint.yml

@@ -44,4 +44,4 @@ jobs:
           fields: repo,message,commit,author
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

.twosky.json

@@ -13,6 +13,7 @@
       "hr": "Hrvatski",
       "id": "Indonesian",
       "it": "Italiano",
+      "hu": "Magyar",
       "no": "Norsk",
       "pl": "Polski",
       "pt-br": "Português (BR)",
@@ -32,7 +33,8 @@
       "zh-tw": "正體中文",
       "zh-cn": "简体中文",
       "ko": "한국어",
-      "th": "ภาษาไทย"
+      "th": "ภาษาไทย",
+      "si-lk": "සිංහල"
     }
   }
 ]

AGHTechDoc.md

@@ -12,6 +12,7 @@ Contents:
 * Updating
 	* Get version command
 	* Update command
+* API: Get global status
 * TLS
 	* API: Get TLS configuration
 	* API: Set TLS configuration
@@ -22,12 +23,15 @@ Contents:
 	* Update client
 	* Delete client
 	* API: Find clients by IP
-* Enable DHCP server
-	* "Show DHCP status" command
-	* "Check DHCP" command
-	* "Enable DHCP" command
+* DHCP server
+	* DHCP server in DNS
+	* DHCP Custom Options
+	* API: Show DHCP interfaces
+	* API: Show DHCP status
+	* API: Check DHCP
+	* API: Enable DHCP
 	* Static IP check/set
-	* Add a static lease
+	* API: Add a static lease
 	* API: Reset DHCP configuration
 * DNS general settings
 	* API: Get DNS general settings
@@ -64,6 +68,7 @@ Contents:
 	* API: Log in
 	* API: Log out
 	* API: Get current user info
+* Safe services
 
 
 ## Relations between subsystems
@@ -374,9 +379,31 @@ Error response:
 UI shows error message "Auto-update has failed"
 
 
-## Enable DHCP server
+## API: Get global status
 
-Algorithm:
+Request:
+
+	GET /control/status
+
+Response:
+
+	200 OK
+
+	{
+	"dns_addresses":["..."],
+	"dns_port":53,
+	"http_port":3000,
+	"language":"en",
+	"protection_enabled":true,
+	"running":true,
+	"dhcp_available":true,
+	"version":"undefined"
+	}
+
+
+## DHCP server
+
+Enable DHCP server algorithm:
 
 * UI shows DHCP configuration screen with "Enabled DHCP" button disabled, and "Check DHCP" button enabled
 * User clicks on "Check DHCP"; UI sends request to server
@@ -388,7 +415,58 @@ Algorithm:
 * UI shows the status
 
 
-### "Show DHCP status" command
+### DHCP server in DNS
+
+DHCP leases are used in several ways by DNS module.
+
+* For "A" DNS reqeust we reply with an IP address leased by our DHCP server.
+
+		< A bills-notebook.lan.
+		> A bills-notebook.lan. = 192.168.1.100
+
+* For "PTR" DNS request we reply with a hostname from an active DHCP lease.
+
+		< PTR 100.1.168.192.in-addr.arpa.
+		> PTR 100.1.168.192.in-addr.arpa. = bills-notebook.
+
+
+### DHCP Custom Options
+
+Option with arbitrary hexadecimal data:
+
+	DEC_CODE hex HEX_DATA
+
+where DEC_CODE is a decimal DHCPv4 option code in range [1..255]
+
+Option with IP data (only 1 IP is supported):
+
+	DEC_CODE ip IP_ADDR
+
+
+### API: Show DHCP interfaces
+
+Request:
+
+	GET /control/dhcp/interfaces
+
+Response:
+
+	200 OK
+
+	{
+		"iface_name":{
+			"name":"iface_name",
+			"hardware_address":"...",
+			"ipv4_addresses":["ipv4 addr", ...],
+			"ipv6_addresses":["ipv6 addr", ...],
+			"gateway_ip":"...",
+			"flags":"up|broadcast|multicast"
+		}
+		...
+	}
+
+
+### API: Show DHCP status
 
 Request:
 
@@ -399,16 +477,19 @@ Response:
 	200 OK
 
 	{
-		"config":{
-			"enabled":false,
-			"interface_name":"...",
+		"enabled":false,
+		"interface_name":"...",
+		"v4":{
 			"gateway_ip":"...",
 			"subnet_mask":"...",
-			"range_start":"...",
+			"range_start":"...", // if empty: DHCPv4 won't be enabled
 			"range_end":"...",
 			"lease_duration":60,
-			"icmp_timeout_msec":0
 		},
+		"v6":{
+			"range_start":"...", // if empty: DHCPv6 won't be enabled
+			"lease_duration":60,
+		}
 		"leases":[
 			{"ip":"...","mac":"...","hostname":"...","expires":"..."}
 			...
@@ -420,7 +501,7 @@ Response:
 	}
 
 
-### "Check DHCP" command
+### API: Check DHCP
 
 Request:
 
@@ -433,13 +514,21 @@ Response:
 	200 OK
 
 	{
-		"other_server": {
-			"found": "yes|no|error",
-			"error": "Error message", // set if found=error
-		},
-		"static_ip": {
-			"static": "yes|no|error",
-			"ip": "<Current dynamic IP address>", // set if static=no
+		v4: {
+			"other_server": {
+				"found": "yes|no|error",
+				"error": "Error message", // set if found=error
+			},
+			"static_ip": {
+				"static": "yes|no|error",
+				"ip": "<Current dynamic IP address>", // set if static=no
+			}
+		}
+		v6: {
+			"other_server": {
+				"found": "yes|no|error",
+				"error": "Error message", // set if found=error
+			},
 		}
 	}
 
@@ -460,21 +549,26 @@ If `static_ip.static` is:
 		In order to use DHCP server a static IP address must be set.  We failed to determine if this network interface is configured using static IP address.  Please set a static IP address manually.
 
 
-### "Enable DHCP" command
+### API: Enable DHCP
 
 Request:
 
 	POST /control/dhcp/set_config
 
 	{
-		"enabled":true,
-		"interface_name":"vboxnet0",
+	"enabled":true,
+	"interface_name":"vboxnet0",
+	"v4":{
 		"gateway_ip":"192.169.56.1",
 		"subnet_mask":"255.255.255.0",
-		"range_start":"192.169.56.3",
-		"range_end":"192.169.56.3",
+		"range_start":"192.169.56.100",
+		"range_end":"192.169.56.200", // Note: first 3 octects must match "range_start"
 		"lease_duration":60,
-		"icmp_timeout_msec":0
+	},
+	"v6":{
+		"range_start":"...",
+		"lease_duration":60,
+	}
 	}
 
 Response:
@@ -483,6 +577,10 @@ Response:
 
 	OK
 
+For v4, if range_start = "1.2.3.4", the range_end must be "1.2.3.X" where X > 4.
+
+For v6, if range_start = "2001::1", the last IP is "2001:ff".
+
 
 ### Static IP check/set
 
@@ -578,7 +676,7 @@ or:
 	systemctl restart system-networkd
 
 
-### Add a static lease
+### API: Add a static lease
 
 Request:
 
@@ -1747,3 +1845,40 @@ Response:
 	}
 
 If no client is configured then authentication is disabled and server sends an empty response.
+
+
+### Safe services
+
+Check if host name is blocked by SB/PC service:
+
+* For each host name component, search for the result in cache by the first 2 bytes of SHA-256 hashes of host name components (max. is 4, i.e. sub2.sub1.host.com), excluding TLD:
+
+		hashes[] = cache_search(sha256(host.com)[0..1])
+		...
+
+	If hash prefix is found, search for a full hash sum in the cached data.
+	If found, the host is blocked.
+	If not found, the host is not blocked - don't request data for this prefix from the Family server again.
+	If hash prefix is not found, request data for this prefix from the Family server.
+
+* Prepare query string which is generated from the first 2 bytes (converted to a 4-character string) of SHA-256 hashes of host name components (max. is 4, i.e. sub2.sub1.host.com), excluding TLD:
+
+		qs = ... + string(sha256(sub.host.com)[0..1]) + "." + string(sha256(host.com)[0..1]) + ".sb.dns.adguard.com."
+
+	For PC `.pc.dns.adguard.com` suffix is used.
+
+* Send TXT query to Family server, receive response which contains the array of complete hash sums of the blocked hosts
+
+* Check if one of received hash sums (`hashes[]`) matches hash sums for our host name
+
+		hashes[0] <> sha256(host.com)
+		hashes[0] <> sha256(sub.host.com)
+		hashes[1] <> sha256(host.com)
+		hashes[1] <> sha256(sub.host.com)
+		...
+
+* Store all received hash sums in cache:
+
+		sha256(host.com)[0..1] -> hashes[0],hashes[1],...
+		sha256(sub.host.com)[0..1] -> hashes[2],...
+		...

Makefile

@@ -14,6 +14,13 @@
 # Building releases:
 #
 # * release -- builds AdGuard Home distros. CHANNEL must be specified (edge, release or beta).
+# * release_and_sign -- builds AdGuard Home distros and signs the binary files.
+#   CHANNEL must be specified (edge, release or beta).
+# * sign -- Repacks all release archive files and signs the binary files inside them.
+#   For signing to work, the public+private key pair for $(GPG_KEY) must be imported:
+#     gpg --import public.txt
+#     gpg --import private.txt
+#   GPG_KEY_PASSPHRASE must contain the GPG key passphrase
 # * docker-multi-arch -- builds a multi-arch image. If you want it to be pushed to docker hub,
 # 	you must specify:
 #     * DOCKER_IMAGE_NAME - adguard/adguard-home
@@ -23,6 +30,9 @@ GOPATH := $(shell go env GOPATH)
 PWD := $(shell pwd)
 TARGET=AdGuardHome
 BASE_URL="https://static.adguard.com/adguardhome/$(CHANNEL)"
+GPG_KEY := devteam@adguard.com
+GPG_KEY_PASSPHRASE :=
+GPG_CMD := gpg --detach-sig --default-key $(GPG_KEY) --pinentry-mode loopback --passphrase $(GPG_KEY_PASSPHRASE)
 
 # See release target
 DIST_DIR=dist
@@ -39,6 +49,12 @@ endif
 endif
 endif
 
+# Version history URL (see
+VERSION_HISTORY_URL="https://github.com/AdguardTeam/AdGuardHome/releases"
+ifeq ($(CHANNEL),edge)
+	VERSION_HISTORY_URL="https://github.com/AdguardTeam/AdGuardHome/commits/master"
+endif
+
 # goreleaser command depends on the $CHANNEL
 GORELEASER_COMMAND=goreleaser release --rm-dist --skip-publish --snapshot
 ifneq ($(CHANNEL),edge)
@@ -98,7 +114,8 @@ all: build
 init:
 	git config core.hooksPath .githooks
 
-build: dependencies client
+build: client_with_deps
+	go mod download
 	PATH=$(GOPATH)/bin:$(PATH) go generate ./...
 	CGO_ENABLED=0 go build -ldflags="-s -w -X main.version=$(VERSION) -X main.channel=$(CHANNEL) -X main.goarm=$(GOARM)"
 	PATH=$(GOPATH)/bin:$(PATH) packr clean
@@ -106,6 +123,10 @@ build: dependencies client
 client:
 	npm --prefix client run build-prod
 
+client_with_deps:
+	npm --prefix client ci
+	npm --prefix client run build-prod
+
 client-watch:
 	npm --prefix client run watch
 
@@ -125,7 +146,7 @@ docker:
 
 lint: lint-js lint-go
 
-lint-js:
+lint-js: dependencies
 	@echo Running js linter
 	npm --prefix client run lint
 
@@ -134,10 +155,14 @@ lint-go:
 	golangci-lint run
 
 test:
-	@echo Running unit-tests
+	@echo Running JS unit-tests
+	npm run test --prefix client
+	@echo Running Go unit-tests
 	go test -race -v -bench=. -coverprofile=coverage.txt -covermode=atomic ./...
 
-ci: dependencies client test
+ci: client_with_deps
+	go mod download
+	$(MAKE) test
 
 dependencies:
 	npm --prefix client ci
@@ -174,13 +199,20 @@ docker-multi-arch:
 	@echo If the image was pushed to the registry, you can now run it:
 	@echo docker run --name "adguard-home" -p 53:53/tcp -p 53:53/udp -p 80:80/tcp -p 443:443/tcp -p 853:853/tcp -p 3000:3000/tcp $(DOCKER_IMAGE_NAME)
 
-release: dependencies client
+release: client_with_deps
+	go mod download
 	@echo Starting release build: version $(VERSION), channel $(CHANNEL)
 	CHANNEL=$(CHANNEL) $(GORELEASER_COMMAND)
-	$(call repack_dist)
 	$(call write_version_file,$(VERSION))
 	PATH=$(GOPATH)/bin:$(PATH) packr clean
 
+release_and_sign: client_with_deps
+	$(MAKE) release
+	$(call repack_dist)
+
+sign:
+	$(call repack_dist)
+
 define write_version_file
 	$(eval version := $(1))
 
@@ -195,7 +227,7 @@ define write_version_file
 	echo "{" >> $(DIST_DIR)/version.json
 	echo "  \"version\": \"$(version)\"," >> $(DIST_DIR)/version.json
 	echo "  \"announcement\": \"AdGuard Home $(version) is now available!\"," >> $(DIST_DIR)/version.json
-	echo "  \"announcement_url\": \"https://github.com/AdguardTeam/AdGuardHome/releases\"," >> $(DIST_DIR)/version.json
+	echo "  \"announcement_url\": \"$(VERSION_HISTORY_URL)\"," >> $(DIST_DIR)/version.json
 	echo "  \"selfupdate_min_version\": \"0.0\"," >> $(DIST_DIR)/version.json
 
 	# Windows builds
@@ -245,29 +277,64 @@ define repack_dist
 	#  and we can't create it
 	rm -rf $(DIST_DIR)/AdGuardHome
 
+	# Windows builds
+	$(call zip_repack_windows,AdGuardHome_windows_amd64.zip)
+	$(call zip_repack_windows,AdGuardHome_windows_386.zip)
+
+	# MacOS builds
+	$(call zip_repack,AdGuardHome_darwin_amd64.zip)
+	$(call zip_repack,AdGuardHome_darwin_386.zip)
+
 	# Linux
-	cd $(DIST_DIR) && tar xzf AdGuardHome_linux_amd64.tar.gz && tar czf AdGuardHome_linux_amd64.tar.gz AdGuardHome/ && rm -rf AdGuardHome
-	cd $(DIST_DIR) && tar xzf AdGuardHome_linux_386.tar.gz && tar czf AdGuardHome_linux_386.tar.gz AdGuardHome/ && rm -rf AdGuardHome
+	$(call tar_repack,AdGuardHome_linux_amd64.tar.gz)
+	$(call tar_repack,AdGuardHome_linux_386.tar.gz)
 
 	# Linux, all kinds of ARM
-	cd $(DIST_DIR) && tar xzf AdGuardHome_linux_armv5.tar.gz && tar czf AdGuardHome_linux_armv5.tar.gz AdGuardHome/ && rm -rf AdGuardHome
-	cd $(DIST_DIR) && tar xzf AdGuardHome_linux_armv6.tar.gz && tar czf AdGuardHome_linux_armv6.tar.gz AdGuardHome/ && rm -rf AdGuardHome
-	cd $(DIST_DIR) && tar xzf AdGuardHome_linux_armv7.tar.gz && tar czf AdGuardHome_linux_armv7.tar.gz AdGuardHome/ && rm -rf AdGuardHome
-	cd $(DIST_DIR) && tar xzf AdGuardHome_linux_arm64.tar.gz && tar czf AdGuardHome_linux_arm64.tar.gz AdGuardHome/ && rm -rf AdGuardHome
+	$(call tar_repack,AdGuardHome_linux_armv5.tar.gz)
+	$(call tar_repack,AdGuardHome_linux_armv6.tar.gz)
+	$(call tar_repack,AdGuardHome_linux_armv7.tar.gz)
+	$(call tar_repack,AdGuardHome_linux_arm64.tar.gz)
 
 	# Linux, MIPS
-	cd $(DIST_DIR) && tar xzf AdGuardHome_linux_mips_softfloat.tar.gz && tar czf AdGuardHome_linux_mips_softfloat.tar.gz AdGuardHome/ && rm -rf AdGuardHome
-	cd $(DIST_DIR) && tar xzf AdGuardHome_linux_mipsle_softfloat.tar.gz && tar czf AdGuardHome_linux_mipsle_softfloat.tar.gz AdGuardHome/ && rm -rf AdGuardHome
-	cd $(DIST_DIR) && tar xzf AdGuardHome_linux_mips64_softfloat.tar.gz && tar czf AdGuardHome_linux_mips64_softfloat.tar.gz AdGuardHome/ && rm -rf AdGuardHome
-	cd $(DIST_DIR) && tar xzf AdGuardHome_linux_mips64le_softfloat.tar.gz && tar czf AdGuardHome_linux_mips64le_softfloat.tar.gz AdGuardHome/ && rm -rf AdGuardHome
+	$(call tar_repack,AdGuardHome_linux_mips_softfloat.tar.gz)
+	$(call tar_repack,AdGuardHome_linux_mipsle_softfloat.tar.gz)
+	$(call tar_repack,AdGuardHome_linux_mips64_softfloat.tar.gz)
+	$(call tar_repack,AdGuardHome_linux_mips64le_softfloat.tar.gz)
 
 	# FreeBSD
-	cd $(DIST_DIR) && tar xzf AdGuardHome_freebsd_386.tar.gz && tar czf AdGuardHome_freebsd_386.tar.gz AdGuardHome/ && rm -rf AdGuardHome
-	cd $(DIST_DIR) && tar xzf AdGuardHome_freebsd_amd64.tar.gz && tar czf AdGuardHome_freebsd_amd64.tar.gz AdGuardHome/ && rm -rf AdGuardHome
+	$(call tar_repack,AdGuardHome_freebsd_386.tar.gz)
+	$(call tar_repack,AdGuardHome_freebsd_amd64.tar.gz)
 
 	# FreeBSD, all kinds of ARM
-	cd $(DIST_DIR) && tar xzf AdGuardHome_freebsd_armv5.tar.gz && tar czf AdGuardHome_freebsd_armv5.tar.gz AdGuardHome/ && rm -rf AdGuardHome
-	cd $(DIST_DIR) && tar xzf AdGuardHome_freebsd_armv6.tar.gz && tar czf AdGuardHome_freebsd_armv6.tar.gz AdGuardHome/ && rm -rf AdGuardHome
-	cd $(DIST_DIR) && tar xzf AdGuardHome_freebsd_armv7.tar.gz && tar czf AdGuardHome_freebsd_armv7.tar.gz AdGuardHome/ && rm -rf AdGuardHome
-	cd $(DIST_DIR) && tar xzf AdGuardHome_freebsd_arm64.tar.gz && tar czf AdGuardHome_freebsd_arm64.tar.gz AdGuardHome/ && rm -rf AdGuardHome
+	$(call tar_repack,AdGuardHome_freebsd_armv5.tar.gz)
+	$(call tar_repack,AdGuardHome_freebsd_armv6.tar.gz)
+	$(call tar_repack,AdGuardHome_freebsd_armv7.tar.gz)
+	$(call tar_repack,AdGuardHome_freebsd_arm64.tar.gz)
+endef
+
+define zip_repack_windows
+	$(eval ARC := $(1))
+	cd $(DIST_DIR) && \
+		unzip $(ARC) && \
+		$(GPG_CMD) AdGuardHome/AdGuardHome.exe && \
+		zip -r $(ARC) AdGuardHome/ && \
+		rm -rf AdGuardHome
+endef
+
+define zip_repack
+	$(eval ARC := $(1))
+	cd $(DIST_DIR) && \
+		unzip $(ARC) && \
+		$(GPG_CMD) AdGuardHome/AdGuardHome && \
+		zip -r $(ARC) AdGuardHome/ && \
+		rm -rf AdGuardHome
+endef
+
+define tar_repack
+	$(eval ARC := $(1))
+	cd $(DIST_DIR) && \
+		tar xzf $(ARC) && \
+		$(GPG_CMD) AdGuardHome/AdGuardHome && \
+		tar czf $(ARC) AdGuardHome/ && \
+		rm -rf AdGuardHome
 endef

README.md

@@ -20,8 +20,11 @@
     <a href="https://goreportcard.com/report/AdguardTeam/AdGuardHome">
       <img src="https://goreportcard.com/badge/github.com/AdguardTeam/AdGuardHome" alt="Go Report Card" />
     </a>
-    <a href="https://golangci.com/r/github.com/AdguardTeam/AdGuardHome">
-      <img src="https://golangci.com/badges/github.com/AdguardTeam/AdGuardHome.svg" alt="GolangCI" />
+    <a href="https://hub.docker.com/r/adguard/adguardhome">
+        <img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/adguard/adguardhome.svg?maxAge=604800" />
+    </a>
+    <a href="https://hub.docker.com/r/adguard/adguardhome">
+        <img alt="Docker Stars" src="https://img.shields.io/docker/stars/adguard/adguardhome.svg?maxAge=604800" />
     </a>
     <br />
     <a href="https://github.com/AdguardTeam/AdGuardHome/releases">
@@ -30,12 +33,6 @@
     <a href="https://snapcraft.io/adguard-home">
         <img alt="adguard-home" src="https://snapcraft.io/adguard-home/badge.svg" />
     </a>
-    <a href="https://hub.docker.com/r/adguard/adguardhome">
-        <img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/adguard/adguardhome.svg?maxAge=604800" />
-    </a>
-    <a href="https://hub.docker.com/r/adguard/adguardhome">
-        <img alt="Docker Stars" src="https://img.shields.io/docker/stars/adguard/adguardhome.svg?maxAge=604800" />
-    </a>
 </p>
 
 <br />
@@ -155,7 +152,10 @@ Run `make init` to prepare the development environment.
 You will need this to build AdGuard Home:
 
  * [go](https://golang.org/dl/) v1.14 or later.
- * [node.js](https://nodejs.org/en/download/) v10 or later.
+ * [node.js](https://nodejs.org/en/download/) v10.16.2 or later.
+ * [npm](https://www.npmjs.com/) v6.14 or later.
+
+Optionally, for Go devs:
  * [golangci-lint](https://github.com/golangci/golangci-lint)
  
 ### Building
@@ -214,6 +214,8 @@ You may need to prepare before using these builds:
 
 You are welcome to fork this repository, make your changes and submit a pull request — https://github.com/AdguardTeam/AdGuardHome/pulls
 
+Please note that we don't expect people to contribute to both UI and golang parts of the program simultaneously. Ideally, the golang part is implemented first, i.e. configuration, API, and the functionality itself. The UI part can be implemented later in a different pull request by a different person.
+
 <a id="test-unstable-versions"></a>
 ### Test unstable versions
 
@@ -230,7 +232,7 @@ There are three options how you can install an unstable version:
 
 There are three options how you can install an unstable version.
 
-1. You can either install a beta version of AdGuard Home which we update periodically.
+1. You can either install AdGuard Home from "beta" or "edge" distribution channel which we update periodically. If you're already using stable version of AdGuard Home, just replace the executable file with a new one.
 2. You can use the Docker image from the `edge` tag, which is synced with the repo master branch.
 3. You can install AdGuard Home from `beta` or `edge` channels on the Snap Store.
 

client/.eslintrc.json

@@ -1,18 +1,15 @@
 {
     "parser": "babel-eslint",
-
     "extends": [
         "plugin:react/recommended",
         "airbnb-base"
     ],
-
     "env": {
         "jest": true,
         "node": true,
         "browser": true,
         "commonjs": true
     },
-
     "settings": {
         "react": {
             "pragma": "React",
@@ -24,35 +21,65 @@
             }
         }
     },
-
     "rules": {
-        "indent": ["error", 4, {
-            "SwitchCase": 1,
-            "VariableDeclarator": 1,
-            "outerIIFEBody": 1,
-            "FunctionDeclaration": {
-                "parameters": 1,
-                "body": 1
-            },
-            "FunctionExpression": {
-                "parameters": 1,
-                "body": 1
-            },
-            "CallExpression": {
-                "arguments": 1
-            },
-            "ArrayExpression": 1,
-            "ObjectExpression": 1,
-            "ImportDeclaration": 1,
-            "flatTernaryExpressions": false,
-            "ignoredNodes": ["JSXElement", "JSXElement > *", "JSXAttribute", "JSXIdentifier", "JSXNamespacedName", "JSXMemberExpression", "JSXSpreadAttribute", "JSXExpressionContainer", "JSXOpeningElement", "JSXClosingElement", "JSXText", "JSXEmptyExpression", "JSXSpreadChild"],
-            "ignoreComments": false
-        }],
+        "indent": [
+            "error",
+            4,
+            {
+                "SwitchCase": 1,
+                "VariableDeclarator": 1,
+                "outerIIFEBody": 1,
+                "FunctionDeclaration": {
+                    "parameters": 1,
+                    "body": 1
+                },
+                "FunctionExpression": {
+                    "parameters": 1,
+                    "body": 1
+                },
+                "CallExpression": {
+                    "arguments": 1
+                },
+                "ArrayExpression": 1,
+                "ObjectExpression": 1,
+                "ImportDeclaration": 1,
+                "flatTernaryExpressions": false,
+                "ignoredNodes": [
+                    "JSXElement",
+                    "JSXElement > *",
+                    "JSXAttribute",
+                    "JSXIdentifier",
+                    "JSXNamespacedName",
+                    "JSXMemberExpression",
+                    "JSXSpreadAttribute",
+                    "JSXExpressionContainer",
+                    "JSXOpeningElement",
+                    "JSXClosingElement",
+                    "JSXText",
+                    "JSXEmptyExpression",
+                    "JSXSpreadChild"
+                ],
+                "ignoreComments": false
+            }
+        ],
         "class-methods-use-this": "off",
         "no-shadow": "off",
         "camelcase": "off",
-        "no-console": ["warn", { "allow": ["warn", "error"] }],
-        "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+        "no-console": [
+            "warn",
+            {
+                "allow": [
+                    "warn",
+                    "error"
+                ]
+            }
+        ],
+        "import/no-extraneous-dependencies": [
+            "error",
+            {
+                "devDependencies": true
+            }
+        ],
         "import/prefer-default-export": "off",
         "no-alert": "off"
     }

client/babel.config.js

@@ -11,6 +11,7 @@ module.exports = (api) => {
             '@babel/plugin-proposal-object-rest-spread',
             '@babel/plugin-proposal-nullish-coalescing-operator',
             '@babel/plugin-proposal-optional-chaining',
+            'react-hot-loader/babel',
         ],
     };
 };

client/constants.js

@@ -0,0 +1,11 @@
+const BUILD_ENVS = {
+    dev: 'development',
+    prod: 'production',
+};
+
+const BASE_URL = '/control';
+
+module.exports = {
+    BUILD_ENVS,
+    BASE_URL,
+};

client/package-lock.json

@@ -1356,6 +1356,17 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
+    "@hot-loader/react-dom": {
+      "version": "16.13.0",
+      "resolved": "https://registry.npmjs.org/@hot-loader/react-dom/-/react-dom-16.13.0.tgz",
+      "integrity": "sha512-lJZrmkucz2MrQJTQtJobx5MICXcfQvKihszqv655p557HPi0hMOWxrNpiHv3DWD8ugNWjtWcVWqRnFvwsHq1mQ==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.0"
+      }
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -2257,6 +2268,12 @@
         "@types/istanbul-lib-report": "*"
       }
     },
+    "@types/json-schema": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
+      "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2728,7 +2745,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -5108,6 +5124,12 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
+      "dev": true
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5201,9 +5223,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",
@@ -5216,9 +5238,9 @@
       },
       "dependencies": {
         "bn.js": {
-          "version": "4.11.8",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
-          "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==",
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
           "dev": true
         }
       }
@@ -5887,8 +5909,7 @@
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esquery": {
       "version": "1.3.1",
@@ -6844,6 +6865,16 @@
         }
       }
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dev": true,
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "global-modules": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
@@ -7357,18 +7388,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "http-proxy-middleware": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
-      "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
-      "dev": true,
-      "requires": {
-        "http-proxy": "^1.17.0",
-        "is-glob": "^4.0.0",
-        "lodash": "^4.17.11",
-        "micromatch": "^3.1.10"
-      }
-    },
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -7393,11 +7412,21 @@
       "dev": true
     },
     "i18next": {
-      "version": "19.4.4",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.4.4.tgz",
-      "integrity": "sha512-ofaHtdsDdX3A5nYur1HWblB7J4hIcjr2ACdnwTAJgc8hTfPbyzZfGX0hVkKpI3vzDIgO6Uzc4v1ffW2W6gG6zw==",
+      "version": "19.6.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.6.2.tgz",
+      "integrity": "sha512-Zyd/Z32FY+sD+Eg6sLj5DeDSlrIN3WZ4onuOBRGcjDx/rvodsyUZ9TJ2Y+3aD9Vu8MPbiMU2WesIER/rs1ioyw==",
       "requires": {
-        "@babel/runtime": "^7.3.1"
+        "@babel/runtime": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz",
+          "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
       }
     },
     "i18next-browser-languagedetector": {
@@ -9898,10 +9927,9 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-      "dev": true,
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+      "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -10168,9 +10196,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
     "lodash-es": {
       "version": "4.17.15",
@@ -10628,6 +10656,15 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "dev": true,
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "min-indent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz",
@@ -12287,6 +12324,39 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-hot-loader": {
+      "version": "4.12.21",
+      "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.12.21.tgz",
+      "integrity": "sha512-Ynxa6ROfWUeKWsTHxsrL2KMzujxJVPjs385lmB2t5cHUxdoRPGind9F00tOkdc1l5WBleOF4XEAMILY1KPIIDA==",
+      "dev": true,
+      "requires": {
+        "fast-levenshtein": "^2.0.6",
+        "global": "^4.3.0",
+        "hoist-non-react-statics": "^3.3.0",
+        "loader-utils": "^1.1.0",
+        "prop-types": "^15.6.1",
+        "react-lifecycles-compat": "^3.0.4",
+        "shallowequal": "^1.1.0",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "dev": true,
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        }
+      }
+    },
     "react-i18next": {
       "version": "11.4.0",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.4.0.tgz",
@@ -13328,6 +13398,12 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "dev": true
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -13752,8 +13828,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.16.1",
@@ -14080,12 +14155,13 @@
           }
         },
         "schema-utils": {
-          "version": "2.6.6",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz",
-          "integrity": "sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==",
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
           "dev": true,
           "requires": {
-            "ajv": "^6.12.0",
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
             "ajv-keywords": "^3.4.1"
           }
         }
@@ -15931,6 +16007,18 @@
             "ms": "^2.1.1"
           }
         },
+        "http-proxy-middleware": {
+          "version": "0.19.1",
+          "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
+          "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
+          "dev": true,
+          "requires": {
+            "http-proxy": "^1.17.0",
+            "is-glob": "^4.0.0",
+            "lodash": "^4.17.11",
+            "micromatch": "^3.1.10"
+          }
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

client/package.json

@@ -4,22 +4,25 @@
     "private": true,
     "scripts": {
         "build-dev": "cross-env BUILD_ENV=dev webpack --config webpack.dev.js",
-        "watch": "cross-env BUILD_ENV=dev webpack --config webpack.dev.js --watch",
         "build-prod": "cross-env BUILD_ENV=prod webpack --config webpack.prod.js",
+        "watch": "cross-env BUILD_ENV=dev webpack --config webpack.dev.js --watch",
+        "watch:hot": "cross-env BUILD_ENV=dev webpack-dev-server --config webpack.dev.js",
         "lint": "eslint src",
         "lint:fix": "eslint src --fix",
         "test": "jest",
         "test:watch": "jest --watch"
     },
     "dependencies": {
+        "@hot-loader/react-dom": "^16.13.0",
         "@nivo/line": "^0.49.1",
         "axios": "^0.19.2",
         "classnames": "^2.2.6",
         "date-fns": "^1.29.0",
-        "i18next": "^19.4.4",
+        "i18next": "^19.6.2",
         "i18next-browser-languagedetector": "^4.2.0",
         "ipaddr.js": "^1.9.1",
-        "lodash": "^4.17.15",
+        "js-yaml": "^3.14.0",
+        "lodash": "^4.17.19",
         "nanoid": "^3.1.9",
         "prop-types": "^15.7.2",
         "query-string": "^6.13.1",
@@ -73,6 +76,7 @@
         "path": "^0.12.7",
         "postcss-flexbugs-fixes": "4.2.1",
         "postcss-loader": "^3.0.0",
+        "react-hot-loader": "^4.12.21",
         "style-loader": "^1.2.1",
         "stylelint": "^13.5.0",
         "stylelint-webpack-plugin": "2.0.0",

client/src/__locales/en.json

@@ -11,6 +11,8 @@
     "save_config": "Save config",
     "enabled_dhcp": "DHCP server enabled",
     "disabled_dhcp": "DHCP server disabled",
+    "unavailable_dhcp": "DHCP is unavailable",
+    "unavailable_dhcp_desc": "AdGuard Home cannot run a DHCP server on your OS",
     "dhcp_title": "DHCP server (experimental!)",
     "dhcp_description": "If your router does not provide DHCP settings, you can use AdGuard's own built-in DHCP server.",
     "dhcp_enable": "Enable DHCP server",
@@ -21,6 +23,8 @@
     "dhcp_static_leases": "DHCP static leases",
     "dhcp_leases_not_found": "No DHCP leases found",
     "dhcp_config_saved": "DHCP config successfully saved",
+    "dhcp_ipv4_settings": "DHCP IPv4 Settings",
+    "dhcp_ipv6_settings": "DHCP IPv6 Settings",
     "form_error_required": "Required field",
     "form_error_ip4_format": "Invalid IPv4 format",
     "form_error_ip6_format": "Invalid IPv6 format",
@@ -29,6 +33,7 @@
     "form_error_client_id_format": "Invalid client ID format",
     "form_error_positive": "Must be greater than 0",
     "form_error_negative": "Must be equal to 0 or greater",
+    "range_end_error": "Must be greater than range start",
     "dhcp_form_gateway_input": "Gateway IP",
     "dhcp_form_subnet_input": "Subnet mask",
     "dhcp_form_range_title": "Range of IP addresses",
@@ -561,7 +566,8 @@
     "filter_category_security_desc": "Lists that specialize on blocking malware, phishing or scam domains",
     "filter_category_regional_desc": "Lists that focus on regional ads and tracking servers",
     "filter_category_other_desc": "Other blocklists",
+    "setup_config_to_enable_dhcp_server": "Setup config to enable DHCP server",
     "original_response": "Original response",
     "click_to_view_queries": "Click to view queries",
     "port_53_faq_link": "Port 53 is often occupied by \"DNSStubListener\" or \"systemd-resolved\" services. Please read <0>this instruction</0> on how to resolve this."
-}
+}

client/src/__locales/hr.json

@@ -84,7 +84,7 @@
     "disable_protection": "Onemogući zaštitu",
     "disabled_protection": "Onemogućena zaštita",
     "refresh_statics": "Osvježi statistiku",
-    "dns_query": "DNS Upiti",
+    "dns_query": "DNS upiti",
     "blocked_by": "<0>Blokirano filtrima</0>",
     "stats_malware_phishing": "Blokiran zločudni program/krađe identiteta",
     "stats_adult": "Blokirane web stranice za odrasle",
@@ -111,7 +111,7 @@
     "block_domain_use_filters_and_hosts": "Blokiraj domene koristeći filtre ili hosts datoteke",
     "filters_block_toggle_hint": "Pravila blokiranja možete postaviti u postavkama <a href='#filters'>filtara</a>.",
     "use_adguard_browsing_sec": "Koristi AdGuard uslugu zaštite pregledavanja",
-    "use_adguard_browsing_sec_hint": "AdGuard Home će provjeriti nalazi li se domena na popisu neželjenih domena od usluge zaštite pregledavanja. Za provjeru će se koristiti API za provjeru koji poštuje vašu privatnost. Samo mali dio SHA256 hash-a odnaziva domene se šalje poslužitelju.",
+    "use_adguard_browsing_sec_hint": "AdGuard Home će provjeriti nalazi li se domena na popisu neželjenih domena od usluge zaštite pregledavanja. Za provjeru će se koristiti API za provjeru koji poštuje vašu privatnost. Samo mali dio SHA256 hash-a od naziva domene se šalje poslužitelju.",
     "use_adguard_parental": "Koristi web uslugu AdGuard roditeljske zaštite",
     "use_adguard_parental_hint": "AdGuard Home provjeriti će sadrži li domena sadržaj za odrasle. Koristi isti API za zaštitu privatnosti kao i naša usluga zaštite pregledavanja.",
     "enforce_safe_search": "Omogući sigurno pretraživanje",

client/src/__locales/hu.json

@@ -0,0 +1,565 @@
+{
+    "client_settings": "Kliens beállítások",
+    "example_upstream_reserved": "megadhat egy DNS-t <0> felfelé egy adott tartományhoz </0>",
+    "upstream_parallel": "A párhuzamos lekérdezések segítségével felgyorsíthatja a megoldást az összes upstream kiszolgáló egyidejű lekérdezésével",
+    "parallel_requests": "Párhuzamos kérelmek",
+    "load_balancing": "Terheléselosztás",
+    "load_balancing_desc": "Egyszerre csak egy szerverről történjen lekérdezés. Az AdGuard Home egy súlyozott, véletlenszerű algoritmust fog használni a megfelelő szerver kiválasztására, így a leggyorsabb szervert gyakrabban fogja használni.",
+    "bootstrap_dns": "Bootstrap DNS kiszolgálók",
+    "bootstrap_dns_desc": "A Bootstrap DNS-kiszolgálók a DoH / DoT-megoldók IP-címeinek feloldására szolgálnak",
+    "check_dhcp_servers": "Ellenőrizze a DHCP-kiszolgálókat",
+    "save_config": "Konfiguráció mentése",
+    "enabled_dhcp": "A DHCP-kiszolgáló engedélyezve van",
+    "disabled_dhcp": "A DHCP-kiszolgáló le van tiltva",
+    "dhcp_title": "DHCP-kiszolgáló (kísérleti!)",
+    "dhcp_description": "Ha az útválasztó nem nyújt DHCP-beállításokat, akkor az AdGuard saját beépített DHCP-kiszolgálóját használhatod",
+    "dhcp_enable": "A DHCP-kiszolgáló engedélyezése",
+    "dhcp_disable": "A DHCP-kiszolgáló letiltása",
+    "dhcp_not_found": "Biztonságos a beépített DHCP-kiszolgáló engedélyezése - nem találtunk aktív DHCP-kiszolgálókat a hálózaton. Javasoljuk azonban, hogy kézzel ellenőrizze, hogy az automatikus tesztünk jelenleg nem ad 100% -os garanciát.",
+    "dhcp_found": "Aktív DHCP-kiszolgáló található a hálózaton. Nem biztonságos a beépített DHCP-kiszolgáló engedélyezése.",
+    "dhcp_leases": "DHCP bérlés",
+    "dhcp_static_leases": "Statikus DHCP",
+    "dhcp_leases_not_found": "Nem találhatóak DHCP kliensek",
+    "dhcp_config_saved": "DHCP beállítások elmentve",
+    "form_error_required": "Kötelező mező",
+    "form_error_ip4_format": "Helytelen IPv4 formátum",
+    "form_error_ip6_format": "Érvénytelen IPv6 formátum",
+    "form_error_ip_format": "Érvénytelen IPv4 formátum",
+    "form_error_mac_format": "Érvénytelen MAC formátum",
+    "form_error_client_id_format": "Érvénytelen kliens ID formátum",
+    "form_error_positive": "Legfeljebb nulla legyen",
+    "form_error_negative": "Legalább 0-nak kell lennie",
+    "dhcp_form_gateway_input": "Átjáró IP",
+    "dhcp_form_subnet_input": "Alhálózati maszk",
+    "dhcp_form_range_title": "IP címtartomány",
+    "dhcp_form_range_start": "Tartomány kezdete",
+    "dhcp_form_range_end": "Tartomány vége",
+    "dhcp_form_lease_title": "DHCP bérlési ideje (másodpercben)",
+    "dhcp_form_lease_input": "Bérlési idő",
+    "dhcp_interface_select": "Válaszd ki a DHCP interface-t",
+    "dhcp_hardware_address": "Hardvercím",
+    "dhcp_ip_addresses": "Ip címek",
+    "ip": "IP",
+    "dhcp_table_hostname": "Host név",
+    "dhcp_table_expires": "Lejár",
+    "dhcp_warning": "Ha egyébként engedélyezni szeretné a DHCP-kiszolgálót, győződjön meg arról, hogy nincs-e más aktív DHCP-kiszolgáló a hálózaton. Ellenkező esetben a csatlakoztatott eszközöket megszakíthatja az interneten!",
+    "dhcp_error": "Nem tudtuk meghatározni, hogy van-e másik DHCP-kiszolgáló a hálózaton.",
+    "dhcp_static_ip_error": "A DHCP-kiszolgáló használatához statikus IP-címet kell beállítani. Nem sikerült meghatározni, hogy ez a hálózati interfész statikus IP-cím használatával van-e beállítva. Állítsa be kézzel egy statikus IP-címet.",
+    "dhcp_dynamic_ip_found": "A rendszer dinamikus IP-címkonfigurációt használ az <0> {{interfaceName}} </0> interfészhez. A DHCP-kiszolgáló használatához statikus IP-címet kell beállítani. Jelenlegi IP-címe <0> {{ipAddress}} </0>. Ha automatikusan megnyomja az Enable DHCP gombot, automatikusan beállítjuk ezt az IP-címet statikusnak.",
+    "dhcp_lease_added": "Statikus bérlet \"{{key}}\" sikeresen hozzáadva",
+    "dhcp_lease_deleted": "Statikus bérlet \"{{key}}\" sikeresen törölve",
+    "dhcp_new_static_lease": "Új statikus bérlet",
+    "dhcp_static_leases_not_found": "Nincs DHCP statikus bérlet",
+    "dhcp_add_static_lease": "Statikus bérlet hozzáadása",
+    "dhcp_reset": "Biztosan visszaállítod a DHCP beállításokat?",
+    "country": "Ország",
+    "city": "Város",
+    "delete_confirm": "Biztosan törli a \"{{key}}\" -t?",
+    "form_enter_hostname": "Adja meg a hosztnevet",
+    "error_details": "Hiba részletei",
+    "response_details": "Válasz adatai",
+    "request_details": "Kérés adatai",
+    "client_details": "Kliens részletei",
+    "details": "Részletek",
+    "back": "Vissza",
+    "dashboard": "Irányítópult",
+    "settings": "Beállítások",
+    "filters": "Szűrők",
+    "filter": "Szűrő",
+    "query_log": "Lekérdezési napló",
+    "compact": "Kompakt",
+    "nothing_found": "Nincs találat",
+    "faq": "GYIK",
+    "version": "verzió",
+    "address": "Cím",
+    "protocol": "Protokoll",
+    "on": "Be",
+    "off": "Ki",
+    "copyright": "Szerzői jog",
+    "homepage": "Honlap",
+    "report_an_issue": "Probléma bejelentése",
+    "privacy_policy": "Adatvédelmi irányelvek",
+    "enable_protection": "Védelem engedélyezése",
+    "enabled_protection": "Engedélyezett védelem",
+    "disable_protection": "Védelem letiltása",
+    "disabled_protection": "Letiltott védelem",
+    "refresh_statics": "Statisztikák frissítése",
+    "dns_query": "DNS lekérdezések",
+    "blocked_by": "<0>Szűrők által blokkolt</0>",
+    "stats_malware_phishing": "Blokkolt vírusok/adathalászat",
+    "stats_adult": "Blokkolt felnőtt tartalmak",
+    "stats_query_domain": "A legjobban lekérdezett területek",
+    "for_last_24_hours": "Utolsó 24 órában",
+    "for_last_days": "a legutolsó {{count}} napra",
+    "for_last_days_plural": "a legutolsó {{count}} napra",
+    "no_domains_found": "Nem található domain",
+    "requests_count": "Kérések száma",
+    "top_blocked_domains": "A legjobban blokkolt tartományok",
+    "top_clients": "Legaktívabb kliensek",
+    "no_clients_found": "Nem található kliens",
+    "general_statistics": "Általános statisztikák",
+    "number_of_dns_query_days": "Lekérdezések száma az utolsó {{count}} napban",
+    "number_of_dns_query_days_plural": "Feldolgozott lekérdezések száma az utolsó {{count}} napban",
+    "number_of_dns_query_24_hours": "Számos DNS lekérdezések feldolgozása az elmúlt 24 órában",
+    "number_of_dns_query_blocked_24_hours": "Számos DNS-kérés blokkolva van az adblock-szűrők által, és blokklistákat tartalmaz",
+    "number_of_dns_query_blocked_24_hours_by_sec": "Számos DNS-kérés blokkolva van az AdGuard böngésző biztonsági moduljában",
+    "number_of_dns_query_blocked_24_hours_adult": "Blokkolt felnőtt tartalmak száma",
+    "enforced_save_search": "Erősített biztonságos keresés",
+    "number_of_dns_query_to_safe_search": "Számos DNS-kérelem olyan keresőmotorokhoz, amelyekre a Biztonságos keresés érvényesült",
+    "average_processing_time": "Átlagos feldolgozási idő",
+    "average_processing_time_hint": "Átlagos idő milliszekundumban a DNS-kérelem feldolgozásakor",
+    "block_domain_use_filters_and_hosts": "A tartományok blokkolása szűrőkkel és házigazdákkal",
+    "filters_block_toggle_hint": "A <a href='#filters'> Szűrők </a> beállításaiban beállíthatja a blokkolási szabályokat.",
+    "use_adguard_browsing_sec": "Használja az AdGuard böngészés biztonsági webszolgáltatását",
+    "use_adguard_browsing_sec_hint": "Az AdGuard Home ellenőrzi, hogy a böngésző biztonsági webszolgáltatás a tartományt feketelistára tette-e. Az ellenőrzés elvégzéséhez adatvédelmi keresési API-t fog használni: az SHA256-os hash-név csak egy rövid előtagot küld a kiszolgálónak.",
+    "use_adguard_parental": "Használja az AdGuard szülői felügyelet webszolgáltatását",
+    "use_adguard_parental_hint": "Az AdGuard Home ellenőrzi, hogy a domain tartalmaz-e felnőtt anyagokat. Ugyanazokat az adatvédelmi API-kat használja, mint a böngésző biztonsági webszolgáltatás.",
+    "enforce_safe_search": "A biztonságos keresés végrehajtása",
+    "enforce_save_search_hint": "Az AdGuard Home a következő keresőmotorokban biztosíthatja a biztonságos keresést: Google, Youtube, Bing, DuckDuckGo és Yandex.",
+    "no_servers_specified": "Nincsenek megadott kiszolgálók",
+    "general_settings": "Általános beállítások",
+    "dns_settings": "DNS beállítások",
+    "dns_blocklists": "DNS blokkolási listák",
+    "dns_allowlists": "DNS engedélyezési listák",
+    "dns_blocklists_desc": "Az AdGuard Home blokkolni fogja azokat a domaineket, amik szerepelnek a blokkolási listán.",
+    "dns_allowlists_desc": "A DNS engedélyezési listán szereplő domainek engedélyezve lesznek, akkor is, ha szerepelnek bármelyik blokkolási listán.",
+    "custom_filtering_rules": "Egyéni szűrési szabályok",
+    "encryption_settings": "Titkosítási beállítások",
+    "dhcp_settings": "DHCP beállítások",
+    "upstream_dns": "Upstream DNS-kiszolgálók",
+    "upstream_dns_hint": "Ha üresen hagyod ezt a mezőt, az AdGuard a(z) <a href='https://www.quad9.net/' target='_blank'>Quad9</a>-t fogja használni.",
+    "test_upstream_btn": "Upstreamek tesztelése",
+    "upstreams": "Feltöltés",
+    "apply_btn": "Alkalmaz",
+    "disabled_filtering_toast": "Letiltott szűrés",
+    "enabled_filtering_toast": "Engedélyezett szűrés",
+    "disabled_safe_browsing_toast": "Letiltott biztonságos böngészés",
+    "enabled_safe_browsing_toast": "Engedélyezett biztonságos böngészés",
+    "disabled_parental_toast": "Letiltott szülői felügyelet",
+    "enabled_parental_toast": "Engedélyezett szülői felügyelet",
+    "disabled_safe_search_toast": "Letiltott biztonságos keresés",
+    "enabled_save_search_toast": "Engedélyezett biztonságos keresés",
+    "enabled_table_header": "Engedélyezve",
+    "name_table_header": "Név",
+    "list_url_table_header": "Lista URL-je",
+    "rules_count_table_header": "Szabályok száma",
+    "last_time_updated_table_header": "Utoljára frissítve",
+    "actions_table_header": "Akciók",
+    "request_table_header": "Kérelem",
+    "edit_table_action": "Szerkesztés",
+    "delete_table_action": "Törlés",
+    "elapsed": "Eltelt időtartam",
+    "filters_and_hosts_hint": "Az AdGuard Home megérti az alapvető adblock szabályokat és a fájlokat tartalmazó szintaxist.",
+    "no_blocklist_added": "Nincsnek blokkolási listák hozzáadva",
+    "no_whitelist_added": "Nincsenek engedélyezési listák hozzáadva",
+    "add_blocklist": "Blokkolási lista hozzáadása",
+    "add_allowlist": "Engedélyezési lista hozzáadása",
+    "cancel_btn": "Megszünteti",
+    "enter_name_hint": "Adja meg a nevet",
+    "enter_url_or_path_hint": "Írjon be egy URL-t vagy egy útvonalat a listához",
+    "check_updates_btn": "Frissítések keresése",
+    "new_blocklist": "Új blokkolási lista",
+    "new_allowlist": "Új engedélyezési lista",
+    "edit_blocklist": "Blokkolási lista módosítása",
+    "edit_allowlist": "Engedélyezési lista módosítása",
+    "choose_blocklist": "Blokkolási lista választás",
+    "choose_allowlist": "Engedélyezési lista választás",
+    "enter_valid_blocklist": "Adjon meg egy érvényes URL-t a blokkolási listához.",
+    "enter_valid_allowlist": "Adjon meg egy érvényes URL-t az engedélyezési listához.",
+    "form_error_url_format": "Egyedi URL formátum",
+    "form_error_url_or_path_format": "Helytelen URL vagy elérési út a listához",
+    "custom_filter_rules": "Egyéni szűrési szabályok",
+    "custom_filter_rules_hint": "Adjon meg egy szabályt egy sorban. Használhatja az adblock szabályokat vagy a fájlokat tartalmazó szintaxist.",
+    "examples_title": "Példák",
+    "example_meaning_filter_block": "blokkolja a example.org domain és az összes aldomain hozzáférését",
+    "example_meaning_filter_whitelist": "example.org tartomány és az összes aldomain hozzáférésének feloldása",
+    "example_meaning_host_block": "Az AdGuard Home most visszatér a 127.0.0.1 címre a example.org domainhez (de nem az aldomainjeihez).",
+    "example_comment": "! Ide írhat egy megjegyzést",
+    "example_comment_meaning": "Csak egy megjegyzés",
+    "example_comment_hash": "# Megjegyzés is",
+    "example_regex_meaning": "megakadályozza a hozzáférést a reguláris kifejezéssel egyező domainek-nél",
+    "example_upstream_regular": "rendszeres DNS (UDP felett)",
+    "example_upstream_dot": "titkosított <0>DNS-over-TLS</0>",
+    "example_upstream_doh": "titkosított <0>DNS-over-HTTPS</0>",
+    "example_upstream_sdns": "a <0> DNS bélyegek </0> használatával <1> DNSCrypt </1> vagy <2> DNS-over-HTTPS </2>",
+    "example_upstream_tcp": "hagyományos DNS (TCP felett)",
+    "all_lists_up_to_date_toast": "Már minden lista naprakész",
+    "updated_upstream_dns_toast": "Frissítette az upstream DNS-kiszolgálókat",
+    "dns_test_ok_toast": "A megadott DNS-kiszolgálók megfelelően működnek",
+    "dns_test_not_ok_toast": "Szerver \"{{key}}\": nem használható, ellenőrizze, hogy helyesen írta-e be",
+    "unblock": "Blokkolás feloldása",
+    "block": "Blokkolás",
+    "time_table_header": "Idő",
+    "date": "Dátum",
+    "domain_name_table_header": "Domain név",
+    "domain_or_client": "Webcím vagy kliens",
+    "type_table_header": "Típus",
+    "response_table_header": "Válasz",
+    "response_code": "Válaszkód",
+    "client_table_header": "Kliens",
+    "empty_response_status": "Üres",
+    "show_all_filter_type": "Mutasd az összeset",
+    "show_filtered_type": "Szűrés megjelenítése",
+    "no_logs_found": "Nem található napló",
+    "refresh_btn": "Frissítés",
+    "previous_btn": "Előző",
+    "next_btn": "Következő",
+    "loading_table_status": "Töltés...",
+    "page_table_footer_text": "Oldal",
+    "rows_table_footer_text": "sor",
+    "updated_custom_filtering_toast": "Egyéni szűrési módok frissítése",
+    "rule_removed_from_custom_filtering_toast": "Szabály eltávolítva az egyedi szűrési módok közül",
+    "rule_added_to_custom_filtering_toast": "Szabály hozzáadva az egyedi szűrési módokhoz",
+    "query_log_response_status": "Státusz: {{value}}",
+    "query_log_filtered": "{{filter}} által szűrve",
+    "query_log_confirm_clear": "Biztosan törlöd a lekérdezési naplót?",
+    "query_log_cleared": "A lekérdezési napló sikeresen törölve",
+    "query_log_updated": "A lekérdezési napló sikeresen frissítve lett",
+    "query_log_clear": "Lekérdezési napló törlése",
+    "query_log_retention": "Lekérdezési naplók megtartása",
+    "query_log_enable": "Naplózás engedélyezése",
+    "query_log_configuration": "Naplózás beállítása",
+    "query_log_disabled": "Lekérdezési napló kikapcsolva. Bekapcsolható a <0>Beállítások</0>ban",
+    "query_log_strict_search": "Használj \"dupla idézőjelet\" a pontos kereséshez",
+    "query_log_retention_confirm": "Biztos benne, hogy megváltoztatja a kérések naplójának megőrzési idejét? Ha csökkentette az értéket, a megadottnál korábbi adatok elvesznek",
+    "anonymize_client_ip": "Kliens IP-címének anonimizálása",
+    "anonymize_client_ip_desc": "Ne mentse el a kliens teljes IP-címét a naplókban és a statisztikákban",
+    "dns_config": "DNS szerver beállításai",
+    "dns_cache_config": "DNS gyorsítótár beállításai",
+    "dns_cache_config_desc": "Itt tudja konfigurálni a DNS gyorsítótárat",
+    "blocking_mode": "Blokkolás módja",
+    "default": "Alapértelmezett",
+    "nxdomain": "NXDOMAIN",
+    "null_ip": "Null IP-cím",
+    "custom_ip": "Egyedi IP",
+    "blocking_ipv4": "IPv4 blokkolása",
+    "blocking_ipv6": "IPv6 blokkolása",
+    "dns_over_https": "DNS-over-HTTPS",
+    "dns_over_tls": "DNS-over-TLS",
+    "plain_dns": "Egyszerű DNS",
+    "form_enter_rate_limit": "Adja meg a kérések maximális számát",
+    "rate_limit": "Kérések korlátozása",
+    "edns_enable": "EDNS kliens alhálózat engedélyezése",
+    "edns_cs_desc": "Ha engedélyezve van, az AdGuard Home a kliensek alhálózatait küldi el a DNS-kiszolgálóknak.",
+    "rate_limit_desc": "Maximálisan hány kérést küldhet egy kliens másodpercenként (0: korlátlan)",
+    "blocking_ipv4_desc": "A blokkolt A kéréshez visszaadandó IP-cím",
+    "blocking_ipv6_desc": "A blokkolt AAAA kéréshez visszaadandó IP-cím",
+    "blocking_mode_default": "Alapértelmezés: Adblock-stílusú szabály esetén NXDOMAIN válasz küldése, /etc/hosts-stílusú szabály esetén pedig a szabályban meghatározott IP-címmel való válasz küldése",
+    "blocking_mode_nxdomain": "NXDOMAIN: Az NXDOMAIN kóddal fog válaszolni",
+    "blocking_mode_null_ip": "Null IP: Nullákból álló IP-címmel válaszol (0.0.0.0 for A; :: for AAAA)",
+    "blocking_mode_custom_ip": "Egyedi IP: Válasz egy kézzel beállított IP címmel",
+    "upstream_dns_client_desc": "Ha üresen hagyja ezt a mezőt, az AdGuard Home azokat a szervereket fogja használni, amik a <0>DNS beállításokban</0> vannak beállítva.",
+    "tracker_source": "Követő forrása",
+    "source_label": "Forrás",
+    "found_in_known_domain_db": "Benne van az ismert domainek listájában.",
+    "category_label": "Kategória",
+    "rule_label": "Szabály",
+    "list_label": "Lista",
+    "unknown_filter": "Ismeretlen szűrő: {{filterId}}",
+    "known_tracker": "Ismert követő",
+    "install_welcome_title": "Üdvözli az AdGuard Home!",
+    "install_welcome_desc": "Az AdGuard Home egy, a teljes hálózatot lefedő hirdetés és követő blokkoló DNS szerver. Az a célja, hogy lehetővé tegye a teljes hálózat és az összes eszköz vezérlését, és nem igényel kliensoldali programot.",
+    "install_settings_title": "Webes admin felület",
+    "install_settings_listen": "Figyelő felület",
+    "install_settings_port": "Port",
+    "install_settings_interface_link": "Az AdGuard Home webes admin felülete elérhető a következő címe(ke)n:",
+    "form_error_port": "Adjon meg egy érvényes portot",
+    "install_settings_dns": "DNS szerver",
+    "install_settings_dns_desc": "Be kell állítania az eszközeit vagy a routerét, hogy használni tudja a DNS szervert a következő címeken:",
+    "install_settings_all_interfaces": "Minden felület",
+    "install_auth_title": "Hitelesítés",
+    "install_auth_desc": "Erősen ajánlott a jelszavas hitelesítés beállítása az AdGuard Home webes admin felületéhez. Még akkor is, ha csak a helyi hálózaton érhető el, óvja meg az illetéktelen hozzáférésektől.",
+    "install_auth_username": "Felhasználónév",
+    "install_auth_password": "Jelszó",
+    "install_auth_confirm": "Jelszó megerősítése",
+    "install_auth_username_enter": "Felhasználónév megadása",
+    "install_auth_password_enter": "Jelszó megadása",
+    "install_step": "Lépés",
+    "install_devices_title": "Állítsa be az eszközeit",
+    "install_devices_desc": "Az AdGuard Home használatának megkezdéséhez be kell állítania az eszközeit, hogy azok használni tudják.",
+    "install_submit_title": "Gratulálunk!",
+    "install_submit_desc": "A telepítési folyamat befejeződött, minden készen áll az AdGuard Home használatára.",
+    "install_devices_router": "Router",
+    "install_devices_router_desc": "Ez a beállítás lefed minden eszközt, amik az Ön routeréhez csatlakoznak, így azokat nem kell külön, kézzel beállítania.",
+    "install_devices_address": "Az AdGuard DNS szerver a következő címeket figyeli",
+    "install_devices_router_list_1": "Nyissa meg a router beállításait. Ez általában a böngészőn keresztül történik egy URL megadásával (pl. http://192.168.0.1/ vagy http://192.168.1.1/). Ez az oldal valószínűleg felhasználónevet és jelszót fog kérni. Ha nem tudja a belépési adatokat, nézze meg a router dobozát, a router alján levő fehér címkét vagy a technikai dokumentációt az interneten, végső esetben pedig visszaállíthatja a routert. Néhány router speciális alkalmazást igényel, amik lehetséges, hogy már telepítve vannak a számítógépére vagy a mobil eszközére.",
+    "install_devices_router_list_2": "Keresse meg a DHCP/DNS beállításokat. Keresse a DNS szót egy olyan mező mellett, amely egy 4 csoportból álló, 1-3 számjegyű számsort vár.",
+    "install_devices_router_list_3": "Adja meg az AdGuard Home szerver címét itt.",
+    "install_devices_router_list_4": "Bizonyos típusú routereknél nem állíthat be egyéni DNS-kiszolgálót. Ebben az esetben segíthet, ha az AdGuard Home-t DHCP-szerverként állítja be. Ellenkező esetben keresse meg az adott router kézikönyvében a DNS-kiszolgálók testreszabását.",
+    "install_devices_windows_list_1": "Nyissa meg a Vezérlőpultot a Start menün vagy a Windows keresőn keresztül.",
+    "install_devices_windows_list_2": "Válassza a Hálózat és internet kategóriát, majd pedig a Hálózati és megosztási központot.",
+    "install_devices_windows_list_3": "A képernyő bal oldalán keresse meg az Adapterbeállítások módosítása lehetőséget és kattintson rá.",
+    "install_devices_windows_list_4": "Válassza ki a jelenleg is használt kapcsolatot, majd jobb egérgombbal kattintson rá és a megjelenő menüből válassza a Tulajdonságok elemet.",
+    "install_devices_windows_list_5": "Keresse meg az Internet Protocol Version 4 (TCP/IP) elemet a listában, válassza ki, majd ismét kattintson a Tulajdonságokra.",
+    "install_devices_windows_list_6": "Válassza a Következő DNS címek használata lehetőséget és adja meg az AdGuard Home szerver címeit.",
+    "install_devices_macos_list_1": "Kattintson az Apple ikonra és válassza a Rendszerbeállításokat.",
+    "install_devices_macos_list_2": "Kattintson a Hálózat lehetőségre.",
+    "install_devices_macos_list_3": "Válassza ki az első kapcsolatot a listából és kattintson a Haladó beállításokra.",
+    "install_devices_macos_list_4": "Válassza ki a DNS fület és adja meg az AdGuard Home szerver címeit.",
+    "install_devices_android_list_1": "Az Android kezdőképernyőjén érintse meg a Beállítások gombot.",
+    "install_devices_android_list_2": "Érintse meg a Wi-Fi gombot a menüben. Ekkor a képernyőre kerül az összes elérhető hálózat (mobilinternethez nem lehet egyedi DNS-t megadni).",
+    "install_devices_android_list_3": "Nyomjon hosszan arra a hálózatra a listából, amelyikre éppen csatlakozva van, majd válassza a Hálózat módosítása lehetőséget.",
+    "install_devices_android_list_4": "Egyes eszközökön előfordulhat, hogy a további beállítások megtekintéséhez a Speciális/haladó beállítások részt kell megnyitni. Az Android DNS-beállításainak módosításához ekkor az IP-beállításokat DHCP-ről statikusra kell váltania.",
+    "install_devices_android_list_5": "Változtassa meg a DNS 1 és a DNS 2 értékét az AdGuard Home szerver címeire.",
+    "install_devices_ios_list_1": "A kezdőképernyőn érintse meg a Beállítások gombot.",
+    "install_devices_ios_list_2": "Válassza ki a Wi-Fi-t a bal oldali menüből (mobilinternetnél nem lehetséges a DNS beállítása).",
+    "install_devices_ios_list_3": "Érintse meg a jelenleg használt hálózat nevét.",
+    "install_devices_ios_list_4": "A DNS mezőbe adja meg az AdGuard Home szerver címeit.",
+    "get_started": "Kezdés",
+    "next": "Következő",
+    "open_dashboard": "Irányítópult megnyitása",
+    "install_saved": "Sikeres mentés",
+    "encryption_title": "Titkosítás",
+    "encryption_desc": "Titkosítás (HTTPS/TLS) támogatása mind a DNS, mind pedig a webes admin felület számára",
+    "encryption_config_saved": "Titkosítási beállítások mentve",
+    "encryption_server": "Szerver neve",
+    "encryption_server_enter": "Adja meg az Ön domain címét",
+    "encryption_server_desc": "A HTTPS használatához be kell írnia egy, az SSL-tanúsítvánnyal megegyező kiszolgálónevet.",
+    "encryption_redirect": "Automatikus átirányítás HTTPS kapcsolatra",
+    "encryption_redirect_desc": "Ha be van jelölve, az AdGuard Home automatikusan átirányítja a HTTP kapcsolatokat a biztonságos HTTPS protokollra.",
+    "encryption_https": "HTTPS port",
+    "encryption_https_desc": "Ha a HTTPS port konfigurálva van, akkor az AdGuard Home admin felülete elérhető lesz a HTTPS-en keresztül, és ezenkívül DNS-over-HTTPS-t is biztosít a '/dns-query' helyen.",
+    "encryption_dot": "DNS-over-TLS port",
+    "encryption_dot_desc": "Ha ez a port be van állítva, az AdGuard Home DNS-over-TLS szerverként tud futni ezen a porton.",
+    "encryption_certificates": "Tanúsítványok",
+    "encryption_certificates_desc": "A titkosítás használatához érvényes SSL tanúsítványláncot kell megadnia a domainjéhez. Ingyenes tanúsítványt kaphat a <0>{{link}}</0> webhelyen, vagy megvásárolhatja az egyik megbízható tanúsítványkibocsátó hatóságtól.",
+    "encryption_certificates_input": "Másolja be ide a PEM-kódolt tanúsítványt.",
+    "encryption_status": "Állapot",
+    "encryption_expire": "Lejár",
+    "encryption_key": "Privát kulcs",
+    "encryption_key_input": "Másolja ki és illessze be ide a tanúsítványa PEM-kódolt privát kulcsát.",
+    "encryption_enable": "Titkosítás engedélyezése (HTTPS, DNS-over-HTTPS, és DNS-over-TLS)",
+    "encryption_enable_desc": "Ha a titkosítás engedélyezve van, az AdGuard Home admin felülete működik HTTPS-en keresztül, és a DNS szerver is várja a kéréseket DNS-over-HTTPS-en, valamint DNS-over-TLS-en keresztül.",
+    "encryption_chain_valid": "A tanúsítványlánc érvényes",
+    "encryption_chain_invalid": "A tanúsítványlánc érvénytelen",
+    "encryption_key_valid": "Ez egy érvényes {{type}} privát kulcs",
+    "encryption_key_invalid": "Ez egy érvénytelen {{type}} privát kulcs",
+    "encryption_subject": "Tárgy",
+    "encryption_issuer": "Kibocsátó",
+    "encryption_hostnames": "Hosztnevek",
+    "encryption_reset": "Biztosan visszaállítja a titkosítási beállításokat?",
+    "topline_expiring_certificate": "Az SSL-tanúsítványa hamarosan lejár. Frissítse a <0>Titkosítási beállításokat</0>.",
+    "topline_expired_certificate": "Az SSL-tanúsítványa lejárt. Frissítse a <0>Titkosítási beállításokat</0>.",
+    "form_error_port_range": "A port értékét a 80-65535 tartományban adja meg",
+    "form_error_port_unsafe": "Ez a port nem biztonságos",
+    "form_error_equal": "Nem egyezhetnek",
+    "form_error_password": "A jelszavak nem egyeznek",
+    "reset_settings": "Beállítások visszaállítása",
+    "update_announcement": "Az AdGuard Home {{version}} verziója elérhető! <0>Kattintson ide</0> további információkért.",
+    "setup_guide": "Beállítási útmutató",
+    "dns_addresses": "DNS címek",
+    "dns_start": "A DNS szerver indul",
+    "dns_status_error": "Hiba történt a DNS szerver állapotának ellenőrzésekor",
+    "down": "Nem elérhető",
+    "fix": "Állandó",
+    "dns_providers": "Itt van az <0>ismert DNS szolgáltatók listája</0>, amelyekből választhat.",
+    "update_now": "Frissítés most",
+    "update_failed": "Az automatikus frissítés nem sikerült. Kérjük, hogy <a href='https://github.com/AdguardTeam/AdGuardHome/wiki/Getting-Started#update'>kövesse ezeket a lépéseket</a> a manuális frissítéshez.",
+    "processing_update": "Kérjük várjon, az AdGuard Home frissítése folyamatban van",
+    "clients_title": "Kliensek",
+    "clients_desc": "Az AdGuard Home-hoz csatlakozó eszközök kezelése",
+    "settings_global": "Globális",
+    "settings_custom": "Egyéni",
+    "table_client": "Kliens",
+    "table_name": "Név",
+    "save_btn": "Mentés",
+    "client_add": "Kliens hozzáadása",
+    "client_new": "Új kliens",
+    "client_edit": "Kliens módosítása",
+    "client_identifier": "Azonosító",
+    "ip_address": "IP cím",
+    "client_identifier_desc": "A klienseket be lehet azonosítani IP-cím, CIDR, valamint MAC-cím alapján. Kérjük, vegye figyelembe, hogy a MAC-cím alapján történő azonosítás csak akkor működik, ha az AdGuard Home egyben <0>DHCP szerverként</0> is funkcionál",
+    "form_enter_ip": "IP-cím megadása",
+    "form_enter_mac": "MAC-cím megadása",
+    "form_enter_id": "Azonosító megadása",
+    "form_add_id": "Azonosító hozzáadása",
+    "form_client_name": "Adja meg a kliens nevét",
+    "name": "Név",
+    "client_global_settings": "Globális beállítások használata",
+    "client_deleted": "A(z) \"{{key}}\" kliens sikeresen el lett távolítva",
+    "client_added": "A(z) \"{{key}}\" kliens sikeresen hozzá lett adva",
+    "client_updated": "A(z) \"{{key}}\" kliens sikeresen frissítve lett",
+    "clients_not_found": "Nem található kliens",
+    "client_confirm_delete": "Biztosan törölni szeretné az \"{{key}}\" klienst?",
+    "list_confirm_delete": "Biztosan törölni kívánja ezt a listát?",
+    "auto_clients_title": "Kliensek (futási idő)",
+    "auto_clients_desc": "Az AdGuard Home-ot használó, de a konfigurációban nem tárolt ügyfelek adatai",
+    "access_title": "Hozzáférési beállítások",
+    "access_desc": "Itt konfigurálhatja az AdGuard Home DNS-kiszolgáló hozzáférési szabályait.",
+    "access_allowed_title": "Engedélyezett kliensek",
+    "access_allowed_desc": "A CIDR vagy IP címek listája. Ha konfigurálva van, az AdGuard Home csak az alábbi IP-címekről fogadja el a kéréseket.",
+    "access_disallowed_title": "Nem engedélyezett kliensek",
+    "access_disallowed_desc": "A CIDR vagy IP címek listája. Ha konfigurálva van, az AdGuard Home ebből az IP-címből lekéri a kéréseket.",
+    "access_blocked_title": "Blokkolt tartományok",
+    "access_blocked_desc": "Ne keverje össze ezt a szűrőkkel. Az AdGuard Home a DNS-lekérdezéseket a lekérdezés kérdésében el fogja hagyni ezeken a tartományokon",
+    "access_settings_saved": "A hozzáférési beállítások sikeresen mentésre kerültek",
+    "updates_checked": "A frissítések sikeresen ellenőrizve lettek",
+    "updates_version_equal": "Az AdGuard Home naprakész",
+    "check_updates_now": "Frissítések ellenőrzése most",
+    "dns_privacy": "DNS Adatvédelem",
+    "setup_dns_privacy_1": "<0>DNS-over-TLS:</0> Használja a(z) <1>{{address}}</1> szöveget.",
+    "setup_dns_privacy_2": "<0>DNS-over-HTTPS:</0> Használja a(z) <1>{{address}}</1> szöveget.",
+    "setup_dns_privacy_3": "<0>Kérjük, vegye figyelembe, hogy a titkosított DNS protokollok csak Android 9-től vannak támogatva. Tehát további szoftvert kell telepítenie más operációs rendszerekhez.</0><0>Itt megtalálja azon szoftverek listáját, amelyeket használhat.</0>",
+    "setup_dns_privacy_android_1": "Az Android 9 natív módon támogatja a DNS-over-TLS-t. A beállításához menjen a Beállítások → Hálózat & internet → Speciális → Privát DNS menübe, és adja meg itt a domaint.",
+    "setup_dns_privacy_android_2": "Az <0>AdGuard for Android</0> támogatja a <1>DNS-over-HTTPS</1>-t és a <1>DNS-over-TLS</1>-t.",
+    "setup_dns_privacy_android_3": "Az <0>Intra</0> hozzáadja a <1>DNS-over-HTTPS</1> támogatást az Androidhoz.",
+    "setup_dns_privacy_ios_1": "A <0>DNSCloak</0> támogatja a <1>DNS-over-HTTPS</1>-t, de ahhoz, hogy a saját szerverhez konfigurálhassa, létre kell hoznia egy <2>DNS bélyeget</2> hozzá.",
+    "setup_dns_privacy_ios_2": "Az <0>AdGuard for iOS</0> támogatja a <1>DNS-over-HTTPS</1> és a <1>DNS-over-TLS</1> beállításokat.",
+    "setup_dns_privacy_other_title": "Egyéb megvalósítások",
+    "setup_dns_privacy_other_1": "Maga az AdGuard Home bármilyen platformon biztonságos DNS-kliens lehet.",
+    "setup_dns_privacy_other_2": "A <0>dnsproxy</0> támogatja az összes ismert biztonságos DNS protokollt.",
+    "setup_dns_privacy_other_3": "A <0>dnscrypt-proxy</0> támogatja a <1>DNS-over-HTTPS</1>-t.",
+    "setup_dns_privacy_other_4": "A <0>Mozilla Firefox</0> támogatja a <1>DNS-over-HTTPS</1>-t.",
+    "setup_dns_privacy_other_5": "További megvalósításokat találhat <0>ide</0> és <1>ide</1> kattintva.",
+    "setup_dns_notice": "Ahhoz, hogy a <1>DNS-over-HTTPS</1> vagy a <1>DNS-over-TLS</1> valamelyikét használja, muszáj <0>beállítania a titkosítást</0> az AdGuard Home beállításaiban.",
+    "rewrite_added": "DNS átírás a(z) \"{{key}}\" kulcshoz sikeresen hozzáadva",
+    "rewrite_deleted": "DNS átírás a(z) \"{{key}}\" kulcshoz sikeresen törölve",
+    "rewrite_add": "DNS átírás hozzáadása",
+    "rewrite_not_found": "Nem találhatók DNS átírások",
+    "rewrite_confirm_delete": "Biztosan törölni szeretné a DNS átírást ehhez: \"{{key}}\"?",
+    "rewrite_desc": "Lehetővé teszi, hogy egyszerűen beállítson egyéni DNS választ egy adott domain névhez.",
+    "rewrite_applied": "Alkalmazott átírási szabály",
+    "rewrite_hosts_applied": "Átírt a gazda fájl szabálya által",
+    "dns_rewrites": "DNS átírások",
+    "form_domain": "Adja meg a domain nevet vagy a helyettesítő karaktert",
+    "form_answer": "Adjon meg egy IP-címet vagy egy domain nevet",
+    "form_error_domain_format": "Érvénytelen domain formátum",
+    "form_error_answer_format": "Érvénytelen válasz formátum",
+    "configure": "Beállítás",
+    "main_settings": "Fő beállítások",
+    "block_services": "Speciális szolgáltatások blokkolása",
+    "blocked_services": "Blokkolt szolgáltatások",
+    "blocked_services_desc": "Lehetővé teszi a népszerű oldalak és szolgáltatások blokkolását.",
+    "blocked_services_saved": "Blokkolt szolgáltatások sikeresen mentve",
+    "blocked_services_global": "A globálisan tiltott szolgáltatások használata",
+    "blocked_service": "Blokkolt szolgáltatás",
+    "block_all": "Összes blokkolása",
+    "unblock_all": "Összes feloldása",
+    "encryption_certificate_path": "Tanúsítvány útvonala",
+    "encryption_private_key_path": "Privát kulcs útvonala",
+    "encryption_certificates_source_path": "Tanúsítványfájl útvonalának megadása",
+    "encryption_certificates_source_content": "Tanúsítvány tartalmának megadása",
+    "encryption_key_source_path": "Privát kulcsfájl beállítása",
+    "encryption_key_source_content": "Privát kulcs tartalmának megadása",
+    "stats_params": "Statisztikai beállítások",
+    "config_successfully_saved": "A beállítások sikeresen el lettek mentve",
+    "interval_24_hour": "24 óra",
+    "interval_days": "{{count}} nap",
+    "interval_days_plural": "{{count}} nap",
+    "domain": "Domain",
+    "answer": "Válasz",
+    "filter_added_successfully": "A lista sikeresen hozzá lett adva",
+    "filter_removed_successfully": "A lista sikeresen el lett távolítva",
+    "filter_updated": "A lista sikeresen frissítve lett",
+    "statistics_configuration": "Statisztikai beállítások",
+    "statistics_retention": "Statisztika megőrzése",
+    "statistics_retention_desc": "Ha csökkenti az intervallum értékét, az előtte levő adatok elvesznek",
+    "statistics_clear": " Statisztikák visszaállítása",
+    "statistics_clear_confirm": "Biztosan vissza akarja állítani a statisztikákat?",
+    "statistics_retention_confirm": "Biztos benne, hogy megváltoztatja a statisztika megőrzési idejét? Ha csökkentette az értéket, a megadottnál korábbi adatok elvesznek",
+    "statistics_cleared": "A statisztikák sikeresen vissza lettek állítva",
+    "interval_hours": "{{count}} óra",
+    "interval_hours_plural": "{{count}} óra",
+    "filters_configuration": "Szűrők beállításai",
+    "filters_enable": "Szűrők engedélyezése",
+    "filters_interval": "Szűrőfrissítési gyakoriság",
+    "disabled": "Kikapcsolva",
+    "username_label": "Felhasználónév",
+    "username_placeholder": "Felhasználónév megadása",
+    "password_label": "Jelszó",
+    "password_placeholder": "Jelszó megadása",
+    "sign_in": "Bejelentkezés",
+    "sign_out": "Kijelentkezés",
+    "forgot_password": "Elfelejtette a jelszót?",
+    "forgot_password_desc": "Kérjük, hogy kövesse <0>ezeket a lépéseket</0> a jelszó visszaállításához.",
+    "location": "Helyzet",
+    "orgname": "Szervezet neve",
+    "netname": "Hálózat neve",
+    "network": "Hálózat",
+    "descr": "Leírás",
+    "whois": "Whois",
+    "filtering_rules_learn_more": "<0>Tudjon meg többet</0> a saját hosztlisták létrehozásáról.",
+    "blocked_by_response": "Blokkolva a CNAME vagy a válasz IP-címe alapján",
+    "blocked_by_cname_or_ip": "CNAME vagy IP által blokkolva",
+    "try_again": "Próbálja újra",
+    "domain_desc": "Adja meg a domain nevet vagy a helyettesítő karaktert ahhoz a címhez, amit át kíván íratni.",
+    "example_rewrite_domain": "csak ehhez a domainhez írja át a válaszokat.",
+    "example_rewrite_wildcard": "az <0>example.org</0> összes aldomainjéhez átírja a válaszokat.",
+    "rewrite_ip_address": "IP-cím: használja ezt az IP-t A vagy AAAA válaszban",
+    "rewrite_domain_name": "Domain név: CNAME rekord hozzáadása",
+    "rewrite_A": "<0>A</0>: speciális érték, megtartja az upstream felől érkező <0>A</0> rekordokat",
+    "rewrite_AAAA": "<0>AAAA</0>: speciális érték, megtartja az upstream felől érkező <0>AAAA</0> rekordokat",
+    "disable_ipv6": "IPv6 letiltása",
+    "disable_ipv6_desc": "Ha ez a szolgáltatás engedélyezve van, akkor az összes IPv6-cím (AAAA típus) DNS-lekérdezése elveszik.",
+    "fastest_addr": "Leggyorsabb IP-cím",
+    "fastest_addr_desc": "Kérdezze le az összes DNS szervert és küldje vissza a leggyorsabb IP-címet az összes válasz alapján",
+    "autofix_warning_text": "Ha a \"Javítás\" lehetőségre kattint, az AdGuard Home megpróbálja beállítani a rendszerét, hogy használja az AdGuard Home DNS szervert.",
+    "autofix_warning_list": "A következő feladatokat hajtja végre: <0>A DNSStubListener rendszer kikapcsolása</0><0>Beállítja a DNS-kiszolgáló címét 127.0.0.1-re.</0><0>Lecseréli az /etc/resolv.conf szimbolikus útvonalat erre: /run/systemd/resolve/resolv.conf</0><0>A DNSStubListener leállítása (a rendszer által feloldott szolgáltatás újratöltése)</0>",
+    "autofix_warning_result": "Mindennek eredményeként az Ön rendszeréből származó összes DNS-kérést alapértelmezés szerint az AdGuard Home dolgozza fel.",
+    "tags_title": "Címkék",
+    "tags_desc": "Kiválaszthatja a klienseknek megfelelő címkéket. A címkék beilleszthetők a szűrési szabályokba, és lehetővé teszik azok pontosabb alkalmazását. <0>További információ</0>",
+    "form_select_tags": "Válasszon kliens címkéket",
+    "check_title": "Szűrés ellenőrzése",
+    "check_desc": "Ellenőrzi, hogy a hosztnév szűrve van-e",
+    "check": "Ellenőrzés",
+    "form_enter_host": "Adja meg a hosztnevet",
+    "filtered_custom_rules": "Szűrve van az egyéni szűrési szabályok alapján",
+    "choose_from_list": "Választás a listából",
+    "add_custom_list": "Egyedi lista hozzáadása",
+    "host_whitelisted": "Ez a hoszt a kivételek között szerepel",
+    "check_ip": "IP-címek: {{ip}}",
+    "check_cname": "CNAME: {{cname}}",
+    "check_reason": "Indok: {{reason}}",
+    "check_rule": "Szabály: {{rule}}",
+    "check_service": "Szolgáltatás neve: {{service}}",
+    "check_not_found": "Nem található az Ön szűrőlistái között",
+    "client_confirm_block": "Biztosan blokkolni szeretné a(z) \"{{ip}}\" klienst?",
+    "client_confirm_unblock": "Biztosan fel szeretné oldani a(z) \"{{ip}}\" kliens blokkolását?",
+    "client_blocked": "A(z) \"{{ip}}\" kliens sikeresen blokkolva",
+    "client_unblocked": "A(z) \"{{ip}}\" kliens blokkolása sikeresen feloldva",
+    "static_ip": "Statikus IP-cím",
+    "static_ip_desc": "Az AdGuard Home egy szerver, tehát statikus IP-címre van szüksége a megfelelő működéshez. Ellenkező esetben a router valamikor más IP-címet rendelhet ehhez az eszközhöz.",
+    "set_static_ip": "Statikus IP-cím beállítása",
+    "install_static_ok": "Jó hír! A statikus IP-cím már be van állítva",
+    "install_static_error": "Az AdGuard Home nem tudja automatikusan konfigurálni ezt a hálózati felületet. Kérjük, nézzen utána, hogyan kell ezt manuálisan elvégezni.",
+    "install_static_configure": "Úgy észleltük, hogy dinamikus IP-cím van használatban — <0>{{ip}}</0>. Szeretné ezt statikus IP-címként használni?",
+    "confirm_static_ip": "Az AdGuard Home beállítja az {{ip}} IP-címet az Ön statikus IP-címének. Biztosan folytatni kívánja?",
+    "list_updated": "{{count}} lista frissítve lett",
+    "list_updated_plural": "{{count}} lista frissítve lett",
+    "dnssec_enable": "DNSSEC engedélyezése",
+    "dnssec_enable_desc": "Állítsa be a DNSSEC jelzőt a kimenő DNS-lekérdezésekbe, és ellenőrizze az eredményt (szükséges a DNSSEC-kompatibilis feloldás)",
+    "validated_with_dnssec": "DNSSEC-kel ellenőrizve",
+    "all_queries": "Minden kérés",
+    "show_blocked_responses": "Tiltva",
+    "show_whitelisted_responses": "Kivételezett",
+    "show_processed_responses": "Feldolgozott",
+    "blocked_safebrowsing": "Blokkolva a biztonságos böngészés által",
+    "blocked_adult_websites": "Blokkolva a felnőtt tartalmak által",
+    "blocked_threats": "Blokkolt fenyegetések",
+    "allowed": "Engedélyezve",
+    "filtered": "Megszűrt",
+    "rewritten": "Átírt",
+    "safe_search": "Biztonságos keresés",
+    "blocklist": "Tiltási lista",
+    "milliseconds_abbreviation": "ms",
+    "cache_size": "Gyorsítótár mérete",
+    "cache_size_desc": "DNS gyorsítótár mérete (bájtokban)",
+    "enter_cache_size": "Adja meg a gyorsítótár méretét",
+    "enter_cache_ttl_min_override": "Adja meg a minimális TTL-t",
+    "enter_cache_ttl_max_override": "Adja meg a maximális TTL-t",
+    "cache_ttl_min_override_desc": "Felülbírálja az upstream kiszolgálótól kapott (minimális) TTL értéket. Ez az érték nem lehet nagyobb, mint 3600 másodperc (vagyis 1 óra)",
+    "cache_ttl_max_override_desc": "Felülbírálja az upstream kiszolgálótól kapott (maximális) TTL értéket",
+    "min_exceeds_max_value": "A minimális érték meghaladja a maximális értéket",
+    "value_not_larger_than": "Az érték nem lehet nagyobb, mint {{maximum}}",
+    "filter_category_general": "Általános",
+    "filter_category_security": "Biztonság",
+    "filter_category_regional": "Regionális",
+    "filter_category_other": "Egyéb",
+    "filter_category_general_desc": "Olyan listák, amelyek blokkolják a nyomkövetést és a hirdetéseket a legtöbb eszközön",
+    "filter_category_security_desc": "Olyan listák, amelyek a kártékony, adathalász vagy átverős oldalak tiltására vannak kifejlesztve",
+    "filter_category_regional_desc": "Olyan listák, amelyek a regionális hirdetések, valamint a nyomkövető szerverek ellen vannak kifejlesztve",
+    "filter_category_other_desc": "További tiltólisták",
+    "original_response": "Eredeti válasz",
+    "click_to_view_queries": "Kattintson a lekérésekért",
+    "port_53_faq_link": "Az 53-as portot gyakran a \"DNSStubListener\" vagy a \"systemd-resolved\" (rendszer által feloldott) szolgáltatások használják. Kérjük, olvassa el <0>ezt az útmutatót</0> a probléma megoldásához."
+}

client/src/__locales/id.json

@@ -3,6 +3,8 @@
     "example_upstream_reserved": "Anda dapat menetapkan DNS upstream <0>untuk domain spesifik</0>",
     "upstream_parallel": "Gunakan kueri paralel untuk mempercepat resoluasi dengan menanyakan semua server upstream secara bersamaan",
     "parallel_requests": "Permintaan paralel",
+    "load_balancing": "Penyeimbang beban",
+    "load_balancing_desc": "Permintaan satu server pada satu waktu. AdGuard Home akan menggunakan algoritma acak tertimbang untuk memilih server sehingga server tercepat akan lebih sering digunakan.",
     "bootstrap_dns": "Server DNS bootstrap",
     "bootstrap_dns_desc": "Server Bootstrap DNS dapat digunakan untuk meresolve alamat IP pada DoH/DoT resolvers yang Anda tentukan sebagai upstreams.",
     "check_dhcp_servers": "Cek untuk server DHCP",
@@ -51,9 +53,11 @@
     "dhcp_add_static_lease": "Tambah static lease",
     "dhcp_reset": "Apakah anda yakin ingin mengatur ulang konfigurasi DHCP anda?",
     "country": "Negara",
+    "city": "Kota",
     "delete_confirm": "Apakah anda yakin ingin menghapus \"{{key}}\"?",
     "form_enter_hostname": "Masukkan hostname",
     "error_details": "Detail kesalahan",
+    "response_details": "Detail respon",
     "request_details": "Detai permintaan",
     "client_details": "Detail klien",
     "details": "Detail",
@@ -63,6 +67,8 @@
     "filters": "Penyaring",
     "filter": "Filter",
     "query_log": "Catatan Kueri",
+    "compact": "Rapat",
+    "nothing_found": "Tidak ditemukan",
     "faq": "Tanya Jawab",
     "version": "versi",
     "address": "Alamat",
@@ -114,12 +120,16 @@
     "general_settings": "Pengaturan umum",
     "dns_settings": "Pengaturan DNS",
     "dns_blocklists": "Daftar blokir DNS",
+    "dns_allowlists": "Daftar putih DNS",
+    "dns_blocklists_desc": "AdGuard Home akan memblokir domain yang cocok dengan daftar hitam.",
+    "dns_allowlists_desc": "Domain dari daftar putih DNS akan diizinkan bahkan jika mereka ada juga di daftar hitam.",
     "custom_filtering_rules": "Aturan penyaringan khusus",
     "encryption_settings": "Pengaturan enkripsi",
     "dhcp_settings": "Pengaturan DHCP",
     "upstream_dns": "Server DNS hulu",
     "upstream_dns_hint": "Jika Anda mengosongkan kolom ini, AdGuard Home akan menggunakan  <a href='https://1.1.1.1/' target='_blank'>Cloudflare DNS</a> sebagai hulu. Gunakan tls:// untuk server DNS over TLS.",
     "test_upstream_btn": "Uji hulu",
+    "upstreams": "Upstream",
     "apply_btn": "Terapkan",
     "disabled_filtering_toast": "Penyaringan nonaktif",
     "enabled_filtering_toast": "Penyaringan aktif",
@@ -131,6 +141,7 @@
     "enabled_save_search_toast": "Pencarian aman diaktifkan",
     "enabled_table_header": "Diaktifkan",
     "name_table_header": "Nama",
+    "list_url_table_header": "Daftar URL",
     "rules_count_table_header": "Jumlah Aturan",
     "last_time_updated_table_header": "Terakhir diperbaharui",
     "actions_table_header": "Aksi",
@@ -139,10 +150,23 @@
     "delete_table_action": "Hapus",
     "elapsed": "Berlalu",
     "filters_and_hosts_hint": "AdGuard Home memahami aturan dasar adblock dan sintak file hosts.",
+    "no_blocklist_added": "Tiada daftar hitam ditambahkan",
+    "no_whitelist_added": "Tiada daftar putih ditambahkan",
+    "add_blocklist": "Tambah daftar hitam",
+    "add_allowlist": "Tambah daftar putih",
     "cancel_btn": "Batal",
     "enter_name_hint": "Masukkan nama",
     "enter_url_or_path_hint": "Masukan sebuah URL atau jalur absolut dari daftar",
     "check_updates_btn": "Cek pembaruan",
+    "new_blocklist": "Daftar hitam baru",
+    "new_allowlist": "Daftar putih baru",
+    "edit_blocklist": "Edit daftar hitam",
+    "edit_allowlist": "Edit daftar putih",
+    "choose_blocklist": "Pilih daftar hitam",
+    "choose_allowlist": "Pilih daftar putih",
+    "enter_valid_blocklist": "Masukkan valid URL ke daftar hitam.",
+    "enter_valid_allowlist": "Masukkan valid URL ke daftar putih.",
+    "form_error_url_format": "Format URL tidak valid",
     "form_error_url_or_path_format": "URL atau jalur absolut dari daftar tidak valid",
     "custom_filter_rules": "Aturan penyaringan khusus",
     "custom_filter_rules_hint": "Masukkan satu aturan dalam sebuah baris. Anda dapat menggunakan baik aturan adblock maupun sintaks file hosts.",
@@ -159,6 +183,7 @@
     "example_upstream_doh": "terenkripsi <0>DNS-over-HTTPS</0>",
     "example_upstream_sdns": "anda bisa menggunakan <0>Stempel DNS</0> untuk <1>DNSCrypt</1> atau pengarah <2>DNS-over-HTTPS</2>",
     "example_upstream_tcp": "DNS reguler (melalui TCP)",
+    "all_lists_up_to_date_toast": "Semua daftar sudah diperbarui",
     "updated_upstream_dns_toast": "Server DNS hulu terbarui",
     "dns_test_ok_toast": "Server DNS yang ditentukan bekerja dengan benar",
     "dns_test_not_ok_toast": "Server \"{{key}}\": tidak dapat digunakan, mohon cek bahwa Anda telah menulisnya dengan benar",
@@ -170,6 +195,7 @@
     "domain_or_client": "Domain atau klien",
     "type_table_header": "Tipe",
     "response_table_header": "Respon",
+    "response_code": "Kode respon",
     "client_table_header": "Klien",
     "empty_response_status": "Kosong",
     "show_all_filter_type": "Tampilkan semua",
@@ -188,6 +214,7 @@
     "query_log_filtered": "Difilter oleh {{filter}}",
     "query_log_confirm_clear": "Apakah Anda yakin ingin menghapus seluruh kueri log?",
     "query_log_cleared": "Kueri log telah berhasil dihapus",
+    "query_log_updated": "Log permintaan telah berhasil diperbarui",
     "query_log_clear": "Hapus kueri log",
     "query_log_retention": "Retensi kueri log",
     "query_log_enable": "Aktifkan log",
@@ -195,19 +222,39 @@
     "query_log_disabled": "Kueri log dinonaktifkan dan dapat dikonfigurasi di <0>pengaturan</0>",
     "query_log_strict_search": "Gunakan tanda kutip ganda untuk pencarian ketat",
     "query_log_retention_confirm": "Apakah Anda yakin ingin mengubah retensi kueri log? Jika Anda menurunkan nilai interval, beberapa data akan hilang",
+    "anonymize_client_ip": "Anonim IP klien",
+    "anonymize_client_ip_desc": "Jangan simpan alamat lengkap IP klien dalam log dan statistik",
+    "dns_config": "Konfigurasi server DNS",
+    "dns_cache_config": "Konfigurasi cache DNS",
+    "dns_cache_config_desc": "Disini Anda bisa mengonfigurasi cache DNS",
     "blocking_mode": "Mode blokir",
     "default": "Standar",
+    "nxdomain": "NXDOMAIN",
+    "null_ip": "Null IP",
+    "custom_ip": "Custom IP",
     "blocking_ipv4": "Blokiran IPv4",
     "blocking_ipv6": "Blokiran IPv6",
     "dns_over_https": "DNS-over-HTTPS",
     "dns_over_tls": "DNS-over-TLS",
+    "plain_dns": "Plain DNS",
+    "form_enter_rate_limit": "Masukkan batas nilai",
+    "rate_limit": "Batas nilai",
+    "edns_enable": "Aktifkan EDNS Klien Subnet",
     "edns_cs_desc": "Apabila dinyalakan, AdGuard Home akan mengirim subnet klien ke server-server DNS.",
     "rate_limit_desc": "Jumlah permintaan per detik yang diperbolehkan untuk satu klien (0: tidak terbatas)",
+    "blocking_ipv4_desc": "Alamat IP akan dikembalikan untuk permintaan A yang diblokir",
+    "blocking_ipv6_desc": "Alamat IP akan dipulihkan untuk permintaan AAAA yang diblokir",
+    "blocking_mode_default": "Standar: Respon pakai NXDOMAIN saat diblokir oleh aturan gaya Adblock; membalas dengan alamat IP yang ditentukan dalam aturan ketika diblokir oleh /et /aturan hosts-style",
+    "blocking_mode_nxdomain": "NXDOMAIN: Respon pakai kode NXDOMAIN",
+    "blocking_mode_null_ip": "Null IP: Respon pakai alamat IP kosong (0.0.0.0 untuk A; :: untuk AAAA)",
     "blocking_mode_custom_ip": "IP kustom: respon dengan alamat IP yang diset secara manual",
+    "upstream_dns_client_desc": "Jika Anda biarkan bidang ini kosong, AdGuard Home akan memakai server yang dikonfigurasi di<0>Pengaturan DNS</0>.",
+    "tracker_source": "Sumber pelacak",
     "source_label": "Sumber",
     "found_in_known_domain_db": "Ditemukan di database domain dikenal",
     "category_label": "Kategori",
     "rule_label": "Aturan",
+    "list_label": "Daftar",
     "unknown_filter": "Penyaringan {{filterId}} tidak dikenal",
     "known_tracker": "Pelacak yang dikenal",
     "install_welcome_title": "Selamat datang di AdGuard Home!",
@@ -324,6 +371,8 @@
     "client_identifier_desc": "Klien dapat diidentifikasi dengan alamat IP atau alamat MAC. Harap dicatat bahwa menggunakan MAC sebagai pengidentifikasi hanya dimungkinkan jika AdGuard Home juga merupakan <0>server DHCP</0>",
     "form_enter_ip": "Masukkan IP",
     "form_enter_mac": "Masukkan MAC",
+    "form_enter_id": "Masukkan pengenal",
+    "form_add_id": "Tambah pengenal",
     "form_client_name": "Masukkan nama klien",
     "name": "Nama",
     "client_global_settings": "Gunakan pengaturan global",
@@ -332,6 +381,7 @@
     "client_updated": "Klien \"{{key}}\" berhasil diperbarui",
     "clients_not_found": "Tidak ada klien ditemukan",
     "client_confirm_delete": "Apakah anda yakin ingin menghapus klien \"{{key}}\"?",
+    "list_confirm_delete": "Anda yakin ingin menghapus daftar ini?",
     "auto_clients_title": "Klien (waktu berjalan)",
     "auto_clients_desc": "Data pada klien yang menggunakan AdGuard Home, tetapi tidak disimpan dalam konfigurasi",
     "access_title": "Pengaturan akses",
@@ -399,6 +449,8 @@
     "domain": "Domain",
     "answer": "Jawab",
     "filter_added_successfully": "Filter telah berhasil ditambahkan",
+    "filter_removed_successfully": "Daftar ini telah sukses dihapus",
+    "filter_updated": "Daftar telah sukses diperbarui",
     "statistics_configuration": "Konfigurasi statistik",
     "statistics_retention": "Statistik disimpan",
     "statistics_retention_desc": "Jika Anda menurunkan nilai interval, beberapa data akan hilang",
@@ -428,13 +480,33 @@
     "whois": "Whois",
     "filtering_rules_learn_more": "<0>Pelajari lebih lanjut</0> tentang membuat daftar hitam host Anda sendiri.",
     "blocked_by_response": "Diblokir oleh CNAME atau IP sebagai respon",
+    "blocked_by_cname_or_ip": "Diblokir oleh CNAME atau IP",
     "try_again": "Coba lagi",
+    "domain_desc": "Masukkan nama domain atau wildcard yang ingin Anda tulis ulang.",
+    "example_rewrite_domain": "tulis ulang respon hanya untuk domain ini saja.",
+    "example_rewrite_wildcard": "tulis ulang respon untuk semua subdomain <0>contoh.org</0>.",
+    "rewrite_ip_address": "Alamat IP: pakai IP ini dalam respons A atau AAAA",
+    "rewrite_domain_name": "Nama domain: tambah ke rekaman CNAME",
+    "rewrite_A": "<0>A</0>: nilai khusus, biarkan <0>A</0> merekam dari upstream",
+    "rewrite_AAAA": "<0>AAAA</0>: nilai khusus, biarkan <0>AAAA</0> merekam dari upstream",
     "disable_ipv6": "Matikan IPv6",
     "disable_ipv6_desc": "Apabila fitur ini dinyalakan, semua permintaan DNS untuk alamat-alamat IPv6 (tipe AAAA) akan diputus.",
     "fastest_addr": "Alamat IP tercepat",
     "fastest_addr_desc": "Permintaan semua server DNS dan kembalinya alamat IP tercepat di antara semua respons",
     "autofix_warning_text": "Apabila anda menekan \"Perbaiki\", AdGuardHome akan mengatur sistem anda untuk menggunakan server DNS AdGuardHome.",
+    "autofix_warning_list": "Ini akan melakukan tugas berikut: <0>Nonaktifkan sistem DNSStubListener</0> <0> Atur alamat server DNS ke 127.0.0.1</0> <0>Ganti target tautan simbolis /etc/resolv.conf pakai /run/systemd/resolve/resolv.conf</0> <0>Hentikan DNSStubListener (muat ulang layanan sistemd-resolve service)</0>",
     "autofix_warning_result": "Hasilnya, semua permintaan DNS dari sistem anda akan diproses oleh AdGuardHome secara standar.",
+    "tags_title": "Tag",
+    "tags_desc": "Anda dapat memilih tag sesuai dengan klien. Tag dapat dimasukkan dalam aturan pemfilteran dan memungkinkan Anda untuk menerapkannya lebih akurat. <0>Pelajari lebih</0>",
+    "form_select_tags": "Pilih tag klien",
+    "check_title": "Periksa penyaringan",
+    "check_desc": "Periksa apakah nama host telah tersaring",
+    "check": "Periksa",
+    "form_enter_host": "Masukkan nama host",
+    "filtered_custom_rules": "Tersaring oleh aturan penyaring Buatan",
+    "choose_from_list": "Pilih dari daftar",
+    "add_custom_list": "Tambah daftar buatan",
+    "host_whitelisted": "Host didaftar putihkan",
     "check_ip": "Alamat IP: {{ip}}",
     "check_cname": "CNAME: {{cname}}",
     "check_reason": "Alasan: {{reason}}",
@@ -446,11 +518,50 @@
     "client_blocked": "Klien \"{{ip}}\" sukses di blokir",
     "client_unblocked": "Klien \"{{ip}}\" sukses di unblock",
     "static_ip": "Alamat IP statis",
+    "static_ip_desc": "AdGuard Home adalah server jadi perlu alamat IP statis agar berfungsi dengan benar. Jika tidak, pada titik tertentu, router Anda dapat menetapkan alamat IP yang berbeda untuk perangkat ini.",
+    "set_static_ip": "Atur alamat IP statik",
+    "install_static_ok": "Kabar baik! Alamat IP statis sudah dikonfigurasi",
+    "install_static_error": "AdGuard Home tidak dapat mengonfigurasinya secara otomatis untuk antarmuka jaringan ini. Silakan cari instruksi tentang cara melakukan ini secara manual.",
+    "install_static_configure": "Kami mendeteksi alamat IP dinamis digunakan - <0>{{ip}}</0>. Anda ingin menggunakannya sebagai alamat statis Anda?",
+    "confirm_static_ip": "AdGuard Home akan mengonfigurasi {{ip}} menjadi alamat IP statis Anda. Anda ingin melanjutkan?",
+    "list_updated": "{{count}} daftar terbarui",
+    "list_updated_plural": "{{count}} daftar terbarui",
+    "dnssec_enable": "Aktifkan DNSSEC",
+    "dnssec_enable_desc": "Atur bendera DNSSEC di permintaan keluar DNS dan periksa hasilnya (resolver berkemampuan DNSSEC diperlukan)",
     "validated_with_dnssec": "Tervalidasi dengan DNSSEC",
+    "all_queries": "Semua permintaan",
     "show_blocked_responses": "Diblokir",
     "show_whitelisted_responses": "Dalam Daftar Putih",
     "show_processed_responses": "Terproses",
+    "blocked_safebrowsing": "Terblokir oleh Safebrowsing",
+    "blocked_adult_websites": "Situs Dewasa Terblokir",
+    "blocked_threats": "Blokir Ancaman",
+    "allowed": "Dibolehkan",
+    "filtered": "Tersaring",
+    "rewritten": "Tulis ulang",
     "safe_search": "Pencarian aman",
     "blocklist": "Daftar blokir",
-    "milliseconds_abbreviation": "ms"
+    "milliseconds_abbreviation": "ms",
+    "cache_size": "Ukuran cache",
+    "cache_size_desc": "Ukuran DNS cache (dalam bit)",
+    "cache_ttl_min_override": "Tumpuk TTL minimum",
+    "cache_ttl_max_override": "Tumpuk TTL maksimum",
+    "enter_cache_size": "Masukkan ukuran cache",
+    "enter_cache_ttl_min_override": "Masukkan TTL minimum",
+    "enter_cache_ttl_max_override": "Masukkan TTL maksimum",
+    "cache_ttl_min_override_desc": "Ganti nilai TTL (minimum) yang diterima dari server upstream. Nilai ini tidak boleh lebih dari 3600 (1 jam)",
+    "cache_ttl_max_override_desc": "Ganti nilai TTL (maksimum) yang diterima dari server upstream",
+    "min_exceeds_max_value": "Nilai minimum melebihi nilai maksimum",
+    "value_not_larger_than": "Nilai tidak bisa lebih dari {{maximum}}",
+    "filter_category_general": "Umum",
+    "filter_category_security": "Keamanan",
+    "filter_category_regional": "Wilayah",
+    "filter_category_other": "Lainnya",
+    "filter_category_general_desc": "Daftar yang memblokir pelacakan dan iklan di sebagian besar perangkat",
+    "filter_category_security_desc": "Daftar yang khusus pada pemblokiran malware, phishing, atau domain penipuan",
+    "filter_category_regional_desc": "Daftar yang berfokus pada iklan regional dan server pelacakan",
+    "filter_category_other_desc": "Daftar hitam lain",
+    "original_response": "Respon asli",
+    "click_to_view_queries": "Klik untuk lihat permintaan",
+    "port_53_faq_link": "Port 53 sering ditempati oleh layanan \"DNSStubListener\" atau \"systemd-resolved\". Silakan baca <0>instruksi ini</0> tentang cara menyelesaikan ini."
 }

client/src/__locales/ja.json

@@ -562,5 +562,6 @@
     "filter_category_regional_desc": "それぞれの地域の広告と追跡サーバをターゲットするリストです。",
     "filter_category_other_desc": "その他のブロックリストです。",
     "original_response": "当初の応答",
-    "click_to_view_queries": "クエリを表示するにはクリックしてください"
+    "click_to_view_queries": "クエリを表示するにはクリックしてください",
+    "port_53_faq_link": "多くの場合、ポート53は \"DNSStubListener\" または \"systemd-resolved\" サービスによって利用されています。これを解決する方法については、<0>この手順</0>をお読みください。"
 }

client/src/__locales/pl.json

@@ -108,7 +108,7 @@
     "number_of_dns_query_to_safe_search": "Liczba żądań DNS do wyszukiwarek, dla których zastosowano wymuszenie bezpiecznego wyszukiwania",
     "average_processing_time": "Średni czas przetwarzania",
     "average_processing_time_hint": "Średni czas przetwarzania żądania DNS liczony w milisekundach",
-    "block_domain_use_filters_and_hosts": "Blokuj domeny za pomocą filtrów i plików host",
+    "block_domain_use_filters_and_hosts": "Zablokuj domeny za pomocą filtrów i plików host",
     "filters_block_toggle_hint": "Możesz skonfigurować reguły blokowania w ustawieniach <a href='#filters'>Filtry</a> ",
     "use_adguard_browsing_sec": "Użyj usługi sieciowej Bezpieczne Przeglądanie AdGuard",
     "use_adguard_browsing_sec_hint": "AdGuard Home sprawdzi, czy domena jest na czarnej liście przez serwis internetowy Bezpieczne Przeglądanie. Będzie korzystać z interfejsu API przyjaznego dla prywatności w celu przeprowadzenia kontroli: na serwer wysyłany jest tylko krótki prefiks nazwy domeny SHA256.",
@@ -177,7 +177,7 @@
     "example_comment": "! Tutaj jest komentarz",
     "example_comment_meaning": "komentarz",
     "example_comment_hash": "# Również komentarz",
-    "example_regex_meaning": "blokuj dostęp do domen pasujących do określonego wyrażenia regularnego",
+    "example_regex_meaning": "zablokuj dostęp do domen pasujących do określonego wyrażenia regularnego",
     "example_upstream_regular": "normalny DNS (przez UDP)",
     "example_upstream_dot": "zaszyfrowany <0>DNS-over-TLS</0>",
     "example_upstream_doh": "zaszyfrowany <0>DNS-over-HTTPS</0>",
@@ -427,7 +427,7 @@
     "form_error_answer_format": "Nieprawidłowy format odpowiedzi",
     "configure": "Skonfiguruj",
     "main_settings": "Ustawienia główne",
-    "block_services": "Blokuj określone usługi",
+    "block_services": "Zablokuj określone usługi",
     "blocked_services": "Zablokowane usługi",
     "blocked_services_desc": "Pozwala szybko zablokować popularne witryny i usługi.",
     "blocked_services_saved": "Zablokowane usługi zostały pomyślnie zapisane",
@@ -444,7 +444,7 @@
     "stats_params": "Konfiguracja statystyk",
     "config_successfully_saved": "Konfiguracja została pomyślnie zapisana",
     "interval_24_hour": "24 godziny",
-    "interval_days": "{{count}} dzień",
+    "interval_days": "{{count}} dni",
     "interval_days_plural": "{{count}} dni",
     "domain": "Domena",
     "answer": "Odpowiedź",

client/src/__locales/ru.json

@@ -530,7 +530,7 @@
     "dnssec_enable_desc": "Установите флаг DNSSEC в исходящих DNS-запросах и проверьте результат (требуется резолвер с поддержкой DNSSEC)",
     "validated_with_dnssec": "Подтверждено с помощью DNSSEC",
     "all_queries": "Все запросы",
-    "show_blocked_responses": "Blocked",
+    "show_blocked_responses": "Заблокировано",
     "show_whitelisted_responses": "В белом списке",
     "show_processed_responses": "Обработан",
     "blocked_safebrowsing": "Заблокировано согласно базе данных Safebrowsing",

client/src/__locales/si-lk.json

@@ -0,0 +1,443 @@
+{
+    "client_settings": "අනුග්‍රාහක සැකසුම්",
+    "check_dhcp_servers": "DHCP සේවාදායකයන්  සඳහා පරීක්ෂා කරන්න",
+    "save_config": "වින්‍යාසය සුරකින්න",
+    "enabled_dhcp": "DHCP සේවාදායකය සබල කර ඇත",
+    "disabled_dhcp": "DHCP සේවාදායකය අබල කර ඇත",
+    "dhcp_title": "ග.ධා.වි.කෙ. සේවාදායකය (පර්යේෂණාත්මක!)",
+    "dhcp_description": "ඔබගේ මාර්ගකාරකය ග.ධා.වි.කෙ. (DHCP) සැකසුම් ලබා නොදෙන්නේ නම්, ඔබට AdGuardHome හි ඇති ග.ධා.වි.කෙ. සේවාදායකය භාවිතා කළ හැකිය.",
+    "dhcp_enable": "DHCP සේවාදායකය සබල කරන්න",
+    "dhcp_disable": "DHCP සේවාදායකය අබල කරන්න",
+    "dhcp_config_saved": "DHCP වින්‍යාසය සාර්ථකව සුරකින ලදි",
+    "form_error_required": "අවශ්‍ය ක්ෂේත්‍රයකි",
+    "form_error_ip4_format": "වලංගු නොවන IPv4 ආකෘතියකි",
+    "form_error_ip6_format": "වලංගු නොවන IPv6 ආකෘතියකි",
+    "form_error_ip_format": "වලංගු නොවන අ.ජා. කෙ. (IP) ආකෘතියකි",
+    "form_error_mac_format": "වලංගු නොවන MAC ආකෘතියකි",
+    "form_error_client_id_format": "වලංගු නොවන අනුග්‍රාහක හැඳුනුම් ආකෘතියකි",
+    "form_error_positive": "0 ට වඩා වැඩි විය යුතුය",
+    "form_error_negative": "0 හෝ ඊට වැඩි විය යුතුය",
+    "dhcp_form_range_title": "අ.ජා. කෙ. (IP) ලිපින පරාසය",
+    "dhcp_form_range_start": "පරාසය ආරම්භය",
+    "dhcp_form_range_end": "පරාසය අවසානය",
+    "dhcp_interface_select": "ග.ධා.වි.කෙ. (DHCP) අතුරුමුහුණත තෝරන්න",
+    "dhcp_hardware_address": "දෘඩාංග ලිපිනය",
+    "dhcp_ip_addresses": "අ.ජා. කෙ. (IP) ලිපින",
+    "ip": "අ.ජා. කෙ. (IP)",
+    "dhcp_table_hostname": "ධාරක නාමය",
+    "dhcp_table_expires": "කල් ඉකුත් වීම",
+    "dhcp_warning": "ඔබට කෙසේ හෝ ග.ධා.වි.කෙ. (DHCP) සේවාදායකය සබල කිරීමට අවශ්‍ය නම්, ඔබේ ජාලයේ වෙනත් ක්‍රියාකාරී ග.ධා.වි.කෙ. සේවාදායකයක් නොමැති බව තහවුරු කරගන්න. එසේ නොමැති නම්, එය සම්බන්ධිත උපාංග සඳහා අන්තර්ජාලය බිඳ දැමිය හැකිය!",
+    "dhcp_error": "ජාලයේ තවත් ග.ධා.වි.කෙ. (DHCP) සේවාදායකයක් තිබේද යන්න අපට තීරණය කළ නොහැකි විය.",
+    "dhcp_static_ip_error": "ග.ධා.වි.කෙ. (DHCP) සේවාදායකය භාවිතා කිරීම සඳහා ස්ථිතික අන්තර්ජාල කෙටුම්පත් (IP) ලිපිනයක් සැකසිය යුතුය. මෙම ජාල අතුරුමුහුණත ස්ථිතික අ.ජා. කෙ. ලිපිනයක් භාවිතයෙන් වින්‍යාසගත කර තිබේද යන්න තීරණය කිරීමට අප අසමත් විය. කරුණාකර ස්ථිතික අ.ජා. කෙ. ලිපිනයක් අතින් සකසන්න.",
+    "dhcp_dynamic_ip_found": "ඔබේ පද්ධතිය <0>{{interfaceName}}</0> අතුරු මුහුණත සඳහා ගතික අන්තර්ජාල කෙටුම්පත් (IP) ලිපින වින්‍යාසය භාවිතා කරයි. ග.ධා.වි.කෙ. (DHCP) සේවාදායකය භාවිතා කිරීම සඳහා ස්ථිතික අ.ජා. කෙ. ලිපිනයක් සැකසිය යුතුය. ඔබගේ වර්තමාන අ.ජා. කෙ. ලිපිනය <0>{{ipAddress}}</0> වේ. ඔබ ග.ධා.වි.කෙ. සබල කරන්න බොත්තම එබුවහොත් අපි ස්වයංක්‍රීයව මෙම අ.ජා. කෙ. ලිපිනය ස්ථිතික ලෙස සකසන්නෙමු.",
+    "dhcp_reset": "ග.ධා.වි.කෙ. (DHCP) වින්‍යාසය යළි පිහිටුවීමට අවශ්‍ය බව ඔබට විශ්වාස ද?",
+    "country": "රට",
+    "city": "නගරය",
+    "delete_confirm": "\"{{key}}\" මකා දැමීමට අවශ්‍ය බව ඔබට විශ්වාසද?",
+    "form_enter_hostname": "ධාරක නාමය ඇතුළත් කරන්න",
+    "error_details": "දෝෂ විස්තර",
+    "response_details": "ප්‍රතිචාරය‌ෙහි විස්තර",
+    "request_details": "ඉල්ලීමෙහි විස්තර",
+    "client_details": "අනුග්‍රාහකයේ විස්තර",
+    "details": "විස්තර",
+    "back": "ආපසු",
+    "dashboard": "උපකරණ පුවරුව",
+    "settings": "සැකසුම්",
+    "filters": "පෙරහන්",
+    "filter": "පෙරහන",
+    "query_log": "විමසුම් ලොගය",
+    "nothing_found": "කිසිවක් සොයාගත නොහැක",
+    "faq": "නිති අසන පැණ",
+    "version": "අනුවාදය",
+    "address": "ලිපිනය",
+    "protocol": "කෙටුම්පත",
+    "on": "සක්‍රියයි",
+    "off": "අක්‍රියයි",
+    "copyright": "ප්‍රකාශන හිමිකම",
+    "homepage": "මුල්  පිටුව",
+    "report_an_issue": "ගැටලුවක් වාර්තා කරන්න",
+    "privacy_policy": "රහස්‍යතා ප්‍රතිපත්තිය",
+    "enable_protection": "ආරක්ෂණය සබල කරන්න",
+    "enabled_protection": "ආරක්ෂණය සබල කර ඇත",
+    "disable_protection": "ආරක්ෂණය අබල කරන්න",
+    "disabled_protection": "ආරක්ෂණය අබල කර ඇත",
+    "refresh_statics": "සංඛ්‍යාලේඛන නැවුම් කරන්න",
+    "dns_query": "ව.නා.ප. (DNS) විමසුම්",
+    "blocked_by": "<0>පෙරහන් මගින් අවහිර කරන ලද</0>",
+    "stats_malware_phishing": "අවහිර කළ ද්වේශාංග/තතුබෑම්",
+    "stats_adult": "අවහිර කළ වැඩිහිටි වෙබ් අඩවි",
+    "stats_query_domain": "ජනප්‍රිය විමසන ලද වසම්",
+    "for_last_24_hours": "පසුගිය පැය 24 සඳහා",
+    "for_last_days": "පසුගිය දින {{count}} සඳහා",
+    "for_last_days_plural": "පසුගිය දින {{count}} සඳහා",
+    "no_domains_found": "වසම් කිසිවක් සොයා ගත නොහැකි විය",
+    "requests_count": "ඉල්ලීම් ගණන",
+    "top_blocked_domains": "ජනප්‍රිය අවහිර කළ වසම්",
+    "top_clients": "ජනප්‍රිය අනුග්‍රාහකයන්",
+    "general_statistics": "පොදු සංඛ්යාලේඛන",
+    "number_of_dns_query_blocked_24_hours": "දැන්වීම් වාරණ පෙරහන් සහ ධාරක වාරණ ලැයිස්තු මගින් අවහිර කරන ලද DNS ඉල්ලීම් ගණන",
+    "number_of_dns_query_blocked_24_hours_by_sec": "AdGuard browsing security ඒකකය මගින් අවහිර කරන ලද DNS ඉල්ලීම් ගණන",
+    "number_of_dns_query_blocked_24_hours_adult": "අවහිර කළ වැඩිහිටි වෙබ් අඩවි ගණන",
+    "enforced_save_search": "ආරක්ෂිත සෙවීම බලාත්මක කරන ලද",
+    "number_of_dns_query_to_safe_search": "ආරක්ෂිත සෙවීම බලාත්මක කළ සෙවුම් යන්ත්‍ර සඳහා DNS ඉල්ලීම් ගණන",
+    "average_processing_time": "සාමාන්‍ය සැකසුම් කාලය",
+    "average_processing_time_hint": "DNS ඉල්ලීමක් සැකසීමේ සාමාන්‍ය කාලය මිලි තත්පර වලින්",
+    "block_domain_use_filters_and_hosts": "පෙරහන් සහ ධාරක ගොනු භාවිතා කරමින් වසම් අවහිර කරන්න",
+    "filters_block_toggle_hint": "ඔබට අවහිර කිරීමේ නීති <a href='#filters'>පෙරහන්</a> තුළ පිහිටුවිය හැකිය.",
+    "use_adguard_browsing_sec": "AdGuard browsing security web service භාවිතා කරන්න",
+    "use_adguard_parental": "AdGuard parental control වෙබ් සේවාව භාවිතා කරන්න",
+    "use_adguard_parental_hint": "වසමේ වැඩිහිටියන්ට අදාල කරුණු අඩංගු දැයි AdGuard Home විසින් පරීක්ෂා කරනු ඇත. එය browsing security වෙබ් සේවාව මෙන් රහස්‍යතා හිතකාමී API භාවිතා කරයි.",
+    "enforce_safe_search": "ආරක්ෂිත සෙවීම බලාත්මක කරන්න",
+    "enforce_save_search_hint": "AdGuard Home හට පහත සෙවුම් යන්ත්‍ර තුළ ආරක්ෂිත සෙවීම බලාත්මක කළ හැකිය: Google, Youtube, Bing, DuckDuckGo සහ Yandex.",
+    "no_servers_specified": "සේවාදායක කිසිවක් නිශ්චිතව දක්වා නැත",
+    "general_settings": "පොදු සැකසුම්",
+    "dns_settings": "DNS සැකසුම්",
+    "dns_blocklists": "DNS අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තු",
+    "dns_allowlists": "DNS අවසර දීමේ ලැයිස්තු",
+    "dns_allowlists_desc": "DNS අවසර දීමේ ලැයිස්තුවල වසම් කිසියම් අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුව අඩංගු වුවද එය න‌ොසලකා හැර අවසර දෙනු ලැබේ.",
+    "custom_filtering_rules": "අභිරුචි පෙරීමේ නීති",
+    "encryption_settings": "සංකේතාංකන සැකසුම්",
+    "dhcp_settings": "DHCP සැකසුම්",
+    "disabled_filtering_toast": "පෙරීම අබල කර ඇත",
+    "enabled_filtering_toast": "පෙරීම සබල කර ඇත",
+    "disabled_parental_toast": "Parental control අබල කර ඇත",
+    "enabled_parental_toast": "Parental control සබල කර ඇත",
+    "disabled_safe_search_toast": "ආරක්ෂිත සෙවීම අබල කර ඇත",
+    "enabled_save_search_toast": "ආරක්ෂිත සෙවීම සබල කර ඇත",
+    "enabled_table_header": "සබල කර ඇත",
+    "name_table_header": "නම",
+    "list_url_table_header": "URL ලැයිස්තුව",
+    "rules_count_table_header": "නීති ගණන",
+    "last_time_updated_table_header": "අවසන් වරට යාවත්කාලීන කරන ලද",
+    "actions_table_header": "ක්‍රියාමාර්ග",
+    "request_table_header": "ඉල්ලීම",
+    "edit_table_action": "සංස්කරණය කරන්න",
+    "delete_table_action": "මකන්න",
+    "no_blocklist_added": "අවහිර කිරීමේ ලැයිස්තු එකතු කර නැත",
+    "no_whitelist_added": "අවසර දීමේ ලැයිස්තු එකතු කර නැත",
+    "add_blocklist": "අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුවක් එකතු කරන්න",
+    "add_allowlist": "අවසර දීමේ ලැයිස්තුවක් එකතු කරන්න",
+    "cancel_btn": "අහෝසි කරන්න",
+    "enter_name_hint": "නම ඇතුළත් කරන්න",
+    "enter_url_or_path_hint": "ලැයිස්තුවක URL හෝ ස්ථීර මාර්ගයක් ඇතුළත් කරන්න",
+    "check_updates_btn": "යාවත්කාල පරීක්ෂා කරන්න",
+    "new_blocklist": "නව අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුව",
+    "new_allowlist": "නව අවසර දීමේ ලැයිස්තුව",
+    "edit_blocklist": "අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුව සංස්කරණය කරන්න",
+    "edit_allowlist": "අවසර දීමේ ලැයිස්තුව සංස්කරණය කරන්න",
+    "enter_valid_blocklist": "අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුවට වලංගු URL ලිපිනයක් ඇතුළත් කරන්න.",
+    "enter_valid_allowlist": "අවසර දීමේ ලැයිස්තුවට වලංගු URL ලිපිනයක් ඇතුළත් කරන්න.",
+    "form_error_url_format": "වලංගු නොවන URL ආකෘතියකි",
+    "form_error_url_or_path_format": "ලැයිස්තුවක වලංගු නොවන URL හෝ ස්ථීර මාර්ගයකි",
+    "custom_filter_rules": "අභිරුචි පෙරීමේ නීති",
+    "examples_title": "උදාහරණ",
+    "example_meaning_filter_block": "example.org වසමට සහ එහි සියලුම උප වසම් වලට පිවිසීම අවහිර කරන්න",
+    "example_meaning_filter_whitelist": "example.org වසමට සහ එහි සියලුම උප වසම් වලට ප්‍රවේශය අවහිර නොකරන්න",
+    "example_meaning_host_block": "AdGuard Home දැන් example.org වසම සඳහා 127.0.0.1 ලිපිනය ලබා දෙනු ඇත (නමුත් එහි උප ලිපින නොවේ).",
+    "example_comment": "! මෙතැන අදහස් දැක්වීමක්",
+    "example_comment_meaning": "විස්තර කිිරීමක්",
+    "example_comment_hash": "# එසේම අදහස් දැක්වීමක්",
+    "example_regex_meaning": "නිශ්චිතව දක්වා ඇති නිත්‍ය වාක්‍යවිධියට ගැලපෙන වසම් වෙත පිවිසීම අවහිර කරන්න",
+    "example_upstream_regular": "සාමාන්‍ය DNS (UDP හරහා)",
+    "example_upstream_dot": "සංකේතාංකනය කළ <0>DNS-over-TLS</0>",
+    "example_upstream_doh": "සංකේතාංකනය කළ <0>DNS-over-HTTPS</0>",
+    "example_upstream_tcp": "සාමාන්‍ය DNS (TCP හරහා)",
+    "all_lists_up_to_date_toast": "සියලුම ලැයිස්තු දැනටමත් යාවත්කාලීනයි",
+    "dns_test_ok_toast": "සඳහන් කළ DNS සේවාදායකයන් නිවැරදිව ක්‍රියා කරයි",
+    "dns_test_not_ok_toast": "සේවාදායකය \"{{key}}\": භාවිතා කළ නොහැකි විය, කරුණාකර ඔබ එය නිවැරදිව ලියා ඇත්දැයි පරීක්ෂා කරන්න",
+    "unblock": "අනවහිර කරන්න",
+    "block": "අවහිර කරන්න",
+    "time_table_header": "වේලාව",
+    "date": "දිනය",
+    "domain_name_table_header": "වසම් නාමය",
+    "domain_or_client": "වසම හෝ අනුග්‍රාහකය",
+    "type_table_header": "වර්ගය",
+    "response_table_header": "ප්‍රතිචාරය",
+    "response_code": "ප්‍රතිචාර කේතය",
+    "client_table_header": "අනුග්‍රාහකය",
+    "empty_response_status": "හිස්",
+    "show_all_filter_type": "සියල්ල පෙන්වන්න",
+    "refresh_btn": "නැවුම් කරන්න",
+    "previous_btn": "පෙර",
+    "next_btn": "ඊළඟ",
+    "loading_table_status": "පූරණය ‌වෙමින්...",
+    "page_table_footer_text": "පිටුව",
+    "rows_table_footer_text": "පේළි",
+    "updated_custom_filtering_toast": "අභිරුචි පෙරීමේ නීති යාවත්කාල කරන ලදි",
+    "rule_removed_from_custom_filtering_toast": "අභිරුචි පෙරීමේ නීති තුළින් නීතියක් ඉවත් කරන ලදි",
+    "rule_added_to_custom_filtering_toast": "අභිරුචි පෙරීමේ නීති තුළට මෙම නීතිය එකතු කරන ලදි",
+    "query_log_response_status": "තත්ත්වය: {{value}}",
+    "query_log_filtered": "{{filter}} මගින් පෙරහන් කරන ලදි",
+    "query_log_confirm_clear": "සම්පූර්ණ විමසුම් ලොගය ඉවත් කිරීමට අවශ්‍ය යැයි ඔබට විශ්වාසද?",
+    "query_log_clear": "විමසුම් ලොග ඉවත් කරන්න",
+    "query_log_retention": "විමසුම් ලොග රඳවා තබා ගැනීම",
+    "query_log_enable": "ලොගය සබල කරන්න",
+    "query_log_configuration": "ලොග වින්‍යාසය",
+    "query_log_disabled": "විමසුම් ලොගය අබල කර ඇති අතර එය <0>සැකසුම්</0> තුළ වින්‍යාසගත කළ හැකිය",
+    "query_log_strict_search": "ඉතා නිවැරදිව සෙවීම සඳහා ද්විත්ව උද්ධෘතය භාවිතා කරන්න",
+    "query_log_retention_confirm": "විමසුම් ලොගය රඳවා තබා ගැනීම වෙනස් කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද? ඔබ කාල පරතරයෙහි අගය අඩු කළහොත් සමහර දත්ත නැති වී යනු ඇත",
+    "anonymize_client_ip": "අනුග්‍රාහකයෙහි අ.ජා. කෙ. (IP) නිර්නාමික කරන්න",
+    "dns_config": "DNS සේවාදායක වින්‍යාසය",
+    "default": "සුපුරුදු",
+    "nxdomain": "නොපවතින වසම",
+    "null_ip": "අභිශූන්‍යය අ.ජා. කෙ. (IP)",
+    "custom_ip": "අභිරුචි අ.ජා. කෙ. (IP)",
+    "dns_over_https": "DNS-over-HTTPS",
+    "dns_over_tls": "DNS-over-TLS",
+    "form_enter_rate_limit": "අනුපාත සීමාව ඇතුළත් කරන්න",
+    "rate_limit": "අනුපාත සීමාව",
+    "edns_enable": "EDNS අනුග්‍රාහක අනුජාලය සබල කරන්න",
+    "blocking_ipv4_desc": "අවහිර කළ A ඉල්ලීමක් සඳහා ආපසු එවිය යුතු අ.ජා. කෙ. (IP) ලිපිනය",
+    "blocking_ipv6_desc": "අවහිර කළ AAAA ඉල්ලීමක් සඳහා ආපසු එවිය යුතු අ.ජා. කෙ. (IP) ලිපිනය",
+    "blocking_mode_nxdomain": "නොපවතින වසම (NXDOMAIN): NXDOMAIN කේතය සමඟ ප්‍රතිචාර දක්වයි",
+    "blocking_mode_null_ip": "අභිශූන්‍යය අන්තර්ජාල කෙටුම්පත: ශුන්‍ය අ.ජා. කෙ. (IP) ලිපිනය සමඟ ප්‍රතිචාර දක්වයි (A සඳහා 0.0.0.0; AAAA සඳහා ::)",
+    "blocking_mode_custom_ip": "අභිරුචි අන්තර්ජාල කෙටුම්පත: අතින් සැකසූ අ.ජා. කෙ. (IP) ලිපිනයක් සමඟ ප්‍රතිචාර දක්වයි",
+    "upstream_dns_client_desc": "ඔබ මෙම ක්ෂේත්‍රය හිස්ව තබා ගන්නේ නම්, AdGuard Home විසින් <0>DNS සැකසුම්</0> හි වින්‍යාසගත කර ඇති සේවාදායකයන් භාවිතා කරනු ඇත.",
+    "source_label": "මූලාශ්‍රය",
+    "category_label": "ප්‍රවර්ගය",
+    "rule_label": "නීතිය",
+    "list_label": "ලැයිස්තුව",
+    "unknown_filter": "{{filterId}} නොදන්නා පෙරහනකි",
+    "known_tracker": "දන්නා ලුහුබැඳීමක්",
+    "install_welcome_title": "AdGuard Home වෙත සාදරයෙන් පිළිගනිමු!",
+    "install_welcome_desc": "AdGuard Home යනු ජාලය පුරා ඇති දැන්වීම් සහ ලුහුබැඳීම අවහිර කරන DNS සේවාදායකි. ඔබගේ මුළු ජාලය සහ සියලුම උපාංග පාලනය කිරීමට ඉඩ සලසා දීම එහි පරමාර්ථය යි, එයට අනුග්‍රාහක පාර්ශවීය වැඩසටහනක් භාවිතා කිරීම අවශ්‍ය නොවේ.",
+    "install_settings_title": "පරිපාලක වෙබ් අතුරු මුහුණත",
+    "install_settings_listen": "සවන් දෙන අතුරු මුහුණත",
+    "install_settings_port": "කවුළුව",
+    "form_error_port": "වලංගු කවුළුවක අගයක් ඇතුළත් කරන්න",
+    "install_settings_dns": "DNS සේවාදායකය",
+    "install_settings_all_interfaces": "සියලුම අතුරුමුහුණත්",
+    "install_auth_title": "සත්‍යාපනය",
+    "install_auth_desc": "ඔබගේ AdGuard Home පරිපාලක වෙබ් අතුරු මුහුණතට මුරපද සත්‍යාපනය වින්‍යාසගත කිරීම අතිශයින් නිර්දේශ කෙරේ. එය ඔබගේ ස්ථානීය ජාල‌ය‌ෙ‌න් පමණක් ප්‍රවේශ විය හැකි වුවද, එය තව දුරටත් සීමා රහිත ප්‍රවේශයකින් ආරක්ෂා කර ගැනීම වැදගත් ය.",
+    "install_auth_username": "පරිශීලක නාමය",
+    "install_auth_password": "මුරපදය",
+    "install_auth_confirm": "මුරපදය තහවුරු කරන්න",
+    "install_auth_username_enter": "පරිශීලක නාමය ඇතුළත් කරන්න",
+    "install_auth_password_enter": "මුරපදය ඇතුළත් කරන්න",
+    "install_step": "පියවර",
+    "install_devices_title": "ඔබගේ උපාංග වින්‍යාසගත කරන්න",
+    "install_devices_desc": "AdGuard Home භාවිතා කිරීම ආරම්භයට, ඔබගේ උපාංග එය පරිශ්‍රීලනයට වින්‍යාසගත කිරීම අවශ්‍ය වේ.",
+    "install_submit_title": "සුභ පැතුම්!",
+    "install_submit_desc": "පිහිටුවීමේ ක්‍රියා පටිපාටිය අවසන් වී ඇති අතර ඔබ AdGuard Home භාවිතය ආරම්භ කිරීමට සූදානම්ය.",
+    "install_devices_router": "මාර්ගකාරකය",
+    "install_devices_router_desc": "මෙම පිහිටුම ඔබගේ නිවසේ මාර්ගකාරකයට සම්බන්ධ සියලුම උපාංග ස්වයංක්‍රීයව ආවරණය කරන අතර ඔබට ඒවා අතින් වින්‍යාසගත කිරීමට අවශ්‍ය නොවනු ඇත.",
+    "install_devices_router_list_3": "ඔබගේ AdGuard Home සේවාදායක ලිපින එහි ඇතුළත් කරන්න.",
+    "install_devices_router_list_4": "ඔබට සමහර වර්ගයේ රවුටර වල අභිරුචි ව.නා.ප. (DNS) සේවාදායකයක් සැකසිය නොහැක. මෙම අවස්ථාවේදී AdGuard Home <0>ග.ධා.වි.කෙ. (DHCP) සේවාදායකයක්</0> ලෙස පිහිටුවන්නේ නම් එය උපකාර වනු ඇත. එසේ නොමැතිනම්, ඔබග‌ේ විශේෂිත මාර්ගකාරක මාදිළිය සඳහා වූ ව.නා.ප. සේවාදායකයන් රිසිකරණය කරන්නේ කෙසේද යන්න පිළිබඳ අත්පොත සෙවිය යුතුය.",
+    "install_devices_windows_list_1": "ආරම්භක මෙනුව හෝ වින්ඩෝස් සෙවුම හරහා පාලක පැනලය විවෘත කරන්න.",
+    "install_devices_windows_list_2": "ජාල සහ අන්තර්ජාල ප්‍රවර්ගයට ගොස් පසුව ජාල සහ බෙදාගැනීමේ මධ්‍යස්ථානය වෙත යන්න.",
+    "install_devices_windows_list_3": "උපයුක්තක‌‌‌යෙහි සැකසුම් වෙනස් කිරීම තිරයේ වම් පසින් සොයාගෙන එය මත ක්ලික් කරන්න.",
+    "install_devices_windows_list_4": "ඔබගේ ක්‍රියාකාරී සම්බන්ධතාවය තෝරන්න, එය මත දකුණු-ක්ලික් කර ගුණාංග තෝරන්න.",
+    "install_devices_windows_list_5": "ලැයිස්තුවේ ඇති අන්තර්ජාල කෙටුම්පත් අනුවාදය 4 (TCP/IP) සොයාගෙන එය තෝරා ඉන්පසු ගුණාංග මත නැවත ක්ලික් කරන්න.",
+    "install_devices_windows_list_6": "'පහත දැක්වෙන DNS සේවාදායක ලිපින භාවිතා කරන්න' යන්න තෝරා ඔබගේ AdGuard Home සේවාදායක ලිපින ඇතුළත් කරන්න.",
+    "install_devices_macos_list_1": "ඇපල් අයිකනය මත ක්ලික් කර පද්ධති මනාපයන් වෙත යන්න.",
+    "install_devices_macos_list_2": "ජාලය මත ක්ලික් කරන්න.",
+    "install_devices_macos_list_3": "ඔබගේ ලැයිස්තුවේ පළමු සම්බන්ධතාවය තෝරා උසස් මත ක්ලික් කරන්න.",
+    "install_devices_macos_list_4": "DNS තීරුව තෝරා ඔබගේ AdGuard Home සේවාදායක ලිපින ඇතුළත් කරන්න.",
+    "install_devices_android_list_1": "ඇන්ඩ්‍රොයිඩ් මෙනුවෙහි මුල් තිරයෙන්, සැකසීම් මත තට්ටු කරන්න.",
+    "install_devices_android_list_2": "මෙනුවේ Wi-Fi මත තට්ටු කරන්න. පවතින සියලුම ජාල ලැයිස්තුගත කර ඇති තිරය පෙන්වනු ඇත (ජංගම සම්බන්ධතාවය සඳහා අභිරුචි DNS සැකසිය නොහැක).",
+    "install_devices_android_list_3": "ඔබ සම්බන්ධ වී ඇති ජාලය මත දිගු වේලාවක් ඔබන්න, ඉන්පසුව ජාලය වෙනස් කිරීම මත තට්ටු කරන්න.",
+    "install_devices_android_list_4": "ඔබට සමහර උපාංගවල වැඩිදුර සැකසුම් බැලීමට \"උසස්\" සඳහා වූ කොටුව සලකුණු කිරීමට අවශ්‍ය විය හැකිය. එමෙන්ම ඔබගේ ඇන්ඩ්‍රොයිඩ් DNS සැකසුම් වෙනස් කිරීමට, අ.ජා. කෙ. (IP) සැකසුම් ග.ධා.වි.කෙ. (DHCP) සිට ස්ථිතික වෙත මාරු කළ යුතුය.",
+    "install_devices_android_list_5": "DNS 1 සහ DNS 2 පිහිටුවීම් අගයන් ඔබගේ AdGuard Home සේවාදායක ලිපින වලට වෙනස් කරන්න.",
+    "install_devices_ios_list_1": "මුල් තිරයේ සිට, සැකසුම් මත තට්ටු කරන්න.",
+    "install_devices_ios_list_2": "වම්පස මෙනුවෙහි Wi-Fi තෝරන්න (ජංගම දුරකථන සඳහා DNS වින්‍යාසගත කිරීමට නොහැකිය).",
+    "install_devices_ios_list_3": "දැනට ක්‍රියාකාරී ජාලයයහෙි නම මත තට්ටු කරන්න.",
+    "install_devices_ios_list_4": "DNS ක්ෂේත්‍රය තුළ ඔබගේ AdGuard Home සේවාදායක ලිපින ඇතුළත් කරන්න.",
+    "get_started": "ආරම්භ කර ගන්න",
+    "next": "ඊළඟ",
+    "open_dashboard": "උපකරණ පුවරුව විවෘත කරන්න",
+    "install_saved": "සාර්ථකව සුරකින ලදි",
+    "encryption_title": "සංකේතාංකනය",
+    "encryption_desc": "ගුප්තකේතනය (HTTPS/TLS) සඳහා DNS සහ පරිපාලක වෙබ් අතුරු මුහුණත සහය දක්වයි",
+    "encryption_config_saved": "සංකේතාංකන වින්‍යාසය සුරකින ලදි",
+    "encryption_server": "සේවාදායක‌‌‌‌යේ නම",
+    "encryption_server_enter": "ඔබගේ වසම් නාමය ඇතුළත් කරන්න",
+    "encryption_redirect": "ස්වයංක්‍රීයව HTTPS වෙත හරවා යවන්න",
+    "encryption_redirect_desc": "සබල කර ඇත්නම්, AdGuard Home ඔබව ස්වයංක්‍රීයව HTTP සිට HTTPS ලිපින වෙත හරවා යවනු ඇත.",
+    "encryption_https": "HTTPS කවුළුව",
+    "encryption_https_desc": "HTTPS කවුළුව වින්‍යාසගත කර ඇත්නම්, AdGuard Home පරිපාලක අතුරුමුහුණත HTTPS හරහා ප්‍රවේශ විය හැකි අතර එය '/ dns-query' ස්ථානයේ DNS-over-HTTPS ද ලබා දෙනු ඇත.",
+    "encryption_dot": "DNS-over-TLS කවුළුව",
+    "encryption_dot_desc": "මෙම කවුළුව වින්‍යාසගත කර ඇත්නම්, AdGuard Home විසින් මෙම කවුළුව හරහා DNS-over-TLS සේවාදායකයක් ක්‍රියාත්මක කරනු ඇත.",
+    "encryption_certificates": "සහතික",
+    "encryption_certificates_input": "ඔබගේ PEM-කේතාංකනය කළ සහතික පිටපත් කර මෙහි අලවන්න.",
+    "encryption_status": "තත්ත්වය",
+    "encryption_expire": "කල් ඉකුත් වීම",
+    "encryption_key": "පුද්ගලික යතුර",
+    "encryption_key_input": "ඔබගේ සහතිකය සඳහා PEM-කේතාංකනය කළ පුද්ගලික යතුර පිටපත් කර මෙහි අලවන්න.",
+    "encryption_enable": "සංකේතාංකනය සබල කරන්න (HTTPS, DNS-over-HTTPS සහ DNS-over-TLS)",
+    "encryption_enable_desc": "සංකේතාංකනය සබල කර ඇත්නම්, AdGuard Home පරිපාලක අතුරුමුහුණත HTTPS හරහා ක්‍රියා කරනු ඇති අතර DNS සේවාදායකය DNS-over-HTTPS සහ DNS-over-TLS හරහා ලැබෙන ඉල්ලීම් සඳහා සවන් දෙනු ඇත.",
+    "encryption_key_valid": "මෙය වලංගු {{type}} පුද්ගලික යතුරකි",
+    "encryption_key_invalid": "මෙය වලංගු නොවන {{type}} පුද්ගලික යතුරකි",
+    "encryption_subject": "මාතෘකාව",
+    "encryption_issuer": "නිකුත් කරන්නා",
+    "encryption_hostnames": "ධාරක නාම",
+    "encryption_reset": "සංකේතාංකන සැකසුම් යළි පිහිටුවීමට අවශ්‍ය බව ඔබට විශ්වාස ද?",
+    "topline_expiring_certificate": "ඔබගේ SSL සහතිකය කල් ඉකුත්වීමට ආසන්න වී ඇත. <0>සංකේතාංකන සැකසුම්</0> යාවත්කාල කරන්න.",
+    "topline_expired_certificate": "ඔබගේ SSL සහතිකය කල් ඉකුත් වී ඇත. <0>සංකේතාංකන සැකසුම්</0> යාවත්කාල කරන්න.",
+    "form_error_port_range": "80-65535 පරාසය‌ෙ‌හි කවුළුවක අගයක් ඇතුළත් කරන්න",
+    "form_error_port_unsafe": "මෙය අනාරක්ෂිත කවුළුවකි",
+    "form_error_equal": "සමාන නොවිය යුතුය",
+    "form_error_password": "මුරපදය නොගැලපුුුුුුණි",
+    "reset_settings": "සැකසුම් යළි පිහිටුවන්න",
+    "update_announcement": "AdGuard Home {{version}} දැන් ලබා ගත හැකිය! වැඩි විස්තර සඳහා <0>මෙහි ක්ලික් කරන්න</0>.",
+    "setup_guide": "පිහිටුවීමේ මාර්ගෝපදේශය",
+    "dns_addresses": "DNS ලිපින",
+    "dns_start": "DNS සේවාදායකය ආරම්භ වෙමින් පවතී",
+    "down": "පහත",
+    "fix": "නිරාකරණය කරන්න",
+    "dns_providers": "මෙහි තෝරා ගැනීමට <0>දන්නා DNS සපයන්නන්ගේ ලැයිස්තුවක්</0> ඇත.",
+    "update_now": "දැන් \tයාවත්කාල කරන්න",
+    "update_failed": "ස්වයංක්‍රීය යාවත්කාල කිරීම අසාර්ථක විය. අතින් යාවත්කාල කිරීමට කරුණාකර <a href='https://github.com/AdguardTeam/AdGuardHome/wiki/Getting-Started#update'>පියවර අනුගමනය කරන්න</a>.",
+    "processing_update": "කරුණාකර රැඳී සිටින්න, AdGuard Home යාවත්කාලීන වෙමින් පවතී",
+    "clients_title": "අනුග්‍රාහකයන්",
+    "clients_desc": "AdGuard Home වෙත සම්බන්ධ කර ඇති උපාංග වින්‍යාසගත කරන්න",
+    "settings_global": "ගෝලීය",
+    "settings_custom": "අභිරුචි",
+    "table_client": "අනුග්‍රාහකය",
+    "table_name": "නම",
+    "save_btn": "සුරකින්න",
+    "client_add": "අනුග්‍රාහකයක් එකතු කරන්න",
+    "client_new": "නව අනුග්‍රාහකය",
+    "client_edit": "අනුග්‍රාහකය සංස්කරණය කරන්න",
+    "client_identifier": "හඳුන්වනය",
+    "ip_address": "අ.ජා. කෙ. (IP) ලිපිනය",
+    "client_identifier_desc": "අනුග්‍රාහකයන් අ.ජා. කෙ. (IP) ලිපිනයක් හෝ මා.ප්‍ර.පා. (MAC) ලිපිනයක් මගින් හඳුනාගත හැකිය. මා.ප්‍ර.පා. හඳුන්වනයක් ලෙස  භාවිතා කළ හැක්කේ AdGuard Home ද <0>DHCP සේවාදායකයක්</0> නම් පමණක් බව කරුණාවෙන් සලකන්න. ",
+    "form_enter_ip": "අ.ජා. කෙ. (IP) ඇතුළත් කරන්න",
+    "form_enter_mac": "MAC ඇතුළත් කරන්න",
+    "form_enter_id": "හඳුන්වනය ඇතුළත් කරන්න",
+    "form_add_id": "හඳුන්වනයක් එක් කරන්න",
+    "form_client_name": "අනුග්‍රාහකයේ නම ඇතුළත් කරන්න",
+    "name": "නම",
+    "client_global_settings": "ගෝලීය සැකසුම් භාවිතා කරන්න",
+    "client_deleted": "\"{{key}}\" අනුග්‍රාහකය සාර්ථකව ඉවත් කරන ලදි",
+    "client_added": "\"{{key}}\" අනුග්‍රාහකය සාර්ථකව එකතු කරන ලදි",
+    "client_updated": "\"{{key}}\" අනුග්‍රාහකය සාර්ථකව යාවත්කාල කරන ලදි",
+    "client_confirm_delete": "\"{{key}}\" අනුග්‍රාහකය ඉවත් කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද?",
+    "list_confirm_delete": "මෙම ලැයිස්තුව ඉවත් කිරීමට අවශ්‍ය බව ඔබට විශ්වාස ද?",
+    "auto_clients_desc": "AdGuard Home භාවිතා කරන අනුග්‍රාහකයන්‌ග‌ේ දත්ත, නමුත් වින්‍යාසය තුළ ගබඩා කර නොමැති",
+    "access_title": "ප්‍රවේශවීමට සැකසුම්",
+    "access_desc": "මෙහිදී ඔබට AdGuard Home DNS සේවාදායකය සඳහා ප්‍රවේශ වී‌‌‌‌මේ නීති වින්‍යාසගත කළ හැකිය.",
+    "access_allowed_title": "අවසර ලත් අනුග්‍රාහකයන්",
+    "access_allowed_desc": "CIDR හෝ අ.ජා. කෙ. (IP) ලිපින ලැයිස්තුවක් වින්‍යාසගත කර ඇත්නම්, AdGuard Home විසින් එම අ.ජා. කෙ. ලිපින වලින් පමණක් ඉල්ලීම් පිළිගනු ඇත.",
+    "access_disallowed_title": "අවසර නොලත් අනුග්‍රාහකයන්",
+    "access_disallowed_desc": "CIDR හෝ අ.ජා. කෙ. (IP) ලිපින ලැයිස්තුවක් වින්‍යාසගත කර ඇත්නම්, AdGuard Home විසින් එම අ.ජා. කෙ. ලිපින වලින් ඉල්ලීම් අත්හරිනු ඇත.",
+    "access_blocked_title": "අවහිර කළ වසම්",
+    "access_settings_saved": "ප්‍රවේශ වීමේ සැකසුම් සාර්ථකව සුරකින ලදි",
+    "updates_checked": "යාවත්කාලීන කිරීම් සාර්ථකව පරික්ෂා කර ඇත",
+    "updates_version_equal": "AdGuard Home යාවත්කාලීනයි",
+    "check_updates_now": "යාවත්කාල කිරීම සඳහා දැන් පරීක්ෂා කරන්න",
+    "dns_privacy": "DNS රහස්‍යතා",
+    "setup_dns_privacy_1": "<0>DNS-over-TLS:</0> <1>{{address}}</1> තන්තුව භාවිතා කරයි.",
+    "setup_dns_privacy_2": "<0>DNS-over-HTTPS:</0> <1>{{address}}</1> තන්තුව භාවිතා කරයි.",
+    "setup_dns_privacy_3": "<0>සංකේතාංකන ව.නා.ප. (DNS) කෙටුම්පත් සඳහා සහය දක්වන්නේ ඇන්ඩ්‍රොයිඩ් 9 පමණක් බව කරුණාවෙන් සලකන්න. එබැවින් ඔබ වෙනත් මෙහෙයුම් පද්ධති සඳහා අතිරේක මෘදුකාංග ස්ථාපනය කළ යුතුය.</0><0> ඔබට භාවිතා කළ හැකි මෘදුකාංග ලැයිස්තුවක් පහත දැක්‌වේ.</0>",
+    "setup_dns_privacy_android_2": "<1>DNS-over-HTTPS</1> සහ <1>DNS-over-TLS</1> සඳහා <0>AdGuard for Android</0> සහය දක්වයි.",
+    "setup_dns_privacy_ios_2": "<1>DNS-over-HTTPS</1> සහ <1>DNS-over-TLS</1> පිහිටුවීම් සඳහා <0>AdGuard for iOS</0> සහය දක්වයි.",
+    "setup_dns_privacy_other_2": "<0>dnsproxy</0> දන්නා සියලුම ආරක්ෂිත DNS කෙටුම්පත් සඳහා සහය දක්වයි.",
+    "setup_dns_privacy_other_3": "<1>DNS-over-HTTPS</1> සඳහා <0>dnscrypt-පෙරකලාසිය</0> සහය දක්වයි.",
+    "setup_dns_privacy_other_4": "<1>DNS-over-HTTPS</1> සඳහා <0>මොසිල්ලා ෆයර්ෆොක්ස්</0> සහය දක්වයි.",
+    "setup_dns_notice": "ඔබට <1>DNS-over-HTTPS</1> හෝ <1>DNS-over-TLS</1> භාවිතා කිරීම සඳහා AdGuard Home සැකසුම් තුළ <0>සංකේතාංකනය වින්‍යාසගත</0> කිරීමට අවශ්‍ය වේ.",
+    "rewrite_add": "DNS නැවත ලිවීමක් එකතු කරන්න",
+    "rewrite_confirm_delete": "\"{{key}}\" සඳහා DNS නැවත ලිවීම ඉවත් කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද?",
+    "dns_rewrites": "DNS නැවත ලිවීම්",
+    "form_domain": "වසම ඇතුළත් කරන්න",
+    "form_answer": "අ.ජා. කෙ. (IP) ලිපිනය ‌හෝ වසම ඇතුළත් කරන්න ",
+    "form_error_domain_format": "වලංගු නොවන වසම් ආකෘතියකි",
+    "form_error_answer_format": "වලංගු නොවන පිළිතුරු ආකෘතියකි",
+    "configure": "වින්‍යාසගත කරන්න",
+    "main_settings": "ප්‍රධාන සැකසුම්",
+    "block_services": "විශේෂිත සේවාවන් අවහිර කරන්න",
+    "blocked_services": "අවහිර කළ සේවාවන්",
+    "blocked_services_desc": "ජනප්‍රිය අඩවි සහ සේවාවන් ඉක්මනින් අවහිර කිරීමට ඉඩ දෙයි.",
+    "blocked_services_saved": "අවහිර කළ සේවාවන් සාර්ථකව සුරකින ලදි",
+    "blocked_services_global": "ගෝලීය අවහිර කළ සේවාවන් භාවිතා කරන්න",
+    "blocked_service": "අවහිර කළ සේවාව",
+    "block_all": "සියල්ල අවහිර කරන්න",
+    "unblock_all": "සියල්ල අනවහිර කරන්න",
+    "encryption_certificate_path": "සහතිකයේ මාර්ගය",
+    "encryption_private_key_path": "පුද්ගලික යතුරෙහි මාර්ගය",
+    "encryption_certificates_source_path": "සහතික ගොනු‌ව‌ෙහි මාර්ගය සකසන්න",
+    "encryption_certificates_source_content": "සහතිකවල අන්තර්ගත අලවන්න",
+    "encryption_key_source_path": "පුද්ගලික යතුරක ගොනුවක් සකසන්න",
+    "encryption_key_source_content": "පුද්ගලික යතු‌රෙහි අන්තර්ගත අලවන්න",
+    "stats_params": "සංඛ්‍යාලේඛන වින්‍යාසය",
+    "config_successfully_saved": "වින්‍යාසය සාර්ථකව සුරකින ලදි",
+    "interval_24_hour": "පැය 24",
+    "interval_days": "{{count}} දිනය",
+    "interval_days_plural": "දින {{count}}",
+    "domain": "වසම",
+    "answer": "පිළිතුර",
+    "filter_added_successfully": "පෙරහන සාර්ථකව එකතු කරන ලදි",
+    "filter_updated": "ලැයිස්තුව සාර්ථකව යාවත්කාලීන කර ඇත",
+    "statistics_configuration": "සංඛ්‍යාලේඛන වින්‍යාසය",
+    "statistics_retention": "සංඛ්‍යාලේඛන රඳවා තබා ගැනීම",
+    "statistics_retention_desc": "ඔබ කාල පරතරය අඩු කළහොත් සමහර දත්ත නැති වනු ඇත",
+    "statistics_clear": " සංඛ්‍යාලේඛන ඉවත් කරන්න",
+    "statistics_clear_confirm": "සංඛ්‍යාලේඛන ඉවත් කිරීමට අවශ්‍ය බව ඔබට විශ්වාස ද?",
+    "statistics_retention_confirm": "සංඛ්‍යාලේඛන රඳවා තබා ගැනීම වෙනස් කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද? ඔබ කාල පරතරයෙහි අගය අඩු කළහොත් සමහර දත්ත නැති වී යනු ඇත",
+    "statistics_cleared": "සංඛ්‍යාලේඛන සාර්ථකව ඉවත් කරන ලදි",
+    "interval_hours": "පැය {{count}}",
+    "interval_hours_plural": "පැය {{count}}",
+    "filters_configuration": "පෙරහන් වින්‍යාසය",
+    "filters_enable": "පෙරහන් සබල කරන්න",
+    "filters_interval": "පෙරහන් යාවත්කාල කාල පරතරය",
+    "disabled": "අබල කර ඇත",
+    "username_label": "පරිශීලක නාමය",
+    "username_placeholder": "පරිශීලක නාමය ඇතුළත් කරන්න",
+    "password_label": "මුරපදය",
+    "password_placeholder": "මුරපදය ඇතුළත් කරන්න",
+    "sign_in": "පුරන්න",
+    "sign_out": "වරන්න",
+    "forgot_password": "මුරපදය අමතක වුණා ද?",
+    "forgot_password_desc": "ඔබගේ පරිශීලක ගිණුම සඳහා නව මුරපදයක් සෑදීමට කරුණාකර <0>මෙම පියවර</0> අනුගමනය කරන්න.",
+    "location": "ස්ථානය",
+    "orgname": "සංවිධානයේ නම",
+    "netname": "ජාල‌යේ  නම",
+    "network": "ජාලය",
+    "descr": "විස්තරය",
+    "whois": "Whois",
+    "blocked_by_response": "ප්‍රතිචාරය අන්වර්ථ නාමයක් (CNAME) හෝ අ.ජා. කෙ. (IP) මගින් අවහිර කර ඇත",
+    "try_again": "නැවත උත්සහා කරන්න",
+    "example_rewrite_domain": "මෙම වසම් නාමය සඳහා පමණක් ප්‍රතිචාර නැවත ලියන්න.",
+    "example_rewrite_wildcard": "<0>example.org</0> සහ එහි සියලුම උප වසම් සඳහා ප්‍රතිචාර නැවත ලියන්න.",
+    "disable_ipv6": "IPv6 අබල කරන්න",
+    "disable_ipv6_desc": "මෙම අංගය සක්‍රීය කර ඇත්නම්, IPv6 ලිපින සඳහා වන සියලුම DNS විමසුම් (AAAA වර්ගය) අතහැර දමනු ලැබේ.",
+    "fastest_addr": "වේගවත්ම අන්තර්ජාල කෙටුම්පත් (IP) ලිපිනය",
+    "autofix_warning_text": "ඔබ \"නිරාකරණය කරන්න\" මත ක්ලික් කළහොත්, AdGuard Home ඔබගේ පද්ධතිය AdGuard Home DNS සේවාදායකය භාවිතා කිරීමට වින්‍යාසගත කරනු ඇත.",
+    "tags_title": "හැඳුනුම් සංකේත",
+    "tags_desc": "අනුග්‍රාහකයට අනුරූප වන හැඳුනුම් සංකේත ඔබට තෝරා ගත හැකිය. පෙරහන් නීති වලට හැඳුනුම් සංකේත ඇතුළත් කළ හැකි අතර ඒවා වඩාත් නිවැරදිව යෙදීමට ඔබට ඉඩ සලසයි. <0>වැඩිදුර ඉගෙන ගන්න</0>",
+    "form_select_tags": "අනුග්‍රාහක හැඳුනුම් සංකේත",
+    "check_title": "පෙරීම පරීක්ෂා කරන්න",
+    "check": "පරීක්ෂා කරන්න",
+    "form_enter_host": "ධාරක නාමයක් ඇතුළත් කරන්න",
+    "filtered_custom_rules": "අභිරුචි පෙරීමේ නීති මගින් පෙරහන් කරන ලදි",
+    "check_ip": "අ.ජා. කෙ. (IP) ලිපින: {{ip}}",
+    "check_cname": "CNAME: {{cname}}",
+    "check_reason": "හේතුව: {{reason}}",
+    "check_rule": "නීතිය: {{rule}}",
+    "check_service": "සේවාවෙහි නම: {{service}}",
+    "check_not_found": "ඔබගේ පෙරහන් ලැයිස්තු තුළ සොයා ගත නොහැක",
+    "client_confirm_block": "{{ip}} අනුග්‍රාහකය අවහිර කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද?",
+    "client_confirm_unblock": "{{ip}} අනුග්‍රාහකය අනවහිර කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද?",
+    "client_blocked": "අනුග්‍රාහකය \"{{ip}}\" සාර්ථකව අවහිර කරන ලදි",
+    "client_unblocked": "අනුග්‍රාහකය \"{{ip}}\" සාර්ථකව අනවහිර කරන ලදි",
+    "static_ip": "ස්ථිතික අ.ජා. කෙ. (IP) ලිපිනය",
+    "static_ip_desc": "AdGuard Home යනු සේවාදායකයක් බැවින් එය නිසි ලෙස ක්‍රියා කිරීමට ස්ථිතික අන්තර්ජාල කෙටුම්පත් (IP) ලිපිනයක් අවශ්‍ය වේ. එසේ නොමැතිනම්, යම් අවස්ථාවක දී ඔබගේ මාර්ගකාරකය මෙම උපාංගයට වෙනත් අ.ජා. කෙ. ලිපිනයක් ලබා දිය හැකිය.",
+    "set_static_ip": "ස්ථිතික අ.ජා. කෙ. (IP) ලිපිනයක් සකසන්න",
+    "install_static_ok": "සුභ තොරතුරක්! ස්ථිතික අන්තර්ජාල කෙටුම්පත් (IP) ලිපිනය දැනටමත් වින්‍යාසගත කර ඇත",
+    "install_static_error": "මෙම ජාල අතුරුමුහුණත සඳහා AdGuard Home හට එය ස්වයංක්‍රීයව වින්‍යාසගත කළ නොහැක. කරුණාකර මෙය අතින් කරන්නේ කෙසේද යන්න පිළිබඳ උපදෙස් සොයා ගන්න.",
+    "install_static_configure": "ගතික අ.ජා. කෙ. (IP) ලිපිනයක් භාවිතා කරන බව අපි අනාවරණය කර ‌ග‌ෙන ඇත්තෙමු - <0>{{ip}}</0>. එය ඔබගේ ස්ථිතික ලිපිනය ලෙස භාවිතා කිරීමට අවශ්‍යද?",
+    "confirm_static_ip": "AdGuard Home ඔබේ ස්ථිතික අ.ජා. කෙ. (IP) ලිපිනය ලෙස {{ip}} වින්‍යාසගත කරනු ඇත. ඔබට ඉදිරියට යාමට අවශ්‍යද?",
+    "list_updated": "{{count}} ලැයිස්තුව යාවත්කාලීන කරන ලදි",
+    "list_updated_plural": "ලැයිස්තු {{count}} ක් යාවත්කාලීන කරන ලදි",
+    "dnssec_enable": "DNSSEC සබල කරන්න",
+    "validated_with_dnssec": "DNSSEC සමඟ තහවුරු කර ඇත",
+    "show_blocked_responses": "අවහිර කර ඇත",
+    "blocked_safebrowsing": "ආරක්ෂිත සෙවීම මගින් අවහිර කරන ලද",
+    "blocked_adult_websites": "අවහිර කළ වැඩිහිටි වෙබ් අඩවි",
+    "blocked_threats": "අවහිර කළ තර්ජන",
+    "allowed": "අවසර ලත්",
+    "filtered": "පෙරහන් කරන ලද",
+    "rewritten": "නැවත ලියන ලද",
+    "safe_search": "ආරක්ෂිත සෙවීම",
+    "blocklist": "අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුව",
+    "milliseconds_abbreviation": "මිලි තත්."
+}

client/src/__locales/sk.json

@@ -562,5 +562,6 @@
     "filter_category_regional_desc": "Zoznamy zamerané na regionálne reklamy a sledovacie servery",
     "filter_category_other_desc": "Iné blokovacie zoznamy",
     "original_response": "Pôvodná odozva",
-    "click_to_view_queries": "Kliknite pre zobrazenie dopytov"
+    "click_to_view_queries": "Kliknite pre zobrazenie dopytov",
+    "port_53_faq_link": "Port 53 je často obsadený službami \"DNSStubListener\" alebo \"systemd-resolved\". Prečítajte si <0>tento návod</0> o tom, ako to vyriešiť."
 }

client/src/__locales/sr-cs.json

@@ -562,5 +562,6 @@
     "filter_category_regional_desc": "Lista koja se usredsređuje na regionalne reklame i servere praćenja",
     "filter_category_other_desc": "Ostale liste blokiranja",
     "original_response": "Izvorni odgovor",
-    "click_to_view_queries": "Kliknite da pogledate zahteve"
+    "click_to_view_queries": "Kliknite da pogledate zahteve",
+    "port_53_faq_link": "Port 53 je najčešće zauzet od \"DNSStubListener\" ili \"systemd-resolved\" usluga. Pročitajte <0>ovo uputstvo</0> kako da to rešite."
 }

client/src/__locales/tr.json

@@ -239,7 +239,7 @@
     "rule_label": "Kural",
     "list_label": "Liste",
     "unknown_filter": "Bilinmeyen filtre {{filterId}}",
-    "install_welcome_title": "AdGuard Home'a hoşgeldiniz!",
+    "install_welcome_title": "AdGuard Home'a hoş geldiniz!",
     "install_welcome_desc": "AdGuard Home, ağ genelinde reklam ve izleyicileri engelleyen bir DNS sunucusudur. Tüm ağınızı ve tüm cihazlarınızı kontrol etmenize yarayan bir araçtır, istemci tarafında bir program kullanmanıza gerek duymaz.",
     "install_settings_title": "Yönetici Web Arayüzü",
     "install_settings_listen": "Dinleme arayüzü",

client/src/__locales/zh-tw.json

@@ -544,8 +544,8 @@
     "milliseconds_abbreviation": "ms",
     "cache_size": "快取大小",
     "cache_size_desc": "DNS 快取大小（以位元組）",
-    "cache_ttl_min_override": "覆寫最小的存活時間（TTL）",
-    "cache_ttl_max_override": "覆寫最大的存活時間（TTL）",
+    "cache_ttl_min_override": "覆寫最小的存活時間（TTL）（以秒數）",
+    "cache_ttl_max_override": "覆寫最大的存活時間（TTL）（以秒數）",
     "enter_cache_size": "輸入快取大小",
     "enter_cache_ttl_min_override": "輸入最小的存活時間（TTL）",
     "enter_cache_ttl_max_override": "輸入最大的存活時間（TTL）",

client/src/__tests__/helpers.test.js

@@ -1,4 +1,4 @@
-import { getIpMatchListStatus } from '../helpers/helpers';
+import { getIpMatchListStatus, sortIp } from '../helpers/helpers';
 import { IP_MATCH_LIST_STATUS } from '../helpers/constants';
 
 describe('getIpMatchListStatus', () => {
@@ -129,3 +129,356 @@ describe('getIpMatchListStatus', () => {
         });
     });
 });
+
+describe('sortIp', () => {
+    describe('ipv4', () => {
+        test('one octet differ', () => {
+            const arr = [
+                '127.0.2.0',
+                '127.0.3.0',
+                '127.0.1.0',
+            ];
+            const sortedArr = [
+                '127.0.1.0',
+                '127.0.2.0',
+                '127.0.3.0',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+        test('few octets differ', () => {
+            const arr = [
+                '192.168.11.10',
+                '192.168.10.0',
+                '192.168.11.11',
+                '192.168.10.10',
+                '192.168.1.10',
+                '192.168.0.1',
+                '192.168.1.0',
+                '192.168.1.1',
+                '192.168.11.0',
+                '192.168.0.10',
+                '192.168.10.11',
+                '192.168.0.11',
+                '192.168.1.11',
+                '192.168.0.0',
+                '192.168.10.1',
+                '192.168.11.1',
+            ];
+            const sortedArr = [
+                '192.168.0.0',
+                '192.168.0.1',
+                '192.168.0.10',
+                '192.168.0.11',
+                '192.168.1.0',
+                '192.168.1.1',
+                '192.168.1.10',
+                '192.168.1.11',
+                '192.168.10.0',
+                '192.168.10.1',
+                '192.168.10.10',
+                '192.168.10.11',
+                '192.168.11.0',
+                '192.168.11.1',
+                '192.168.11.10',
+                '192.168.11.11',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+
+            // Example from issue https://github.com/AdguardTeam/AdGuardHome/issues/1778#issuecomment-640937599
+            const arr2 = [
+                '192.168.2.11',
+                '192.168.3.1',
+                '192.168.2.100',
+                '192.168.2.2',
+                '192.168.2.1',
+                '192.168.2.10',
+                '192.168.2.99',
+                '192.168.2.200',
+                '192.168.2.199',
+            ];
+            const sortedArr2 = [
+                '192.168.2.1',
+                '192.168.2.2',
+                '192.168.2.10',
+                '192.168.2.11',
+                '192.168.2.99',
+                '192.168.2.100',
+                '192.168.2.199',
+                '192.168.2.200',
+                '192.168.3.1',
+            ];
+            expect(arr2.sort(sortIp)).toStrictEqual(sortedArr2);
+        });
+    });
+    describe('ipv6', () => {
+        test('only long form', () => {
+            const arr = [
+                '2001:db8:11a3:9d7:0:0:0:2',
+                '2001:db8:11a3:9d7:0:0:0:3',
+                '2001:db8:11a3:9d7:0:0:0:1',
+            ];
+            const sortedArr = [
+                '2001:db8:11a3:9d7:0:0:0:1',
+                '2001:db8:11a3:9d7:0:0:0:2',
+                '2001:db8:11a3:9d7:0:0:0:3',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+        test('only short form', () => {
+            const arr = [
+                '2001:db8::',
+                '2001:db7::',
+                '2001:db9::',
+            ];
+            const sortedArr = [
+                '2001:db7::',
+                '2001:db8::',
+                '2001:db9::',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+        test('long and short forms', () => {
+            const arr = [
+                '2001:db8::',
+                '2001:db7:11a3:9d7:0:0:0:2',
+                '2001:db6:11a3:9d7:0:0:0:1',
+                '2001:db6::',
+                '2001:db7:11a3:9d7:0:0:0:1',
+                '2001:db7::',
+            ];
+            const sortedArr = [
+                '2001:db6::',
+                '2001:db6:11a3:9d7:0:0:0:1',
+                '2001:db7::',
+                '2001:db7:11a3:9d7:0:0:0:1',
+                '2001:db7:11a3:9d7:0:0:0:2',
+                '2001:db8::',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+    });
+    describe('ipv4 and ipv6', () => {
+        test('ipv6 long form', () => {
+            const arr = [
+                '127.0.0.3',
+                '2001:db8:11a3:9d7:0:0:0:1',
+                '2001:db8:11a3:9d7:0:0:0:3',
+                '127.0.0.1',
+                '2001:db8:11a3:9d7:0:0:0:2',
+                '127.0.0.2',
+            ];
+            const sortedArr = [
+                '127.0.0.1',
+                '127.0.0.2',
+                '127.0.0.3',
+                '2001:db8:11a3:9d7:0:0:0:1',
+                '2001:db8:11a3:9d7:0:0:0:2',
+                '2001:db8:11a3:9d7:0:0:0:3',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+        test('ipv6 short form', () => {
+            const arr = [
+                '2001:db8:11a3:9d7::1',
+                '127.0.0.3',
+                '2001:db8:11a3:9d7::3',
+                '127.0.0.1',
+                '2001:db8:11a3:9d7::2',
+                '127.0.0.2',
+            ];
+            const sortedArr = [
+                '127.0.0.1',
+                '127.0.0.2',
+                '127.0.0.3',
+                '2001:db8:11a3:9d7::1',
+                '2001:db8:11a3:9d7::2',
+                '2001:db8:11a3:9d7::3',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+        test('ipv6 long and short forms', () => {
+            const arr = [
+                '2001:db8:11a3:9d7::1',
+                '127.0.0.3',
+                '2001:db8:11a3:9d7:0:0:0:2',
+                '127.0.0.1',
+                '2001:db8:11a3:9d7::3',
+                '127.0.0.2',
+            ];
+            const sortedArr = [
+                '127.0.0.1',
+                '127.0.0.2',
+                '127.0.0.3',
+                '2001:db8:11a3:9d7::1',
+                '2001:db8:11a3:9d7:0:0:0:2',
+                '2001:db8:11a3:9d7::3',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+        test('always put ipv4 before ipv6', () => {
+            const arr = [
+                '::1',
+                '0.0.0.2',
+                '127.0.0.1',
+                '::2',
+                '2001:db8:11a3:9d7:0:0:0:2',
+                '0.0.0.1',
+                '2001:db8:11a3:9d7::1',
+            ];
+            const sortedArr = [
+                '0.0.0.1',
+                '0.0.0.2',
+                '127.0.0.1',
+                '::1',
+                '::2',
+                '2001:db8:11a3:9d7::1',
+                '2001:db8:11a3:9d7:0:0:0:2',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+    });
+    describe('cidr', () => {
+        test('only ipv4 cidr', () => {
+            const arr = [
+                '192.168.0.1/9',
+                '192.168.0.1/7',
+                '192.168.0.1/8',
+            ];
+            const sortedArr = [
+                '192.168.0.1/7',
+                '192.168.0.1/8',
+                '192.168.0.1/9',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+        test('ipv4 and cidr ipv4', () => {
+            const arr = [
+                '192.168.0.1/9',
+                '192.168.0.1',
+                '192.168.0.1/32',
+                '192.168.0.1/7',
+                '192.168.0.1/8',
+            ];
+            const sortedArr = [
+                '192.168.0.1/7',
+                '192.168.0.1/8',
+                '192.168.0.1/9',
+                '192.168.0.1/32',
+                '192.168.0.1',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+        test('only ipv6 cidr', () => {
+            const arr = [
+                '2001:db8:11a3:9d7::1/32',
+                '2001:db8:11a3:9d7::1/64',
+                '2001:db8:11a3:9d7::1/128',
+                '2001:db8:11a3:9d7::1/24',
+            ];
+            const sortedArr = [
+                '2001:db8:11a3:9d7::1/24',
+                '2001:db8:11a3:9d7::1/32',
+                '2001:db8:11a3:9d7::1/64',
+                '2001:db8:11a3:9d7::1/128',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+        test('ipv6 and cidr ipv6', () => {
+            const arr = [
+                '2001:db8:11a3:9d7::1/32',
+                '2001:db8:11a3:9d7::1',
+                '2001:db8:11a3:9d7::1/64',
+                '2001:db8:11a3:9d7::1/128',
+                '2001:db8:11a3:9d7::1/24',
+            ];
+            const sortedArr = [
+                '2001:db8:11a3:9d7::1/24',
+                '2001:db8:11a3:9d7::1/32',
+                '2001:db8:11a3:9d7::1/64',
+                '2001:db8:11a3:9d7::1/128',
+                '2001:db8:11a3:9d7::1',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+    });
+    describe('invalid input', () => {
+        const originalError = console.error;
+
+        beforeEach(() => {
+            console.error = jest.fn();
+        });
+
+        afterEach(() => {
+            expect(console.error).toHaveBeenCalled();
+            console.error = originalError;
+        });
+
+        test('invalid strings', () => {
+            const arr = ['invalid ip', 'invalid cidr'];
+            expect(arr.sort(sortIp)).toStrictEqual(arr);
+        });
+        test('invalid ip', () => {
+            const arr = ['127.0.0.2.', '.127.0.0.1.', '.2001:db8:11a3:9d7:0:0:0:0'];
+            expect(arr.sort(sortIp)).toStrictEqual(arr);
+        });
+        test('invalid cidr', () => {
+            const arr = ['127.0.0.2/33', '2001:db8:11a3:9d7:0:0:0:0/129'];
+            expect(arr.sort(sortIp)).toStrictEqual(arr);
+        });
+        test('valid and invalid ip', () => {
+            const arr = ['127.0.0.4.', '127.0.0.1', '.127.0.0.3', '127.0.0.2'];
+            expect(arr.sort(sortIp)).toStrictEqual(arr);
+        });
+    });
+    describe('mixed', () => {
+        test('ipv4, ipv6 in short and long forms and cidr', () => {
+            const arr = [
+                '2001:db8:11a3:9d7:0:0:0:1/32',
+                '192.168.1.2',
+                '127.0.0.2',
+                '2001:db8:11a3:9d7::1/128',
+                '2001:db8:11a3:9d7:0:0:0:1',
+                '127.0.0.1/12',
+                '192.168.1.1',
+                '2001:db8::/32',
+                '2001:db8:11a3:9d7::1/24',
+                '192.168.1.2/12',
+                '2001:db7::/32',
+                '127.0.0.1',
+                '2001:db8:11a3:9d7:0:0:0:2',
+                '192.168.1.1/24',
+                '2001:db7::/64',
+                '2001:db7::',
+                '2001:db8::',
+                '2001:db8:11a3:9d7:0:0:0:1/128',
+                '192.168.1.1/12',
+                '127.0.0.1/32',
+                '::1',
+            ];
+            const sortedArr = [
+                '127.0.0.1/12',
+                '127.0.0.1/32',
+                '127.0.0.1',
+                '127.0.0.2',
+                '192.168.1.1/12',
+                '192.168.1.1/24',
+                '192.168.1.1',
+                '192.168.1.2/12',
+                '192.168.1.2',
+                '::1',
+                '2001:db7::/32',
+                '2001:db7::/64',
+                '2001:db7::',
+                '2001:db8::/32',
+                '2001:db8::',
+                '2001:db8:11a3:9d7::1/24',
+                '2001:db8:11a3:9d7:0:0:0:1/32',
+                '2001:db8:11a3:9d7::1/128',
+                '2001:db8:11a3:9d7:0:0:0:1/128',
+                '2001:db8:11a3:9d7:0:0:0:1',
+                '2001:db8:11a3:9d7:0:0:0:2',
+            ];
+            expect(arr.sort(sortIp)).toStrictEqual(sortedArr);
+        });
+    });
+});

client/src/actions/index.js

@@ -3,7 +3,9 @@ import i18next from 'i18next';
 import axios from 'axios';
 
 import { splitByNewLine, sortClients } from '../helpers/helpers';
-import { CHECK_TIMEOUT, SETTINGS_NAMES } from '../helpers/constants';
+import {
+    CHECK_TIMEOUT, STATUS_RESPONSE, SETTINGS_NAMES, FORM_NAME,
+} from '../helpers/constants';
 import { areEqualVersions } from '../helpers/version';
 import { getTlsStatus } from './encryption';
 import apiClient from '../api/Api';
@@ -148,7 +150,7 @@ const checkStatus = async (handleRequestSuccess, handleRequestError, attempts =
     const rmTimeout = (t) => t && clearTimeout(t);
 
     try {
-        const response = await axios.get('control/status');
+        const response = await axios.get(`${apiClient.baseUrl}/status`);
         rmTimeout(timeout);
         if (response?.status === 200) {
             handleRequestSuccess(response);
@@ -342,6 +344,8 @@ export const getDhcpStatus = () => async (dispatch) => {
     dispatch(getDhcpStatusRequest());
     try {
         const status = await apiClient.getDhcpStatus();
+        const globalStatus = await apiClient.getGlobalStatus();
+        status.dhcp_available = globalStatus.dhcp_available;
         dispatch(getDhcpStatusSuccess(status));
     } catch (error) {
         dispatch(addErrorToast({ error }));
@@ -368,11 +372,69 @@ export const findActiveDhcpRequest = createAction('FIND_ACTIVE_DHCP_REQUEST');
 export const findActiveDhcpSuccess = createAction('FIND_ACTIVE_DHCP_SUCCESS');
 export const findActiveDhcpFailure = createAction('FIND_ACTIVE_DHCP_FAILURE');
 
-export const findActiveDhcp = (name) => async (dispatch) => {
+export const findActiveDhcp = (name) => async (dispatch, getState) => {
     dispatch(findActiveDhcpRequest());
     try {
         const activeDhcp = await apiClient.findActiveDhcp(name);
         dispatch(findActiveDhcpSuccess(activeDhcp));
+        const { check, interface_name, interfaces } = getState().dhcp;
+        const selectedInterface = getState().form[FORM_NAME.DHCP_INTERFACES].values.interface_name;
+        const v4 = check?.v4 ?? { static_ip: {}, other_server: {} };
+        const v6 = check?.v6 ?? { other_server: {} };
+
+        let isError = false;
+        let isStaticIPError = false;
+
+        const hasV4Interface = !!interfaces[selectedInterface]?.ipv4_addresses;
+        const hasV6Interface = !!interfaces[selectedInterface]?.ipv6_addresses;
+
+        if (hasV4Interface && v4.other_server.found === STATUS_RESPONSE.ERROR) {
+            isError = true;
+            if (v4.other_server.error) {
+                dispatch(addErrorToast({ error: v4.other_server.error }));
+            }
+        }
+
+        if (hasV6Interface && v6.other_server.found === STATUS_RESPONSE.ERROR) {
+            isError = true;
+            if (v6.other_server.error) {
+                dispatch(addErrorToast({ error: v6.other_server.error }));
+            }
+        }
+
+        if (hasV4Interface && v4.static_ip.static === STATUS_RESPONSE.ERROR) {
+            isStaticIPError = true;
+            dispatch(addErrorToast({ error: 'dhcp_static_ip_error' }));
+        }
+
+
+        if (isError) {
+            dispatch(addErrorToast({ error: 'dhcp_error' }));
+        }
+
+        if (isStaticIPError || isError) {
+            // No need to proceed if there was an error discovering DHCP server
+            return;
+        }
+
+        if ((hasV4Interface && v4.other_server.found === STATUS_RESPONSE.YES)
+                || (hasV6Interface && v6.other_server.found === STATUS_RESPONSE.YES)) {
+            dispatch(addErrorToast({ error: 'dhcp_found' }));
+        } else if (hasV4Interface && v4.static_ip.static === STATUS_RESPONSE.NO
+                && v4.static_ip.ip
+                && interface_name) {
+            const warning = i18next.t('dhcp_dynamic_ip_found', {
+                interfaceName: interface_name,
+                ipAddress: v4.static_ip.ip,
+                interpolation: {
+                    prefix: '<0>{{',
+                    suffix: '}}</0>',
+                },
+            });
+            dispatch(addErrorToast({ error: warning }));
+        } else {
+            dispatch(addSuccessToast('dhcp_not_found'));
+        }
     } catch (error) {
         dispatch(addErrorToast({ error }));
         dispatch(findActiveDhcpFailure());
@@ -383,14 +445,11 @@ export const setDhcpConfigRequest = createAction('SET_DHCP_CONFIG_REQUEST');
 export const setDhcpConfigSuccess = createAction('SET_DHCP_CONFIG_SUCCESS');
 export const setDhcpConfigFailure = createAction('SET_DHCP_CONFIG_FAILURE');
 
-export const setDhcpConfig = (values) => async (dispatch, getState) => {
-    const { config } = getState().dhcp;
-    const updatedConfig = { ...config, ...values };
+export const setDhcpConfig = (values) => async (dispatch) => {
     dispatch(setDhcpConfigRequest());
-    dispatch(findActiveDhcp(values.interface_name));
     try {
-        await apiClient.setDhcpConfig(updatedConfig);
-        dispatch(setDhcpConfigSuccess(updatedConfig));
+        await apiClient.setDhcpConfig(values);
+        dispatch(setDhcpConfigSuccess(values));
         dispatch(addSuccessToast('dhcp_config_saved'));
     } catch (error) {
         dispatch(addErrorToast({ error }));
@@ -416,7 +475,6 @@ export const toggleDhcp = (values) => async (dispatch) => {
             enabled: true,
         };
         successMessage = 'enabled_dhcp';
-        dispatch(findActiveDhcp(values.interface_name));
     }
 
     try {

client/src/api/Api.js

@@ -2,9 +2,10 @@ import axios from 'axios';
 
 import { getPathWithQueryString } from '../helpers/helpers';
 import { R_PATH_LAST_PART } from '../helpers/constants';
+import { BASE_URL } from '../../constants';
 
 class Api {
-    baseUrl = 'control';
+    baseUrl = BASE_URL;
 
     async makeRequest(path, method = 'POST', config) {
         try {
@@ -26,12 +27,12 @@ class Api {
 
                 throw new Error(`${errorPath} | ${error.response.data} | ${error.response.status}`);
             }
-            throw new Error(`${errorPath} | ${error.message ? error.message : error}`);
+            throw new Error(`${errorPath} | ${error.message || error}`);
         }
     }
 
     // Global methods
-    GLOBAL_STATUS = { path: 'status', method: 'GET' };
+    GLOBAL_STATUS = { path: 'status', method: 'GET' }
 
     GLOBAL_TEST_UPSTREAM_DNS = { path: 'test_upstream_dns', method: 'POST' };
 

client/src/components/App/index.css

@@ -28,10 +28,6 @@ body {
 }
 
 @media screen and (max-width: 992px) {
-    .container {
-        padding: 0 !important;
-    }
-
     .container--wrap {
         min-height: calc(100vh);
     }
@@ -46,13 +42,6 @@ body {
     background: linear-gradient(45deg, rgba(99, 125, 120, 1) 0%, rgba(88, 177, 101, 1) 100%);
 }
 
-@media (max-width: 575px) {
-    .container {
-        padding-right: 0;
-        padding-left: 0;
-    }
-}
-
 .modal-body--medium {
     max-height: 20rem;
     overflow-y: scroll;
@@ -69,3 +58,11 @@ body {
 .mw-75 {
     max-width: 75% !important;
 }
+
+.cursor--not-allowed {
+    cursor: not-allowed;
+}
+
+.select--no-warning {
+    margin-bottom: 1.375rem;
+}

client/src/components/App/index.js

@@ -1,30 +1,16 @@
-import React, { Component, Fragment } from 'react';
+import React, { useEffect } from 'react';
 import { HashRouter, Route } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 import LoadingBar from 'react-redux-loading-bar';
+import { hot } from 'react-hot-loader/root';
 
 import 'react-table/react-table.css';
 import '../ui/Tabler.css';
 import '../ui/ReactTable.css';
 import './index.css';
 
-import Header from '../../containers/Header';
-import Dashboard from '../../containers/Dashboard';
-import Settings from '../../containers/Settings';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
-import CustomRules from '../../containers/CustomRules';
-import DnsBlocklist from '../../containers/DnsBlocklist';
-import DnsAllowlist from '../../containers/DnsAllowlist';
-import DnsRewrites from '../../containers/DnsRewrites';
-
-import Dns from '../../containers/Dns';
-import Encryption from '../../containers/Encryption';
-import Dhcp from '../../containers/Dhcp';
-import Clients from '../../containers/Clients';
-
-import Logs from '../../containers/Logs';
-import SetupGuide from '../../containers/SetupGuide';
+import propTypes from 'prop-types';
 import Toasts from '../Toasts';
 import Footer from '../ui/Footer';
 import Status from '../ui/Status';
@@ -35,31 +21,108 @@ import Icons from '../ui/Icons';
 import i18n from '../../i18n';
 import Loading from '../ui/Loading';
 import { FILTERS_URLS, MENU_URLS, SETTINGS_URLS } from '../../helpers/constants';
-import Services from '../Filters/Services';
 import { getLogsUrlParams, setHtmlLangAttr } from '../../helpers/helpers';
+import Header from '../Header';
+import { changeLanguage, getDnsStatus } from '../../actions';
 
-class App extends Component {
-    componentDidMount() {
-        this.props.getDnsStatus();
-    }
+import Dashboard from '../../containers/Dashboard';
+import Logs from '../../containers/Logs';
+import SetupGuide from '../../containers/SetupGuide';
+import Settings from '../../containers/Settings';
+import Dns from '../../containers/Dns';
+import Encryption from '../../containers/Encryption';
+import Dhcp from '../Settings/Dhcp';
+import Clients from '../../containers/Clients';
+import DnsBlocklist from '../../containers/DnsBlocklist';
+import DnsAllowlist from '../../containers/DnsAllowlist';
+import DnsRewrites from '../../containers/DnsRewrites';
+import CustomRules from '../../containers/CustomRules';
+import Services from '../Filters/Services';
 
-    componentDidUpdate(prevProps) {
-        if (this.props.dashboard.language !== prevProps.dashboard.language) {
-            this.setLanguage();
-        }
-    }
 
-    reloadPage = () => {
-        window.location.reload();
-    };
+const ROUTES = [
+    {
+        path: MENU_URLS.root,
+        component: Dashboard,
+        exact: true,
+    },
+    {
+        path: [`${MENU_URLS.logs}${getLogsUrlParams(':search?', ':response_status?')}`, MENU_URLS.logs],
+        component: Logs,
+    },
+    {
+        path: MENU_URLS.guide,
+        component: SetupGuide,
+    },
+    {
+        path: SETTINGS_URLS.settings,
+        component: Settings,
+    },
+    {
+        path: SETTINGS_URLS.dns,
+        component: Dns,
+    },
+    {
+        path: SETTINGS_URLS.encryption,
+        component: Encryption,
+    },
+    {
+        path: SETTINGS_URLS.dhcp,
+        component: Dhcp,
+    },
+    {
+        path: SETTINGS_URLS.clients,
+        component: Clients,
+    },
+    {
+        path: FILTERS_URLS.dns_blocklists,
+        component: DnsBlocklist,
+    },
+    {
+        path: FILTERS_URLS.dns_allowlists,
+        component: DnsAllowlist,
+    },
+    {
+        path: FILTERS_URLS.dns_rewrites,
+        component: DnsRewrites,
+    },
+    {
+        path: FILTERS_URLS.custom_rules,
+        component: CustomRules,
+    },
+    {
+        path: FILTERS_URLS.blocked_services,
+        component: Services,
+    },
+];
 
-    handleUpdate = () => {
-        this.props.getUpdate();
-    };
+const renderRoute = ({ path, component, exact }, idx) => <Route
+        key={idx}
+        exact={exact}
+        path={path}
+        component={component}
+/>;
 
-    setLanguage = () => {
-        const { processing, language } = this.props.dashboard;
+const App = () => {
+    const dispatch = useDispatch();
+    const {
+        language,
+        isCoreRunning,
+        isUpdateAvailable,
+        processing,
+    } = useSelector((state) => state.dashboard, shallowEqual);
 
+    const { processing: processingEncryption } = useSelector((
+        state,
+    ) => state.encryption, shallowEqual);
+
+    const updateAvailable = isCoreRunning && isUpdateAvailable;
+
+    useEffect(() => {
+        dispatch(getDnsStatus());
+    }, []);
+
+    const setLanguage = () => {
         if (!processing) {
             if (language) {
                 i18n.changeLanguage(language);
@@ -68,93 +131,46 @@ class App extends Component {
         }
 
         i18n.on('languageChanged', (lang) => {
-            this.props.changeLanguage(lang);
+            dispatch(changeLanguage(lang));
         });
     };
 
-    render() {
-        const { dashboard, encryption, getVersion } = this.props;
-        const updateAvailable = dashboard.isCoreRunning && dashboard.isUpdateAvailable;
+    useEffect(() => {
+        setLanguage();
+    }, [language]);
 
-        return (
-            <HashRouter hashType="noslash">
-                <Fragment>
-                    {updateAvailable && (
-                        <Fragment>
-                            <UpdateTopline
-                                url={dashboard.announcementUrl}
-                                version={dashboard.newVersion}
-                                canAutoUpdate={dashboard.canAutoUpdate}
-                                getUpdate={this.handleUpdate}
-                                processingUpdate={dashboard.processingUpdate}
-                            />
-                            <UpdateOverlay processingUpdate={dashboard.processingUpdate} />
-                        </Fragment>
-                    )}
-                    {!encryption.processing && (
-                        <EncryptionTopline notAfter={encryption.not_after} />
-                    )}
-                    <LoadingBar className="loading-bar" updateTime={1000} />
-                    <Route component={Header} />
-                    <div className="container container--wrap pb-5">
-                        {dashboard.processing && <Loading />}
-                        {!dashboard.isCoreRunning && (
-                            <div className="row row-cards">
-                                <div className="col-lg-12">
-                                    <Status reloadPage={this.reloadPage}
-                                            message="dns_start"
-                                    />
-                                    <Loading />
-                                </div>
-                            </div>
-                        )}
-                        {!dashboard.processing && dashboard.isCoreRunning && (
-                            <>
-                                <Route path={MENU_URLS.root} exact component={Dashboard} />
-                                <Route
-                                    path={[`${MENU_URLS.logs}${getLogsUrlParams(':search?', ':response_status?')}`, MENU_URLS.logs]}
-                                    component={Logs} />
-                                <Route path={MENU_URLS.guide} component={SetupGuide} />
-                                <Route path={SETTINGS_URLS.settings} component={Settings} />
-                                <Route path={SETTINGS_URLS.dns} component={Dns} />
-                                <Route path={SETTINGS_URLS.encryption} component={Encryption} />
-                                <Route path={SETTINGS_URLS.dhcp} component={Dhcp} />
-                                <Route path={SETTINGS_URLS.clients} component={Clients} />
-                                <Route path={FILTERS_URLS.dns_blocklists}
-                                       component={DnsBlocklist} />
-                                <Route path={FILTERS_URLS.dns_allowlists}
-                                       component={DnsAllowlist} />
-                                <Route path={FILTERS_URLS.dns_rewrites} component={DnsRewrites} />
-                                <Route path={FILTERS_URLS.custom_rules} component={CustomRules} />
-                                <Route path={FILTERS_URLS.blocked_services} component={Services} />
-                            </>
-                        )}
-                    </div>
-                    <Footer
-                        dnsVersion={dashboard.dnsVersion}
-                        dnsPort={dashboard.dnsPort}
-                        processingVersion={dashboard.processingVersion}
-                        getVersion={getVersion}
-                        checkUpdateFlag={dashboard.checkUpdateFlag}
-                    />
-                    <Toasts />
-                    <Icons />
-                </Fragment>
-            </HashRouter>
-        );
-    }
-}
+    const reloadPage = () => {
+        window.location.reload();
+    };
 
-App.propTypes = {
-    getDnsStatus: PropTypes.func,
-    getUpdate: PropTypes.func,
-    enableDns: PropTypes.func,
-    dashboard: PropTypes.object,
-    isCoreRunning: PropTypes.bool,
-    error: PropTypes.string,
-    changeLanguage: PropTypes.func,
-    encryption: PropTypes.object,
-    getVersion: PropTypes.func,
+    return <HashRouter hashType="noslash">
+        {updateAvailable && <>
+            <UpdateTopline />
+            <UpdateOverlay />
+        </>}
+        {!processingEncryption && <EncryptionTopline />}
+        <LoadingBar className="loading-bar" updateTime={1000} />
+        <Header />
+        <div className="container container--wrap pb-5">
+            {processing && <Loading />}
+            {!isCoreRunning && <div className="row row-cards">
+                <div className="col-lg-12">
+                    <Status reloadPage={reloadPage} message="dns_start" />
+                    <Loading />
+                </div>
+            </div>}
+            {!processing && isCoreRunning && ROUTES.map(renderRoute)}
+        </div>
+        <Footer />
+        <Toasts />
+        <Icons />
+    </HashRouter>;
 };
 
-export default withTranslation()(App);
+renderRoute.propTypes = {
+    path: propTypes.oneOfType([propTypes.string, propTypes.arrayOf(propTypes.string)]).isRequired,
+    component: propTypes.element.isRequired,
+    exact: propTypes.bool,
+};
+
+export default hot(App);

client/src/components/Dashboard/Clients.js

@@ -6,7 +6,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
 
-import { getPercent, getIpMatchListStatus } from '../../helpers/helpers';
+import { getPercent, getIpMatchListStatus, sortIp } from '../../helpers/helpers';
 import { IP_MATCH_LIST_STATUS, STATUS_COLORS } from '../../helpers/constants';
 import { formatClientCell } from '../../helpers/formatClientCell';
 
@@ -99,7 +99,7 @@ const Clients = ({
                 {
                     Header: 'IP',
                     accessor: 'ip',
-                    sortMethod: (a, b) => parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
+                    sortMethod: sortIp,
                     Cell: clientCell(t, toggleClientStatus, processingAccessSet, disallowedClients),
                 },
                 {

client/src/components/Dashboard/Counters.js

@@ -21,7 +21,7 @@ const Row = ({
             <Trans components={translationComponents}>{label}</Trans>
             <Tooltip content={tooltipTitle} placement="top"
                      className="tooltip-container tooltip-custom--narrow text-center">
-                <svg className="icons icon--20 icon--lightgray ml-1">
+                <svg className="icons icon--20 icon--lightgray ml-2">
                     <use xlinkHref="#question" />
                 </svg>
             </Tooltip>

client/src/components/Dashboard/index.js

@@ -1,6 +1,6 @@
-import React, { Component, Fragment } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import Statistics from './Statistics';
 import Counters from './Counters';
@@ -13,144 +13,141 @@ import Loading from '../ui/Loading';
 import { BLOCK_ACTIONS } from '../../helpers/constants';
 import './Dashboard.css';
 
-class Dashboard extends Component {
-    componentDidMount() {
-        this.getAllStats();
-    }
+const Dashboard = ({
+    getAccessList,
+    getStats,
+    getStatsConfig,
+    dashboard,
+    toggleProtection,
+    toggleClientBlock,
+    stats,
+    access,
+}) => {
+    const { t } = useTranslation();
 
-    getAllStats = () => {
-        this.props.getAccessList();
-        this.props.getStats();
-        this.props.getStatsConfig();
+    const getAllStats = () => {
+        getAccessList();
+        getStats();
+        getStatsConfig();
     };
 
-    getToggleFilteringButton = () => {
-        const { protectionEnabled, processingProtection } = this.props.dashboard;
+    useEffect(() => {
+        getAllStats();
+    }, []);
+
+    const getToggleFilteringButton = () => {
+        const { protectionEnabled, processingProtection } = dashboard;
         const buttonText = protectionEnabled ? 'disable_protection' : 'enable_protection';
         const buttonClass = protectionEnabled ? 'btn-gray' : 'btn-success';
 
-        return (
-            <button
+        return <button
                 type="button"
                 className={`btn btn-sm mr-2 ${buttonClass}`}
-                onClick={() => this.props.toggleProtection(protectionEnabled)}
+                onClick={() => toggleProtection(protectionEnabled)}
                 disabled={processingProtection}
-            >
-                <Trans>{buttonText}</Trans>
-            </button>
-        );
+        >
+            <Trans>{buttonText}</Trans>
+        </button>;
     };
 
-    toggleClientStatus = (type, ip) => {
+    const toggleClientStatus = (type, ip) => {
         const confirmMessage = type === BLOCK_ACTIONS.BLOCK ? 'client_confirm_block' : 'client_confirm_unblock';
 
-        if (window.confirm(this.props.t(confirmMessage, { ip }))) {
-            this.props.toggleClientBlock(type, ip);
+        if (window.confirm(t(confirmMessage, { ip }))) {
+            toggleClientBlock(type, ip);
         }
     };
 
-    render() {
-        const {
-            dashboard, stats, access, t,
-        } = this.props;
-        const statsProcessing = stats.processingStats
+    const refreshButton = <button
+            type="button"
+            className="btn btn-icon btn-outline-primary btn-sm"
+            onClick={() => getAllStats()}
+    >
+        <svg className="icons">
+            <use xlinkHref="#refresh" />
+        </svg>
+    </button>;
+
+    const subtitle = stats.interval === 1
+        ? t('for_last_24_hours')
+        : t('for_last_days', { count: stats.interval });
+
+    const refreshFullButton = <button
+            type="button"
+            className="btn btn-outline-primary btn-sm"
+            onClick={() => getAllStats()}
+    >
+        <Trans>refresh_statics</Trans>
+    </button>;
+
+    const statsProcessing = stats.processingStats
             || stats.processingGetConfig
             || access.processing;
 
-        const subtitle = stats.interval === 1
-            ? t('for_last_24_hours')
-            : t('for_last_days', { count: stats.interval });
+    return <>
+        <PageTitle title={t('dashboard')}>
+            <div className="page-title__actions">
+                {getToggleFilteringButton()}
+                {refreshFullButton}
+            </div>
+        </PageTitle>
+        {statsProcessing && <Loading />}
+        {!statsProcessing && <div className="row row-cards">
+            <div className="col-lg-12">
+                <Statistics
+                        interval={stats.interval}
+                        dnsQueries={stats.dnsQueries}
+                        blockedFiltering={stats.blockedFiltering}
+                        replacedSafebrowsing={stats.replacedSafebrowsing}
+                        replacedParental={stats.replacedParental}
+                        numDnsQueries={stats.numDnsQueries}
+                        numBlockedFiltering={stats.numBlockedFiltering}
+                        numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
+                        numReplacedParental={stats.numReplacedParental}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <Counters
+                        subtitle={subtitle}
 
-        const refreshFullButton = (
-            <button
-                type="button"
-                className="btn btn-outline-primary btn-sm"
-                onClick={() => this.getAllStats()}
-            >
-                <Trans>refresh_statics</Trans>
-            </button>
-        );
-
-        const refreshButton = (
-            <button
-                type="button"
-                className="btn btn-icon btn-outline-primary btn-sm"
-                onClick={() => this.getAllStats()}
-            >
-                <svg className="icons">
-                    <use xlinkHref="#refresh" />
-                </svg>
-            </button>
-        );
-
-        return (
-            <Fragment>
-                <PageTitle title={t('dashboard')}>
-                    <div className="page-title__actions">
-                        {this.getToggleFilteringButton()}
-                        {refreshFullButton}
-                    </div>
-                </PageTitle>
-                {statsProcessing && <Loading />}
-                {!statsProcessing && (
-                    <div className="row row-cards">
-                        <div className="col-lg-12">
-                            <Statistics
-                                interval={stats.interval}
-                                dnsQueries={stats.dnsQueries}
-                                blockedFiltering={stats.blockedFiltering}
-                                replacedSafebrowsing={stats.replacedSafebrowsing}
-                                replacedParental={stats.replacedParental}
-                                numDnsQueries={stats.numDnsQueries}
-                                numBlockedFiltering={stats.numBlockedFiltering}
-                                numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
-                                numReplacedParental={stats.numReplacedParental}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <Counters
-                                subtitle={subtitle}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <Clients
-                                subtitle={subtitle}
-                                dnsQueries={stats.numDnsQueries}
-                                topClients={stats.topClients}
-                                clients={dashboard.clients}
-                                autoClients={dashboard.autoClients}
-                                refreshButton={refreshButton}
-                                toggleClientStatus={this.toggleClientStatus}
-                                processingAccessSet={access.processingSet}
-                                disallowedClients={access.disallowed_clients}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <QueriedDomains
-                                subtitle={subtitle}
-                                dnsQueries={stats.numDnsQueries}
-                                topQueriedDomains={stats.topQueriedDomains}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <BlockedDomains
-                                subtitle={subtitle}
-                                topBlockedDomains={stats.topBlockedDomains}
-                                blockedFiltering={stats.numBlockedFiltering}
-                                replacedSafebrowsing={stats.numReplacedSafebrowsing}
-                                replacedParental={stats.numReplacedParental}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                    </div>
-                )}
-            </Fragment>
-        );
-    }
-}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <Clients
+                        subtitle={subtitle}
+                        dnsQueries={stats.numDnsQueries}
+                        topClients={stats.topClients}
+                        clients={dashboard.clients}
+                        autoClients={dashboard.autoClients}
+                        refreshButton={refreshButton}
+                        toggleClientStatus={toggleClientStatus}
+                        processingAccessSet={access.processingSet}
+                        disallowedClients={access.disallowed_clients}
+                />
+            </div>
+            <div className="col-lg-6">
+                <QueriedDomains
+                        subtitle={subtitle}
+                        dnsQueries={stats.numDnsQueries}
+                        topQueriedDomains={stats.topQueriedDomains}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <BlockedDomains
+                        subtitle={subtitle}
+                        topBlockedDomains={stats.topBlockedDomains}
+                        blockedFiltering={stats.numBlockedFiltering}
+                        replacedSafebrowsing={stats.numReplacedSafebrowsing}
+                        replacedParental={stats.numReplacedParental}
+                        refreshButton={refreshButton}
+                />
+            </div>
+        </div>}
+    </>;
+};
 
 Dashboard.propTypes = {
     dashboard: PropTypes.object.isRequired,
@@ -160,9 +157,8 @@ Dashboard.propTypes = {
     getStatsConfig: PropTypes.func.isRequired,
     toggleProtection: PropTypes.func.isRequired,
     getClients: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
     toggleClientBlock: PropTypes.func.isRequired,
     getAccessList: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(Dashboard);
+export default Dashboard;

client/src/components/Filters/Form.js

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 import classNames from 'classnames';
 import { validatePath, validateRequiredValue } from '../../helpers/validators';
-import { renderInputField, renderSelectField } from '../../helpers/form';
+import { renderCheckboxField, renderInputField } from '../../helpers/form';
 import { MODAL_OPEN_TIMEOUT, MODAL_TYPE, FORM_NAME } from '../../helpers/constants';
 
 const getIconsData = (homepage, source) => ([
@@ -60,7 +60,7 @@ const renderFilters = ({ categories, filters }, selectedSources, t) => Object.ke
                     <Field
                         name={`${filter.id}`}
                         type="checkbox"
-                        component={renderSelectField}
+                        component={renderCheckboxField}
                         placeholder={t(name)}
                         disabled={isSelected}
                         checked={isSelected}
@@ -148,13 +148,13 @@ const Form = (props) => {
             >
                 {t('cancel_btn')}
             </button>
-            <button
+            {modalType !== MODAL_TYPE.SELECT_MODAL_TYPE && <button
                 type="submit"
                 className="btn btn-success"
                 disabled={processingAddFilter || processingConfigFilter}
             >
                 {t('save_btn')}
-            </button>
+            </button>}
         </div>
     </form>;
 };

client/src/components/Filters/Rewrites/Table.js

@@ -62,23 +62,13 @@ class Table extends Component {
                 showPagination
                 defaultPageSize={10}
                 minRows={5}
-                previousText={
-                    <svg className="icons icon--24 icon--gray">
-                        <use xlinkHref="#arrow-left" />
-                    </svg>}
-                nextText={
-                    <svg className="icons icon--24 icon--gray">
-                        <use xlinkHref="#arrow-right" />
-                    </svg>}
-                loadingText={t('loading_table_status')}
-                pageText=''
-                ofText=''
+                ofText="/"
+                previousText={t('previous_btn')}
+                nextText={t('next_btn')}
+                pageText={t('page_table_footer_text')}
                 rowsText={t('rows_table_footer_text')}
+                loadingText={t('loading_table_status')}
                 noDataText={t('rewrite_not_found')}
-                showPageSizeOptions={false}
-                showPageJump={false}
-                renderTotalPagesCount={() => false}
-                getPaginationProps={() => ({ className: 'custom-pagination' })}
             />
         );
     }

client/src/components/Filters/Services/index.js

@@ -59,6 +59,4 @@ const Services = () => {
     );
 };
 
-Services.propTypes = {};
-
 export default Services;

client/src/components/Filters/Table.js

@@ -128,24 +128,15 @@ class Table extends Component {
                 columns={this.columns}
                 showPagination
                 defaultPageSize={10}
-                showPageSizeOptions={false}
-                showPageJump={false}
-                renderTotalPagesCount={() => false}
                 loading={loading}
                 minRows={6}
-                pageText=''
-                ofText=''
+                ofText="/"
+                previousText={t('previous_btn')}
+                nextText={t('next_btn')}
+                pageText={t('page_table_footer_text')}
+                rowsText={t('rows_table_footer_text')}
                 loadingText={t('loading_table_status')}
                 noDataText={whitelist ? t('no_whitelist_added') : t('no_blocklist_added')}
-                getPaginationProps={() => ({ className: 'custom-pagination' })}
-                previousText={
-                    <svg className="icons icon--24 icon--gray w-100 h-100">
-                        <use xlinkHref="#arrow-left" />
-                    </svg>}
-                nextText={
-                    <svg className="icons icon--24 icon--gray w-100 h-100">
-                        <use xlinkHref="#arrow-right" />
-                    </svg>}
             />
         );
     }

client/src/components/Header/Menu.js

@@ -90,9 +90,8 @@ class Menu extends Component {
     };
 
     getActiveClassForDropdown = (URLS) => {
-        const { pathname } = this.props.location;
         const isActivePage = Object.values(URLS)
-            .some((item) => item === pathname);
+            .some((item) => item === this.props.pathname);
 
         return isActivePage ? 'active' : '';
     };
@@ -180,9 +179,9 @@ class Menu extends Component {
 }
 
 Menu.propTypes = {
-    isMenuOpen: PropTypes.bool,
-    closeMenu: PropTypes.func,
-    location: PropTypes.object,
+    isMenuOpen: PropTypes.bool.isRequired,
+    closeMenu: PropTypes.func.isRequired,
+    pathname: PropTypes.string.isRequired,
     t: PropTypes.func,
 };
 

client/src/components/Header/index.js

@@ -1,83 +1,75 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { shallowEqual, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
-import { Trans, withTranslation } from 'react-i18next';
-
 import Menu from './Menu';
 import logo from '../ui/svg/logo.svg';
 import './Header.css';
 
-class Header extends Component {
-    state = {
-        isMenuOpen: false,
+const Header = () => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const { t } = useTranslation();
+
+    const {
+        protectionEnabled,
+        processing,
+        isCoreRunning,
+        processingProfile,
+        name,
+    } = useSelector((state) => state.dashboard, shallowEqual);
+
+    const { pathname } = useLocation();
+
+    const toggleMenuOpen = () => {
+        setIsMenuOpen((isMenuOpen) => !isMenuOpen);
     };
 
-    toggleMenuOpen = () => {
-        this.setState((prevState) => ({ isMenuOpen: !prevState.isMenuOpen }));
+    const closeMenu = () => {
+        setIsMenuOpen(false);
     };
 
-    closeMenu = () => {
-        this.setState({ isMenuOpen: false });
-    };
+    const badgeClass = classnames('badge dns-status', {
+        'badge-success': protectionEnabled,
+        'badge-danger': !protectionEnabled,
+    });
 
-    render() {
-        const { dashboard, location } = this.props;
-        const { isMenuOpen } = this.state;
-        const badgeClass = classnames({
-            'badge dns-status': true,
-            'badge-success': dashboard.protectionEnabled,
-            'badge-danger': !dashboard.protectionEnabled,
-        });
-
-        return (
-            <div className="header">
-                <div className="header__container">
-                    <div className="header__row">
-                        <div
-                            className="header-toggler d-lg-none ml-lg-0 collapsed"
-                            onClick={this.toggleMenuOpen}
-                        >
-                            <span className="header-toggler-icon" />
-                        </div>
-                        <div className="header__column">
-                            <div className="d-flex align-items-center">
-                                <Link to="/" className="nav-link pl-0 pr-1">
-                                    <img src={logo} alt="" className="header-brand-img" />
-                                </Link>
-                                {!dashboard.processing && dashboard.isCoreRunning && (
-                                    <span className={badgeClass}>
-                                        <Trans>{dashboard.protectionEnabled ? 'on' : 'off'}</Trans>
-                                    </span>
-                                )}
-                            </div>
-                        </div>
-                        <Menu
-                            location={location}
-                            isMenuOpen={isMenuOpen}
-                            closeMenu={this.closeMenu}
-                        />
-                        <div className="header__column">
-                            <div className="header__right">
-                                {!dashboard.processingProfile && dashboard.name
-                                    && <a href="control/logout" className="btn btn-sm btn-outline-secondary">
-                                        <Trans>sign_out</Trans>
-                                    </a>
-                                }
-                            </div>
-                        </div>
+    return <div className="header">
+        <div className="header__container">
+            <div className="header__row">
+                <div
+                    className="header-toggler d-lg-none ml-lg-0 collapsed"
+                    onClick={toggleMenuOpen}
+                >
+                    <span className="header-toggler-icon" />
+                </div>
+                <div className="header__column">
+                    <div className="d-flex align-items-center">
+                        <Link to="/" className="nav-link pl-0 pr-1">
+                            <img src={logo} alt="" className="header-brand-img" />
+                        </Link>
+                        {!processing && isCoreRunning
+                        && <span className={badgeClass}
+                        >{t(protectionEnabled ? 'on' : 'off')}
+                        </span>}
+                    </div>
+                </div>
+                <Menu
+                    pathname={pathname}
+                    isMenuOpen={isMenuOpen}
+                    closeMenu={closeMenu}
+                />
+                <div className="header__column">
+                    <div className="header__right">
+                        {!processingProfile && name
+                        && <a href="control/logout" className="btn btn-sm btn-outline-secondary">
+                            {t('sign_out')}
+                        </a>}
                     </div>
                 </div>
             </div>
-        );
-    }
-}
-
-Header.propTypes = {
-    dashboard: PropTypes.object.isRequired,
-    location: PropTypes.object.isRequired,
-    getVersion: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
+        </div>
+    </div>;
 };
 
-export default withTranslation()(Header);
+export default Header;

client/src/components/Logs/Cells/getClientCell.js

@@ -16,6 +16,7 @@ const getClientCell = ({
 
     const autoClient = autoClients.find((autoClient) => autoClient.name === client);
     const source = autoClient?.source;
+    const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
 
     const id = nanoid();
 
@@ -33,7 +34,7 @@ const getClientCell = ({
     const isFiltered = checkFiltered(reason);
 
     const nameClass = classNames('w-90 o-hidden d-flex flex-column', {
-        'mt-2': isDetailed && !name && !whois_info,
+        'mt-2': isDetailed && !name && !whoisAvailable,
         'white-space--nowrap': isDetailed,
     });
 
@@ -78,12 +79,19 @@ const getClientCell = ({
                 content: processedData,
                 placement: 'bottom',
             })}
-            <div
-                className={nameClass}>
-                <div data-tip={true} data-for={id}>{formatClientCell(row, isDetailed)}</div>
-                {isDetailed && name
-                && !whois_info && <div className="detailed-info d-none d-sm-block logs__text"
-                        title={name}>{name}</div>}
+            <div className={nameClass}>
+                <div data-tip={true} data-for={id}>
+                    {formatClientCell(row, isDetailed)}
+                </div>
+
+                {isDetailed && name && !whoisAvailable && (
+                    <div
+                        className="detailed-info d-none d-sm-block logs__text"
+                        title={name}
+                    >
+                        {name}
+                    </div>
+                )}
             </div>
             {renderBlockingButton(isFiltered, domain)}
         </div>

client/src/components/Logs/Cells/getResponseCell.js

@@ -38,59 +38,20 @@ const getResponseCell = (row, filtering, t, isDetailed, getFilterName) => {
         })}</div>;
     };
 
-    const FILTERED_STATUS_TO_FIELDS_MAP = {
-        [FILTERED_STATUS.NOT_FILTERED_NOT_FOUND]: {
-            encryption_status: boldStatusLabel,
-            install_settings_dns: upstream,
-            elapsed: formattedElapsedMs,
-            response_code: status,
-            response_table_header: renderResponses(response),
-        },
-        [FILTERED_STATUS.FILTERED_BLOCKED_SERVICE]: {
-            encryption_status: boldStatusLabel,
-            install_settings_dns: upstream,
-            elapsed: formattedElapsedMs,
-            filter,
-            rule_label: rule,
-            response_code: status,
-            original_response: renderResponses(originalResponse),
-        },
-        [FILTERED_STATUS.NOT_FILTERED_WHITE_LIST]: {
-            encryption_status: boldStatusLabel,
-            install_settings_dns: upstream,
-            elapsed: formattedElapsedMs,
-            filter,
-            rule_label: rule,
-            response_code: status,
-        },
-        [FILTERED_STATUS.NOT_FILTERED_WHITE_LIST]: {
-            encryption_status: boldStatusLabel,
-            filter,
-            rule_label: rule,
-            response_code: status,
-        },
-        [FILTERED_STATUS.FILTERED_SAFE_SEARCH]: {
-            encryption_status: boldStatusLabel,
-            install_settings_dns: upstream,
-            elapsed: formattedElapsedMs,
-            response_code: status,
-            response_table_header: renderResponses(response),
-        },
-        [FILTERED_STATUS.FILTERED_BLACK_LIST]: {
-            encryption_status: boldStatusLabel,
-            filter,
-            rule_label: rule,
-            install_settings_dns: upstream,
-            elapsed: formattedElapsedMs,
-            response_code: status,
-            original_response: renderResponses(originalResponse),
-        },
+    const COMMON_CONTENT = {
+        encryption_status: boldStatusLabel,
+        install_settings_dns: upstream,
+        elapsed: formattedElapsedMs,
+        response_code: status,
+        filter,
+        rule_label: rule,
+        response_table_header: renderResponses(response),
+        original_response: renderResponses(originalResponse),
     };
 
-    const content = FILTERED_STATUS_TO_FIELDS_MAP[reason]
-        ? Object.entries(FILTERED_STATUS_TO_FIELDS_MAP[reason])
-        : Object.entries(FILTERED_STATUS_TO_FIELDS_MAP.NotFilteredNotFound);
-
+    const content = rule
+        ? Object.entries(COMMON_CONTENT)
+        : Object.entries({ ...COMMON_CONTENT, filter: '' });
     const detailedInfo = isBlocked ? filter : formattedElapsedMs;
 
     return (

client/src/components/Logs/Filters/Form.js

@@ -143,10 +143,11 @@ const Form = (props) => {
     const normalizeOnBlur = (data) => data.trim();
 
     return (
-        <form className="d-flex flex-wrap form-control--container"
-              onSubmit={(e) => {
-                  e.preventDefault();
-              }}
+        <form
+            className="d-flex flex-wrap form-control--container"
+            onSubmit={(e) => {
+                e.preventDefault();
+            }}
         >
             <div className="field__search">
                 <Field
@@ -166,13 +167,21 @@ const Form = (props) => {
                 <Field
                     name={FORM_NAMES.response_status}
                     component="select"
-                    className={classNames('form-control custom-select custom-select--logs custom-select__arrow--left ml-small form-control--transparent', responseStatusClass)}
+                    className={classNames('form-control custom-select custom-select--logs custom-select__arrow--left form-control--transparent', responseStatusClass)}
                 >
                     {Object.values(RESPONSE_FILTER)
                         .map(({
                             query, label, disabled,
-                        }) => <option key={label} value={query}
-                                      disabled={disabled}>{t(label)}</option>)}
+                        }) => (
+                            <option
+                                key={label}
+                                value={query}
+                                disabled={disabled}
+                            >
+                                {t(label)}
+                            </option>
+                        ))
+                    }
                 </Field>
             </div>
         </form>

client/src/components/Logs/Filters/index.js

@@ -1,29 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import Form from './Form';
 
-const Filters = ({ filter, refreshLogs, setIsLoading }) => (
-        <div className="page-header page-header--logs">
-            <h1 className="page-title page-title--large">
-                <Trans>query_log</Trans>
-                <button
+const Filters = ({ filter, refreshLogs, setIsLoading }) => {
+    const { t } = useTranslation();
+
+    return <div className="page-header page-header--logs">
+        <h1 className="page-title page-title--large">
+            {t('query_log')}
+            <button
                     type="button"
-                    className="btn btn-icon--green ml-3 bg-transparent"
+                    className="btn btn-icon--green logs__refresh"
                     onClick={refreshLogs}
-                >
-                    <svg className="icons icon--24">
-                        <use xlinkHref="#update" />
-                    </svg>
-                </button>
-            </h1>
-            <Form
+            >
+                <svg className="icons icon--24">
+                    <use xlinkHref="#update" />
+                </svg>
+            </button>
+        </h1>
+        <Form
                 responseStatusClass="d-sm-block"
                 initialValues={filter}
                 setIsLoading={setIsLoading}
-            />
-        </div>
-);
+        />
+    </div>;
+};
 
 Filters.propTypes = {
     filter: PropTypes.object.isRequired,

client/src/components/Logs/Logs.css

@@ -58,8 +58,7 @@
     width: 100%;
 }
 
-.logs__text--wrap,
-.logs__text--whois {
+.logs__text--wrap {
     line-height: 1.4;
     white-space: normal;
 }
@@ -71,6 +70,7 @@
 
 .logs__text--whois {
     line-height: 1.2;
+    color: #9aa0ac;
 }
 
 .logs__row .tooltip-custom {
@@ -362,7 +362,7 @@
     display: flex !important;
 }
 
-.-pageInfo {
+.logs__table .-pageInfo {
     --side-size: 2rem;
     font-variant-numeric: tabular-nums !important;
     background-color: transparent !important;
@@ -376,18 +376,18 @@
     align-items: center;
 }
 
-.pagination-bottom {
+.logs__table .pagination-bottom {
     justify-content: center !important;
     display: flex !important;
 }
 
-.-center:before {
+.logs__table .-center:before {
     content: '...';
     transform: translateY(-0.25rem);
     margin: auto;
 }
 
-.-center:after {
+.logs__table .-center:after {
     content: '...';
     transform: translateY(-0.25rem);
     margin: auto;
@@ -437,12 +437,13 @@
 }
 
 .custom-select__arrow--left {
-    background: #fff url('./chevron-down.svg') no-repeat left 0.2rem center;
-    background-size: 1.5rem;
+    background: var(--white) url('../ui/svg/chevron-down.svg') no-repeat;
+    background-position: 5px 9px;
+    background-size: 22px;
 }
 
 .custom-select--logs {
-    padding: 0.5rem 0.75rem 0.5rem 1.75rem !important;
+    padding: 0.5rem 0.75rem 0.5rem 2rem !important;
 }
 
 .bg--danger {
@@ -511,6 +512,8 @@
 
     .field__select {
         margin-top: 1.5rem;
+        padding-left: 24px;
+        padding-right: 24px;
     }
 }
 
@@ -536,3 +539,16 @@
 .loading__text {
     transform: translateY(3rem);
 }
+
+.logs__refresh {
+    position: relative;
+    top: 3px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    margin-left: 15px;
+    background-color: transparent;
+}

client/src/components/Logs/Table.js

@@ -355,7 +355,7 @@ const Table = (props) => {
                             response_details: 'title',
                             install_settings_dns: upstream,
                             elapsed: formattedElapsedMs,
-                            filter: isBlocked ? filter : null,
+                            filter: rule ? filter : null,
                             rule_label: rule,
                             response_table_header: response?.join('\n'),
                             response_code: status,

client/src/components/Logs/chevron-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>

client/src/components/Logs/index.js

@@ -10,7 +10,7 @@ import {
     BLOCK_ACTIONS,
     TABLE_DEFAULT_PAGE_SIZE,
     TABLE_FIRST_PAGE,
-    smallScreenSize,
+    SMALL_SCREEN_SIZE,
 } from '../../helpers/constants';
 import Loading from '../ui/Loading';
 import Filters from './Filters';
@@ -76,7 +76,7 @@ const Logs = (props) => {
     const search = filter?.search || search_url_param;
     const response_status = filter?.response_status || response_status_url_param;
 
-    const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < smallScreenSize);
+    const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < SMALL_SCREEN_SIZE);
     const [detailedDataCurrent, setDetailedDataCurrent] = useState({});
     const [buttonType, setButtonType] = useState(BLOCK_ACTIONS.BLOCK);
     const [isModalOpened, setModalOpened] = useState(false);
@@ -114,7 +114,7 @@ const Logs = (props) => {
         },
     } = props;
 
-    const mediaQuery = window.matchMedia(`(max-width: ${smallScreenSize}px)`);
+    const mediaQuery = window.matchMedia(`(max-width: ${SMALL_SCREEN_SIZE}px)`);
     const mediaQueryHandler = (e) => {
         setIsSmallScreen(e.matches);
         if (e.matches) {

client/src/components/Settings/Clients/AutoClients.js

@@ -8,6 +8,7 @@ import CellWrap from '../../ui/CellWrap';
 
 import whoisCell from './whoisCell';
 import LogsSearchLink from '../../ui/LogsSearchLink';
+import { sortIp } from '../../../helpers/helpers';
 
 const COLUMN_MIN_WIDTH = 200;
 
@@ -18,6 +19,7 @@ class AutoClients extends Component {
             accessor: 'ip',
             minWidth: COLUMN_MIN_WIDTH,
             Cell: CellWrap,
+            sortMethod: sortIp,
         },
         {
             Header: this.props.t('table_name'),
@@ -85,23 +87,13 @@ class AutoClients extends Component {
                     showPagination
                     defaultPageSize={10}
                     minRows={5}
-                    showPageSizeOptions={false}
-                    showPageJump={false}
-                    renderTotalPagesCount={() => false}
-                    previousText={
-                        <svg className="icons icon--24 icon--gray w-100 h-100">
-                            <use xlinkHref="#arrow-left" />
-                        </svg>}
-                    nextText={
-                        <svg className="icons icon--24 icon--gray w-100 h-100">
-                            <use xlinkHref="#arrow-right" />
-                        </svg>}
-                    loadingText={t('loading_table_status')}
-                    pageText=''
-                    ofText=''
+                    ofText="/"
+                    previousText={t('previous_btn')}
+                    nextText={t('next_btn')}
+                    pageText={t('page_table_footer_text')}
                     rowsText={t('rows_table_footer_text')}
+                    loadingText={t('loading_table_status')}
                     noDataText={t('clients_not_found')}
-                    getPaginationProps={() => ({ className: 'custom-pagination' })}
                 />
             </Card>
         );

client/src/components/Settings/Clients/ClientsTable.js

@@ -297,23 +297,13 @@ class ClientsTable extends Component {
                         showPagination
                         defaultPageSize={10}
                         minRows={5}
-                        showPageSizeOptions={false}
-                        showPageJump={false}
-                        renderTotalPagesCount={() => false}
-                        previousText={
-                            <svg className="icons icon--24 icon--gray w-100 h-100">
-                                <use xlinkHref="#arrow-left" />
-                            </svg>}
-                        nextText={
-                            <svg className="icons icon--24 icon--gray w-100 h-100">
-                                <use xlinkHref="#arrow-right" />
-                            </svg>}
-                        loadingText={t('loading_table_status')}
-                        pageText=''
-                        ofText=''
+                        ofText="/"
+                        previousText={t('previous_btn')}
+                        nextText={t('next_btn')}
+                        pageText={t('page_table_footer_text')}
                         rowsText={t('rows_table_footer_text')}
+                        loadingText={t('loading_table_status')}
                         noDataText={t('clients_not_found')}
-                        getPaginationProps={() => ({ className: 'custom-pagination' })}
                     />
                     <button
                         type="button"

client/src/components/Settings/Clients/Form.js

@@ -15,7 +15,7 @@ import { toggleAllServices } from '../../../helpers/helpers';
 import {
     renderInputField,
     renderGroupField,
-    renderSelectField,
+    renderCheckboxField,
     renderServiceField,
 } from '../../../helpers/form';
 import { validateClientId, validateRequiredValue } from '../../../helpers/validators';
@@ -151,7 +151,7 @@ let Form = (props) => {
                         <Field
                             name={setting.name}
                             type="checkbox"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t(setting.placeholder)}
                             disabled={
                                 setting.name !== 'use_global_settings'

client/src/components/Settings/Dhcp/Form.js

@@ -1,235 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
-import { renderInputField, toNumber } from '../../../helpers/form';
-import { FORM_NAME } from '../../../helpers/constants';
-import { validateIpv4, validateIsPositiveValue, validateRequiredValue } from '../../../helpers/validators';
-
-const renderInterfaces = ((interfaces) => (
-    Object.keys(interfaces).map((item) => {
-        const option = interfaces[item];
-        const { name } = option;
-        const onlyIPv6 = option.ip_addresses.every((ip) => ip.includes(':'));
-        let interfaceIP = option.ip_addresses[0];
-
-        if (!onlyIPv6) {
-            option.ip_addresses.forEach((ip) => {
-                if (!ip.includes(':')) {
-                    interfaceIP = ip;
-                }
-            });
-        }
-
-        return (
-            <option value={name} key={name} disabled={onlyIPv6}>
-                {name} - {interfaceIP}
-            </option>
-        );
-    })
-));
-
-const renderInterfaceValues = ((interfaceValues) => (
-    <ul className="list-unstyled mt-1 mb-0">
-        <li>
-            <span className="interface__title">MTU: </span>
-            {interfaceValues.mtu}
-        </li>
-        <li>
-            <span className="interface__title"><Trans>dhcp_hardware_address</Trans>: </span>
-            {interfaceValues.hardware_address}
-        </li>
-        <li>
-            <span className="interface__title"><Trans>dhcp_ip_addresses</Trans>: </span>
-            {
-                interfaceValues.ip_addresses
-                    .map((ip) => <span key={ip} className="interface__ip">{ip}</span>)
-            }
-        </li>
-    </ul>
-));
-
-const clearFields = (change, resetDhcp, t) => {
-    const fields = {
-        interface_name: '',
-        gateway_ip: '',
-        subnet_mask: '',
-        range_start: '',
-        range_end: '',
-        lease_duration: 86400,
-    };
-
-    // eslint-disable-next-line no-alert
-    if (window.confirm(t('dhcp_reset'))) {
-        Object.keys(fields).forEach((field) => change(field, fields[field]));
-        resetDhcp();
-    }
-};
-
-let Form = (props) => {
-    const {
-        t,
-        handleSubmit,
-        submitting,
-        invalid,
-        enabled,
-        interfaces,
-        interfaceValue,
-        processingConfig,
-        processingInterfaces,
-        resetDhcp,
-        change,
-    } = props;
-
-    return (
-        <form onSubmit={handleSubmit}>
-            {!processingInterfaces && interfaces
-                && <div className="row">
-                    <div className="col-sm-12 col-md-6">
-                        <div className="form__group form__group--settings">
-                            <label>{t('dhcp_interface_select')}</label>
-                            <Field
-                                name="interface_name"
-                                component="select"
-                                className="form-control custom-select"
-                                validate={[validateRequiredValue]}
-                            >
-                                <option value="" disabled={enabled}>
-                                    {t('dhcp_interface_select')}
-                                </option>
-                                {renderInterfaces(interfaces)}
-                            </Field>
-                        </div>
-                    </div>
-                    {interfaceValue
-                        && <div className="col-sm-12 col-md-6">
-                            {interfaces[interfaceValue]
-                                && renderInterfaceValues(interfaces[interfaceValue])}
-                        </div>
-                    }
-                </div>
-            }
-            <hr/>
-            <div className="row">
-                <div className="col-lg-6">
-                    <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_gateway_input')}</label>
-                        <Field
-                            id="gateway_ip"
-                            name="gateway_ip"
-                            component={renderInputField}
-                            type="text"
-                            className="form-control"
-                            placeholder={t('dhcp_form_gateway_input')}
-                            validate={[validateIpv4, validateRequiredValue]}
-                        />
-                    </div>
-                    <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_subnet_input')}</label>
-                        <Field
-                            id="subnet_mask"
-                            name="subnet_mask"
-                            component={renderInputField}
-                            type="text"
-                            className="form-control"
-                            placeholder={t('dhcp_form_subnet_input')}
-                            validate={[validateIpv4, validateRequiredValue]}
-                        />
-                    </div>
-                </div>
-                <div className="col-lg-6">
-                    <div className="form__group form__group--settings">
-                        <div className="row">
-                            <div className="col-12">
-                                <label>{t('dhcp_form_range_title')}</label>
-                            </div>
-                            <div className="col">
-                                <Field
-                                    id="range_start"
-                                    name="range_start"
-                                    component={renderInputField}
-                                    type="text"
-                                    className="form-control"
-                                    placeholder={t('dhcp_form_range_start')}
-                                    validate={[validateIpv4, validateRequiredValue]}
-                                />
-                            </div>
-                            <div className="col">
-                                <Field
-                                    id="range_end"
-                                    name="range_end"
-                                    component={renderInputField}
-                                    type="text"
-                                    className="form-control"
-                                    placeholder={t('dhcp_form_range_end')}
-                                    validate={[validateIpv4, validateRequiredValue]}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_lease_title')}</label>
-                        <Field
-                            name="lease_duration"
-                            component={renderInputField}
-                            type="number"
-                            className="form-control"
-                            placeholder={t('dhcp_form_lease_input')}
-                            validate={[validateRequiredValue, validateIsPositiveValue]}
-                            normalize={toNumber}
-                        />
-                    </div>
-                </div>
-            </div>
-
-            <div className="btn-list">
-                <button
-                    type="submit"
-                    className="btn btn-success btn-standard"
-                    disabled={submitting || invalid || processingConfig}
-                >
-                    {t('save_config')}
-                </button>
-                <button
-                    type="button"
-                    className="btn btn-secondary btn-standart"
-                    disabled={submitting || processingConfig}
-                    onClick={() => clearFields(change, resetDhcp, t)}
-                >
-                    <Trans>reset_settings</Trans>
-                </button>
-            </div>
-        </form>
-    );
-};
-
-Form.propTypes = {
-    handleSubmit: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    invalid: PropTypes.bool.isRequired,
-    interfaces: PropTypes.object.isRequired,
-    interfaceValue: PropTypes.string,
-    initialValues: PropTypes.object.isRequired,
-    processingConfig: PropTypes.bool.isRequired,
-    processingInterfaces: PropTypes.bool.isRequired,
-    enabled: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
-    resetDhcp: PropTypes.func.isRequired,
-    change: PropTypes.func.isRequired,
-};
-
-const selector = formValueSelector(FORM_NAME.DHCP);
-
-Form = connect((state) => {
-    const interfaceValue = selector(state, 'interface_name');
-    return {
-        interfaceValue,
-    };
-})(Form);
-
-export default flow([
-    withTranslation(),
-    reduxForm({ form: FORM_NAME.DHCP }),
-])(Form);

client/src/components/Settings/Dhcp/FormDHCPv4.js

@@ -0,0 +1,145 @@
+import React, { useCallback } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { useTranslation } from 'react-i18next';
+
+import {
+    renderInputField,
+    toNumber,
+} from '../../../helpers/form';
+import { FORM_NAME } from '../../../helpers/constants';
+import {
+    validateIpv4,
+    validateIsPositiveValue,
+    validateRequiredValue,
+    validateIpv4RangeEnd,
+} from '../../../helpers/validators';
+
+const FormDHCPv4 = ({
+    handleSubmit,
+    submitting,
+    processingConfig,
+    ipv4placeholders,
+}) => {
+    const { t } = useTranslation();
+    const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv4], shallowEqual);
+    const interfaces = useSelector((state) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
+    const interface_name = interfaces?.values?.interface_name;
+
+    const isInterfaceIncludesIpv4 = useSelector(
+        (state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses,
+    );
+
+    const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {})
+        .some(Boolean);
+
+    const invalid = dhcp?.syncErrors || interfaces?.syncErrors || !isInterfaceIncludesIpv4
+        || isEmptyConfig || submitting || processingConfig;
+
+    const validateRequired = useCallback((value) => {
+        if (isEmptyConfig) {
+            return undefined;
+        }
+        return validateRequiredValue(value);
+    }, [isEmptyConfig]);
+
+    return <form onSubmit={handleSubmit}>
+        <div className="row">
+            <div className="col-lg-6">
+                <div className="form__group form__group--settings">
+                    <label>{t('dhcp_form_gateway_input')}</label>
+                    <Field
+                        name="v4.gateway_ip"
+                        component={renderInputField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t(ipv4placeholders.gateway_ip)}
+                        validate={[validateIpv4, validateRequired]}
+                        disabled={!isInterfaceIncludesIpv4}
+                    />
+                </div>
+                <div className="form__group form__group--settings">
+                    <label>{t('dhcp_form_subnet_input')}</label>
+                    <Field
+                        name="v4.subnet_mask"
+                        component={renderInputField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t(ipv4placeholders.subnet_mask)}
+                        validate={[validateIpv4, validateRequired]}
+                        disabled={!isInterfaceIncludesIpv4}
+                    />
+                </div>
+            </div>
+            <div className="col-lg-6">
+                <div className="form__group form__group--settings">
+                    <div className="row">
+                        <div className="col-12">
+                            <label>{t('dhcp_form_range_title')}</label>
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v4.range_start"
+                                component={renderInputField}
+                                type="text"
+                                className="form-control"
+                                placeholder={t(ipv4placeholders.range_start)}
+                                validate={[validateIpv4]}
+                                disabled={!isInterfaceIncludesIpv4}
+                            />
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v4.range_end"
+                                component={renderInputField}
+                                type="text"
+                                className="form-control"
+                                placeholder={t(ipv4placeholders.range_end)}
+                                validate={[validateIpv4, validateIpv4RangeEnd]}
+                                disabled={!isInterfaceIncludesIpv4}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div className="form__group form__group--settings">
+                    <label>{t('dhcp_form_lease_title')}</label>
+                    <Field
+                        name="v4.lease_duration"
+                        component={renderInputField}
+                        type="number"
+                        className="form-control"
+                        placeholder={t(ipv4placeholders.lease_duration)}
+                        validate={[validateIsPositiveValue, validateRequired]}
+                        normalize={toNumber}
+                        min={0}
+                        disabled={!isInterfaceIncludesIpv4}
+                    />
+                </div>
+            </div>
+        </div>
+        <div className="btn-list">
+            <button
+                type="submit"
+                className="btn btn-success btn-standard"
+                disabled={invalid}
+            >
+                {t('save_config')}
+            </button>
+        </div>
+    </form>;
+};
+
+FormDHCPv4.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    initialValues: PropTypes.object.isRequired,
+    processingConfig: PropTypes.bool.isRequired,
+    change: PropTypes.func.isRequired,
+    reset: PropTypes.func.isRequired,
+    ipv4placeholders: PropTypes.object.isRequired,
+};
+
+export default reduxForm({
+    form: FORM_NAME.DHCPv4,
+})(FormDHCPv4);

client/src/components/Settings/Dhcp/FormDHCPv6.js

@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { useTranslation } from 'react-i18next';
+
+import {
+    renderInputField,
+    toNumber,
+} from '../../../helpers/form';
+import { FORM_NAME } from '../../../helpers/constants';
+import {
+    validateIpv6,
+    validateIsPositiveValue,
+    validateRequiredValue,
+} from '../../../helpers/validators';
+
+const FormDHCPv6 = ({
+    handleSubmit,
+    submitting,
+    processingConfig,
+    ipv6placeholders,
+}) => {
+    const { t } = useTranslation();
+    const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv6], shallowEqual);
+    const interfaces = useSelector((state) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
+    const interface_name = interfaces?.values?.interface_name;
+
+    const isInterfaceIncludesIpv6 = useSelector(
+        (state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv6_addresses,
+    );
+
+    const isEmptyConfig = !Object.values(dhcp?.values?.v6 ?? {})
+        .some(Boolean);
+
+    const invalid = dhcp?.syncErrors || interfaces?.syncErrors || !isInterfaceIncludesIpv6
+        || isEmptyConfig || submitting || processingConfig;
+
+    const validateRequired = useCallback((value) => {
+        if (isEmptyConfig) {
+            return undefined;
+        }
+        return validateRequiredValue(value);
+    }, [isEmptyConfig]);
+
+    return <form onSubmit={handleSubmit}>
+        <div className="row">
+            <div className="col-lg-6">
+                <div className="form__group form__group--settings">
+                    <div className="row">
+                        <div className="col-12">
+                            <label>{t('dhcp_form_range_title')}</label>
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v6.range_start"
+                                component={renderInputField}
+                                type="text"
+                                className="form-control"
+                                placeholder={t(ipv6placeholders.range_start)}
+                                validate={[validateIpv6, validateRequired]}
+                                disabled={!isInterfaceIncludesIpv6}
+                            />
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v6.range_end"
+                                component="input"
+                                type="text"
+                                className="form-control disabled cursor--not-allowed"
+                                placeholder={t(ipv6placeholders.range_end)}
+                                value={t(ipv6placeholders.range_end)}
+                                disabled
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className="row">
+            <div className="col-lg-6 form__group form__group--settings">
+                <label>{t('dhcp_form_lease_title')}</label>
+                <Field
+                    name="v6.lease_duration"
+                    component={renderInputField}
+                    type="number"
+                    className="form-control"
+                    placeholder={t(ipv6placeholders.lease_duration)}
+                    validate={[validateIsPositiveValue, validateRequired]}
+                    normalizeOnBlur={toNumber}
+                    min={0}
+                    disabled={!isInterfaceIncludesIpv6}
+                />
+            </div>
+        </div>
+        <div className="btn-list">
+            <button
+                type="submit"
+                className="btn btn-success btn-standard"
+                disabled={invalid}
+            >
+                {t('save_config')}
+            </button>
+        </div>
+    </form>;
+};
+
+FormDHCPv6.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    initialValues: PropTypes.object.isRequired,
+    processingConfig: PropTypes.bool.isRequired,
+    change: PropTypes.func.isRequired,
+    reset: PropTypes.func.isRequired,
+    ipv6placeholders: PropTypes.object.isRequired,
+};
+
+export default reduxForm({
+    form: FORM_NAME.DHCPv6,
+})(FormDHCPv6);

client/src/components/Settings/Dhcp/Interfaces.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
+import propTypes from 'prop-types';
+import { renderSelectField } from '../../../helpers/form';
+import { validateRequiredValue } from '../../../helpers/validators';
+import { FORM_NAME } from '../../../helpers/constants';
+
+const renderInterfaces = (interfaces) => Object.keys(interfaces)
+    .map((item) => {
+        const option = interfaces[item];
+        const { name } = option;
+
+        const [interfaceIPv4] = option?.ipv4_addresses ?? [];
+        const [interfaceIPv6] = option?.ipv6_addresses ?? [];
+
+        const optionContent = [name, interfaceIPv4, interfaceIPv6].filter(Boolean).join(' - ');
+
+        return <option value={name} key={name}>{optionContent}</option>;
+    });
+
+
+const getInterfaceValues = ({
+    gateway_ip,
+    hardware_address,
+    ip_addresses,
+}) => [
+    {
+        name: 'dhcp_form_gateway_input',
+        value: gateway_ip,
+    },
+    {
+        name: 'dhcp_hardware_address',
+        value: hardware_address,
+    },
+    {
+        name: 'dhcp_ip_addresses',
+        value: ip_addresses,
+        render: (ip_addresses) => ip_addresses
+            .map((ip) => <span key={ip} className="interface__ip">{ip}</span>),
+    },
+];
+
+const renderInterfaceValues = ({
+    gateway_ip,
+    hardware_address,
+    ip_addresses,
+}) => <div className='d-flex align-items-end col-6'>
+    <ul className="list-unstyled m-0">
+        {getInterfaceValues({
+            gateway_ip,
+            hardware_address,
+            ip_addresses,
+        }).map(({ name, value, render }) => value && <li key={name}>
+            <span className="interface__title"><Trans>{name}</Trans>: </span>
+            {render?.(value) || value}
+        </li>)}
+    </ul>
+</div>;
+
+const Interfaces = () => {
+    const { t } = useTranslation();
+
+    const {
+        processingInterfaces,
+        interfaces,
+        enabled,
+    } = useSelector((store) => store.dhcp, shallowEqual);
+
+    const interface_name = useSelector(
+        (store) => store.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name,
+    );
+
+    const interfaceValue = interface_name && interfaces[interface_name];
+
+    return !processingInterfaces
+            && interfaces
+            && <>
+                <div className="row align-items-center pb-2">
+                    <div className="col-6">
+                        <Field
+                                name="interface_name"
+                                component={renderSelectField}
+                                className="form-control custom-select"
+                                validate={[validateRequiredValue]}
+                                label='dhcp_interface_select'
+                        >
+                            <option value='' disabled={enabled}>
+                                {t('dhcp_interface_select')}
+                            </option>
+                            {renderInterfaces(interfaces)}
+                        </Field>
+                    </div>
+                    {interfaceValue
+                    && renderInterfaceValues(interfaceValue)}
+                </div>
+            </>;
+};
+
+renderInterfaceValues.propTypes = {
+    gateway_ip: propTypes.string.isRequired,
+    hardware_address: propTypes.string.isRequired,
+    ip_addresses: propTypes.arrayOf(propTypes.string).isRequired,
+};
+
+export default reduxForm({
+    form: FORM_NAME.DHCP_INTERFACES,
+})(Interfaces);

client/src/components/Settings/Dhcp/Leases.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
 import { Trans, withTranslation } from 'react-i18next';
 import { LEASES_TABLE_DEFAULT_PAGE_SIZE } from '../../../helpers/constants';
+import { sortIp } from '../../../helpers/helpers';
 
 class Leases extends Component {
     cellWrap = ({ value }) => (
@@ -27,6 +28,7 @@ class Leases extends Component {
                         Header: 'IP',
                         accessor: 'ip',
                         Cell: this.cellWrap,
+                        sortMethod: sortIp,
                     }, {
                         Header: <Trans>dhcp_table_hostname</Trans>,
                         accessor: 'hostname',

client/src/components/Settings/Dhcp/StaticLeases/Form.js

@@ -1,22 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
+import { Trans, useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { renderInputField } from '../../../../helpers/form';
 import { validateIpv4, validateMac, validateRequiredValue } from '../../../../helpers/validators';
 import { FORM_NAME } from '../../../../helpers/constants';
+import { toggleLeaseModal } from '../../../../actions';
 
-const Form = (props) => {
-    const {
-        t,
-        handleSubmit,
-        reset,
-        pristine,
-        submitting,
-        toggleLeaseModal,
-        processingAdding,
-    } = props;
+const Form = ({
+    handleSubmit,
+    reset,
+    pristine,
+    submitting,
+    processingAdding,
+}) => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    const onClick = () => {
+        reset();
+        dispatch(toggleLeaseModal());
+    };
 
     return (
         <form onSubmit={handleSubmit}>
@@ -61,10 +66,7 @@ const Form = (props) => {
                         type="button"
                         className="btn btn-secondary btn-standard"
                         disabled={submitting}
-                        onClick={() => {
-                            reset();
-                            toggleLeaseModal();
-                        }}
+                        onClick={onClick}
                     >
                         <Trans>cancel_btn</Trans>
                     </button>
@@ -86,12 +88,7 @@ Form.propTypes = {
     handleSubmit: PropTypes.func.isRequired,
     reset: PropTypes.func.isRequired,
     submitting: PropTypes.bool.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
     processingAdding: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
 };
 
-export default flow([
-    withTranslation(),
-    reduxForm({ form: FORM_NAME.LEASE }),
-])(Form);
+export default reduxForm({ form: FORM_NAME.LEASE })(Form);

client/src/components/Settings/Dhcp/StaticLeases/Modal.js

@@ -2,36 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
-
+import { useDispatch } from 'react-redux';
 import Form from './Form';
+import { toggleLeaseModal } from '../../../../actions';
 
-const Modal = (props) => {
-    const {
-        isModalOpen,
-        handleSubmit,
-        toggleLeaseModal,
-        processingAdding,
-    } = props;
+const Modal = ({
+    isModalOpen,
+    handleSubmit,
+    processingAdding,
+}) => {
+    const dispatch = useDispatch();
+
+    const toggleModal = () => dispatch(toggleLeaseModal());
 
     return (
         <ReactModal
             className="Modal__Bootstrap modal-dialog modal-dialog-centered modal-dialog--clients"
             closeTimeoutMS={0}
             isOpen={isModalOpen}
-            onRequestClose={() => toggleLeaseModal()}
+            onRequestClose={toggleModal}
         >
             <div className="modal-content">
                 <div className="modal-header">
                     <h4 className="modal-title">
                         <Trans>dhcp_new_static_lease</Trans>
                     </h4>
-                    <button type="button" className="close" onClick={() => toggleLeaseModal()}>
+                    <button type="button" className="close" onClick={toggleModal}>
                         <span className="sr-only">Close</span>
                     </button>
                 </div>
                 <Form
                     onSubmit={handleSubmit}
-                    toggleLeaseModal={toggleLeaseModal}
                     processingAdding={processingAdding}
                 />
             </div>
@@ -42,7 +43,6 @@ const Modal = (props) => {
 Modal.propTypes = {
     isModalOpen: PropTypes.bool.isRequired,
     handleSubmit: PropTypes.func.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
     processingAdding: PropTypes.bool.isRequired,
 };
 

client/src/components/Settings/Dhcp/StaticLeases/index.js

@@ -1,114 +1,116 @@
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { LEASES_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
-
+import { sortIp } from '../../../../helpers/helpers';
 import Modal from './Modal';
+import { addStaticLease, removeStaticLease } from '../../../../actions';
 
-class StaticLeases extends Component {
-    cellWrap = ({ value }) => (
-        <div className="logs__row o-hidden">
+const cellWrap = ({ value }) => (
+    <div className="logs__row o-hidden">
             <span className="logs__text" title={value}>
                 {value}
             </span>
-        </div>
-    );
+    </div>
+);
 
-    handleSubmit = (data) => {
-        this.props.addStaticLease(data);
+const StaticLeases = ({
+    isModalOpen,
+    processingAdding,
+    processingDeleting,
+    staticLeases,
+}) => {
+    const [t] = useTranslation();
+    const dispatch = useDispatch();
+
+    const handleSubmit = (data) => {
+        dispatch(addStaticLease(data));
     };
 
-    handleDelete = (ip, mac, hostname = '') => {
+    const handleDelete = (ip, mac, hostname = '') => {
         const name = hostname || ip;
         // eslint-disable-next-line no-alert
-        if (window.confirm(this.props.t('delete_confirm', { key: name }))) {
-            this.props.removeStaticLease({ ip, mac, hostname });
+        if (window.confirm(t('delete_confirm', { key: name }))) {
+            dispatch(removeStaticLease({
+                ip,
+                mac,
+                hostname,
+            }));
         }
     };
 
-    render() {
-        const {
-            isModalOpen,
-            toggleLeaseModal,
-            processingAdding,
-            processingDeleting,
-            staticLeases,
-            t,
-        } = this.props;
-        return (
-            <Fragment>
-                <ReactTable
-                    data={staticLeases || []}
-                    columns={[
-                        {
-                            Header: 'MAC',
-                            accessor: 'mac',
-                            Cell: this.cellWrap,
-                        },
-                        {
-                            Header: 'IP',
-                            accessor: 'ip',
-                            Cell: this.cellWrap,
-                        },
-                        {
-                            Header: <Trans>dhcp_table_hostname</Trans>,
-                            accessor: 'hostname',
-                            Cell: this.cellWrap,
-                        },
-                        {
-                            Header: <Trans>actions_table_header</Trans>,
-                            accessor: 'actions',
-                            maxWidth: 150,
-                            Cell: (row) => {
-                                const { ip, mac, hostname } = row.original;
+    return (
+        <>
+            <ReactTable
+                data={staticLeases || []}
+                columns={[
+                    {
+                        Header: 'MAC',
+                        accessor: 'mac',
+                        Cell: cellWrap,
+                    },
+                    {
+                        Header: 'IP',
+                        accessor: 'ip',
+                        sortMethod: sortIp,
+                        Cell: cellWrap,
+                    },
+                    {
+                        Header: <Trans>dhcp_table_hostname</Trans>,
+                        accessor: 'hostname',
+                        Cell: cellWrap,
+                    },
+                    {
+                        Header: <Trans>actions_table_header</Trans>,
+                        accessor: 'actions',
+                        maxWidth: 150,
+                        // eslint-disable-next-line react/display-name
+                        Cell: (row) => {
+                            const { ip, mac, hostname } = row.original;
 
-                                return (
-                                    <div className="logs__row logs__row--center">
-                                        <button
-                                            type="button"
-                                            className="btn btn-icon btn-icon--green btn-outline-secondary btn-sm"
-                                            title={t('delete_table_action')}
-                                            disabled={processingDeleting}
-                                            onClick={() => this.handleDelete(ip, mac, hostname)
-                                            }
-                                        >
-                                            <svg className="icons">
-                                                <use xlinkHref="#delete"/>
-                                            </svg>
-                                        </button>
-                                    </div>
-                                );
-                            },
+                            return <div className="logs__row logs__row--center">
+                                <button
+                                        type="button"
+                                        className="btn btn-icon btn-icon--green btn-outline-secondary btn-sm"
+                                        title={t('delete_table_action')}
+                                        disabled={processingDeleting}
+                                        onClick={() => handleDelete(ip, mac, hostname)}
+                                >
+                                    <svg className="icons">
+                                        <use xlinkHref="#delete" />
+                                    </svg>
+                                </button>
+                            </div>;
                         },
-                    ]}
-                    pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
-                    showPageSizeOptions={false}
-                    showPagination={staticLeases.length > LEASES_TABLE_DEFAULT_PAGE_SIZE}
-                    noDataText={t('dhcp_static_leases_not_found')}
-                    className="-striped -highlight card-table-overflow"
-                    minRows={6}
-                />
-                <Modal
-                    isModalOpen={isModalOpen}
-                    toggleLeaseModal={toggleLeaseModal}
-                    handleSubmit={this.handleSubmit}
-                    processingAdding={processingAdding}
-                />
-            </Fragment>
-        );
-    }
-}
+                    },
+                ]}
+                pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
+                showPageSizeOptions={false}
+                showPagination={staticLeases.length > LEASES_TABLE_DEFAULT_PAGE_SIZE}
+                noDataText={t('dhcp_static_leases_not_found')}
+                className="-striped -highlight card-table-overflow"
+                minRows={6}
+            />
+            <Modal
+                isModalOpen={isModalOpen}
+                handleSubmit={handleSubmit}
+                processingAdding={processingAdding}
+            />
+        </>
+    );
+};
 
 StaticLeases.propTypes = {
     staticLeases: PropTypes.array.isRequired,
     isModalOpen: PropTypes.bool.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
-    removeStaticLease: PropTypes.func.isRequired,
-    addStaticLease: PropTypes.func.isRequired,
     processingAdding: PropTypes.bool.isRequired,
     processingDeleting: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(StaticLeases);
+cellWrap.propTypes = {
+    value: PropTypes.string.isRequired,
+};
+
+export default StaticLeases;

client/src/components/Settings/Dhcp/index.js

@@ -1,281 +1,277 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Trans, withTranslation } from 'react-i18next';
+import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
-import { DHCP_STATUS_RESPONSE } from '../../../helpers/constants';
-import Form from './Form';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import { destroy } from 'redux-form';
+import {
+    DHCP_DESCRIPTION_PLACEHOLDERS,
+    DHCP_FORM_NAMES,
+    STATUS_RESPONSE,
+    FORM_NAME,
+} from '../../../helpers/constants';
 import Leases from './Leases';
 import StaticLeases from './StaticLeases/index';
 import Card from '../../ui/Card';
-import Accordion from '../../ui/Accordion';
 import PageTitle from '../../ui/PageTitle';
 import Loading from '../../ui/Loading';
+import {
+    findActiveDhcp,
+    getDhcpInterfaces,
+    getDhcpStatus,
+    resetDhcp,
+    setDhcpConfig,
+    toggleDhcp,
+    toggleLeaseModal,
+} from '../../../actions';
+import FormDHCPv4 from './FormDHCPv4';
+import FormDHCPv6 from './FormDHCPv6';
+import Interfaces from './Interfaces';
+import {
+    calculateDhcpPlaceholdersIpv4,
+    calculateDhcpPlaceholdersIpv6,
+} from '../../../helpers/helpers';
 
-class Dhcp extends Component {
-    componentDidMount() {
-        this.props.getDhcpStatus();
-        this.props.getDhcpInterfaces();
-    }
+const Dhcp = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const {
+        processingStatus,
+        processingConfig,
+        processing,
+        processingInterfaces,
+        check,
+        leases,
+        staticLeases,
+        isModalOpen,
+        processingAdding,
+        processingDeleting,
+        processingDhcp,
+        v4,
+        v6,
+        interface_name: interfaceName,
+        enabled,
+        dhcp_available,
+        interfaces,
+    } = useSelector((state) => state.dhcp, shallowEqual);
 
-    handleFormSubmit = (values) => {
-        if (values.interface_name) {
-            this.props.setDhcpConfig(values);
+    const interface_name = useSelector(
+        (state) => state.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name,
+    );
+
+    const [ipv4placeholders, setIpv4Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv4);
+    const [ipv6placeholders, setIpv6Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv6);
+
+    useEffect(() => {
+        dispatch(getDhcpStatus());
+        dispatch(getDhcpInterfaces());
+    }, []);
+
+    useEffect(() => {
+        const [ipv4] = interfaces?.[interface_name]?.ipv4_addresses ?? [];
+        const [ipv6] = interfaces?.[interface_name]?.ipv6_addresses ?? [];
+        const gateway_ip = interfaces?.[interface_name]?.gateway_ip;
+
+        const v4placeholders = ipv4
+            ? calculateDhcpPlaceholdersIpv4(ipv4, gateway_ip)
+            : DHCP_DESCRIPTION_PLACEHOLDERS.ipv4;
+
+        const v6placeholders = ipv6
+            ? calculateDhcpPlaceholdersIpv6()
+            : DHCP_DESCRIPTION_PLACEHOLDERS.ipv6;
+
+        setIpv4Placeholders(v4placeholders);
+        setIpv6Placeholders(v6placeholders);
+    }, [interface_name]);
+
+    const clear = () => {
+        // eslint-disable-next-line no-alert
+        if (window.confirm(t('dhcp_reset'))) {
+            Object.values(DHCP_FORM_NAMES)
+                .forEach((formName) => dispatch(destroy(formName)));
+            dispatch(resetDhcp());
         }
     };
 
-    handleToggle = (config) => {
-        this.props.toggleDhcp(config);
+    const handleSubmit = (values) => {
+        dispatch(setDhcpConfig({
+            interface_name,
+            ...values,
+        }));
     };
 
-    getToggleDhcpButton = () => {
-        const {
-            config, check, processingDhcp, processingConfig,
-        } = this.props.dhcp;
-        const otherDhcpFound = check?.otherServer
-            && check.otherServer.found === DHCP_STATUS_RESPONSE.YES;
-        const filledConfig = Object.keys(config).every((key) => {
-            if (key === 'enabled' || key === 'icmp_timeout_msec') {
-                return true;
-            }
+    const enteredSomeV4Value = Object.values(v4)
+        .some(Boolean);
+    const enteredSomeV6Value = Object.values(v6)
+        .some(Boolean);
+    const enteredSomeValue = enteredSomeV4Value || enteredSomeV6Value || interfaceName;
 
-            return config[key];
+    const getToggleDhcpButton = () => {
+        const otherDhcpFound = check && (check.v4.other_server.found === STATUS_RESPONSE.YES
+                || check.v6.other_server.found === STATUS_RESPONSE.YES);
+
+        const filledConfig = interface_name && (Object.values(v4)
+            .every(Boolean) || Object.values(v6)
+            .every(Boolean));
+
+        const className = classNames('btn btn-sm mr-2', {
+            'btn-gray': enabled,
+            'btn-outline-success': !enabled,
         });
 
-        if (config.enabled) {
-            return (
-                <button
-                    type="button"
-                    className="btn btn-standard mr-2 btn-gray"
-                    onClick={() => this.props.toggleDhcp(config)}
-                    disabled={processingDhcp || processingConfig}
-                >
-                    <Trans>dhcp_disable</Trans>
-                </button>
-            );
-        }
+        const onClickDisable = () => dispatch(toggleDhcp({ enabled }));
+        const onClickEnable = () => {
+            const values = {
+                enabled,
+                interface_name,
+                v4: enteredSomeV4Value ? v4 : {},
+                v6: enteredSomeV6Value ? v6 : {},
+            };
+            dispatch(toggleDhcp(values));
+        };
 
-        return (
-            <button
-                type="button"
-                className="btn btn-standard mr-2 btn-success"
-                onClick={() => this.handleToggle(config)}
-                disabled={
-                    !filledConfig || !check || otherDhcpFound || processingDhcp || processingConfig
-                }
-            >
-                <Trans>dhcp_enable</Trans>
-            </button>
-        );
+        return <button
+            type="button"
+            className={className}
+            onClick={enabled ? onClickDisable : onClickEnable}
+            disabled={processingDhcp || processingConfig
+            || (!enabled && (!filledConfig || !check || otherDhcpFound))}
+        >
+            <Trans>{enabled ? 'dhcp_disable' : 'dhcp_enable'}</Trans>
+        </button>;
     };
 
-    getActiveDhcpMessage = (t, check) => {
-        const { found } = check.otherServer;
+    const statusButtonClass = classNames('btn btn-sm mx-2', {
+        'btn-loading btn-primary': processingStatus,
+        'btn-outline-primary': !processingStatus,
+    });
 
-        if (found === DHCP_STATUS_RESPONSE.ERROR) {
-            return (
-                <div className="text-danger mb-2">
-                    <Trans>dhcp_error</Trans>
-                    <div className="mt-2 mb-2">
-                        <Accordion label={t('error_details')}>
-                            <span>{check.otherServer.error}</span>
-                        </Accordion>
+    const onClick = () => dispatch(findActiveDhcp(interface_name));
+
+    const toggleModal = () => dispatch(toggleLeaseModal());
+
+    const initialV4 = enteredSomeV4Value ? v4 : {};
+    const initialV6 = enteredSomeV6Value ? v6 : {};
+
+    if (processing || processingInterfaces) {
+        return <Loading />;
+    }
+
+    if (!processing && !dhcp_available) {
+        return <div className="text-center pt-5">
+            <h2>
+                <Trans>unavailable_dhcp</Trans>
+            </h2>
+            <h4>
+                <Trans>unavailable_dhcp_desc</Trans>
+            </h4>
+        </div>;
+    }
+
+    const toggleDhcpButton = getToggleDhcpButton();
+
+    return <>
+        <PageTitle title={t('dhcp_settings')} subtitle={t('dhcp_description')}>
+            <div className="page-title__actions">
+                <div className="mb-3">
+                    {toggleDhcpButton}
+                    <button
+                        type="button"
+                        className={statusButtonClass}
+                        onClick={onClick}
+                        disabled={enabled || !interface_name || processingConfig}
+                    >
+                        <Trans>check_dhcp_servers</Trans>
+                    </button>
+                    <button
+                        type="button"
+                        className='btn btn-sm mx-2 btn-outline-secondary'
+                        disabled={!enteredSomeValue || processingConfig}
+                        onClick={clear}
+                    >
+                        <Trans>reset_settings</Trans>
+                    </button>
+                </div>
+            </div>
+        </PageTitle>
+        {!processing && !processingInterfaces
+        && <>
+            {!enabled
+            && check
+            && (check.v4.other_server.found !== STATUS_RESPONSE.NO
+                    || check.v6.other_server.found !== STATUS_RESPONSE.NO)
+            && <div className="mb-5">
+                <hr />
+                <div className="text-danger">
+                    <Trans>dhcp_warning</Trans>
+                </div>
+            </div>}
+            <Interfaces
+                initialValues={{ interface_name: interfaceName }}
+            />
+            <Card
+                title={t('dhcp_ipv4_settings')}
+                bodyType="card-body box-body--settings"
+            >
+                <div>
+                    <FormDHCPv4
+                        onSubmit={handleSubmit}
+                        initialValues={{ v4: initialV4 }}
+                        processingConfig={processingConfig}
+                        ipv4placeholders={ipv4placeholders}
+                    />
+                </div>
+            </Card>
+            <Card
+                title={t('dhcp_ipv6_settings')}
+                bodyType="card-body box-body--settings"
+            >
+                <div>
+                    <FormDHCPv6
+                        onSubmit={handleSubmit}
+                        initialValues={{ v6: initialV6 }}
+                        processingConfig={processingConfig}
+                        ipv6placeholders={ipv6placeholders}
+                    />
+                </div>
+            </Card>
+            {enabled
+            && <Card
+                title={t('dhcp_leases')}
+                bodyType="card-body box-body--settings"
+            >
+                <div className="row">
+                    <div className="col">
+                        <Leases leases={leases} />
                     </div>
                 </div>
-            );
-        }
-
-        return (
-            <div className="mb-2">
-                {found === DHCP_STATUS_RESPONSE.YES ? (
-                    <div className="text-danger">
-                        <Trans>dhcp_found</Trans>
+            </Card>}
+            <Card
+                title={t('dhcp_static_leases')}
+                bodyType="card-body box-body--settings"
+            >
+                <div className="row">
+                    <div className="col-12">
+                        <StaticLeases
+                            staticLeases={staticLeases}
+                            isModalOpen={isModalOpen}
+                            processingAdding={processingAdding}
+                            processingDeleting={processingDeleting}
+                        />
                     </div>
-                ) : (
-                    <div className="text-secondary">
-                        <Trans>dhcp_not_found</Trans>
-                    </div>
-                )}
-            </div>
-        );
-    };
-
-    getDhcpWarning = (check) => {
-        if (check.otherServer.found === DHCP_STATUS_RESPONSE.NO) {
-            return '';
-        }
-
-        return (
-            <div className="text-danger">
-                <Trans>dhcp_warning</Trans>
-            </div>
-        );
-    };
-
-    getStaticIpWarning = (t, check, interfaceName) => {
-        if (check.staticIP.static === DHCP_STATUS_RESPONSE.ERROR) {
-            return (
-                <Fragment>
-                    <div className="text-danger mb-2">
-                        <Trans>dhcp_static_ip_error</Trans>
-                        <div className="mt-2 mb-2">
-                            <Accordion label={t('error_details')}>
-                                <span>{check.staticIP.error}</span>
-                            </Accordion>
-                        </div>
-                    </div>
-                    <hr className="mt-4 mb-4" />
-                </Fragment>
-            );
-        } if (
-            check.staticIP.static === DHCP_STATUS_RESPONSE.NO
-            && check.staticIP.ip
-            && interfaceName
-        ) {
-            return (
-                <Fragment>
-                    <div className="text-secondary mb-2">
-                        <Trans
-                            components={[<strong key="0">example</strong>]}
-                            values={{
-                                interfaceName,
-                                ipAddress: check.staticIP.ip,
-                            }}
+                    <div className="col-12">
+                        <button
+                            type="button"
+                            className="btn btn-success btn-standard mt-3"
+                            onClick={toggleModal}
                         >
-                            dhcp_dynamic_ip_found
-                        </Trans>
+                            <Trans>dhcp_add_static_lease</Trans>
+                        </button>
                     </div>
-                    <hr className="mt-4 mb-4" />
-                </Fragment>
-            );
-        }
-
-        return '';
-    };
-
-    render() {
-        const {
-            t,
-            dhcp,
-            resetDhcp,
-            findActiveDhcp,
-            addStaticLease,
-            removeStaticLease,
-            toggleLeaseModal,
-        } = this.props;
-        const statusButtonClass = classnames({
-            'btn btn-primary btn-standard': true,
-            'btn btn-primary btn-standard btn-loading': dhcp.processingStatus,
-        });
-        const { enabled, interface_name, ...values } = dhcp.config;
-
-        return (
-            <Fragment>
-                <PageTitle title={t('dhcp_settings')} />
-                {(dhcp.processing || dhcp.processingInterfaces) && <Loading />}
-                {!dhcp.processing && !dhcp.processingInterfaces && (
-                    <Fragment>
-                        <Card
-                            title={t('dhcp_title')}
-                            subtitle={t('dhcp_description')}
-                            bodyType="card-body box-body--settings"
-                        >
-                            <div className="dhcp">
-                                <Fragment>
-                                    <Form
-                                        onSubmit={this.handleFormSubmit}
-                                        initialValues={{
-                                            interface_name,
-                                            ...values,
-                                        }}
-                                        interfaces={dhcp.interfaces}
-                                        processingConfig={dhcp.processingConfig}
-                                        processingInterfaces={dhcp.processingInterfaces}
-                                        enabled={enabled}
-                                        resetDhcp={resetDhcp}
-                                    />
-                                    <hr />
-                                    <div className="card-actions mb-3">
-                                        {this.getToggleDhcpButton()}
-                                        <button
-                                            type="button"
-                                            className={statusButtonClass}
-                                            onClick={() => findActiveDhcp(interface_name)}
-                                            disabled={
-                                                enabled || !interface_name || dhcp.processingConfig
-                                            }
-                                        >
-                                            <Trans>check_dhcp_servers</Trans>
-                                        </button>
-                                    </div>
-                                    {!enabled && dhcp.check && (
-                                        <Fragment>
-                                            {this.getStaticIpWarning(t, dhcp.check, interface_name)}
-                                            {this.getActiveDhcpMessage(t, dhcp.check)}
-                                            {this.getDhcpWarning(dhcp.check)}
-                                        </Fragment>
-                                    )}
-                                </Fragment>
-                            </div>
-                        </Card>
-                        {dhcp.config.enabled && (
-                            <Card
-                                title={t('dhcp_leases')}
-                                bodyType="card-body box-body--settings"
-                            >
-                                <div className="row">
-                                    <div className="col">
-                                        <Leases leases={dhcp.leases} />
-                                    </div>
-                                </div>
-                            </Card>
-                        )}
-                        <Card
-                            title={t('dhcp_static_leases')}
-                            bodyType="card-body box-body--settings"
-                        >
-                            <div className="row">
-                                <div className="col-12">
-                                    <StaticLeases
-                                        staticLeases={dhcp.staticLeases}
-                                        isModalOpen={dhcp.isModalOpen}
-                                        addStaticLease={addStaticLease}
-                                        removeStaticLease={removeStaticLease}
-                                        toggleLeaseModal={toggleLeaseModal}
-                                        processingAdding={dhcp.processingAdding}
-                                        processingDeleting={dhcp.processingDeleting}
-                                    />
-                                </div>
-                                <div className="col-12">
-                                    <button
-                                        type="button"
-                                        className="btn btn-success btn-standard mt-3"
-                                        onClick={() => toggleLeaseModal()}
-                                    >
-                                        <Trans>dhcp_add_static_lease</Trans>
-                                    </button>
-                                </div>
-                            </div>
-                        </Card>
-                    </Fragment>
-                )}
-            </Fragment>
-        );
-    }
-}
-
-Dhcp.propTypes = {
-    dhcp: PropTypes.object.isRequired,
-    toggleDhcp: PropTypes.func.isRequired,
-    getDhcpStatus: PropTypes.func.isRequired,
-    setDhcpConfig: PropTypes.func.isRequired,
-    findActiveDhcp: PropTypes.func.isRequired,
-    addStaticLease: PropTypes.func.isRequired,
-    removeStaticLease: PropTypes.func.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
-    getDhcpInterfaces: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
-    resetDhcp: PropTypes.func.isRequired,
+                </div>
+            </Card>
+        </>}
+    </>;
 };
 
-export default withTranslation()(Dhcp);
+export default Dhcp;

client/src/components/Settings/Dns/Access/index.js

@@ -1,40 +1,36 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import Form from './Form';
 import Card from '../../../ui/Card';
+import { setAccessList } from '../../../../actions/access';
 
-class Access extends Component {
-    handleFormSubmit = (values) => {
-        this.props.setAccessList(values);
+const Access = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const {
+        processing,
+        processingSet,
+        ...values
+    } = useSelector((state) => state.access, shallowEqual);
+
+    const handleFormSubmit = (values) => {
+        dispatch(setAccessList(values));
     };
 
-    render() {
-        const { t, access } = this.props;
-
-        const { processing, processingSet, ...values } = access;
-
-        return (
-            <Card
-                title={t('access_title')}
-                subtitle={t('access_desc')}
-                bodyType="card-body box-body--settings"
-            >
-                <Form
-                    initialValues={values}
-                    onSubmit={this.handleFormSubmit}
-                    processingSet={processingSet}
-                />
-            </Card>
-        );
-    }
-}
-
-Access.propTypes = {
-    access: PropTypes.object.isRequired,
-    setAccessList: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
+    return (
+        <Card
+            title={t('access_title')}
+            subtitle={t('access_desc')}
+            bodyType="card-body box-body--settings"
+        >
+            <Form
+                initialValues={values}
+                onSubmit={handleFormSubmit}
+                processingSet={processingSet}
+            />
+        </Card>
+    );
 };
 
-export default withTranslation()(Access);
+export default Access;

client/src/components/Settings/Dns/Cache/Form.js

@@ -53,7 +53,7 @@ const Form = ({
             {INPUTS_FIELDS.map(({
                 name, title, description, placeholder, validate, max,
             }) => <div className="col-12" key={name}>
-                <div className="col-7 p-0">
+                <div className="col-12 col-md-7 p-0">
                     <div className="form__group form__group--settings">
                         <label htmlFor={name}
                                className="form__label form__label--with-desc">{t(title)}</label>

client/src/components/Settings/Dns/Config/Form.js

@@ -1,13 +1,12 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
+import { shallowEqual, useSelector } from 'react-redux';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
 import {
     renderInputField,
     renderRadioField,
-    renderSelectField,
+    renderCheckboxField,
     toNumber,
 } from '../../../../helpers/form';
 import {
@@ -18,32 +17,36 @@ import {
 } from '../../../../helpers/validators';
 import { BLOCKING_MODES, FORM_NAME } from '../../../../helpers/constants';
 
-const checkboxes = [{
-    name: 'edns_cs_enabled',
-    placeholder: 'edns_enable',
-    subtitle: 'edns_cs_desc',
-},
-{
-    name: 'dnssec_enabled',
-    placeholder: 'dnssec_enable',
-    subtitle: 'dnssec_enable_desc',
-},
-{
-    name: 'disable_ipv6',
-    placeholder: 'disable_ipv6',
-    subtitle: 'disable_ipv6_desc',
-}];
+const checkboxes = [
+    {
+        name: 'edns_cs_enabled',
+        placeholder: 'edns_enable',
+        subtitle: 'edns_cs_desc',
+    },
+    {
+        name: 'dnssec_enabled',
+        placeholder: 'dnssec_enable',
+        subtitle: 'dnssec_enable_desc',
+    },
+    {
+        name: 'disable_ipv6',
+        placeholder: 'disable_ipv6',
+        subtitle: 'disable_ipv6_desc',
+    },
+];
 
-const customIps = [{
-    description: 'blocking_ipv4_desc',
-    name: 'blocking_ipv4',
-    validateIp: validateIpv4,
-},
-{
-    description: 'blocking_ipv6_desc',
-    name: 'blocking_ipv6',
-    validateIp: validateIpv6,
-}];
+const customIps = [
+    {
+        description: 'blocking_ipv4_desc',
+        name: 'blocking_ipv4',
+        validateIp: validateIpv4,
+    },
+    {
+        description: 'blocking_ipv6_desc',
+        name: 'blocking_ipv6',
+        validateIp: validateIpv6,
+    },
+];
 
 const getFields = (processing, t) => Object.values(BLOCKING_MODES)
     .map((mode) => (
@@ -58,114 +61,107 @@ const getFields = (processing, t) => Object.values(BLOCKING_MODES)
         />
     ));
 
-let Form = ({
-    handleSubmit, submitting, invalid, processing, blockingMode, t,
-}) => <form onSubmit={handleSubmit}>
-    <div className="row">
-        <div className="col-12 col-sm-6">
-            <div className="form__group form__group--settings">
-                <label htmlFor="ratelimit"
-                       className="form__label form__label--with-desc">
-                    <Trans>rate_limit</Trans>
-                </label>
-                <div className="form__desc form__desc--top">
-                    <Trans>rate_limit_desc</Trans>
-                </div>
-                <Field
-                    name="ratelimit"
-                    type="number"
-                    component={renderInputField}
-                    className="form-control"
-                    placeholder={t('form_enter_rate_limit')}
-                    normalize={toNumber}
-                    validate={[validateRequiredValue, validateBiggerOrEqualZeroValue]}
-                />
-            </div>
-        </div>
-        {checkboxes.map(({ name, placeholder, subtitle }) => <div className="col-12" key={name}>
-            <div className="form__group form__group--settings">
-                <Field
-                    name={name}
-                    type="checkbox"
-                    component={renderSelectField}
-                    placeholder={t(placeholder)}
-                    disabled={processing}
-                    subtitle={t(subtitle)}
-                />
-            </div>
-        </div>)}
-        <div className="col-12">
-            <div className="form__group form__group--settings mb-4">
-                <label className="form__label form__label--with-desc">
-                    <Trans>blocking_mode</Trans>
-                </label>
-                <div className="form__desc form__desc--top">
-                    {Object.values(BLOCKING_MODES)
-                        .map((mode) => (
-                            <li key={mode}>
-                                <Trans>{`blocking_mode_${mode}`}</Trans>
-                            </li>
-                        ))}
-                </div>
-                <div className="custom-controls-stacked">
-                    {getFields(processing, t)}
-                </div>
-            </div>
-        </div>
-        {blockingMode === BLOCKING_MODES.custom_ip && (
-            <Fragment>
-                {customIps.map(({
-                    description,
-                    name,
-                    validateIp,
-                }) => <div className="col-12 col-sm-6" key={name}>
-                    <div className="form__group form__group--settings">
-                        <label className="form__label form__label--with-desc"
-                               htmlFor={name}><Trans>{name}</Trans>
-                        </label>
-                        <div className="form__desc form__desc--top">
-                            <Trans>{description}</Trans>
-                        </div>
-                        <Field
-                            name={name}
-                            component={renderInputField}
-                            className="form-control"
-                            placeholder={t('form_enter_ip')}
-                            validate={[validateIp, validateRequiredValue]}
-                        />
+const Form = ({
+    handleSubmit, submitting, invalid, processing,
+}) => {
+    const { t } = useTranslation();
+    const {
+        blocking_mode,
+    } = useSelector((state) => state.form[FORM_NAME.BLOCKING_MODE].values ?? {}, shallowEqual);
+
+    return <form onSubmit={handleSubmit}>
+        <div className="row">
+            <div className="col-12 col-sm-6">
+                <div className="form__group form__group--settings">
+                    <label htmlFor="ratelimit"
+                           className="form__label form__label--with-desc">
+                        <Trans>rate_limit</Trans>
+                    </label>
+                    <div className="form__desc form__desc--top">
+                        <Trans>rate_limit_desc</Trans>
                     </div>
-                </div>)}
-            </Fragment>
-        )}
-    </div>
-    <button
-        type="submit"
-        className="btn btn-success btn-standard btn-large"
-        disabled={submitting || invalid || processing}
-    >
-        <Trans>save_btn</Trans>
-    </button>
-</form>;
+                    <Field
+                        name="ratelimit"
+                        type="number"
+                        component={renderInputField}
+                        className="form-control"
+                        placeholder={t('form_enter_rate_limit')}
+                        normalize={toNumber}
+                        validate={[validateRequiredValue, validateBiggerOrEqualZeroValue]}
+                    />
+                </div>
+            </div>
+            {checkboxes.map(({ name, placeholder, subtitle }) => <div className="col-12" key={name}>
+                <div className="form__group form__group--settings">
+                    <Field
+                        name={name}
+                        type="checkbox"
+                        component={renderCheckboxField}
+                        placeholder={t(placeholder)}
+                        disabled={processing}
+                        subtitle={t(subtitle)}
+                    />
+                </div>
+            </div>)}
+            <div className="col-12">
+                <div className="form__group form__group--settings mb-4">
+                    <label className="form__label form__label--with-desc">
+                        <Trans>blocking_mode</Trans>
+                    </label>
+                    <div className="form__desc form__desc--top">
+                        {Object.values(BLOCKING_MODES)
+                            .map((mode) => (
+                                <li key={mode}>
+                                    <Trans>{`blocking_mode_${mode}`}</Trans>
+                                </li>
+                            ))}
+                    </div>
+                    <div className="custom-controls-stacked">
+                        {getFields(processing, t)}
+                    </div>
+                </div>
+            </div>
+            {blocking_mode === BLOCKING_MODES.custom_ip && (
+                <>
+                    {customIps.map(({
+                        description,
+                        name,
+                        validateIp,
+                    }) => <div className="col-12 col-sm-6" key={name}>
+                        <div className="form__group form__group--settings">
+                            <label className="form__label form__label--with-desc"
+                                   htmlFor={name}><Trans>{name}</Trans>
+                            </label>
+                            <div className="form__desc form__desc--top">
+                                <Trans>{description}</Trans>
+                            </div>
+                            <Field
+                                name={name}
+                                component={renderInputField}
+                                className="form-control"
+                                placeholder={t('form_enter_ip')}
+                                validate={[validateIp, validateRequiredValue]}
+                            />
+                        </div>
+                    </div>)}
+                </>
+            )}
+        </div>
+        <button
+            type="submit"
+            className="btn btn-success btn-standard btn-large"
+            disabled={submitting || invalid || processing}
+        >
+            <Trans>save_btn</Trans>
+        </button>
+    </form>;
+};
 
 Form.propTypes = {
-    blockingMode: PropTypes.string.isRequired,
     handleSubmit: PropTypes.func.isRequired,
     submitting: PropTypes.bool.isRequired,
     invalid: PropTypes.bool.isRequired,
     processing: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
 };
 
-const selector = formValueSelector(FORM_NAME.BLOCKING_MODE);
-
-Form = connect((state) => {
-    const blockingMode = selector(state, 'blocking_mode');
-    return {
-        blockingMode,
-    };
-})(Form);
-
-export default flow([
-    withTranslation(),
-    reduxForm({ form: FORM_NAME.BLOCKING_MODE }),
-])(Form);
+export default reduxForm({ form: FORM_NAME.BLOCKING_MODE })(Form);

client/src/components/Settings/Dns/Config/index.js

@@ -1,15 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import Card from '../../../ui/Card';
 import Form from './Form';
+import { setDnsConfig } from '../../../../actions/dnsConfig';
 
-const Config = ({ t, dnsConfig, setDnsConfig }) => {
-    const handleFormSubmit = (values) => {
-        setDnsConfig(values);
-    };
-
+const Config = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
     const {
         blocking_mode,
         ratelimit,
@@ -19,7 +17,11 @@ const Config = ({ t, dnsConfig, setDnsConfig }) => {
         dnssec_enabled,
         disable_ipv6,
         processingSetConfig,
-    } = dnsConfig;
+    } = useSelector((state) => state.dnsConfig, shallowEqual);
+
+    const handleFormSubmit = (values) => {
+        dispatch(setDnsConfig(values));
+    };
 
     return (
         <Card
@@ -46,10 +48,4 @@ const Config = ({ t, dnsConfig, setDnsConfig }) => {
     );
 };
 
-Config.propTypes = {
-    dnsConfig: PropTypes.object.isRequired,
-    setDnsConfig: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
-};
-
-export default withTranslation()(Config);
+export default Config;

client/src/components/Settings/Dns/Upstream/Form.js

@@ -52,10 +52,11 @@ const Form = ({
     submitting, invalid, processingSetConfig, processingTestUpstream, handleSubmit,
 }) => {
     const dispatch = useDispatch();
-    const [t] = useTranslation();
+    const { t } = useTranslation();
     const upstream_dns = useSelector((store) => store.form[FORM_NAME.UPSTREAM].values.upstream_dns);
-    const bootstrap_dns = useSelector((store) => store.form[FORM_NAME.UPSTREAM]
-        .values.bootstrap_dns);
+    const bootstrap_dns = useSelector(
+        (store) => store.form[FORM_NAME.UPSTREAM].values.bootstrap_dns,
+    );
 
     const handleUpstreamTest = () => dispatch(testUpstream({
         upstream_dns,

client/src/components/Settings/Dns/Upstream/index.js

@@ -1,56 +1,46 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import Form from './Form';
 import Card from '../../../ui/Card';
 import { setDnsConfig } from '../../../../actions/dnsConfig';
 
-const Upstream = (props) => {
-    const [t] = useTranslation();
+const Upstream = () => {
+    const { t } = useTranslation();
     const dispatch = useDispatch();
+    const {
+        upstream_dns,
+        bootstrap_dns,
+        upstream_mode,
+        processingSetConfig,
+    } = useSelector((state) => state.dnsConfig, shallowEqual);
+
+    const { processingTestUpstream } = useSelector((state) => state.settings, shallowEqual);
 
     const handleSubmit = (values) => {
         dispatch(setDnsConfig(values));
     };
 
-    const {
-        processingTestUpstream,
-        dnsConfig: {
-            upstream_dns,
-            bootstrap_dns,
-            processingSetConfig,
-            upstream_mode,
-        },
-    } = props;
-
-    return (
-        <Card
-            title={t('upstream_dns')}
-            subtitle={t('upstream_dns_hint')}
-            bodyType="card-body box-body--settings"
-        >
-            <div className="row">
-                <div className="col">
-                    <Form
-                        initialValues={{
-                            upstream_dns,
-                            bootstrap_dns,
-                            upstream_mode,
-                        }}
-                        onSubmit={handleSubmit}
-                        processingTestUpstream={processingTestUpstream}
-                        processingSetConfig={processingSetConfig}
-                    />
-                </div>
+    return <Card
+        title={t('upstream_dns')}
+        subtitle={t('upstream_dns_hint')}
+        bodyType="card-body box-body--settings"
+    >
+        <div className="row">
+            <div className="col">
+                <Form
+                    initialValues={{
+                        upstream_dns,
+                        bootstrap_dns,
+                        upstream_mode,
+                    }}
+                    onSubmit={handleSubmit}
+                    processingTestUpstream={processingTestUpstream}
+                    processingSetConfig={processingSetConfig}
+                />
             </div>
-        </Card>
-    );
-};
-
-Upstream.propTypes = {
-    processingTestUpstream: PropTypes.bool.isRequired,
-    dnsConfig: PropTypes.object.isRequired,
+        </div>
+    </Card>;
 };
 
 export default Upstream;

client/src/components/Settings/Dns/index.js

@@ -1,67 +1,40 @@
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
+import { useDispatch, useSelector } from 'react-redux';
 import Upstream from './Upstream';
 import Access from './Access';
 import Config from './Config';
 import PageTitle from '../../ui/PageTitle';
 import Loading from '../../ui/Loading';
 import CacheConfig from './Cache';
+import { getDnsConfig } from '../../../actions/dnsConfig';
+import { getAccessList } from '../../../actions/access';
 
-const Dns = (props) => {
+const Dns = () => {
     const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const processing = useSelector((state) => state.access.processing);
+    const processingGetConfig = useSelector((state) => state.dnsConfig.processingGetConfig);
+
+    const isDataLoading = processing || processingGetConfig;
 
     useEffect(() => {
-        props.getAccessList();
-        props.getDnsConfig();
+        dispatch(getAccessList());
+        dispatch(getDnsConfig());
     }, []);
 
-    const {
-        settings,
-        access,
-        setAccessList,
-        dnsConfig,
-        setDnsConfig,
-    } = props;
-
-    const isDataLoading = access.processing || dnsConfig.processingGetConfig;
-
-    return (
-        <>
-            <PageTitle title={t('dns_settings')} />
-            {isDataLoading
-                ? <Loading />
-                : <>
-                    <Upstream
-                        processingTestUpstream={settings.processingTestUpstream}
-                        dnsConfig={dnsConfig}
-                    />
-                    <Config
-                        dnsConfig={dnsConfig}
-                        setDnsConfig={setDnsConfig}
-                    />
-                    <CacheConfig
-                        dnsConfig={dnsConfig}
-                        setDnsConfig={setDnsConfig}
-                    />
-                    <Access
-                        access={access}
-                        setAccessList={setAccessList}
-                    />
-                </>}
-        </>
-    );
-};
-
-Dns.propTypes = {
-    settings: PropTypes.object.isRequired,
-    getAccessList: PropTypes.func.isRequired,
-    setAccessList: PropTypes.func.isRequired,
-    access: PropTypes.object.isRequired,
-    dnsConfig: PropTypes.object.isRequired,
-    setDnsConfig: PropTypes.func.isRequired,
-    getDnsConfig: PropTypes.func.isRequired,
+    return <>
+        <PageTitle title={t('dns_settings')} />
+        {isDataLoading
+            ? <Loading />
+            : <>
+                <Upstream />
+                <Config />
+                <CacheConfig />
+                <Access />
+            </>}
+    </>;
 };
 
 export default Dns;

client/src/components/Settings/Encryption/Form.js

@@ -7,7 +7,7 @@ import flow from 'lodash/flow';
 
 import {
     renderInputField,
-    renderSelectField,
+    renderCheckboxField,
     renderRadioField,
     toNumber,
 } from '../../../helpers/form';
@@ -15,7 +15,7 @@ import { validateIsSafePort, validatePort, validatePortTLS } from '../../../help
 import i18n from '../../../i18n';
 import KeyStatus from './KeyStatus';
 import CertificateStatus from './CertificateStatus';
-import { FORM_NAME } from '../../../helpers/constants';
+import { DNS_OVER_TLS_PORT, FORM_NAME, STANDARD_HTTPS_PORT } from '../../../helpers/constants';
 
 const validate = (values) => {
     const errors = {};
@@ -36,8 +36,8 @@ const clearFields = (change, setTlsConfig, t) => {
         certificate_chain: '',
         private_key_path: '',
         certificate_path: '',
-        port_https: 443,
-        port_dns_over_tls: 853,
+        port_https: STANDARD_HTTPS_PORT,
+        port_dns_over_tls: DNS_OVER_TLS_PORT,
         server_name: '',
         force_https: false,
         enabled: false,
@@ -96,7 +96,7 @@ let Form = (props) => {
                         <Field
                             name="enabled"
                             type="checkbox"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t('encryption_enable')}
                             onChange={handleChange}
                         />
@@ -133,7 +133,7 @@ let Form = (props) => {
                         <Field
                             name="force_https"
                             type="checkbox"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t('encryption_redirect')}
                             onChange={handleChange}
                             disabled={!isEnabled}

client/src/components/Settings/FiltersConfig/Form.js

@@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderSelectField, toNumber } from '../../../helpers/form';
+import { renderCheckboxField, toNumber } from '../../../helpers/form';
 import { FILTERS_INTERVALS_HOURS, FORM_NAME } from '../../../helpers/constants';
 
 const getTitleForInterval = (interval, t) => {
@@ -49,7 +49,7 @@ const Form = (props) => {
                             name="enabled"
                             type="checkbox"
                             modifier="checkbox--settings"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t('block_domain_use_filters_and_hosts')}
                             subtitle={t('filters_block_toggle_hint')}
                             onChange={handleChange}

client/src/components/Settings/LogsConfig/Form.js

@@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderSelectField, renderRadioField, toNumber } from '../../../helpers/form';
+import { renderCheckboxField, renderRadioField, toNumber } from '../../../helpers/form';
 import { FORM_NAME, QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
 
 const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => {
@@ -35,7 +35,7 @@ const Form = (props) => {
                 <Field
                     name="enabled"
                     type="checkbox"
-                    component={renderSelectField}
+                    component={renderCheckboxField}
                     placeholder={t('query_log_enable')}
                     disabled={processing}
                 />
@@ -44,7 +44,7 @@ const Form = (props) => {
                 <Field
                     name="anonymize_client_ip"
                     type="checkbox"
-                    component={renderSelectField}
+                    component={renderCheckboxField}
                     placeholder={t('anonymize_client_ip')}
                     subtitle={t('anonymize_client_ip_desc')}
                     disabled={processing}

client/src/components/Settings/Settings.css

@@ -54,7 +54,11 @@
 }
 
 .form__message--error {
-    color: #cd201f;
+    color: var(--red);
+}
+
+.form__message--left-pad {
+    padding-left: 0.85rem;
 }
 
 .interface__title {
@@ -70,10 +74,6 @@
     content: "";
 }
 
-.dhcp {
-    min-height: 450px;
-}
-
 .form__desc {
     margin-top: 10px;
     font-size: 13px;

client/src/components/Settings/index.js

@@ -10,53 +10,50 @@ import Checkbox from '../ui/Checkbox';
 import Loading from '../ui/Loading';
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
-
+import { getObjectKeysSorted } from '../../helpers/helpers';
 import './Settings.css';
 
-class Settings extends Component {
-    settings = {
-        safebrowsing: {
-            enabled: false,
-            title: 'use_adguard_browsing_sec',
-            subtitle: 'use_adguard_browsing_sec_hint',
-        },
-        parental: {
-            enabled: false,
-            title: 'use_adguard_parental',
-            subtitle: 'use_adguard_parental_hint',
-        },
-        safesearch: {
-            enabled: false,
-            title: 'enforce_safe_search',
-            subtitle: 'enforce_save_search_hint',
-        },
-    };
+const ORDER_KEY = 'order';
 
+const SETTINGS = {
+    safebrowsing: {
+        enabled: false,
+        title: 'use_adguard_browsing_sec',
+        subtitle: 'use_adguard_browsing_sec_hint',
+        [ORDER_KEY]: 0,
+    },
+    parental: {
+        enabled: false,
+        title: 'use_adguard_parental',
+        subtitle: 'use_adguard_parental_hint',
+        [ORDER_KEY]: 1,
+    },
+    safesearch: {
+        enabled: false,
+        title: 'enforce_safe_search',
+        subtitle: 'enforce_save_search_hint',
+        [ORDER_KEY]: 2,
+    },
+};
+
+class Settings extends Component {
     componentDidMount() {
-        this.props.initSettings(this.settings);
+        this.props.initSettings(SETTINGS);
         this.props.getStatsConfig();
         this.props.getLogsConfig();
         this.props.getFilteringStatus();
     }
 
-    renderSettings = (settings) => {
-        const settingsKeys = Object.keys(settings);
-
-        if (settingsKeys.length > 0) {
-            return settingsKeys.map((key) => {
-                const setting = settings[key];
-                const { enabled } = setting;
-                return (
-                    <Checkbox
-                        {...settings[key]}
-                        key={key}
-                        handleChange={() => this.props.toggleSetting(key, enabled)}
-                    />
-                );
-            });
-        }
-        return '';
-    };
+    renderSettings = (settings) => getObjectKeysSorted(settings, ORDER_KEY)
+        .map((key) => {
+            const setting = settings[key];
+            const { enabled } = setting;
+            return <Checkbox
+                {...setting}
+                key={key}
+                handleChange={() => this.props.toggleSetting(key, enabled)}
+            />;
+        });
 
     render() {
         const {

client/src/components/SetupGuide/Guide.css

@@ -13,3 +13,17 @@
     margin-bottom: 20px;
     font-size: 15px;
 }
+
+.guide__address {
+    display: block;
+    margin-bottom: 7px;
+    font-size: 13px;
+    font-weight: 700;
+}
+
+@media screen and (min-width: 768px) {
+    .guide__address {
+        display: list-item;
+        font-size: 15px;
+    }
+}

client/src/components/SetupGuide/index.js

@@ -24,8 +24,8 @@ const SetupGuide = ({
                 <div className="mt-1">
                     <Trans>install_devices_address</Trans>:
                 </div>
-                <div className="mt-2 font-weight-bold">
-                    {dnsAddresses.map((ip) => <li key={ip}>{ip}</li>)}
+                <div className="mt-3">
+                    {dnsAddresses.map((ip) => <li key={ip} className="guide__address">{ip}</li>)}
                 </div>
             </div>
             <Guide dnsAddresses={dnsAddresses} />

client/src/components/ui/Accordion.js

@@ -1,43 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import './Accordion.css';
-
-class Accordion extends Component {
-    state = {
-        isOpen: false,
-    };
-
-    handleClick = () => {
-        this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
-    };
-
-    render() {
-        const accordionClass = this.state.isOpen
-            ? 'accordion__label accordion__label--open'
-            : 'accordion__label';
-
-        return (
-            <div className="accordion">
-                <div
-                    className={accordionClass}
-                    onClick={this.handleClick}
-                >
-                    {this.props.label}
-                </div>
-                {this.state.isOpen && (
-                    <div className="accordion__content">
-                        {this.props.children}
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
-
-Accordion.propTypes = {
-    children: PropTypes.node.isRequired,
-    label: PropTypes.string.isRequired,
-};
-
-export default Accordion;

client/src/components/ui/EncryptionTopline.js

@@ -1,19 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 import isAfter from 'date-fns/is_after';
 import addDays from 'date-fns/add_days';
-
+import { useSelector } from 'react-redux';
 import Topline from './Topline';
 import { EMPTY_DATE } from '../../helpers/constants';
 
-const EncryptionTopline = (props) => {
-    if (props.notAfter === EMPTY_DATE) {
-        return false;
+const EncryptionTopline = () => {
+    const not_after = useSelector((state) => state.encryption.not_after);
+
+    if (not_after === EMPTY_DATE) {
+        return null;
     }
 
-    const isAboutExpire = isAfter(addDays(Date.now(), 30), props.notAfter);
-    const isExpired = isAfter(Date.now(), props.notAfter);
+    const isAboutExpire = isAfter(addDays(Date.now(), 30), not_after);
+    const isExpired = isAfter(Date.now(), not_after);
 
     if (isExpired) {
         return (
@@ -23,7 +24,9 @@ const EncryptionTopline = (props) => {
                 </Trans>
             </Topline>
         );
-    } if (isAboutExpire) {
+    }
+
+    if (isAboutExpire) {
         return (
             <Topline type="warning">
                 <Trans components={[<a href="#encryption" key="0">link</a>]}>
@@ -36,8 +39,4 @@ const EncryptionTopline = (props) => {
     return false;
 };
 
-EncryptionTopline.propTypes = {
-    notAfter: PropTypes.string.isRequired,
-};
-
-export default withTranslation()(EncryptionTopline);
+export default EncryptionTopline;

client/src/components/ui/Footer.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 
@@ -28,7 +27,7 @@ const linksData = [
     },
 ];
 
-const Footer = (props) => {
+const Footer = () => {
     const { t } = useTranslation();
 
     const getYear = () => {
@@ -59,11 +58,6 @@ const Footer = (props) => {
             {t(name)}
         </a>);
 
-
-    const {
-        dnsVersion, processingVersion, getVersion, checkUpdateFlag,
-    } = props;
-
     return (
         <>
             <footer className="footer">
@@ -94,12 +88,7 @@ const Footer = (props) => {
                     <div className="footer__row">
                         {renderCopyright()}
                         <div className="footer__column footer__column--language">
-                            <Version
-                                dnsVersion={dnsVersion}
-                                processingVersion={processingVersion}
-                                getVersion={getVersion}
-                                checkUpdateFlag={checkUpdateFlag}
-                            />
+                            <Version />
                         </div>
                     </div>
                 </div>
@@ -108,11 +97,4 @@ const Footer = (props) => {
     );
 };
 
-Footer.propTypes = {
-    dnsVersion: PropTypes.string,
-    processingVersion: PropTypes.bool,
-    getVersion: PropTypes.func,
-    checkUpdateFlag: PropTypes.bool,
-};
-
 export default Footer;

client/src/components/ui/Loading.js

@@ -1,9 +1,14 @@
 import React from 'react';
-
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Loading.css';
 
-const Loading = () => (
-    <div className="loading" />
+const Loading = ({ className }) => (
+    <div className={classNames('loading', className)} />
 );
 
+Loading.propTypes = {
+    className: PropTypes.string,
+};
+
 export default Loading;

client/src/components/ui/PageTitle.css

@@ -6,18 +6,24 @@
 .page-header--logs {
     flex-direction: row;
     align-items: flex-end;
-    margin: 2rem 0 3rem;
+    margin: 2rem 0 2.8rem;
+}
+
+.page-header--logs .page-title {
+    display: inline-flex;
+    align-items: center;
 }
 
 @media (max-width: 991px) {
     .page-header--logs {
         flex-direction: column;
         align-items: center;
-        margin-bottom: 1.5rem;
+        margin: 1.1rem 0;
     }
 
     .page-header--logs .page-title {
-        padding-bottom: 2.5rem;;
+        margin-bottom: 1.1rem;
+        font-size: 1.8rem;
     }
 }
 

client/src/components/ui/Tabs.css

@@ -2,8 +2,16 @@
     display: flex;
     justify-content: space-between;
     margin-bottom: 15px;
-    padding: 15px 0;
+    padding: 10px 0;
     border-bottom: 1px solid #e8e8e8;
+    overflow: auto;
+}
+
+@media screen and (min-width: 768px) {
+    .tabs__controls {
+        padding: 15px 0;
+        overflow: initial;
+    }
 }
 
 .tabs__controls--form {
@@ -26,11 +34,18 @@
     align-items: center;
     min-width: 70px;
     font-size: 13px;
+    white-space: nowrap;
     color: #555555;
     cursor: pointer;
     opacity: 0.6;
 }
 
+@media screen and (min-width: 768px) {
+    .tab__control {
+        white-space: normal;
+    }
+}
+
 .tab__control:hover,
 .tab__control:focus {
     opacity: 1;

client/src/components/ui/Tooltip.css

@@ -1,5 +1,11 @@
+.tooltip-container {
+    border: 0;
+    padding: 0.7rem;
+    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
+}
+
 .tooltip-custom--narrow {
-    max-width: 13.75rem;
+    max-width: 14rem;
 }
 
 .tooltip-custom--wide {

client/src/components/ui/Tooltip.js

@@ -2,7 +2,12 @@ import React from 'react';
 import TooltipTrigger from 'react-popper-tooltip';
 import propTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { HIDE_TOOLTIP_DELAY } from '../../helpers/constants';
+
+import {
+    HIDE_TOOLTIP_DELAY,
+    MEDIUM_SCREEN_SIZE,
+    SHOW_TOOLTIP_DELAY,
+} from '../../helpers/constants';
 import 'react-popper-tooltip/dist/styles.css';
 import './Tooltip.css';
 
@@ -13,30 +18,51 @@ const Tooltip = ({
     className = 'tooltip-container',
     placement = 'bottom',
     trigger = 'hover',
+    delayShow = SHOW_TOOLTIP_DELAY,
     delayHide = HIDE_TOOLTIP_DELAY,
 }) => {
     const { t } = useTranslation();
+    const touchEventsAvailable = 'ontouchstart' in window;
 
-    return <TooltipTrigger
-        placement={placement}
-        trigger={trigger}
-        delayHide={delayHide}
-        tooltip={({
-            tooltipRef,
-            getTooltipProps,
-        }) => <div {...getTooltipProps({
-            ref: tooltipRef,
-            className,
-        })}>
-            {typeof content === 'string' ? t(content) : content}
-        </div>
-        }>{({ getTriggerProps, triggerRef }) => <span
-        {...getTriggerProps({
-            ref: triggerRef,
-            className: triggerClass,
-        })}
-    >{children}</span>}
-    </TooltipTrigger>;
+    let triggerValue = trigger;
+    let delayHideValue = delayHide;
+    let delayShowValue = delayShow;
+
+    if (window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`).matches || touchEventsAvailable) {
+        triggerValue = 'click';
+        delayHideValue = 0;
+        delayShowValue = 0;
+    }
+
+    return (
+        <TooltipTrigger
+            placement={placement}
+            trigger={triggerValue}
+            delayHide={delayHideValue}
+            delayShow={delayShowValue}
+            tooltip={({ tooltipRef, getTooltipProps }) => (
+                <div
+                    {...getTooltipProps({
+                        ref: tooltipRef,
+                        className,
+                    })}
+                >
+                    {typeof content === 'string' ? t(content) : content}
+                </div>
+            )}
+        >
+            {({ getTriggerProps, triggerRef }) => (
+                <span
+                    {...getTriggerProps({
+                        ref: triggerRef,
+                        className: triggerClass,
+                    })}
+                >
+                    {children}
+                </span>
+            )}
+        </TooltipTrigger>
+    );
 };
 
 Tooltip.propTypes = {
@@ -51,6 +77,7 @@ Tooltip.propTypes = {
     placement: propTypes.string,
     trigger: propTypes.string,
     delayHide: propTypes.string,
+    delayShow: propTypes.string,
     className: propTypes.string,
     triggerClass: propTypes.string,
 };

client/src/components/ui/UpdateOverlay.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 import classnames from 'classnames';
-
+import { useSelector } from 'react-redux';
 import './Overlay.css';
 
-const UpdateOverlay = (props) => {
-    const overlayClass = classnames({
-        overlay: true,
-        'overlay--visible': props.processingUpdate,
+const UpdateOverlay = () => {
+    const processingUpdate = useSelector((state) => state.dashboard.processingUpdate);
+    const overlayClass = classnames('overlay', {
+        'overlay--visible': processingUpdate,
     });
 
     return (
@@ -19,8 +18,4 @@ const UpdateOverlay = (props) => {
     );
 };
 
-UpdateOverlay.propTypes = {
-    processingUpdate: PropTypes.bool,
-};
-
-export default withTranslation()(UpdateOverlay);
+export default UpdateOverlay;

client/src/components/ui/UpdateTopline.js

@@ -1,42 +1,46 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
-
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import Topline from './Topline';
+import { getUpdate } from '../../actions';
 
-const UpdateTopline = (props) => (
-    <Topline type="info">
-        <Fragment>
+const UpdateTopline = () => {
+    const {
+        announcementUrl,
+        newVersion,
+        canAutoUpdate,
+        processingUpdate,
+    } = useSelector((state) => state.dashboard, shallowEqual);
+    const dispatch = useDispatch();
+
+    const handleUpdate = () => {
+        dispatch(getUpdate());
+    };
+
+    return <Topline type="info">
+        <>
             <Trans
-                values={{ version: props.version }}
+                values={{ version: newVersion }}
                 components={[
-                    <a href={props.url} target="_blank" rel="noopener noreferrer" key="0">
+                    <a href={announcementUrl} target="_blank" rel="noopener noreferrer" key="0">
                         Click here
                     </a>,
                 ]}
             >
                 update_announcement
             </Trans>
-            {props.canAutoUpdate
-                && <button
-                    type="button"
-                    className="btn btn-sm btn-primary ml-3"
-                    onClick={props.getUpdate}
-                    disabled={props.processingUpdate}
-                >
-                    <Trans>update_now</Trans>
-                </button>
+            {canAutoUpdate
+            && <button
+                type="button"
+                className="btn btn-sm btn-primary ml-3"
+                onClick={handleUpdate}
+                disabled={processingUpdate}
+            >
+                <Trans>update_now</Trans>
+            </button>
             }
-        </Fragment>
-    </Topline>
-);
-
-UpdateTopline.propTypes = {
-    version: PropTypes.string,
-    url: PropTypes.string.isRequired,
-    canAutoUpdate: PropTypes.bool,
-    getUpdate: PropTypes.func,
-    processingUpdate: PropTypes.bool,
+        </>
+    </Topline>;
 };
 
-export default withTranslation()(UpdateTopline);
+export default UpdateTopline;

client/src/components/ui/Version.js

@@ -1,13 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
-
+import { Trans, useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { getVersion } from '../../actions';
 import './Version.css';
 
-const Version = (props) => {
+const Version = () => {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
     const {
-        dnsVersion, processingVersion, t, checkUpdateFlag,
-    } = props;
+        dnsVersion,
+        processingVersion,
+        checkUpdateFlag,
+    } = useSelector((state) => state?.dashboard ?? {}, shallowEqual);
+
+    const onClick = () => {
+        dispatch(getVersion(true));
+    };
 
     return (
         <div className="version">
@@ -20,7 +28,7 @@ const Version = (props) => {
                 {checkUpdateFlag && <button
                     type="button"
                     className="btn btn-icon btn-icon-sm btn-outline-primary btn-sm ml-2"
-                    onClick={() => props.getVersion(true)}
+                    onClick={onClick}
                     disabled={processingVersion}
                     title={t('check_updates_now')}
                 >
@@ -33,12 +41,4 @@ const Version = (props) => {
     );
 };
 
-Version.propTypes = {
-    dnsVersion: PropTypes.string,
-    getVersion: PropTypes.func,
-    processingVersion: PropTypes.bool,
-    checkUpdateFlag: PropTypes.bool,
-    t: PropTypes.func.isRequired,
-};
-
-export default withTranslation()(Version);
+export default Version;

client/src/components/ui/svg/chevron-down.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
+    <polyline points="6 9 12 15 18 9"></polyline>
+</svg>

client/src/components/ui/svg/globe.svg

@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe">
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+</svg>

client/src/components/ui/svg/help-circle-gray.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac"
+     stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
+    <circle cx="12" cy="12" r="10"></circle>
+    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+    <line x1="12" y1="17" x2="12" y2="17"></line>
+</svg>

client/src/components/ui/svg/logo.svg

@@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="164" height="41" viewBox="0 0 164 41"><g fill-rule="evenodd"><path d="M129.984 22l-1.162-2.945h-5.792L121.931 22H118l6.277-15h3.509L134 22h-4.016zm-4.016-10.996l-1.902 5.149h3.762l-1.86-5.149zM117 16.1c0 .88-.153 1.682-.46 2.404a5.223 5.223 0 0 1-1.318 1.857c-.57.516-1.26.918-2.066 1.207-.807.289-1.703.433-2.688.433-1 0-1.9-.144-2.699-.433-.8-.29-1.477-.691-2.034-1.207a5.232 5.232 0 0 1-1.285-1.857c-.3-.722-.45-1.524-.45-2.404V7h3.64v8.81c0 .4.054.777.161 1.135.108.358.272.677.493.96.221.281.514.505.878.67.364.165.803.248 1.317.248.514 0 .953-.083 1.317-.248.365-.165.66-.389.89-.67.228-.283.392-.602.492-.96.1-.358.15-.736.15-1.135V7H117v9.099zm-16 4.673c-.733.362-1.59.658-2.57.886-.98.228-2.047.342-3.203.342-1.199 0-2.302-.181-3.31-.544-1.008-.362-1.875-.872-2.601-1.53a6.977 6.977 0 0 1-1.703-2.366c-.409-.92-.613-1.943-.613-3.07 0-1.141.208-2.175.624-3.1a6.903 6.903 0 0 1 1.723-2.367 7.71 7.71 0 0 1 2.58-1.5C92.914 7.174 93.98 7 95.121 7c1.184 0 2.284.171 3.299.513 1.015.343 1.84.802 2.474 1.38l-2.284 2.476c-.352-.39-.817-.708-1.395-.956-.579-.249-1.234-.373-1.967-.373-.635 0-1.22.111-1.756.332a4.23 4.23 0 0 0-1.395.927 4.178 4.178 0 0 0-.92 1.41 4.734 4.734 0 0 0-.328 1.78c0 .659.099 1.263.296 1.813.197.55.49 1.024.878 1.42.387.395.867.704 1.438.926.57.221 1.223.332 1.956.332.423 0 .825-.03 1.205-.09.381-.061.733-.158 1.058-.293V16h-2.855v-2.779H101v7.55zm63-6.314c0 1.313-.244 2.447-.73 3.4a6.855 6.855 0 0 1-1.928 2.352 8.035 8.035 0 0 1-2.7 1.356 10.94 10.94 0 0 1-3.05.434H150V7h5.422c1.06 0 2.104.124 3.135.37a7.866 7.866 0 0 1 2.753 1.23c.805.572 1.454 1.338 1.949 2.298.494.96.741 2.147.741 3.56zm-3.77 0c0-.848-.138-1.55-.413-2.108a3.549 3.549 0 0 0-1.101-1.335 4.405 4.405 0 0 0-1.568-.71 7.7 7.7 0 0 0-1.81-.212h-1.8v8.771h1.715c.65 0 1.274-.074 1.874-.222a4.43 4.43 0 0 0 1.589-.731 3.62 3.62 0 0 0 1.1-1.356c.276-.565.414-1.264.414-2.097zm-75.23 0c0 1.313-.244 2.447-.73 3.4a6.855 6.855 0 0 1-1.928 2.352 8.035 8.035 0 0 1-2.7 1.356 10.94 10.94 0 0 1-3.05.434H71V7h5.422c1.06 0 2.104.124 3.135.37A7.866 7.866 0 0 1 82.31 8.6c.805.572 1.454 1.338 1.949 2.298.494.96.741 2.147.741 3.56zm-3.77 0c0-.848-.138-1.55-.413-2.108a3.549 3.549 0 0 0-1.101-1.335 4.405 4.405 0 0 0-1.568-.71 7.7 7.7 0 0 0-1.81-.212h-1.8v8.771h1.715c.65 0 1.274-.074 1.874-.222a4.43 4.43 0 0 0 1.589-.731 3.62 3.62 0 0 0 1.1-1.356c.276-.565.414-1.264.414-2.097zM65.984 22l-1.162-2.945H59.03L57.931 22H54l6.277-15h3.509L70 22h-4.016zm-4.016-10.996l-1.902 5.149h3.762l-1.86-5.149zM143.855 22l-3.171-5.953h-1.202V22H136V7h5.596c.705 0 1.392.074 2.062.222.67.149 1.271.4 1.803.753a3.9 3.9 0 0 1 1.275 1.398c.318.579.476 1.3.476 2.16 0 1.018-.269 1.872-.808 2.564-.539.693-1.285 1.187-2.238 1.484L148 22h-4.145zm-.145-10.403c0-.353-.073-.639-.218-.858a1.502 1.502 0 0 0-.56-.508 2.393 2.393 0 0 0-.766-.244 5.535 5.535 0 0 0-.819-.063h-1.886v3.495h1.679c.29 0 .587-.024.891-.074.304-.05.58-.137.83-.264.248-.128.452-.311.61-.551.16-.24.239-.551.239-.933zM55 37.851v-8.702h.951v3.866h4.866V29.15h.952v8.702h-.952v-3.916h-4.866v3.916H55zM68.068 38c-2.565 0-4.288-2.076-4.288-4.5 0-2.4 1.747-4.5 4.312-4.5 2.565 0 4.288 2.076 4.288 4.5 0 2.4-1.747 4.5-4.312 4.5zm.024-.907c1.927 0 3.3-1.592 3.3-3.593 0-1.977-1.397-3.593-3.324-3.593-1.927 0-3.3 1.592-3.3 3.593 0 1.977 1.397 3.593 3.324 3.593zm6.3.758v-8.702h.963l3.07 4.749 3.072-4.749h.964v8.702h-.952v-7.049l-3.071 4.662h-.048l-3.071-4.65v7.037h-.928zm10.453 0v-8.702h6.095v.895h-5.143v2.971h4.6v.895h-4.6v3.046H91v.895h-6.155z"/><path fill-rule="nonzero" d="M2.831 14.045c.775 4.287 2.266 8.333 4.685 12.143 2.958 4.659 7.21 8.797 12.984 12.319 5.774-3.522 10.026-7.66 12.984-12.319 2.42-3.81 3.91-7.856 4.685-12.143.489-2.706.644-4.844.672-8.003C33.368 3.522 26.636 2.14 20.5 2.14c-6.137 0-12.869 1.381-18.341 3.9.028 3.16.183 5.298.672 8.004zM20.5 0C26.908 0 34.637 1.47 41 4.706c0 6.988.087 24.398-20.5 36.294C-.088 29.104 0 11.694 0 4.706 6.363 1.47 14.092 0 20.5 0z"/><path d="M20.234 27L33 11.344c-.935-.682-1.756-.2-2.208.172l-.016.001-10.644 10.076-4.01-4.392c-1.913-2.011-4.514-.477-5.122-.072L20.234 27"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="41" viewBox="0 0 164 41">
+    <g fill-rule="evenodd">
+        <path d="M129.984 22l-1.162-2.945h-5.792L121.931 22H118l6.277-15h3.509L134 22h-4.016zm-4.016-10.996l-1.902 5.149h3.762l-1.86-5.149zM117 16.1c0 .88-.153 1.682-.46 2.404a5.223 5.223 0 0 1-1.318 1.857c-.57.516-1.26.918-2.066 1.207-.807.289-1.703.433-2.688.433-1 0-1.9-.144-2.699-.433-.8-.29-1.477-.691-2.034-1.207a5.232 5.232 0 0 1-1.285-1.857c-.3-.722-.45-1.524-.45-2.404V7h3.64v8.81c0 .4.054.777.161 1.135.108.358.272.677.493.96.221.281.514.505.878.67.364.165.803.248 1.317.248.514 0 .953-.083 1.317-.248.365-.165.66-.389.89-.67.228-.283.392-.602.492-.96.1-.358.15-.736.15-1.135V7H117v9.099zm-16 4.673c-.733.362-1.59.658-2.57.886-.98.228-2.047.342-3.203.342-1.199 0-2.302-.181-3.31-.544-1.008-.362-1.875-.872-2.601-1.53a6.977 6.977 0 0 1-1.703-2.366c-.409-.92-.613-1.943-.613-3.07 0-1.141.208-2.175.624-3.1a6.903 6.903 0 0 1 1.723-2.367 7.71 7.71 0 0 1 2.58-1.5C92.914 7.174 93.98 7 95.121 7c1.184 0 2.284.171 3.299.513 1.015.343 1.84.802 2.474 1.38l-2.284 2.476c-.352-.39-.817-.708-1.395-.956-.579-.249-1.234-.373-1.967-.373-.635 0-1.22.111-1.756.332a4.23 4.23 0 0 0-1.395.927 4.178 4.178 0 0 0-.92 1.41 4.734 4.734 0 0 0-.328 1.78c0 .659.099 1.263.296 1.813.197.55.49 1.024.878 1.42.387.395.867.704 1.438.926.57.221 1.223.332 1.956.332.423 0 .825-.03 1.205-.09.381-.061.733-.158 1.058-.293V16h-2.855v-2.779H101v7.55zm63-6.314c0 1.313-.244 2.447-.73 3.4a6.855 6.855 0 0 1-1.928 2.352 8.035 8.035 0 0 1-2.7 1.356 10.94 10.94 0 0 1-3.05.434H150V7h5.422c1.06 0 2.104.124 3.135.37a7.866 7.866 0 0 1 2.753 1.23c.805.572 1.454 1.338 1.949 2.298.494.96.741 2.147.741 3.56zm-3.77 0c0-.848-.138-1.55-.413-2.108a3.549 3.549 0 0 0-1.101-1.335 4.405 4.405 0 0 0-1.568-.71 7.7 7.7 0 0 0-1.81-.212h-1.8v8.771h1.715c.65 0 1.274-.074 1.874-.222a4.43 4.43 0 0 0 1.589-.731 3.62 3.62 0 0 0 1.1-1.356c.276-.565.414-1.264.414-2.097zm-75.23 0c0 1.313-.244 2.447-.73 3.4a6.855 6.855 0 0 1-1.928 2.352 8.035 8.035 0 0 1-2.7 1.356 10.94 10.94 0 0 1-3.05.434H71V7h5.422c1.06 0 2.104.124 3.135.37A7.866 7.866 0 0 1 82.31 8.6c.805.572 1.454 1.338 1.949 2.298.494.96.741 2.147.741 3.56zm-3.77 0c0-.848-.138-1.55-.413-2.108a3.549 3.549 0 0 0-1.101-1.335 4.405 4.405 0 0 0-1.568-.71 7.7 7.7 0 0 0-1.81-.212h-1.8v8.771h1.715c.65 0 1.274-.074 1.874-.222a4.43 4.43 0 0 0 1.589-.731 3.62 3.62 0 0 0 1.1-1.356c.276-.565.414-1.264.414-2.097zM65.984 22l-1.162-2.945H59.03L57.931 22H54l6.277-15h3.509L70 22h-4.016zm-4.016-10.996l-1.902 5.149h3.762l-1.86-5.149zM143.855 22l-3.171-5.953h-1.202V22H136V7h5.596c.705 0 1.392.074 2.062.222.67.149 1.271.4 1.803.753a3.9 3.9 0 0 1 1.275 1.398c.318.579.476 1.3.476 2.16 0 1.018-.269 1.872-.808 2.564-.539.693-1.285 1.187-2.238 1.484L148 22h-4.145zm-.145-10.403c0-.353-.073-.639-.218-.858a1.502 1.502 0 0 0-.56-.508 2.393 2.393 0 0 0-.766-.244 5.535 5.535 0 0 0-.819-.063h-1.886v3.495h1.679c.29 0 .587-.024.891-.074.304-.05.58-.137.83-.264.248-.128.452-.311.61-.551.16-.24.239-.551.239-.933zM55 37.851v-8.702h.951v3.866h4.866V29.15h.952v8.702h-.952v-3.916h-4.866v3.916H55zM68.068 38c-2.565 0-4.288-2.076-4.288-4.5 0-2.4 1.747-4.5 4.312-4.5 2.565 0 4.288 2.076 4.288 4.5 0 2.4-1.747 4.5-4.312 4.5zm.024-.907c1.927 0 3.3-1.592 3.3-3.593 0-1.977-1.397-3.593-3.324-3.593-1.927 0-3.3 1.592-3.3 3.593 0 1.977 1.397 3.593 3.324 3.593zm6.3.758v-8.702h.963l3.07 4.749 3.072-4.749h.964v8.702h-.952v-7.049l-3.071 4.662h-.048l-3.071-4.65v7.037h-.928zm10.453 0v-8.702h6.095v.895h-5.143v2.971h4.6v.895h-4.6v3.046H91v.895h-6.155z"/>
+        <path fill-rule="nonzero"
+              d="M2.831 14.045c.775 4.287 2.266 8.333 4.685 12.143 2.958 4.659 7.21 8.797 12.984 12.319 5.774-3.522 10.026-7.66 12.984-12.319 2.42-3.81 3.91-7.856 4.685-12.143.489-2.706.644-4.844.672-8.003C33.368 3.522 26.636 2.14 20.5 2.14c-6.137 0-12.869 1.381-18.341 3.9.028 3.16.183 5.298.672 8.004zM20.5 0C26.908 0 34.637 1.47 41 4.706c0 6.988.087 24.398-20.5 36.294C-.088 29.104 0 11.694 0 4.706 6.363 1.47 14.092 0 20.5 0z"/>
+        <path d="M20.234 27L33 11.344c-.935-.682-1.756-.2-2.208.172l-.016.001-10.644 10.076-4.01-4.392c-1.913-2.011-4.514-.477-5.122-.072L20.234 27"/>
+    </g>
+</svg>

client/src/components/ui/svg/trash-2.svg

@@ -1 +1,7 @@
-<svg stroke="#84868c" fill="none" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m3 6h2 16"/><path d="m19 6v14a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2-2v-14m3 0v-2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="m10 11v6"/><path d="m14 11v6"/></svg>
+<svg stroke="#84868c" fill="none" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+     viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m3 6h2 16"/>
+    <path d="m19 6v14a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2-2v-14m3 0v-2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+    <path d="m10 11v6"/>
+    <path d="m14 11v6"/>
+</svg>

client/src/components/ui/svg/x.svg

@@ -1 +1,5 @@
-<svg stroke="#84868c" fill="none" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m18 6-12 12"/><path d="m6 6 12 12"/></svg>
+<svg stroke="#84868c" fill="none" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+     viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m18 6-12 12"/>
+    <path d="m6 6 12 12"/>
+</svg>

client/src/containers/App.js

@@ -1,14 +0,0 @@
-import { connect } from 'react-redux';
-import * as actionCreators from '../actions';
-import App from '../components/App';
-
-const mapStateToProps = (state) => {
-    const { dashboard, encryption } = state;
-    const props = { dashboard, encryption };
-    return props;
-};
-
-export default connect(
-    mapStateToProps,
-    actionCreators,
-)(App);

client/src/containers/Header.js

@@ -1,18 +0,0 @@
-import { connect } from 'react-redux';
-import { getVersion } from '../actions';
-import Header from '../components/Header';
-
-const mapStateToProps = (state) => {
-    const { dashboard } = state;
-    const props = { dashboard };
-    return props;
-};
-
-const mapDispatchToProps = {
-    getVersion,
-};
-
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(Header);

client/src/helpers/constants.js

@@ -1,13 +1,23 @@
 export const R_URL_REQUIRES_PROTOCOL = /^https?:\/\/[^/\s]+(\/.*)?$/;
-export const R_HOST = /^(\*\.)?([\w-]+\.)+[\w-]+$/;
+
+// matches hostname or *.wildcard
+export const R_HOST = /^(\*\.)?[\w.-]+$/;
+
 export const R_IPV4 = /^(?:(?:^|\.)(?:2(?:5[0-5]|[0-4]\d)|1?\d?\d)){4}$/;
+
 export const R_IPV6 = /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/;
+
 export const R_CIDR = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\/([0-9]|[1-2][0-9]|3[0-2]))$/;
+
 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]))$/;
+
 export const R_CIDR_IPV6 = /^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\/(12[0-8]|1[0-1][0-9]|[1-9][0-9]|[0-9]))$/;
+
 export const R_PATH_LAST_PART = /\/[^/]*$/;
+
 // eslint-disable-next-line no-control-regex
 export const R_UNIX_ABSOLUTE_PATH = /^(\/[^/\x00]+)+$/;
+
 // eslint-disable-next-line no-control-regex
 export const R_WIN_ABSOLUTE_PATH = /^([a-zA-Z]:)?(\\|\/)(?:[^\\/:*?"<>|\x00]+\\)*[^\\/:*?"<>|\x00]*$/;
 
@@ -38,7 +48,6 @@ export const PRIVACY_POLICY_LINK = 'https://adguard.com/privacy/home.html';
 export const PORT_53_FAQ_LINK = 'https://github.com/AdguardTeam/AdGuardHome/wiki/FAQ#bindinuse';
 
 export const ADDRESS_IN_USE_TEXT = 'address already in use';
-export const UBUNTU_SYSTEM_PORT = 53;
 
 export const INSTALL_FIRST_STEP = 1;
 export const INSTALL_TOTAL_STEPS = 5;
@@ -53,6 +62,8 @@ export const SETTINGS_NAMES = {
 export const STANDARD_DNS_PORT = 53;
 export const STANDARD_WEB_PORT = 80;
 export const STANDARD_HTTPS_PORT = 443;
+export const DNS_OVER_TLS_PORT = 853;
+export const MAX_PORT = 65535;
 
 export const EMPTY_DATE = '0001-01-01T00:00:00Z';
 
@@ -62,6 +73,7 @@ export const CHECK_TIMEOUT = 1000;
 export const SUCCESS_TOAST_TIMEOUT = 5000;
 export const FAILURE_TOAST_TIMEOUT = 30000;
 export const HIDE_TOOLTIP_DELAY = 300;
+export const SHOW_TOOLTIP_DELAY = 200;
 export const MODAL_OPEN_TIMEOUT = 150;
 
 export const UNSAFE_PORTS = [
@@ -133,7 +145,7 @@ export const UNSAFE_PORTS = [
 
 export const ALL_INTERFACES_IP = '0.0.0.0';
 
-export const DHCP_STATUS_RESPONSE = {
+export const STATUS_RESPONSE = {
     YES: 'yes',
     NO: 'no',
     ERROR: 'error',
@@ -288,50 +300,6 @@ export const WHOIS_ICONS = {
     descr: '',
 };
 
-export const DNS_RECORD_TYPES = [
-    'A',
-    'AAAA',
-    'AFSDB',
-    'APL',
-    'CAA',
-    'CDNSKEY',
-    'CDS',
-    'CERT',
-    'CNAME',
-    'CSYNC',
-    'DHCID',
-    'DLV',
-    'DNAME',
-    'DNSKEY',
-    'DS',
-    'HIP',
-    'IPSECKEY',
-    'KEY',
-    'KX',
-    'LOC',
-    'MX',
-    'NAPTR',
-    'NS',
-    'NSEC',
-    'NSEC3',
-    'NSEC3PARAM',
-    'OPENPGPKEY',
-    'PTR',
-    'RRSIG',
-    'RP',
-    'SIG',
-    'SMIMEA',
-    'SOA',
-    'SRV',
-    'SSHFP',
-    'TA',
-    'TKEY',
-    'TLSA',
-    'TSIG',
-    'TXT',
-    'URI',
-];
-
 export const DEFAULT_LOGS_FILTER = {
     search: '',
     response_status: '',
@@ -339,7 +307,7 @@ export const DEFAULT_LOGS_FILTER = {
 
 export const DEFAULT_LANGUAGE = 'en';
 
-export const TABLE_DEFAULT_PAGE_SIZE = 50;
+export const TABLE_DEFAULT_PAGE_SIZE = 25;
 
 export const TABLE_FIRST_PAGE = 0;
 
@@ -370,11 +338,6 @@ export const RESPONSE_FILTER = {
         query: 'processed',
         label: 'show_processed_responses',
     },
-    SPACE: {
-        query: 'all',
-        label: '',
-        disabled: true,
-    },
     BLOCKED: {
         query: 'blocked',
         label: 'show_blocked_responses',
@@ -401,10 +364,11 @@ export const RESPONSE_FILTER = {
     },
 };
 
-export const RESPONSE_FILTER_QUERIES = Object.values(RESPONSE_FILTER).reduce((acc, { query }) => {
-    acc[query] = query;
-    return acc;
-}, {});
+export const RESPONSE_FILTER_QUERIES = Object.values(RESPONSE_FILTER)
+    .reduce((acc, { query }) => {
+        acc[query] = query;
+        return acc;
+    }, {});
 
 export const FILTERED_STATUS_TO_META_MAP = {
     [FILTERED_STATUS.NOT_FILTERED_WHITE_LIST]: {
@@ -495,6 +459,12 @@ export const IP_MATCH_LIST_STATUS = {
     CIDR: 'CIDR', // the ip is in the specified CIDR range
 };
 
+export const DHCP_FORM_NAMES = {
+    DHCPv4: 'dhcpv4',
+    DHCPv6: 'dhcpv6',
+    DHCP_INTERFACES: 'dhcpInterfaces',
+};
+
 export const FORM_NAME = {
     UPSTREAM: 'upstream',
     DOMAIN_CHECK: 'domainCheck',
@@ -502,7 +472,6 @@ export const FORM_NAME = {
     REWRITES: 'rewrites',
     LOGS_FILTER: 'logsFilter',
     CLIENT: 'client',
-    DHCP: 'dhcp',
     LEASE: 'lease',
     ACCESS: 'access',
     BLOCKING_MODE: 'blockingMode',
@@ -514,8 +483,39 @@ export const FORM_NAME = {
     INSTALL: 'install',
     LOGIN: 'login',
     CACHE: 'cache',
+    ...DHCP_FORM_NAMES,
 };
 
-export const smallScreenSize = 767;
+export const SMALL_SCREEN_SIZE = 767;
+export const MEDIUM_SCREEN_SIZE = 1023;
 
 export const SECONDS_IN_HOUR = 60 * 60;
+
+export const SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
+
+export const DHCP_VALUES_PLACEHOLDERS = {
+    ipv4: {
+        subnet_mask: '255.255.255.0',
+        lease_duration: SECONDS_IN_DAY.toString(),
+    },
+    ipv6: {
+        range_start: '2001::1',
+        range_end: 'ff',
+        lease_duration: SECONDS_IN_DAY.toString(),
+    },
+};
+
+export const DHCP_DESCRIPTION_PLACEHOLDERS = {
+    ipv4: {
+        gateway_ip: 'dhcp_form_gateway_input',
+        subnet_mask: 'dhcp_form_subnet_input',
+        range_start: 'dhcp_form_range_start',
+        range_end: 'dhcp_form_range_end',
+        lease_duration: 'dhcp_form_lease_input',
+    },
+    ipv6: {
+        range_start: 'dhcp_form_range_start',
+        range_end: 'dhcp_form_range_end',
+        lease_duration: 'dhcp_form_lease_input',
+    },
+};

client/src/helpers/filters/filters.json

@@ -25,10 +25,10 @@
             "source": "https://adguardteam.github.io/AdGuardSDNSFilter/Filters/filter.txt"
         },
         "adaway-default-blocklist": {
-            "name": "AdAway default blocklist",
+            "name": "AdAway Default Blocklist",
             "categoryId": "general",
             "homepage": "https://github.com/AdAway/adaway.github.io/",
-            "source": "https://raw.githubusercontent.com/AdAway/adaway.github.io/master/hosts.txt"
+            "source": "https://adaway.org/hosts.txt"
         },
         "peter-lowe-list": {
             "name": "Peter Lowe's List",
@@ -75,7 +75,7 @@
         "the-big-list-of-hacked-malware-web-sites": {
             "name": "The Big List of Hacked Malware Web Sites",
             "categoryId": "security",
-            "homepage": "https://github.com/hoshsadiq/adblock-nocoin-list/",
+            "homepage": "https://github.com/mitchellkrogza/The-Big-List-of-Hacked-Malware-Web-Sites",
             "source": "https://raw.githubusercontent.com/mitchellkrogza/The-Big-List-of-Hacked-Malware-Web-Sites/master/hacked-domains.list"
         },
         "scam-blocklist-by-durable-napkin": {
@@ -153,8 +153,8 @@
         "BarbBlock": {
             "name": "BarbBlock",
             "categoryId": "other",
-            "homepage": "https://ssl.bblck.me/",
-            "source": "https://ssl.bblck.me/blacklists/ublock-origin.txt"
+            "homepage": "https://github.com/paulgb/BarbBlock/",
+            "source": "https://paulgb.github.io/BarbBlock/blacklists/hosts-file.txt"
         }
     }
 }

client/src/helpers/form.js

@@ -1,5 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Trans } from 'react-i18next';
+import classNames from 'classnames';
 import { createOnBlurHandler } from './helpers';
 import { R_UNIX_ABSOLUTE_PATH, R_WIN_ABSOLUTE_PATH } from './constants';
 
@@ -24,11 +26,12 @@ export const renderField = (props, elementType) => {
         step,
         onBlur,
     });
+
     return (
         <>
             {element}
             {!disabled && touched && error
-            && <span className="form__message form__message--error">{error}</span>}
+            && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
         </>
     );
 };
@@ -47,7 +50,7 @@ renderField.propTypes = {
     step: PropTypes.number,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
-        error: PropTypes.object,
+        error: PropTypes.string,
     }).isRequired,
 };
 
@@ -71,7 +74,7 @@ export const renderGroupField = ({
     const onBlur = (event) => createOnBlurHandler(event, input, normalizeOnBlur);
 
     return (
-        <Fragment>
+        <>
             <div className="input-group">
                 <input
                     {...input}
@@ -98,8 +101,8 @@ export const renderGroupField = ({
                 }
             </div>
             {!disabled && touched && error
-            && <span className="form__message form__message--error">{error}</span>}
-        </Fragment>
+            && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
+        </>
     );
 };
 
@@ -115,7 +118,7 @@ renderGroupField.propTypes = {
     removeField: PropTypes.func,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
-        error: PropTypes.object,
+        error: PropTypes.string,
     }).isRequired,
     normalizeOnBlur: PropTypes.func,
 };
@@ -137,7 +140,8 @@ export const renderRadioField = ({
     </label>
     {!disabled
     && touched
-    && (error && <span className="form__message form__message--error">{error}</span>)}
+    && error
+    && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
 </Fragment>;
 
 renderRadioField.propTypes = {
@@ -147,11 +151,11 @@ renderRadioField.propTypes = {
     disabled: PropTypes.bool,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
-        error: PropTypes.object,
+        error: PropTypes.string,
     }).isRequired,
 };
 
-export const renderSelectField = ({
+export const renderCheckboxField = ({
     input,
     placeholder,
     subtitle,
@@ -163,7 +167,8 @@ export const renderSelectField = ({
 }) => <>
     <label className={`checkbox ${modifier}`} onClick={onClick}>
         <span className="checkbox__marker" />
-        <input {...input} type="checkbox" className="checkbox__input" disabled={disabled} checked={input.checked || checked}/>
+        <input {...input} type="checkbox" className="checkbox__input" disabled={disabled}
+               checked={input.checked || checked} />
         <span className="checkbox__label">
                         <span className="checkbox__label-text checkbox__label-text--long">
                             <span className="checkbox__label-title">{placeholder}</span>
@@ -178,10 +183,11 @@ export const renderSelectField = ({
     </label>
     {!disabled
     && touched
-    && error && <span className="form__message form__message--error">{error}</span>}
+    && error
+    && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
 </>;
 
-renderSelectField.propTypes = {
+renderCheckboxField.propTypes = {
     input: PropTypes.object.isRequired,
     placeholder: PropTypes.string,
     subtitle: PropTypes.string,
@@ -191,7 +197,37 @@ renderSelectField.propTypes = {
     checked: PropTypes.bool,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
-        error: PropTypes.object,
+        error: PropTypes.string,
+    }).isRequired,
+};
+
+export const renderSelectField = ({
+    input,
+    meta: { touched, error },
+    children,
+    label,
+}) => {
+    const showWarning = touched && error;
+    const selectClass = classNames('form-control custom-select', {
+        'select--no-warning': !showWarning,
+    });
+
+    return <>
+        {label && <label><Trans>{label}</Trans></label>}
+        <select {...input} className={selectClass}>{children}</select>
+        {showWarning
+        && <span className="form__message form__message--error form__message--left-pad"><Trans>{error}</Trans></span>}
+    </>;
+};
+
+renderSelectField.propTypes = {
+    input: PropTypes.object.isRequired,
+    disabled: PropTypes.bool,
+    label: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.array, PropTypes.element]).isRequired,
+    meta: PropTypes.shape({
+        touched: PropTypes.bool,
+        error: PropTypes.string,
     }).isRequired,
 };
 
@@ -218,7 +254,7 @@ export const renderServiceField = ({
         </svg>
     </label>
     {!disabled && touched && error
-    && <span className="form__message form__message--error">{error}</span>}
+    && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
 </Fragment>;
 
 renderServiceField.propTypes = {
@@ -229,10 +265,12 @@ renderServiceField.propTypes = {
     icon: PropTypes.string,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
-        error: PropTypes.object,
+        error: PropTypes.string,
     }).isRequired,
 };
 
+export const getLastIpv4Octet = (ipv4) => parseInt(ipv4.slice(ipv4.lastIndexOf('.') + 1), 10);
+
 /**
  * @param value {string}
  * @returns {*|number}

client/src/helpers/formatClientCell.js

@@ -31,10 +31,11 @@ export const formatClientCell = (row, isDetailed = false, isLogs = true) => {
 
     if (info) {
         const { name, whois_info } = info;
+        const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
 
         if (name) {
             if (isLogs) {
-                nameContainer = !whois_info && isDetailed
+                nameContainer = !whoisAvailable && isDetailed
                     ? (
                         <small title={value}>{value}</small>
                     ) : (
@@ -54,7 +55,7 @@ export const formatClientCell = (row, isDetailed = false, isLogs = true) => {
             }
         }
 
-        if (whois_info && isDetailed) {
+        if (whoisAvailable && isDetailed) {
             whoisContainer = (
                 <div className="logs__text logs__text--wrap logs__text--whois">
                     {getFormattedWhois(whois_info)}

client/src/helpers/helpers.js

@@ -5,7 +5,6 @@ import subHours from 'date-fns/sub_hours';
 import addHours from 'date-fns/add_hours';
 import addDays from 'date-fns/add_days';
 import subDays from 'date-fns/sub_days';
-import isSameDay from 'date-fns/is_same_day';
 import round from 'lodash/round';
 import axios from 'axios';
 import i18n from 'i18next';
@@ -20,7 +19,7 @@ import {
     DEFAULT_LANGUAGE,
     DEFAULT_TIME_FORMAT,
     DETAILED_DATE_FORMAT_OPTIONS,
-    DNS_RECORD_TYPES,
+    DHCP_VALUES_PLACEHOLDERS,
     FILTERED,
     FILTERED_STATUS,
     IP_MATCH_LIST_STATUS,
@@ -31,6 +30,7 @@ import {
 
 /**
  * @param time {string} The time to format
+ * @param options {string}
  * @returns {string} Returns the time in the format HH:mm:ss
  */
 export const formatTime = (time, options = DEFAULT_TIME_FORMAT) => {
@@ -60,12 +60,6 @@ export const formatDetailedDateTime = (dateTime) => formatDateTime(
     dateTime, DETAILED_DATE_FORMAT_OPTIONS,
 );
 
-/**
- * @param date {string}
- * @returns {boolean}
- */
-export const isToday = (date) => isSameDay(new Date(date), new Date());
-
 export const normalizeLogs = (logs) => logs.map((log) => {
     const {
         answer,
@@ -197,7 +191,7 @@ export const captitalizeWords = (text) => text.split(/[ -_]/g)
 
 export const getInterfaceIp = (option) => {
     const onlyIPv6 = option.ip_addresses.every((ip) => ip.includes(':'));
-    let interfaceIP = option.ip_addresses[0];
+    let [interfaceIP] = option.ip_addresses;
 
     if (!onlyIPv6) {
         option.ip_addresses.forEach((ip) => {
@@ -210,16 +204,9 @@ export const getInterfaceIp = (option) => {
     return interfaceIP;
 };
 
-export const getIpList = (interfaces) => {
-    let list = [];
-
-    Object.keys(interfaces)
-        .forEach((item) => {
-            list = [...list, ...interfaces[item].ip_addresses];
-        });
-
-    return list.sort();
-};
+export const getIpList = (interfaces) => Object.values(interfaces)
+    .reduce((acc, curr) => acc.concat(curr.ip_addresses), [])
+    .sort();
 
 export const getDnsAddress = (ip, port = '') => {
     const isStandardDnsPort = port === STANDARD_DNS_PORT;
@@ -351,39 +338,6 @@ export const normalizeTopClients = (topClients) => topClients.reduce(
     },
 );
 
-export const getClientInfo = (clients, ip) => {
-    const client = clients
-        .find((item) => 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) {
-        return '';
-    }
-
-    const { name, whois_info } = client;
-    const whois = Object.keys(whois_info).length > 0 ? whois_info : '';
-
-    return {
-        name,
-        whois,
-    };
-};
-
 export const sortClients = (clients) => {
     const compare = (a, b) => {
         const nameA = a.name.toUpperCase();
@@ -443,8 +397,6 @@ export const normalizeWhois = (whois) => {
     return whois;
 };
 
-export const isValidQuestionType = (type) => type && DNS_RECORD_TYPES.includes(type.toUpperCase());
-
 export const getPathWithQueryString = (path, params) => {
     const searchParams = new URLSearchParams(params);
 
@@ -542,10 +494,10 @@ export const getMap = (arr, key, value) => arr.reduce((acc, curr) => {
 
 /**
  * @param parsedIp {object} ipaddr.js IPv4 or IPv6 object
- * @param cidr {array} ipaddr.js CIDR array
+ * @param parsedCidr {array} ipaddr.js CIDR array
  * @returns {boolean}
  */
-export const isIpMatchCidr = (parsedIp, parsedCidr) => {
+const isIpMatchCidr = (parsedIp, parsedCidr) => {
     try {
         const cidrIpVersion = parsedCidr[0].kind();
         const ipVersion = parsedIp.kind();
@@ -556,6 +508,75 @@ export const isIpMatchCidr = (parsedIp, parsedCidr) => {
     }
 };
 
+/**
+ * The purpose of this method is to quickly check
+ * if this IP can possibly be in the specified CIDR range.
+ *
+ * @param ip {string}
+ * @param listItem {string}
+ * @returns {boolean}
+ */
+const isIpQuickMatchCIDR = (ip, listItem) => {
+    const ipv6 = ip.indexOf(':') !== -1;
+    const cidrIpv6 = listItem.indexOf(':') !== -1;
+    if (ipv6 !== cidrIpv6) {
+        // CIDR is for a different IP type
+        return false;
+    }
+
+    if (cidrIpv6) {
+        // We don't do quick check for IPv6 addresses
+        return true;
+    }
+
+    const idx = listItem.indexOf('/');
+    if (idx === -1) {
+        // Not a CIDR, return false immediately
+        return false;
+    }
+
+    const cidrIp = listItem.substring(0, idx);
+    const cidrRange = parseInt(listItem.substring(idx + 1), 10);
+    if (Number.isNaN(cidrRange)) {
+        // Not a valid CIDR
+        return false;
+    }
+
+    const parts = cidrIp.split('.');
+    if (parts.length !== 4) {
+        // Invalid IP, return immediately
+        return false;
+    }
+
+    // Now depending on the range we check if the IP can possibly be in that range
+    if (cidrRange < 8) {
+        // Use the slow approach
+        return true;
+    }
+
+    if (cidrRange < 16) {
+        // Check the first part
+        // Example: 0.0.0.0/8 matches 0.*.*.*
+        return ip.indexOf(`${parts[0]}.`) === 0;
+    }
+
+    if (cidrRange < 24) {
+        // Check the first two parts
+        // Example: 0.0.0.0/16 matches 0.0.*.*
+        return ip.indexOf(`${parts[0]}.${parts[1]}.`) === 0;
+    }
+
+    if (cidrRange <= 32) {
+        // Check the first two parts
+        // Example: 0.0.0.0/16 matches 0.0.*.*
+        return ip.indexOf(`${parts[0]}.${parts[1]}.${parts[2]}.`) === 0;
+    }
+
+    // range for IPv4 CIDR cannot be more than 32
+    // no need to check further, this CIDR is invalid
+    return false;
+};
+
 /**
  * @param ip {string}
  * @param list {string}
@@ -573,20 +594,29 @@ export const getIpMatchListStatus = (ip, list) => {
         for (let i = 0; i < listArr.length; i += 1) {
             const listItem = listArr[i];
 
-            const parsedIp = ipaddr.parse(ip);
-            const isItemAnIp = ipaddr.isValid(listItem);
-            const parsedItem = isItemAnIp ? ipaddr.parse(listItem) : ipaddr.parseCIDR(listItem);
-
-            if (isItemAnIp && parsedIp.toString() === parsedItem.toString()) {
+            if (ip === listItem.trim()) {
                 return IP_MATCH_LIST_STATUS.EXACT;
             }
 
-            if (!isItemAnIp && isIpMatchCidr(parsedIp, parsedItem)) {
-                return IP_MATCH_LIST_STATUS.CIDR;
+            // Using ipaddr.js is quite slow so we first do a quick check
+            // to see if it's possible that this IP may be in the specified CIDR range
+            if (isIpQuickMatchCIDR(ip, listItem)) {
+                const parsedIp = ipaddr.parse(ip);
+                const isItemAnIp = ipaddr.isValid(listItem);
+                const parsedItem = isItemAnIp ? ipaddr.parse(listItem) : ipaddr.parseCIDR(listItem);
+
+                if (isItemAnIp && parsedIp.toString() === parsedItem.toString()) {
+                    return IP_MATCH_LIST_STATUS.EXACT;
+                }
+
+                if (!isItemAnIp && isIpMatchCidr(parsedIp, parsedItem)) {
+                    return IP_MATCH_LIST_STATUS.CIDR;
+                }
             }
         }
         return IP_MATCH_LIST_STATUS.NOT_FOUND;
     } catch (e) {
+        console.error(e);
         return IP_MATCH_LIST_STATUS.NOT_FOUND;
     }
 };
@@ -632,6 +662,144 @@ export const getLogsUrlParams = (search, response_status) => `?${queryString.str
     response_status,
 })}`;
 
-export const processContent = (content) => (Array.isArray(content)
+export const processContent = (
+    content,
+) => (Array.isArray(content)
     ? content.filter(([, value]) => value)
-        .flat() : content);
+        .reduce((acc, val) => acc.concat(val), [])
+    : content);
+/**
+ * @param object {object}
+ * @param sortKey {string}
+ * @returns {string[]}
+ */
+export const getObjectKeysSorted = (object, sortKey) => Object.entries(object)
+    .sort(([, { [sortKey]: order1 }], [, { [sortKey]: order2 }]) => order1 - order2)
+    .map(([key]) => key);
+
+/**
+ * @param ip
+ * @returns {[IPv4|IPv6, 33|129]}
+ */
+const getParsedIpWithPrefixLength = (ip) => {
+    const MAX_PREFIX_LENGTH_V4 = 32;
+    const MAX_PREFIX_LENGTH_V6 = 128;
+
+    const parsedIp = ipaddr.parse(ip);
+    const prefixLength = parsedIp.kind() === 'ipv4' ? MAX_PREFIX_LENGTH_V4 : MAX_PREFIX_LENGTH_V6;
+
+    // Increment prefix length to always put IP after CIDR, e.g. 127.0.0.1/32, 127.0.0.1
+    return [parsedIp, prefixLength + 1];
+};
+
+/**
+ * Helper function for IP and CIDR comparison (supports both v4 and v6)
+ * @param item - ip or cidr
+ * @returns {number[]}
+ */
+const getAddressesComparisonBytes = (item) => {
+    // Sort ipv4 before ipv6
+    const IP_V4_COMPARISON_CODE = 0;
+    const IP_V6_COMPARISON_CODE = 1;
+
+    const [parsedIp, cidr] = ipaddr.isValid(item)
+        ? getParsedIpWithPrefixLength(item)
+        : ipaddr.parseCIDR(item);
+
+    const [normalizedBytes, ipVersionComparisonCode] = parsedIp.kind() === 'ipv4'
+        ? [parsedIp.toIPv4MappedAddress().parts, IP_V4_COMPARISON_CODE]
+        : [parsedIp.parts, IP_V6_COMPARISON_CODE];
+
+    return [ipVersionComparisonCode, ...normalizedBytes, cidr];
+};
+
+/**
+ * Compare function for IP and CIDR sort in ascending order (supports both v4 and v6)
+ * @param a
+ * @param b
+ * @returns {number} -1 | 0 | 1
+ */
+export const sortIp = (a, b) => {
+    try {
+        const comparisonBytesA = getAddressesComparisonBytes(a);
+        const comparisonBytesB = getAddressesComparisonBytes(b);
+
+        for (let i = 0; i < comparisonBytesA.length; i += 1) {
+            const byteA = comparisonBytesA[i];
+            const byteB = comparisonBytesB[i];
+
+            if (byteA === byteB) {
+                // eslint-disable-next-line no-continue
+                continue;
+            }
+            return byteA > byteB ? 1 : -1;
+        }
+
+        return 0;
+    } catch (e) {
+        console.error(e);
+        return 0;
+    }
+};
+
+/**
+ * @param ip {string}
+ * @param gateway_ip {string}
+ * @returns {{range_end: string, subnet_mask: string, range_start: string,
+ * lease_duration: string, gateway_ip: string}}
+ */
+export const calculateDhcpPlaceholdersIpv4 = (ip, gateway_ip) => {
+    const LAST_OCTET_IDX = 3;
+    const LAST_OCTET_RANGE_START = 100;
+    const LAST_OCTET_RANGE_END = 200;
+
+    const addr = ipaddr.parse(ip);
+    addr.octets[LAST_OCTET_IDX] = LAST_OCTET_RANGE_START;
+    const range_start = addr.toString();
+
+    addr.octets[LAST_OCTET_IDX] = LAST_OCTET_RANGE_END;
+    const range_end = addr.toString();
+
+    const {
+        subnet_mask,
+        lease_duration,
+    } = DHCP_VALUES_PLACEHOLDERS.ipv4;
+
+    return {
+        gateway_ip: gateway_ip || ip,
+        subnet_mask,
+        range_start,
+        range_end,
+        lease_duration,
+    };
+};
+
+export const calculateDhcpPlaceholdersIpv6 = () => {
+    const {
+        range_start,
+        range_end,
+        lease_duration,
+    } = DHCP_VALUES_PLACEHOLDERS.ipv6;
+
+    return {
+        range_start,
+        range_end,
+        lease_duration,
+    };
+};
+
+/**
+ * Add ip_addresses property - concatenated ipv4_addresses and ipv6_addresses for every interface
+ * @param interfaces
+ * @param interfaces.ipv4_addresses {string[]}
+ * @param interfaces.ipv6_addresses {string[]}
+ * @returns interfaces Interfaces enriched with ip_addresses property
+ */
+export const enrichWithConcatenatedIpAddresses = (interfaces) => Object.entries(interfaces)
+    .reduce((acc, [k, v]) => {
+        const ipv4_addresses = v.ipv4_addresses ?? [];
+        const ipv6_addresses = v.ipv6_addresses ?? [];
+
+        acc[k].ip_addresses = ipv4_addresses.concat(ipv6_addresses);
+        return acc;
+    }, interfaces);

client/src/helpers/validators.js

@@ -1,7 +1,6 @@
-import { Trans } from 'react-i18next';
-import React from 'react';
 import i18next from 'i18next';
 import {
+    MAX_PORT,
     R_CIDR,
     R_CIDR_IPV6,
     R_HOST,
@@ -9,10 +8,10 @@ import {
     R_IPV6,
     R_MAC,
     R_URL_REQUIRES_PROTOCOL,
+    STANDARD_WEB_PORT,
     UNSAFE_PORTS,
 } from './constants';
-import { isValidAbsolutePath } from './form';
-
+import { getLastIpv4Octet, isValidAbsolutePath } from './form';
 
 // Validation functions
 // https://redux-form.com/8.3.0/examples/fieldlevelvalidation/
@@ -26,7 +25,7 @@ export const validateRequiredValue = (value) => {
     if (formattedValue || formattedValue === 0 || (formattedValue && formattedValue.length !== 0)) {
         return undefined;
     }
-    return <Trans>form_error_required</Trans>;
+    return 'form_error_required';
 };
 
 /**
@@ -35,11 +34,28 @@ export const validateRequiredValue = (value) => {
  */
 export const getMaxValueValidator = (maximum) => (value) => {
     if (value && value > maximum) {
-        i18next.t('value_not_larger_than', { maximum });
+        return i18next.t('value_not_larger_than', { maximum });
     }
     return undefined;
 };
 
+/**
+ * @param value {string}
+ * @returns {undefined|string}
+ */
+export const validateIpv4RangeEnd = (_, allValues) => {
+    if (!allValues || !allValues.v4 || !allValues.v4.range_end || !allValues.v4.range_start) {
+        return undefined;
+    }
+
+    const { range_end, range_start } = allValues.v4;
+
+    if (getLastIpv4Octet(range_end) <= getLastIpv4Octet(range_start)) {
+        return 'range_end_error';
+    }
+
+    return undefined;
+};
 
 /**
  * @param value {string}
@@ -47,7 +63,7 @@ export const getMaxValueValidator = (maximum) => (value) => {
  */
 export const validateIpv4 = (value) => {
     if (value && !R_IPV4.test(value)) {
-        return <Trans>form_error_ip4_format</Trans>;
+        return 'form_error_ip4_format';
     }
     return undefined;
 };
@@ -63,12 +79,12 @@ export const validateClientId = (value) => {
     const formattedValue = value ? value.trim() : value;
     if (formattedValue && !(
         R_IPV4.test(formattedValue)
-        || R_IPV6.test(formattedValue)
-        || R_MAC.test(formattedValue)
-        || R_CIDR.test(formattedValue)
-        || R_CIDR_IPV6.test(formattedValue)
+            || R_IPV6.test(formattedValue)
+            || R_MAC.test(formattedValue)
+            || R_CIDR.test(formattedValue)
+            || R_CIDR_IPV6.test(formattedValue)
     )) {
-        return <Trans>form_error_client_id_format</Trans>;
+        return 'form_error_client_id_format';
     }
     return undefined;
 };
@@ -79,7 +95,7 @@ export const validateClientId = (value) => {
  */
 export const validateIpv6 = (value) => {
     if (value && !R_IPV6.test(value)) {
-        return <Trans>form_error_ip6_format</Trans>;
+        return 'form_error_ip6_format';
     }
     return undefined;
 };
@@ -90,7 +106,7 @@ export const validateIpv6 = (value) => {
  */
 export const validateIp = (value) => {
     if (value && !R_IPV4.test(value) && !R_IPV6.test(value)) {
-        return <Trans>form_error_ip_format</Trans>;
+        return 'form_error_ip_format';
     }
     return undefined;
 };
@@ -101,76 +117,76 @@ export const validateIp = (value) => {
  */
 export const validateMac = (value) => {
     if (value && !R_MAC.test(value)) {
-        return <Trans>form_error_mac_format</Trans>;
+        return 'form_error_mac_format';
     }
     return undefined;
 };
 
 /**
- * @param value {string}
+ * @param value {number}
  * @returns {undefined|string}
  */
 export const validateIsPositiveValue = (value) => {
     if ((value || value === 0) && value <= 0) {
-        return <Trans>form_error_positive</Trans>;
+        return 'form_error_positive';
     }
     return undefined;
 };
 
 /**
- * @param value {string}
+ * @param value {number}
  * @returns {boolean|*}
  */
 export const validateBiggerOrEqualZeroValue = (value) => {
     if (value < 0) {
-        return <Trans>form_error_negative</Trans>;
+        return 'form_error_negative';
     }
     return false;
 };
 
 /**
- * @param value {string}
+ * @param value {number}
  * @returns {undefined|string}
  */
 export const validatePort = (value) => {
-    if ((value || value === 0) && (value < 80 || value > 65535)) {
-        return <Trans>form_error_port_range</Trans>;
+    if ((value || value === 0) && (value < STANDARD_WEB_PORT || value > MAX_PORT)) {
+        return 'form_error_port_range';
     }
     return undefined;
 };
 
 /**
- * @param value {string}
+ * @param value {number}
  * @returns {undefined|string}
  */
 export const validateInstallPort = (value) => {
-    if (value < 1 || value > 65535) {
-        return <Trans>form_error_port</Trans>;
+    if (value < 1 || value > MAX_PORT) {
+        return 'form_error_port';
     }
     return undefined;
 };
 
 /**
- * @param value {string}
+ * @param value {number}
  * @returns {undefined|string}
  */
 export const validatePortTLS = (value) => {
     if (value === 0) {
         return undefined;
     }
-    if (value && (value < 80 || value > 65535)) {
-        return <Trans>form_error_port_range</Trans>;
+    if (value && (value < STANDARD_WEB_PORT || value > MAX_PORT)) {
+        return 'form_error_port_range';
     }
     return undefined;
 };
 
 /**
- * @param value {string}
+ * @param value {number}
  * @returns {undefined|string}
  */
 export const validateIsSafePort = (value) => {
     if (UNSAFE_PORTS.includes(value)) {
-        return <Trans>form_error_port_unsafe</Trans>;
+        return 'form_error_port_unsafe';
     }
     return undefined;
 };
@@ -181,7 +197,7 @@ export const validateIsSafePort = (value) => {
  */
 export const validateDomain = (value) => {
     if (value && !R_HOST.test(value)) {
-        return <Trans>form_error_domain_format</Trans>;
+        return 'form_error_domain_format';
     }
     return undefined;
 };
@@ -192,7 +208,7 @@ export const validateDomain = (value) => {
  */
 export const validateAnswer = (value) => {
     if (value && (!R_IPV4.test(value) && !R_IPV6.test(value) && !R_HOST.test(value))) {
-        return <Trans>form_error_answer_format</Trans>;
+        return 'form_error_answer_format';
     }
     return undefined;
 };
@@ -203,7 +219,7 @@ export const validateAnswer = (value) => {
  */
 export const validatePath = (value) => {
     if (value && !isValidAbsolutePath(value) && !R_URL_REQUIRES_PROTOCOL.test(value)) {
-        return <Trans>form_error_url_or_path_format</Trans>;
+        return 'form_error_url_or_path_format';
     }
     return undefined;
 };

client/src/i18n.js

@@ -30,9 +30,11 @@ import sl from './__locales/sl.json';
 import tr from './__locales/tr.json';
 import srCS from './__locales/sr-cs.json';
 import hr from './__locales/hr.json';
+import hu from './__locales/hu.json';
 import fa from './__locales/fa.json';
 import th from './__locales/th.json';
 import ro from './__locales/ro.json';
+import siLk from './__locales/si-lk.json';
 import { setHtmlLangAttr } from './helpers/helpers';
 
 const resources = {
@@ -114,6 +116,9 @@ const resources = {
     hr: {
         translation: hr,
     },
+    hu: {
+        translation: hu,
+    },
     fa: {
         translation: fa,
     },
@@ -123,6 +128,9 @@ const resources = {
     ro: {
         translation: ro,
     },
+    'si-lk': {
+        translation: siLk,
+    },
 };
 
 const availableLanguages = Object.keys(LANGUAGES);

client/src/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import './components/App/index.css';
-import App from './containers/App';
 import configureStore from './configureStore';
 import reducers from './reducers';
+import App from './components/App';
+import './components/App/index.css';
 import './i18n';
 
 const store = configureStore(reducers, {}); // set initial state
+
 ReactDOM.render(
     <Provider store={store}>
         <App />

client/src/install/Setup/AddressList.js

@@ -4,50 +4,40 @@ import PropTypes from 'prop-types';
 import { getIpList, getDnsAddress, getWebAddress } from '../../helpers/helpers';
 import { ALL_INTERFACES_IP } from '../../helpers/constants';
 
-const AddressList = (props) => {
-    let webAddress = getWebAddress(props.address, props.port);
-    let dnsAddress = getDnsAddress(props.address, props.port);
+const renderItem = ({
+    ip, port, isDns,
+}) => {
+    const webAddress = getWebAddress(ip, port);
+    const dnsAddress = getDnsAddress(ip, port);
 
-    if (props.address === ALL_INTERFACES_IP) {
-        return getIpList(props.interfaces).map((ip) => {
-            webAddress = getWebAddress(ip, props.port);
-            dnsAddress = getDnsAddress(ip, props.port);
-
-            if (props.isDns) {
-                return (
-                    <li key={ip}>
-                        <strong>
-                            {dnsAddress}
-                        </strong>
-                    </li>
-                );
-            }
-
-            return (
-                <li key={ip}>
-                    <a href={webAddress}>
-                        {webAddress}
-                    </a>
-                </li>
-            );
-        });
+    return <li key={ip}>{isDns
+        ? <strong>{dnsAddress}</strong>
+        : <a href={webAddress}>{webAddress}</a>
     }
-
-    if (props.isDns) {
-        return (
-            <strong>
-                {dnsAddress}
-            </strong>
-        );
-    }
-
-    return (
-        <a href={webAddress}>
-            {webAddress}
-        </a>
-    );
+    </li>;
 };
 
+const AddressList = ({
+    address,
+    interfaces,
+    port,
+    isDns,
+}) => <ul className="list-group pl-4">{
+    address === ALL_INTERFACES_IP
+        ? getIpList(interfaces)
+            .map((ip) => renderItem({
+                ip,
+                port,
+                isDns,
+            }))
+        : renderItem({
+            ip: address,
+            port,
+            isDns,
+        })
+}
+</ul>;
+
 AddressList.propTypes = {
     interfaces: PropTypes.object.isRequired,
     address: PropTypes.string.isRequired,
@@ -58,4 +48,10 @@ AddressList.propTypes = {
     isDns: PropTypes.bool,
 };
 
+renderItem.propTypes = {
+    ip: PropTypes.string.isRequired,
+    port: PropTypes.string.isRequired,
+    isDns: PropTypes.bool.isRequired,
+};
+
 export default AddressList;

client/src/install/Setup/Devices.js

@@ -26,7 +26,7 @@ let Devices = (props) => (
                         interfaces={props.interfaces}
                         address={props.dnsIp}
                         port={props.dnsPort}
-                        isDns={true}
+                        isDns
                     />
                 </div>
             </div>

client/src/install/Setup/Settings.js

@@ -10,51 +10,36 @@ import AddressList from './AddressList';
 
 import { getInterfaceIp } from '../../helpers/helpers';
 import {
-    ALL_INTERFACES_IP, FORM_NAME, ADDRESS_IN_USE_TEXT, PORT_53_FAQ_LINK, UBUNTU_SYSTEM_PORT,
+    ALL_INTERFACES_IP,
+    FORM_NAME,
+    ADDRESS_IN_USE_TEXT,
+    PORT_53_FAQ_LINK,
+    STATUS_RESPONSE,
+    STANDARD_DNS_PORT,
+    STANDARD_WEB_PORT,
 } from '../../helpers/constants';
 import { renderInputField, toNumber } from '../../helpers/form';
 import { validateRequiredValue, validateInstallPort } from '../../helpers/validators';
 
-const STATIC_STATUS = {
-    ENABLED: 'yes',
-    DISABLED: 'no',
-    ERROR: 'error',
-};
+const renderInterfaces = (interfaces) => Object.values(interfaces)
+    .map((option) => {
+        const {
+            name,
+            ip_addresses,
+            flags,
+        } = option;
 
-const renderInterfaces = ((interfaces) => (
-    Object.keys(interfaces)
-        .map((item) => {
-            const option = interfaces[item];
-            const {
-                name,
-                ip_addresses,
-                flags,
-            } = option;
+        if (option && ip_addresses?.length > 0) {
+            const ip = getInterfaceIp(option);
+            const isDown = flags?.includes('down');
 
-            if (option && ip_addresses?.length > 0) {
-                const ip = getInterfaceIp(option);
-                const isDown = flags?.includes('down');
+            return <option value={ip} key={name} disabled={isDown}>
+                {name} - {ip} {isDown && `(${<Trans>down</Trans>})`}
+            </option>;
+        }
 
-                if (isDown) {
-                    return (
-                        <option value={ip} key={name} disabled>
-                            <>
-                                {name} - {ip} (<Trans>down</Trans>)
-                            </>
-                        </option>
-                    );
-                }
-
-                return (
-                    <option value={ip} key={name}>
-                        {name} - {ip}
-                    </option>
-                );
-            }
-
-            return false;
-        })
-));
+        return null;
+    });
 
 class Settings extends Component {
     componentDidMount() {
@@ -77,42 +62,36 @@ class Settings extends Component {
     getStaticIpMessage = (staticIp) => {
         const { static: status, ip } = staticIp;
 
-        if (!status) {
-            return '';
-        }
-
-        return (
-            <>
-                {status === STATIC_STATUS.DISABLED && (
-                    <>
-                        <div className="mb-2">
-                            <Trans values={{ ip }} components={[<strong key="0">text</strong>]}>
-                                install_static_configure
-                            </Trans>
-                        </div>
-                        <button
-                            type="button"
-                            className="btn btn-outline-primary btn-sm"
-                            onClick={() => this.handleStaticIp(ip)}
-                        >
-                            <Trans>set_static_ip</Trans>
-                        </button>
-                    </>
-                )}
-                {status === STATIC_STATUS.ERROR && (
-                    <div className="text-danger">
-                        <Trans>install_static_error</Trans>
-                    </div>
-                )}
-                {status === STATIC_STATUS.ENABLED && (
-                    <div className="text-success">
-                        <Trans>
-                            install_static_ok
+        switch (status) {
+            case STATUS_RESPONSE.NO: {
+                return <>
+                    <div className="mb-2">
+                        <Trans values={{ ip }} components={[<strong key="0">text</strong>]}>
+                            install_static_configure
                         </Trans>
                     </div>
-                )}
-            </>
-        );
+                    <button
+                        type="button"
+                        className="btn btn-outline-primary btn-sm"
+                        onClick={() => this.handleStaticIp(ip)}
+                    >
+                        <Trans>set_static_ip</Trans>
+                    </button>
+                </>;
+            }
+            case STATUS_RESPONSE.ERROR: {
+                return <div className="text-danger">
+                    <Trans>install_static_error</Trans>
+                </div>;
+            }
+            case STATUS_RESPONSE.YES: {
+                return <div className="text-success">
+                    <Trans>install_static_ok</Trans>
+                </div>;
+            }
+            default:
+                return null;
+        }
     };
 
     handleAutofix = (type) => {
@@ -229,7 +208,7 @@ class Settings extends Component {
                                     component={renderInputField}
                                     type="number"
                                     className="form-control"
-                                    placeholder="80"
+                                    placeholder={STANDARD_WEB_PORT.toString()}
                                     validate={[validateInstallPort, validateRequiredValue]}
                                     normalize={toNumber}
                                     onChange={handleChange}
@@ -297,7 +276,7 @@ class Settings extends Component {
                                     component={renderInputField}
                                     type="number"
                                     className="form-control"
-                                    placeholder="80"
+                                    placeholder={STANDARD_WEB_PORT.toString()}
                                     validate={[validateInstallPort, validateRequiredValue]}
                                     normalize={toNumber}
                                     onChange={handleChange}
@@ -332,7 +311,7 @@ class Settings extends Component {
                                     </p>
                                 </div>}
                             </>}
-                            {dnsPort === UBUNTU_SYSTEM_PORT && !isDnsFixAvailable
+                            {dnsPort === STANDARD_DNS_PORT && !isDnsFixAvailable
                             && dnsStatus.includes(ADDRESS_IN_USE_TEXT)
                             && <Trans
                                 components={[<a href={PORT_53_FAQ_LINK} key="0">link</a>]}>