- client: Refactor Setup guide component: Merge pull request #633 in DNS/adguard-home from fix/1740 to master

Close #1740

Squashed commit of the following:

commit 13593ad7580a0ad5a4d5c0abcb4f67d01ddb944a
Merge: 8cdc68de 1356ac26
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jun 11 12:02:02 2020 +0300

    Merge branch 'master' into fix/1740

commit 8cdc68debab3f0668ec4aa5cf9b55ce40ddd4985
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jun 10 19:35:51 2020 +0300

    Update locales with link

commit 320d8d2f189dff594954b3f5964279410594ee29
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jun 3 16:40:36 2020 +0300

    Refactor Tabs

commit 98bdcdb5eb35448d38ed42aa08cec2fce9ac849e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jun 3 14:01:55 2020 +0300

    Separate content from markup of dns privacy list

commit cee5e5c411d1e9a93a16eba9d78f2f9479d9e729
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed May 27 21:12:11 2020 +0300

    - client: Refactor Setup guide component

client/src/__locales/de.json

@@ -162,9 +162,9 @@
     "example_comment_hash": "# Auch ein Kommentar",
     "example_regex_meaning": "Zugriff auf die Domains blockieren, die dem <0>spezifizierten regulären Ausdruck</0> entsprechen",
     "example_upstream_regular": "regulärer DNS (über UDP)",
-    "example_upstream_dot": "verschlüsseltes <a href='https://en.wikipedia.org/wiki/DNS_over_TLS' target='_blank'>DNS-over-TLS</a>",
+    "example_upstream_dot": "verschlüsseltes <0>DNS-over-TLS</0>",
-    "example_upstream_doh": "verschlüsseltes <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a>",
+    "example_upstream_doh": "verschlüsseltes <0>DNS_over_HTTPS</0>",
-    "example_upstream_sdns": "Sie können <a href='https://dnscrypt.info/stamps/' target='_blank'>DNS-Stempel</a> für <a href='https://dnscrypt.info/' target='_blank'>DNSCrypt</a> oder <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a> Resolver benutzen.",
+    "example_upstream_sdns": "Sie können <0>DNS-Stempel</0> für <1>DNSCrypt</1> oder <2>DNS-over-HTTPS</2> Resolver benutzen",
     "example_upstream_tcp": "regulärer DNS (über TCP)",
     "all_lists_up_to_date_toast": "Alle Listen sind bereits auf dem neuesten Stand",
     "updated_upstream_dns_toast": "Upstream-DNS-Server wurden aktualisiert",
@@ -490,4 +490,4 @@
     "list_updated_plural": "{{count}} Listen aktualisiert",
     "dnssec_enable": "DNSSEC aktivieren",
     "dnssec_enable_desc": "DNSSEC-Flag in den ausgehenden DNS-Abfragen mitsenden und das Ergebnis überprüfen (DNSSEC-fähiger Resolver erforderlich)"
-}
+}

client/src/__locales/en.json

@@ -259,7 +259,7 @@
     "install_devices_router_list_1": "Open the preferences for your router. Usually, you can access it from your browser via a URL (like http://192.168.0.1/ or http://192.168.1.1/). You may be asked to enter the password. If you don't remember it, you can often reset the password by pressing a button on the router itself. Some routers require a specific application, which in that case should be already installed on your computer/phone.",
     "install_devices_router_list_2": "Find the DHCP/DNS settings. Look for the DNS letters next to a field which allows two or three sets of numbers, each broken into four groups of one to three digits.",
     "install_devices_router_list_3": "Enter your AdGuard Home server addresses there.",
-    "install_devices_router_list_4": "You can't set a custom DNS server on some types of routers. In this case it may help if you set up AdGuard Home as a <a href='#dhcp'>DHCP server</a>. Otherwise, you should search for the manual on how to customize DNS servers for your particular router model.",
+    "install_devices_router_list_4": "You can't set a custom DNS server on some types of routers. In this case it may help if you set up AdGuard Home as a <0>DHCP server</0>. Otherwise, you should search for the manual on how to customize DNS servers for your particular router model.",
     "install_devices_windows_list_1": "Open Control Panel through Start menu or Windows search.",
     "install_devices_windows_list_2": "Go to Network and Internet category and then to Network and Sharing Center.",
     "install_devices_windows_list_3": "On the left side of the screen find Change adapter settings and click on it.",

client/src/__locales/fr.json

@@ -162,9 +162,9 @@
     "example_comment_hash": "# Et comme ça aussi on peut laisser des commentaires",
     "example_regex_meaning": "bloquer l'accés aux domaines correspondants à l'expression régulière spécifiée",
     "example_upstream_regular": "DNS classique (au-dessus de UDP)",
-    "example_upstream_dot": "<a href='https://en.wikipedia.org/wiki/DNS_over_TLS' target='_blank'>DNS-au-dessus-de-TLS</a> chiffré",
+    "example_upstream_dot": "<0>DNS-over-TLS</0> chiffré",
-    "example_upstream_doh": "<a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-au-dessus-de-HTTPS</a> chiffré",
+    "example_upstream_doh": "<0>DNS-over-HTTPS</0> chiffré",
-    "example_upstream_sdns": "vous pouvez utiliser <a href='https://dnscrypt.info/stamps/' target='_blank'>DNS Stamps</a> pour <a href='https://dnscrypt.info/' target='_blank'>DNSCrypt</a> ou les resolveurs <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-au-dessus-de-HTTPS</a>",
+    "example_upstream_sdns": "vous pouvez utiliser <0>DNS Stamps</0> pour <1>DNSCrypt</1> ou les resolveurs <2>DNS_over_HTTPS</2>",
     "example_upstream_tcp": "DNS classique (au-dessus de TCP)",
     "all_lists_up_to_date_toast": "Toutes les listes sont déjà à jour",
     "updated_upstream_dns_toast": "Les serveurs DNS upstream sont mis à jour",
@@ -489,4 +489,4 @@
     "list_updated_plural": "{{count}} listes mises à jour",
     "dnssec_enable": "Activer DNSSEC",
     "dnssec_enable_desc": "Définir l’indicateur DNSSEC dans les requêtes DNS sortantes et vérifier le résultat (résolveur compatible DNSSEC requis)"
-}
+}

client/src/__locales/id.json

@@ -145,9 +145,9 @@
     "example_comment_hash": "Juga sebuah komentar",
     "example_regex_meaning": "blokir akses ke domain yang cocok dengan <0>ekspresi reguler yang ditentukan</0>",
     "example_upstream_regular": "DNS reguler (melalui UDP)",
-    "example_upstream_dot": "terenkripsi <a href='https://en.wikipedia.org/wiki/DNS_over_TLS' target='_blank'>DNS-over-TLS</a>",
+    "example_upstream_dot": "terenkripsi <0>DNS-over-TLS</0>",
-    "example_upstream_doh": "terenkripsi <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a>",
+    "example_upstream_doh": "terenkripsi <0>DNS-over-HTTPS</0>",
-    "example_upstream_sdns": "anda bisa menggunakan <a href='https://dnscrypt.info/stamps/' target='_blank'>Stempel DNS</a> untuk <a href='https://dnscrypt.info/' target='_blank'>DNSCrypt</a> atau pengarah <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a>",
+    "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)",
     "updated_upstream_dns_toast": "Server DNS hulu terbarui",
     "dns_test_ok_toast": "Server DNS yang ditentukan bekerja dengan benar",
@@ -428,4 +428,4 @@
     "client_blocked": "Klien \"{{ip}}\" sukses di blokir",
     "client_unblocked": "Klien \"{{ip}}\" sukses di unblock",
     "static_ip": "Alamat IP statis"
-}
+}

client/src/__locales/it.json

@@ -162,9 +162,9 @@
     "example_comment_hash": "# Un altro commento",
     "example_regex_meaning": "blocca l'accesso ai domini che corrispondono alla specifica espressione regolare",
     "example_upstream_regular": "DNS regolari (via UDP)",
-    "example_upstream_dot": "<a href='https://en.wikipedia.org/wiki/DNS_over_TLS' target='_blank'>DNS-over-TLS</a> criptato",
+    "example_upstream_dot": "<0>DNS_over_TLS</0> crittografato",
-    "example_upstream_doh": "<a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a> criptato",
+    "example_upstream_doh": "<0>DNS-over-HTTPS</0> crittografato",
-    "example_upstream_sdns": "puoi usare <a href='https://dnscrypt.info/stamps/' target='_blank'>DNS Stamps</a> per <a href='https://dnscrypt.info/' target='_blank'>DNSCrypt</a> oppure dei resolver con <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a>",
+    "example_upstream_sdns": "puoi usare <0>DNS Stamps</0> per <1>DNSCrypt</1> oppure dei resolver con <2>DNS-over-HTTPS</2>",
     "example_upstream_tcp": "DNS regolari (via TCP)",
     "all_lists_up_to_date_toast": "Tutte le liste sono aggiornate",
     "updated_upstream_dns_toast": "Server DNS upstream aggiornati",
@@ -490,4 +490,4 @@
     "list_updated_plural": "{{count}} liste aggiornate",
     "dnssec_enable": "Abilita DNSSEC",
     "dnssec_enable_desc": "Imposta la spunta DNSSEC nelle interrogazioni DNS in uscita e verifica il risultato (è richiesta l'attivazione del risolutore DNSSEC)"
-}
+}

client/src/__locales/ja.json

@@ -162,9 +162,9 @@
     "example_comment_hash": "# ここもコメントです",
     "example_regex_meaning": "指定の正規表現に一致するドメインへのアクセスをブロックします",
     "example_upstream_regular": "通常のDNS（UDPでの問い合わせ）",
-    "example_upstream_dot": "暗号化されている <a href='https://en.wikipedia.org/wiki/DNS_over_TLS' target='_blank'>DNS-over-TLS</a>",
+    "example_upstream_dot": "暗号化されている <0>DNS-over-TLS</0>",
-    "example_upstream_doh": "暗号化されている <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a>",
+    "example_upstream_doh": "暗号化されている <0>DNS-over-HTTPS</0>",
-    "example_upstream_sdns": "<a href='https://dnscrypt.info/' target='_blank'>DNSCrypt</a> または <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a> リゾルバのために <a href='https://dnscrypt.info/stamps/' target='_blank'>DNS Stamps</a> を使えます",
+    "example_upstream_sdns": "<1>DNSCrypt</1> または <2>DNS-over-HTTPS</2> リゾルバのために <0>DNS Stamps</0> を使えます",
     "example_upstream_tcp": "通常のDNS（TCPでの問い合わせ）",
     "all_lists_up_to_date_toast": "すべてのリストは既に最新です",
     "updated_upstream_dns_toast": "上流DNSサーバを更新しました",
@@ -487,4 +487,4 @@
     "list_updated": "{{count}}個のリストが更新されました",
     "list_updated_plural": "{{count}}個のリストが更新されました",
     "dnssec_enable": "DNSSECを有効にする"
-}
+}

client/src/__locales/nl.json

@@ -161,16 +161,16 @@
     "example_comment_hash": "# Nog een opmerking",
     "example_regex_meaning": "blokkeer de toegang tot de domeinen die overeenkomen met de opgegeven reguliere expressie",
     "example_upstream_regular": "standaard DNS (over UDP)",
-    "example_upstream_dot": "versleutelde<a href='https://en.wikipedia.org/wiki/DNS_over_TLS' target='_blank'>DNS-over-TLS</a>",
+    "example_upstream_dot": "versleutelde <0>DNS_over_TLS</0>",
-    "example_upstream_doh": "versleutelde<a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a>",
+    "example_upstream_doh": "versleutelde <0>DNS_over_HTTPS</0>",
-    "example_upstream_sdns": "je kunt <a href='https://dnscrypt.info/stamps/' target='_blank'>DNS Stamps</a> voor <a href='https://dnscrypt.info/' target='_blank'>DNSCrypt</a> of <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a> resolvers",
+    "example_upstream_sdns": "je kunt <0>DNS Stamps</0> voor <1>DNSCrypt</1> of <2>DNS-over-HTTPS</2> resolvers",
     "example_upstream_tcp": "standaard DNS (over TCP)",
     "all_lists_up_to_date_toast": "Alle lijsten zijn reeds up-to-date",
     "updated_upstream_dns_toast": "De upstream DNS-servers zijn bijgewerkt",
     "dns_test_ok_toast": "Opgegeven DNS-servers werken correct",
     "dns_test_not_ok_toast": "Server \"{{key}}\": kon niet worden gebruikt, controleer of u het correct hebt geschreven",
-    "unblock_btn": "Deblokkeer",
+    "unblock_btn": "Deblokkeren",
-    "block_btn": "Blokkeer",
+    "block_btn": "Blokkeren",
     "time_table_header": "Tijd",
     "domain_name_table_header": "Domein naam",
     "type_table_header": "Type",
@@ -237,7 +237,7 @@
     "install_devices_router_list_1": "Open de instellingen pagina voor uw router. Meestal kunt u deze vanuit uw browser openen via een URL (zoals http://192.168.0.1/ of http://192.168.1.1/). Mogelijk wordt u gevraagd om het wachtwoord in te voeren. Als u het niet meer weet, kunt u het wachtwoord vaak opnieuw instellen door op een knop op de router zelf te drukken. Voor sommige routers is een specifieke toepassing vereist, die in dat geval al op uw computer / telefoon moet zijn geïnstalleerd.",
     "install_devices_router_list_2": "Zoek de DHCP/DNS-instellingen. Zoek naar de DNS-letters naast een veld dat twee of drie reeksen nummers toestaat, elk verdeeld in vier groepen van één tot drie cijfers.",
     "install_devices_router_list_3": "Voer je AdGuard Home server adressen daar in.",
-    "install_devices_router_list_4": "Je kan de DNS server niet aanpassen op sommige routers. In dat geval kan het een oplossing zijn om AdGuard Home te definiëren als een DHCP server. Je kan ook in de handleiding van je router kijken hoe je een DNS server aanpast.",
+    "install_devices_router_list_4": "Je kan de DNS server niet aanpassen op sommige routers. In dat geval kan het een oplossing zijn om AdGuard Home te definiëren als een <a href='#dhcp'>DHCP server</a>. Je kan ook in de handleiding van je router kijken hoe je een DNS server aanpast.",
     "install_devices_windows_list_1": "Open het Configuratiescherm via het menu Start of Windows zoeken.",
     "install_devices_windows_list_2": "Ga naar de categorie Netwerk en Internet en vervolgens naar Netwerkcentrum.",
     "install_devices_windows_list_3": "Zoek aan de linkerkant van het scherm Adapter-instellingen wijzigen en klik erop.",
@@ -434,7 +434,7 @@
     "example_rewrite_domain": "herschrijf reacties uitsluitend voor deze domeinnaam.",
     "example_rewrite_wildcard": "herschrijf reacties voor alle subdomeinen van <0>example.org</0>.",
     "fastest_addr": "Snelste IP adres",
-    "fastest_addr_desc": "Alle DNS servers bevragen en het snelste IP adres terugkoppelen",
+    "fastest_addr_desc": "Alle DNS servers bevragen en het snelste IP adres terugkoppelen. Dit zal de DNS verzoeken vertragen omdat we moeten wachten op de antwoorden van alles DNS servers, maar verbetert wel de connectiviteit.",
     "tags_title": "Labels",
     "check": "Controleren",
     "form_enter_host": "Voer een hostnaam in",
@@ -447,4 +447,4 @@
     "list_updated": "{{count}} lijst geüpdatet",
     "list_updated_plural": "{{count}} lijsten geüpdatet",
     "dnssec_enable": "DNSSEC inschakelen"
-}
+}

client/src/__locales/pl.json

@@ -13,8 +13,8 @@
     "dhcp_description": "Jeśli router nie zapewnia ustawień DHCP, możesz użyć wbudowanego serwera DHCP AdGuard.",
     "dhcp_enable": "Włącz serwer DHCP",
     "dhcp_disable": "Wyłącz serwer DHCP",
-    "dhcp_not_found": "W sieci nie znaleziono aktywnych serwerów DHCP. Bezpiecznie jest włączyć wbudowany serwer DHCP.",
+    "dhcp_not_found": "Włączenie wbudowanego serwera DHCP jest bezpieczne - nie znaleźliśmy żadnych aktywnych serwerów DHCP w sieci. Sprawdź to jednak ręcznie, ponieważ nasz automatyczny test nie daje obecnie 100% gwarancji.",
-    "dhcp_found": "Znaleziono aktywne serwery DHCP odszukane w sieci. Włączenie wbudowanego serwera DHCP nie jest bezpieczne.",
+    "dhcp_found": "W sieci został znaleziony aktywny serwer DHCP. Włączenie wbudowanego serwera DHCP nie jest bezpieczne.",
     "dhcp_leases": "Dzierżawa DHCP",
     "dhcp_static_leases": "Dzierżawy statyczne DHCP",
     "dhcp_leases_not_found": "Nie znaleziono dzierżaw DHCP",
@@ -114,18 +114,18 @@
     "encryption_settings": "Ustawienia szyfrowania",
     "dhcp_settings": "Ustawienia DHCP",
     "upstream_dns": "Główne serwery DNS",
-    "upstream_dns_hint": "Jeśli to pole pozostawisz puste, AdGuard Home wykorzysta usługę<a href='https://www.quad9.net/' target='_blank'>Quad9</a> jako główny serwer DNS.",
+    "upstream_dns_hint": "Jeśli to pole pozostawisz puste, AdGuard Home wykorzysta usługę <a href='https://www.quad9.net/' target='_blank'>Quad9</a> jako główny serwer DNS.",
     "test_upstream_btn": "Test głównych serwerów DNS",
     "upstreams": "Główne serwery DNS",
     "apply_btn": "Zastosuj",
     "disabled_filtering_toast": "Wyłączone filtrowanie",
     "enabled_filtering_toast": "Włączone filtrowanie",
-    "disabled_safe_browsing_toast": "Wyłączone bezpieczne przeglądanie",
+    "disabled_safe_browsing_toast": "Bezpieczne przeglądanie zostało wyłączone",
-    "enabled_safe_browsing_toast": "Włączone bezpieczne przeglądanie",
+    "enabled_safe_browsing_toast": "Bezpieczne przeglądanie zostało włączone",
     "disabled_parental_toast": "Wyłączona Kontrola Rodzicielska",
     "enabled_parental_toast": "Włączona Kontrola Rodzicielska",
-    "disabled_safe_search_toast": "Wyłączone bezpieczne wyszukiwanie",
+    "disabled_safe_search_toast": "Bezpieczne wyszukiwanie zostało włączone",
-    "enabled_save_search_toast": "Włączone bezpieczne wyszukiwanie",
+    "enabled_save_search_toast": "Bezpieczne wyszukiwanie zostało włączone",
     "enabled_table_header": "Włączone",
     "name_table_header": "Nazwa",
     "list_url_table_header": "Adres URL listy",
@@ -164,7 +164,7 @@
     "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>",
-    "example_upstream_sdns": "możesz użyć adresu<0>DNS Stamps</0> dla protokołu <1>DNSCrypt</1> lub <2>DNS-over-HTTPS</2>",
+    "example_upstream_sdns": "możesz użyć adresu <0>DNS Stamps</0> dla protokołu <1>DNSCrypt</1> lub <2>DNS-over-HTTPS</2>",
     "example_upstream_tcp": "zwykły DNS (przez TCP)",
     "all_lists_up_to_date_toast": "Wszystkie listy są już aktualne",
     "updated_upstream_dns_toast": "Główne serwery DNS zostały zaktualizowane",
@@ -229,7 +229,7 @@
     "rule_label": "Reguła",
     "list_label": "Lista",
     "unknown_filter": "Nieznany filtr {{filterId}}",
-    "install_welcome_title": "Witamy w AdGuard Home!",
+    "install_welcome_title": "Witaj w AdGuard Home!",
     "install_welcome_desc": "AdGuard Home to w pełni funkcjonalny serwer DNS do blokowania reklam i śledzenia. Jego celem jest kontrolowanie całej sieci i wszystkich urządzeń, bez konieczności korzystania z jakiegokolwiek programu po stronie klienta.",
     "install_settings_title": "Interfejs internetowy administratora",
     "install_settings_listen": "Interfejs sieciowy",
@@ -257,7 +257,7 @@
     "install_devices_router_list_1": "Otwórz ustawienia routera. Zazwyczaj możesz uzyskać do niego dostęp przez przeglądarkę za pośrednictwem adresu URL (na przykład http://192.168.0.1/ lub http://192.168.1.1/). Możesz zostać poproszony o wpisanie hasła. Jeśli nie pamiętasz hasła, możesz je odzyskać, naciskając przycisk na samym routerze. Niektóre routery wymagają określonej aplikacji, która powinna być już zainstalowana na komputerze lub telefonie.",
     "install_devices_router_list_2": "Znajdź ustawienia DHCP/DNS. Poszukaj skrótu DNS obok pola, które pozwala wstawić dwa lub trzy zestawy liczb, z których każdy jest podzielony na cztery grupy z jedną do trzech cyfr.",
     "install_devices_router_list_3": "Wpisz adresy swojego serwera AdGuard Home.",
-    "install_devices_router_list_4": "Nie możesz ustawić niestandardowego serwera DNS na niektórych routerach. W takim przypadku może pomóc Ci skonfigurowanie AdGuard Home jako serwera DHCP. W przeciwnym razie musisz poszukać instrukcji ustawienia serwerów DNS dla konkretnego modelu routera.",
+    "install_devices_router_list_4": "Nie możesz ustawić niestandardowego serwera DNS na niektórych routerach. W takim przypadku może pomóc Ci skonfigurowanie AdGuard Home jako <a href='#dhcp'>serwera DHCP</a>. W przeciwnym razie musisz poszukać instrukcji ustawienia serwerów DNS dla konkretnego modelu routera.",
     "install_devices_windows_list_1": "Otwórz panel Ustawienia w menu Start lub w Windows.",
     "install_devices_windows_list_2": "Przejdź do kategorii Sieć i Internet, a następnie do Centrum sieci i udostępniania.",
     "install_devices_windows_list_3": "Po lewej stronie ekranu znajdź Zmień ustawienia adaptera i kliknij na niego.",
@@ -301,7 +301,7 @@
     "encryption_key": "Klucz prywatny",
     "encryption_key_input": "Tutaj kopiuj/wklej klucze prywatne zakodowane w PEM do swojego certyfikatu.",
     "encryption_enable": "Włącz szyfrowanie (HTTPS, DNS-over-HTTPS i DNS-over-TLS)",
-    "encryption_enable_desc": "Jeśli szyfrowanie jest włączone, interfejs administracyjny AdGuard Home będzie działał przez HTTPS, a serwer DNS będzie nasłuchiwał żądań przez DNS-overHTTPS i DNS-over-TLS.",
+    "encryption_enable_desc": "Jeśli szyfrowanie jest włączone, interfejs administracyjny AdGuard Home będzie działał przez HTTPS, a serwer DNS będzie nasłuchiwał żądań przez DNS-over-HTTPS i DNS-over-TLS.",
     "encryption_chain_valid": "Łańcuch certyfikatów jest prawidłowy",
     "encryption_chain_invalid": "Łańcuch certyfikatu jest nieprawidłowy",
     "encryption_key_valid": "Poprawny {{type}} klucz prywatny.",
@@ -455,8 +455,8 @@
     "example_rewrite_wildcard": "przepisz odpowiedzi dla wszystkich subdomen <0>example.org</0>.",
     "disable_ipv6": "Wyłącz IPv6",
     "disable_ipv6_desc": "Jeśli ta funkcja jest włączona, wszystkie zapytania DNS dotyczące adresów IPv6 (typ AAAA) zostaną usunięte.",
-    "fastest_addr": "Szybszy adres IP",
+    "fastest_addr": "Najszybszy adres IP",
-    "fastest_addr_desc": "Zapytaj wszystkie serwery DNS i zwróć najszybszy adres IP spośród wszystkich odpowiedzi",
+    "fastest_addr_desc": "Zapytaj wszystkie serwery DNS i zwróć najszybszy adres IP spośród wszystkich odpowiedzi. Ta czynność spowolni zapytania DNS, ponieważ odpowiedź musi nadejść ze wszystkich serwerów DNS, ale poprawi ogólną stabilność połączenia.",
     "autofix_warning_text": "Jeśli klikniesz „Napraw”, AdGuardHome skonfiguruje system do korzystania z serwera DNS AdGuardHome.",
     "autofix_warning_list": "Wykona następujące zadania: <0>Dezaktywuj system DNSStubListener</0> <0>Ustaw adres serwera DNS na 127.0.0.1</0> <0>Zamień symboliczny cel łącza z /etc/resolv.conf na /run/systemd/resolve/resolv.conf</0> <0>Zatrzymaj DNSStubListener (przeładuj usługę systemową)</0>",
     "autofix_warning_result": "W rezultacie wszystkie żądania DNS z Twojego systemu będą domyślnie przetwarzane przez AdGuardHome.",
@@ -490,4 +490,4 @@
     "list_updated_plural": "{{count}} list zaktualizowanych",
     "dnssec_enable": "Włącz DNSSEC",
     "dnssec_enable_desc": "Ustaw flagę DNSSEC w wychodzących zapytaniach DNS i sprawdź wynik (wymagany jest resolver z obsługą zabezpieczania DNSSEC)"
-}
+}

client/src/__locales/ru.json

@@ -162,9 +162,9 @@
     "example_comment_hash": "# И вот так тоже",
     "example_regex_meaning": "блокирует доступ к доменам, соответствующим <0>заданному регулярному выражению</0>",
     "example_upstream_regular": "обычный DNS (поверх UDP)",
-    "example_upstream_dot": "зашифрованный <a href='https://en.wikipedia.org/wiki/DNS_over_TLS' target='_blank'>DNS-поверх-TLS</a>",
+    "example_upstream_dot": "зашифрованный <0>DNS-over-TLS</0>",
-    "example_upstream_doh": "зашифрованный <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a>",
+    "example_upstream_doh": "зашифрованный <0>DNS-over-HTTPS</0>",
-    "example_upstream_sdns": "вы можете использовать <a href='https://dnscrypt.info/stamps/' target='_blank'>DNS Stamps</a> для <a href='https://dnscrypt.info/' target='_blank'>DNSCrypt</a> или <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a> резолверов",
+    "example_upstream_sdns": "вы можете использовать <0>DNS Stamps</0> для <1>DNSCrypt</1> или <2>DNS-over-HTTPS</2> резолверов",
     "example_upstream_tcp": "обычный DNS (поверх TCP)",
     "all_lists_up_to_date_toast": "Все списки уже обновлены",
     "updated_upstream_dns_toast": "Upstream DNS-серверы обновлены",
@@ -490,4 +490,4 @@
     "list_updated_plural": "Обновлено списков: {{count}}",
     "dnssec_enable": "Включить DNSSEC",
     "dnssec_enable_desc": "Установите флаг DNSSEC в исходящих DNS-запросах и проверьте результат (требуется резолвер с поддержкой DNSSEC)"
-}
+}

client/src/__locales/sv.json

@@ -136,9 +136,9 @@
     "example_comment_hash": "# Också en kommentar",
     "example_regex_meaning": "blockera åtkomst till domäner som matchar det angivna uttrycket",
     "example_upstream_regular": "vanlig DNS (över UDP)",
-    "example_upstream_dot": "krypterat <a href='https://en.wikipedia.org/wiki/DNS_over_TLS' target='_blank'>DNS-over-TLS</a>",
+    "example_upstream_dot": "krypterat <0>DNS-over-TLS</0>",
-    "example_upstream_doh": "krypterat <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a>",
+    "example_upstream_doh": "krypterat <0>DNS-over-HTTPS</0>",
-    "example_upstream_sdns": "Du kan använda <a href='https://dnscrypt.info/stamps/' target='_blank'>DNS-stamps</a> för <a href='https://dnscrypt.info/' target='_blank'>DNSCrypt</a> eller <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-över-HTTPS</a>\n-resolvers",
+    "example_upstream_sdns": "Du kan använda <0>DNS-stamps</0> för <1>DNSCrypt</1> eller <2>DNS-over-HTTPS</2>-resolvers",
     "example_upstream_tcp": "vanlig DNS (över UDP)",
     "updated_upstream_dns_toast": "Uppdaterade uppströms-dns-servrar",
     "dns_test_ok_toast": "Angivna DNS servrar fungerar korrekt",
@@ -357,4 +357,4 @@
     "descr": "Beskrivning",
     "whois": "Whois",
     "filtering_rules_learn_more": "<0>Mer info</0> om att skapa dina egna blockeringslistor för värdar."
-}
+}

client/src/__locales/vi.json

@@ -141,9 +141,9 @@
     "example_comment_hash": "# Cũng là một chú thích",
     "example_regex_meaning": "chặn quyền truy cập vào các miền khớp với <0>biểu thức chính được quy định</0>",
     "example_upstream_regular": "DNS thông thường (dùng UDP)",
-    "example_upstream_dot": "được mã hoá <a href='https://en.wikipedia.org/wiki/DNS_over_TLS' target='_blank'>DNS-over-TLS</a>",
+    "example_upstream_dot": "được mã hoá <0>DNS-over-TLS</0>",
-    "example_upstream_doh": "được mã hoá <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a>",
+    "example_upstream_doh": "được mã hoá <0>DNS-over-HTTPS</0>",
-    "example_upstream_sdns": "bạn có thể sử dụng <a href='https://dnscrypt.info/stamps/' target='_blank'>DNS Stamps</a> for <a href='https://dnscrypt.info/' target='_blank'>DNSCrypt</a> hoặc<a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a> ",
+    "example_upstream_sdns": "bạn có thể sử dụng <0>DNS Stamps</0> for <1>DNSCrypt</1> hoặc <2>DNS-over-HTTPS</2> ",
     "example_upstream_tcp": "DNS thông thường(dùng TCP)",
     "updated_upstream_dns_toast": "Đã cập nhật máy chủ DNS tìm kiếm",
     "dns_test_ok_toast": "Máy chủ DNS có thể sử dụng",
@@ -414,4 +414,4 @@
     "try_again": "Hãy thử lại",
     "dnssec_enable": "Bật DNSSEC",
     "dnssec_enable_desc": "Cắm mốc DNSSEC trong các truy vấn DNS sắp tới và kiểm tra kết quả (buộc phải có trình sửa lỗi hỗ trợ DNSSEC)"
-}
+}

client/src/__locales/zh-cn.json

@@ -82,7 +82,7 @@
     "no_domains_found": "未找到域名",
     "requests_count": "请求数",
     "top_blocked_domains": "被拦截域名排行",
-    "top_clients": "顶级客户端",
+    "top_clients": "客户端排行",
     "no_clients_found": "未找到客户端",
     "general_statistics": "概况统计",
     "number_of_dns_query_days": "过去 {{count}} 天内 处理的DNS 查询总数",
@@ -162,9 +162,9 @@
     "example_comment_hash": "# 这也是一行注释",
     "example_regex_meaning": "阻止访问与<0>指定的正则表达式</0>匹配的域",
     "example_upstream_regular": "常规 DNS（基于 UDP）",
-    "example_upstream_dot": "加密 <a href='https://en.wikipedia.org/wiki/DNS_over_TLS' target='_blank'>DNS-over-TLS</a>",
+    "example_upstream_dot": "加密 <0>DNS-over-TLS</0>",
-    "example_upstream_doh": "加密 <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a>",
+    "example_upstream_doh": "加密 <0>DNS-over-HTTPS</0>",
-    "example_upstream_sdns": "你可以使用 <a href='https://dnscrypt.info/' target='_blank'>DNSCrypt</a> 的 <a href='https://dnscrypt.info/stamps/' target='_blank'>DNS Stamps</a> 或者 <a href='https://en.wikipedia.org/wiki/DNS_over_HTTPS' target='_blank'>DNS-over-HTTPS</a> 解析器",
+    "example_upstream_sdns": "你可以使用 <1>DNSCrypt</1> 的 <0>DNS Stamps</0> 或者 <2>DNS-over-HTTPS</2> 解析器",
     "example_upstream_tcp": "常规 DNS（基于 TCP ）",
     "all_lists_up_to_date_toast": "所有列表都是最新的",
     "updated_upstream_dns_toast": "上游 DNS 已更新",
@@ -361,7 +361,7 @@
     "access_allowed_desc": "CIDR 或 IP 地址列表。如配置，则 AdGuard Home 仅会接受源自这些 IP 地址的请求。",
     "access_disallowed_title": "不允许的客户端",
     "access_disallowed_desc": "CIDR 或 IP 地址列表。如配置，则 AdGuard Home 会放弃源自这些 IP 地址的请求。",
-    "access_blocked_title": "被拦截的网域",
+    "access_blocked_title": "不允许的域名",
     "access_blocked_desc": "不要将此功能与过滤器混淆。AdGuard Home 将在查询时删除具有这些网域的 DNS 查询。在此可以明确指定域名、通配符（wildcard）和网址过滤器规则，例如 'example.org'、'*.example.org' 或 '||example.org^'。",
     "access_settings_saved": "访问设置保存成功",
     "updates_checked": "检查更新成功",
@@ -417,7 +417,7 @@
     "interval_24_hour": "24 小时",
     "interval_days": "{{count}} 天",
     "interval_days_plural": "{{count}} 天",
-    "domain": "域",
+    "domain": "域名",
     "answer": "应答",
     "filter_added_successfully": "已成功添加过滤器",
     "filter_updated": "成功更新过滤器",
@@ -456,7 +456,6 @@
     "disable_ipv6": "禁用 IPv6",
     "disable_ipv6_desc": "启用后，所有IPv6地址 (type AAAA) 的DNS查询都会被丢弃。",
     "fastest_addr": "最快的 IP 地址",
-    "fastest_addr_desc": "查询所有DNS服务器并返回所有响应中最快的IP地址",
     "autofix_warning_text": "若您单击“修复”，AdGuardHome将会配置您的系统以使用AdGuardHome的DNS服务器",
     "autofix_warning_list": "其将会进行如下工作：<0>停用系统DNSStubListener</0><0>设置DNS服务器地址为127.0.0.1</0><0>将/etc/resolv.conf的符号链接目标替换为/run/systemd/resolv/resolv.conf</0><0>停止DNSStubListener（重新加载系统解析服务）</0>",
     "autofix_warning_result": "因此，默认情况下所有来自系统的DNS请求都将由AdGuardHome处理。",
@@ -490,4 +489,4 @@
     "list_updated_plural": "{{count}} 条列表已更新",
     "dnssec_enable": "启用DNSSEC",
     "dnssec_enable_desc": "在发出DNS查询中设置DNSSEC标志并检查结果(需要启用DNSSEC的解析器)"
-}
+}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
@@ -63,7 +63,6 @@ const validate = (values) => {
     return errors;
 };
 
-
 const renderFieldsWrapper = (placeholder, buttonTitle) => function cell(row) {
     const {
         fields,
@@ -122,7 +121,7 @@ const renderMultiselect = (props) => {
 renderMultiselect.propTypes = {
     input: PropTypes.object.isRequired,
     placeholder: PropTypes.string,
-    options: PropTypes.object,
+    options: PropTypes.array,
 };
 
 let Form = (props) => {
@@ -142,6 +141,101 @@ let Form = (props) => {
         tagsOptions,
     } = props;
 
+    const [activeTabLabel, setActiveTabLabel] = useState('settings');
+
+    const tabs = {
+        settings: {
+            title: 'settings',
+            component: <div label="settings" title={props.t('main_settings')}>
+                {settingsCheckboxes.map((setting) => (
+                    <div className="form__group" key={setting.name}>
+                        <Field
+                            name={setting.name}
+                            type="checkbox"
+                            component={renderSelectField}
+                            placeholder={t(setting.placeholder)}
+                            disabled={
+                                setting.name !== 'use_global_settings'
+                                    ? useGlobalSettings
+                                    : false
+                            }
+                        />
+                    </div>
+                ))}
+            </div>,
+        },
+        block_services: {
+            title: 'block_services',
+            component: <div label="services" title={props.t('block_services')}>
+                <div className="form__group">
+                    <Field
+                        name="use_global_blocked_services"
+                        type="checkbox"
+                        component={renderServiceField}
+                        placeholder={t('blocked_services_global')}
+                        modifier="service--global"
+                    />
+                    <div className="row mb-4">
+                        <div className="col-6">
+                            <button
+                                type="button"
+                                className="btn btn-secondary btn-block"
+                                disabled={useGlobalServices}
+                                onClick={() => toggleAllServices(SERVICES, change, true)}
+                            >
+                                <Trans>block_all</Trans>
+                            </button>
+                        </div>
+                        <div className="col-6">
+                            <button
+                                type="button"
+                                className="btn btn-secondary btn-block"
+                                disabled={useGlobalServices}
+                                onClick={() => toggleAllServices(SERVICES, change, false)}
+                            >
+                                <Trans>unblock_all</Trans>
+                            </button>
+                        </div>
+                    </div>
+                    <div className="services">
+                        {SERVICES.map((service) => (
+                            <Field
+                                key={service.id}
+                                icon={`service_${service.id}`}
+                                name={`blocked_services.${service.id}`}
+                                type="checkbox"
+                                component={renderServiceField}
+                                placeholder={service.name}
+                                disabled={useGlobalServices}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>,
+        },
+        upstream_dns: {
+            title: 'upstream_dns',
+            component: <div label="upstream" title={props.t('upstream_dns')}>
+                <div className="form__desc mb-3">
+                    <Trans components={[<a href="#dns" key="0">link</a>]}>
+                        upstream_dns_client_desc
+                    </Trans>
+                </div>
+                <Field
+                    id="upstreams"
+                    name="upstreams"
+                    component="textarea"
+                    type="text"
+                    className="form-control form-control--textarea mb-5"
+                    placeholder={t('upstream_dns')}
+                />
+                <Examples />
+            </div>,
+        },
+    };
+
+    const activeTab = tabs[activeTabLabel].component;
+
     return (
         <form onSubmit={handleSubmit}>
             <div className="modal-body">
@@ -207,86 +301,9 @@ let Form = (props) => {
                     </div>
                 </div>
 
-                <Tabs controlClass="form">
+                <Tabs controlClass="form" tabs={tabs} activeTabLabel={activeTabLabel}
-                    <div label="settings" title={props.t('main_settings')}>
+                      setActiveTabLabel={setActiveTabLabel}>
-                        {settingsCheckboxes.map((setting) => (
+                    {activeTab}
-                            <div className="form__group" key={setting.name}>
-                                <Field
-                                    name={setting.name}
-                                    type="checkbox"
-                                    component={renderSelectField}
-                                    placeholder={t(setting.placeholder)}
-                                    disabled={
-                                        setting.name !== 'use_global_settings'
-                                            ? useGlobalSettings
-                                            : false
-                                    }
-                                />
-                            </div>
-                        ))}
-                    </div>
-                    <div label="services" title={props.t('block_services')}>
-                        <div className="form__group">
-                            <Field
-                                name="use_global_blocked_services"
-                                type="checkbox"
-                                component={renderServiceField}
-                                placeholder={t('blocked_services_global')}
-                                modifier="service--global"
-                            />
-                            <div className="row mb-4">
-                                <div className="col-6">
-                                    <button
-                                        type="button"
-                                        className="btn btn-secondary btn-block"
-                                        disabled={useGlobalServices}
-                                        onClick={() => toggleAllServices(SERVICES, change, true)}
-                                    >
-                                        <Trans>block_all</Trans>
-                                    </button>
-                                </div>
-                                <div className="col-6">
-                                    <button
-                                        type="button"
-                                        className="btn btn-secondary btn-block"
-                                        disabled={useGlobalServices}
-                                        onClick={() => toggleAllServices(SERVICES, change, false)}
-                                    >
-                                        <Trans>unblock_all</Trans>
-                                    </button>
-                                </div>
-                            </div>
-                            <div className="services">
-                                {SERVICES.map((service) => (
-                                    <Field
-                                        key={service.id}
-                                        icon={`service_${service.id}`}
-                                        name={`blocked_services.${service.id}`}
-                                        type="checkbox"
-                                        component={renderServiceField}
-                                        placeholder={service.name}
-                                        disabled={useGlobalServices}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                    <div label="upstream" title={props.t('upstream_dns')}>
-                        <div className="form__desc mb-3">
-                            <Trans components={[<a href="#dns" key="0">link</a>]}>
-                                upstream_dns_client_desc
-                            </Trans>
-                        </div>
-                        <Field
-                            id="upstreams"
-                            name="upstreams"
-                            component="textarea"
-                            type="text"
-                            className="form-control form-control--textarea mb-5"
-                            placeholder={t('upstream_dns')}
-                        />
-                        <Examples />
-                    </div>
                 </Tabs>
             </div>
 

client/src/components/ui/Guide.js

@@ -1,364 +1,293 @@
-import React, { Fragment } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
 
 import Tabs from './Tabs';
 import Icons from './Icons';
 
-const Guide = (props) => {
+const dnsPrivacyList = [{
-    const { dnsAddresses } = props;
+    title: 'Android',
+    list: [
+        {
+            label: 'setup_dns_privacy_android_1',
+        },
+        {
+            label: 'setup_dns_privacy_android_2',
+            components: [
+                {
+                    key: 0,
+                    href: 'https://adguard.com/adguard-android/overview.html',
+                },
+                <code key="1">text</code>,
+            ],
+        },
+        {
+            label: 'setup_dns_privacy_android_3',
+            components: [
+                {
+                    key: 0,
+                    href: 'https://getintra.org/',
+                },
+                <code key="1">text</code>,
+            ],
+        },
+    ],
+},
+{
+    title: 'iOS',
+    list: [
+        {
+            label: 'setup_dns_privacy_ios_1',
+            components: [
+                {
+                    key: 0,
+                    href: 'https://itunes.apple.com/app/id1452162351',
+                },
+                    <code key="1">text</code>,
+                    {
+                        key: 2,
+                        href: 'https://dnscrypt.info/stamps',
+                    },
+
+            ],
+        },
+        {
+            label: 'setup_dns_privacy_ios_2',
+            components: [
+                {
+                    key: 0,
+                    href: 'https://adguard.com/adguard-ios/overview.html',
+                },
+                    <code key="1">text</code>,
+            ],
+        },
+    ],
+},
+{
+    title: 'setup_dns_privacy_other_title',
+    list: [
+        {
+            label: 'setup_dns_privacy_other_1',
+        },
+        {
+            label: 'setup_dns_privacy_other_2',
+            components: [
+                {
+                    key: 0,
+                    href: 'https://github.com/AdguardTeam/dnsproxy',
+                },
+            ],
+        },
+        {
+            href: 'https://github.com/jedisct1/dnscrypt-proxy',
+            label: 'setup_dns_privacy_other_3',
+            components: [
+                {
+                    key: 0,
+                    href: 'https://github.com/jedisct1/dnscrypt-proxy',
+                },
+                    <code key="1">text</code>,
+            ],
+        },
+        {
+            label: 'setup_dns_privacy_other_4',
+            components: [
+                {
+                    key: 0,
+                    href: 'https://github.com/jedisct1/dnscrypt-proxy',
+                },
+                    <code key="1">text</code>,
+            ],
+        },
+        {
+            label: 'setup_dns_privacy_other_5',
+            components: [
+                {
+                    key: 0,
+                    href: 'https://dnscrypt.info/implementations',
+                },
+                {
+                    key: 1,
+                    href: 'https://dnsprivacy.org/wiki/display/DP/DNS+Privacy+Clients',
+                },
+            ],
+        },
+    ],
+},
+];
+
+const renderDnsPrivacyList = ({ title, list }) => <div className="tab__paragraph">
+    <strong><Trans>{title}</Trans></strong>
+    <ul>{list.map(({ label, components }) => <li key={label}>
+        <Trans
+            components={components && components.map((props) => {
+                if (React.isValidElement(props)) {
+                    return props;
+                }
+                const {
+                    // eslint-disable-next-line react/prop-types
+                    href, target = '_blank', rel = 'noopener noreferrer', key = '0',
+                } = props;
+
+                return <a
+                    href={href} target={target}
+                    rel={rel} key={key}>link</a>;
+            })}>
+            {label}
+        </Trans>
+    </li>)}
+    </ul>
+</div>;
+
+const getTabs = ({
+    tlsAddress,
+    httpsAddress,
+    showDnsPrivacyNotice,
+    t,
+}) => ({
+    Router: {
+        // eslint-disable-next-line react/display-name
+        getTitle: () => <p>
+            <Trans>install_devices_router_desc</Trans>
+        </p>,
+        title: 'Router',
+        list: ['install_devices_router_list_1',
+            'install_devices_router_list_2',
+            'install_devices_router_list_3',
+            // eslint-disable-next-line react/jsx-key
+            <Trans components={[
+                <a href="#dhcp" key="0">
+                    link
+                </a>,
+            ]}>install_devices_router_list_4</Trans>,
+        ],
+    },
+    Windows: {
+        title: 'Windows',
+        list: ['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',
+            'install_devices_windows_list_6'],
+    },
+    macOS: {
+        title: 'macOS',
+        list: ['install_devices_macos_list_1',
+            'install_devices_macos_list_2',
+            'install_devices_macos_list_3',
+            'install_devices_macos_list_4'],
+    },
+    Android: {
+        title: 'Android',
+        list: ['install_devices_android_list_1',
+            'install_devices_android_list_2',
+            'install_devices_android_list_3',
+            'install_devices_android_list_4',
+            'install_devices_android_list_5'],
+    },
+    iOS: {
+        title: 'iOS',
+        list: ['install_devices_ios_list_1',
+            'install_devices_ios_list_2',
+            'install_devices_ios_list_3',
+            'install_devices_ios_list_4'],
+    },
+    dns_privacy: {
+        title: 'dns_privacy',
+        // eslint-disable-next-line react/display-name
+        getTitle: () => <div label="dns_privacy" title={t('dns_privacy')}>
+            <div className="tab__text">
+                {tlsAddress && tlsAddress.length > 0 && (
+                    <div className="tab__paragraph">
+                        <Trans
+                            values={{ address: tlsAddress[0] }}
+                            components={[
+                                <strong key="0">text</strong>,
+                                <code key="1">text</code>,
+                            ]}
+                        >
+                            setup_dns_privacy_1
+                        </Trans>
+                    </div>
+                )}
+                {httpsAddress && httpsAddress.length > 0 && (
+                    <div className="tab__paragraph">
+                        <Trans
+                            values={{ address: httpsAddress[0] }}
+                            components={[
+                                <strong key="0">text</strong>,
+                                <code key="1">text</code>,
+                            ]}
+                        >
+                            setup_dns_privacy_2
+                        </Trans>
+                    </div>
+                )}
+                {showDnsPrivacyNotice
+                    ? <div className="tab__paragraph">
+                        <Trans
+                            components={[
+                                <a
+                                    href="https://github.com/AdguardTeam/AdguardHome/wiki/Encryption"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    key="0"
+                                >
+                                    link
+                                </a>,
+                                <code key="1">text</code>,
+                            ]}
+                        >
+                            setup_dns_notice
+                        </Trans>
+                    </div>
+                    : <>
+                        <div className="tab__paragraph">
+                            <Trans components={[<p key="0">text</p>]}>
+                                setup_dns_privacy_3
+                            </Trans>
+                        </div>
+                        {dnsPrivacyList.map(renderDnsPrivacyList)}
+                    </>}
+            </div>
+        </div>,
+    },
+});
+
+const renderContent = ({ title, list, getTitle }, t) => <div key={title} label={t(title)}>
+    <div className="tab__title">{t(title)}</div>
+    <div className="tab__text">
+        {typeof getTitle === 'function' && getTitle()}
+        {list
+        && <ol>{list.map((item) => <li key={item}>
+            <Trans>{item}</Trans>
+        </li>)}
+        </ol>}
+    </div>
+</div>;
+
+const Guide = ({ dnsAddresses, t }) => {
     const tlsAddress = (dnsAddresses && dnsAddresses.filter((item) => item.includes('tls://'))) || '';
     const httpsAddress = (dnsAddresses && dnsAddresses.filter((item) => item.includes('https://'))) || '';
     const showDnsPrivacyNotice = httpsAddress.length < 1 && tlsAddress.length < 1;
 
+    const [activeTabLabel, setActiveTabLabel] = useState('Router');
+
+    const tabs = getTabs({
+        tlsAddress,
+        httpsAddress,
+        showDnsPrivacyNotice,
+        t,
+    });
+
+    const activeTab = renderContent(tabs[activeTabLabel], t);
+
     return (
         <div>
             <Icons />
-            <Tabs>
+            <Tabs tabs={tabs} activeTabLabel={activeTabLabel}
-                <div label="Router">
+                  setActiveTabLabel={setActiveTabLabel}>{activeTab}</Tabs>
-                    <div className="tab__title">
-                        <Trans>install_devices_router</Trans>
-                    </div>
-                    <div className="tab__text">
-                        <p>
-                            <Trans>install_devices_router_desc</Trans>
-                        </p>
-                        <ol>
-                            <li>
-                                <Trans>install_devices_router_list_1</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_router_list_2</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_router_list_3</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_router_list_4</Trans>
-                            </li>
-                        </ol>
-                    </div>
-                </div>
-                <div label="Windows">
-                    <div className="tab__title">Windows</div>
-                    <div className="tab__text">
-                        <ol>
-                            <li>
-                                <Trans>install_devices_windows_list_1</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_windows_list_2</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_windows_list_3</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_windows_list_4</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_windows_list_5</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_windows_list_6</Trans>
-                            </li>
-                        </ol>
-                    </div>
-                </div>
-                <div label="macOS">
-                    <div className="tab__title">macOS</div>
-                    <div className="tab__text">
-                        <ol>
-                            <li>
-                                <Trans>install_devices_macos_list_1</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_macos_list_2</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_macos_list_3</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_macos_list_4</Trans>
-                            </li>
-                        </ol>
-                    </div>
-                </div>
-                <div label="Android">
-                    <div className="tab__title">Android</div>
-                    <div className="tab__text">
-                        <ol>
-                            <li>
-                                <Trans>install_devices_android_list_1</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_android_list_2</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_android_list_3</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_android_list_4</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_android_list_5</Trans>
-                            </li>
-                        </ol>
-                    </div>
-                </div>
-                <div label="iOS">
-                    <div className="tab__title">iOS</div>
-                    <div className="tab__text">
-                        <ol>
-                            <li>
-                                <Trans>install_devices_ios_list_1</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_ios_list_2</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_ios_list_3</Trans>
-                            </li>
-                            <li>
-                                <Trans>install_devices_ios_list_4</Trans>
-                            </li>
-                        </ol>
-                    </div>
-                </div>
-                <div label="dns_privacy" title={props.t('dns_privacy')}>
-                    <div className="tab__title">
-                        <Trans>dns_privacy</Trans>
-                    </div>
-                    <div className="tab__text">
-                        {tlsAddress && tlsAddress.length > 0 && (
-                            <div className="tab__paragraph">
-                                <Trans
-                                    values={{ address: tlsAddress[0] }}
-                                    components={[
-                                        <strong key="0">text</strong>,
-                                        <code key="1">text</code>,
-                                    ]}
-                                >
-                                    setup_dns_privacy_1
-                                </Trans>
-                            </div>
-                        )}
-                        {httpsAddress && httpsAddress.length > 0 && (
-                            <div className="tab__paragraph">
-                                <Trans
-                                    values={{ address: httpsAddress[0] }}
-                                    components={[
-                                        <strong key="0">text</strong>,
-                                        <code key="1">text</code>,
-                                    ]}
-                                >
-                                    setup_dns_privacy_2
-                                </Trans>
-                            </div>
-                        )}
-                        {showDnsPrivacyNotice && (
-                            <div className="tab__paragraph">
-                                <Trans
-                                    components={[
-                                        <a
-                                            href="https://github.com/AdguardTeam/AdguardHome/wiki/Encryption"
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            key="0"
-                                        >
-                                            link
-                                        </a>,
-                                        <code key="1">text</code>,
-                                    ]}
-                                >
-                                    setup_dns_notice
-                                </Trans>
-                            </div>
-                        )}
-                        {!showDnsPrivacyNotice && (
-                            <Fragment>
-                                <div className="tab__paragraph">
-                                    <Trans components={[<p key="0">text</p>]}>
-                                        setup_dns_privacy_3
-                                    </Trans>
-                                </div>
-                                <div className="tab__paragraph">
-                                    <strong>Android</strong>
-                                    <ul>
-                                        <li>
-                                            <Trans>setup_dns_privacy_android_1</Trans>
-                                        </li>
-                                        <li>
-                                            <Trans
-                                                components={[
-                                                    <a
-                                                        href="https://adguard.com/adguard-android/overview.html"
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                        key="0"
-                                                    >
-                                                        link
-                                                    </a>,
-                                                    <code key="1">text</code>,
-                                                ]}
-                                            >
-                                                setup_dns_privacy_android_2
-                                            </Trans>
-                                        </li>
-                                        <li>
-                                            <Trans
-                                                components={[
-                                                    <a
-                                                        href="https://getintra.org/"
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                        key="0"
-                                                    >
-                                                        link
-                                                    </a>,
-                                                    <code key="1">text</code>,
-                                                ]}
-                                            >
-                                                setup_dns_privacy_android_3
-                                            </Trans>
-                                        </li>
-                                    </ul>
-                                </div>
-                                <div className="tab__paragraph">
-                                    <strong>iOS</strong>
-                                    <ul>
-                                        <li>
-                                            <Trans
-                                                components={[
-                                                    <a
-                                                        href="https://itunes.apple.com/app/id1452162351"
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                        key="0"
-                                                    >
-                                                        link
-                                                    </a>,
-                                                    <code key="1">text</code>,
-                                                    <a
-                                                        href="https://dnscrypt.info/stamps"
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                        key="2"
-                                                    >
-                                                        link
-                                                    </a>,
-                                                ]}
-                                            >
-                                                setup_dns_privacy_ios_1
-                                            </Trans>
-                                        </li>
-                                        <li>
-                                            <Trans
-                                                components={[
-                                                    <a
-                                                        href="https://adguard.com/adguard-ios/overview.html"
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                        key="0"
-                                                    >
-                                                        link
-                                                    </a>,
-                                                    <code key="1">text</code>,
-                                                ]}
-                                            >
-                                                setup_dns_privacy_ios_2
-                                            </Trans>
-                                        </li>
-                                    </ul>
-                                </div>
-                                <div className="tab__paragraph">
-                                    <strong>
-                                        <Trans>setup_dns_privacy_other_title</Trans>
-                                    </strong>
-                                    <ul>
-                                        <li>
-                                            <Trans>setup_dns_privacy_other_1</Trans>
-                                        </li>
-                                        <li>
-                                            <Trans
-                                                components={[
-                                                    <a
-                                                        href="https://github.com/AdguardTeam/dnsproxy"
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                        key="0"
-                                                    >
-                                                        link
-                                                    </a>,
-                                                ]}
-                                            >
-                                                setup_dns_privacy_other_2
-                                            </Trans>
-                                        </li>
-                                        <li>
-                                            <Trans
-                                                components={[
-                                                    <a
-                                                        href="https://github.com/jedisct1/dnscrypt-proxy"
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                        key="0"
-                                                    >
-                                                        link
-                                                    </a>,
-                                                    <code key="1">text</code>,
-                                                ]}
-                                            >
-                                                setup_dns_privacy_other_3
-                                            </Trans>
-                                        </li>
-                                        <li>
-                                            <Trans
-                                                components={[
-                                                    <a
-                                                        href="https://www.mozilla.org/firefox/"
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                        key="0"
-                                                    >
-                                                        link
-                                                    </a>,
-                                                    <code key="1">text</code>,
-                                                ]}
-                                            >
-                                                setup_dns_privacy_other_4
-                                            </Trans>
-                                        </li>
-                                        <li>
-                                            <Trans
-                                                components={[
-                                                    <a
-                                                        href="https://dnscrypt.info/implementations"
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                        key="0"
-                                                    >
-                                                        link
-                                                    </a>,
-                                                    <a
-                                                        href="https://dnsprivacy.org/wiki/display/DP/DNS+Privacy+Clients"
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                        key="1"
-                                                    >
-                                                        link
-                                                    </a>,
-                                                ]}
-                                            >
-                                                setup_dns_privacy_other_5
-                                            </Trans>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </Fragment>
-                        )}
-                    </div>
-                </div>
-            </Tabs>
         </div>
     );
 };
@@ -372,4 +301,15 @@ Guide.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
+renderDnsPrivacyList.propTypes = {
+    title: PropTypes.string.isRequired,
+    list: PropTypes.array.isRequired,
+};
+
+renderContent.propTypes = {
+    title: PropTypes.string.isRequired,
+    list: PropTypes.array.isRequired,
+    getTitle: PropTypes.func,
+};
+
 export default withTranslation()(Guide);

client/src/components/ui/Tab.js

@@ -1,40 +1,34 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { useTranslation } from 'react-i18next';
 
-class Tab extends Component {
+const Tab = ({
-    handleClick = () => {
+    activeTabLabel, label, title, onClick,
-        this.props.onClick(this.props.label);
+}) => {
-    }
+    const [t] = useTranslation();
+    const handleClick = () => onClick(label);
 
-    render() {
+    const tabClass = classnames({
-        const {
+        tab__control: true,
-            activeTab,
+        'tab__control--active': activeTabLabel === label,
-            label,
+    });
-            title,
-        } = this.props;
 
-        const tabClass = classnames({
+    return (
-            tab__control: true,
+        <div
-            'tab__control--active': activeTab === label,
+            className={tabClass}
-        });
+            onClick={handleClick}
-
+        >
-        return (
+            <svg className="tab__icon">
-            <div
+                <use xlinkHref={`#${label.toLowerCase()}`} />
-                className={tabClass}
+            </svg>
-                onClick={this.handleClick}
+            {t(title || label)}
-            >
+        </div>
-                <svg className="tab__icon">
+    );
-                    <use xlinkHref={`#${label.toLowerCase()}`} />
+};
-                </svg>
-                {title || label}
-            </div>
-        );
-    }
-}
 
 Tab.propTypes = {
-    activeTab: PropTypes.string.isRequired,
+    activeTabLabel: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func.isRequired,
     title: PropTypes.string,

client/src/components/ui/Tabs.css

@@ -37,7 +37,6 @@
 }
 
 .tab__control--active {
-    font-weight: 700;
     color: #4a4a4a;
     opacity: 1;
 }

client/src/components/ui/Tabs.js

@@ -1,68 +1,52 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-
 import Tab from './Tab';
 import './Tabs.css';
 
-class Tabs extends Component {
+const Tabs = (props) => {
-    state = {
+    const {
-        activeTab: this.props.children[0].props.label,
+        tabs, controlClass, activeTabLabel, setActiveTabLabel, children: activeTab,
-    };
+    } = props;
 
-    onClickTabControl = (tab) => {
+    const onClickTabControl = (tabLabel) => setActiveTabLabel(tabLabel);
-        this.setState({ activeTab: tab });
-    }
 
-    render() {
+    const getControlClass = classnames({
-        const {
+        tabs__controls: true,
-            props: {
+        [`tabs__controls--${controlClass}`]: controlClass,
-                controlClass,
+    });
-                children,
-            },
-            state: {
-                activeTab,
-            },
-        } = this;
-
-        const getControlClass = classnames({
-            tabs__controls: true,
-            [`tabs__controls--${controlClass}`]: controlClass,
-        });
-
-        return (
-            <div className="tabs">
-                <div className={getControlClass}>
-                    {children.map((child) => {
-                        const { label, title } = child.props;
 
+    return (
+        <div className="tabs">
+            <div className={getControlClass}>
+                {Object.values(tabs)
+                    .map((props) => {
+                        // eslint-disable-next-line react/prop-types
+                        const { title, label = title } = props;
                         return (
                             <Tab
                                 key={label}
                                 label={label}
                                 title={title}
-                                activeTab={activeTab}
+                                activeTabLabel={activeTabLabel}
-                                onClick={this.onClickTabControl}
+                                onClick={onClickTabControl}
                             />
                         );
                     })}
-                </div>
-                <div className="tabs__content">
-                    {children.map((child) => {
-                        if (child.props.label !== activeTab) {
-                            return false;
-                        }
-                        return child.props.children;
-                    })}
-                </div>
             </div>
-        );
+            <div className="tabs__content">
-    }
+                {activeTab}
-}
+            </div>
+        </div>
+    );
+};
 
 Tabs.propTypes = {
     controlClass: PropTypes.string,
-    children: PropTypes.array.isRequired,
+    tabs: PropTypes.object.isRequired,
+    activeTabLabel: PropTypes.string.isRequired,
+    setActiveTabLabel: PropTypes.func.isRequired,
+    children: PropTypes.element.isRequired,
 };
 
 export default Tabs;

client/src/helpers/form.js

@@ -103,7 +103,7 @@ export const renderGroupField = ({
 
 renderGroupField.propTypes = {
     input: PropTypes.object.isRequired,
-    id: PropTypes.string.isRequired,
+    id: PropTypes.string,
     className: PropTypes.string,
     placeholder: PropTypes.string,
     type: PropTypes.string,