diff --git a/web/src/i18n/en/index.ts b/web/src/i18n/en/index.ts index ce572bb6bb..fa88c26ca5 100644 --- a/web/src/i18n/en/index.ts +++ b/web/src/i18n/en/index.ts @@ -1718,17 +1718,17 @@ Licensing information: [https://docs.defguard.net/enterprise/license](https://do none: { label: 'None', helper: - 'When this option is enabled, users will be able to select all routing options.', + 'None - When this option is enabled, users will be able to select all routing options.', }, disableAllTraffic: { label: 'Disable the option to route all traffic through VPN', helper: - 'When this option is enabled, users will not be able to route all traffic through the VPN.', + 'Disable all traffic - When this option is enabled, users will not be able to route all traffic through the VPN.', }, forceAllTraffic: { label: 'Force the clients to route all traffic through VPN', helper: - 'When this option is enabled, the users will always route all traffic through the VPN.', + 'Force all traffic - When this option is enabled, the users will always route all traffic through the VPN.', }, }, }, diff --git a/web/src/i18n/i18n-types.ts b/web/src/i18n/i18n-types.ts index 517c50734c..a2ce0a2129 100644 --- a/web/src/i18n/i18n-types.ts +++ b/web/src/i18n/i18n-types.ts @@ -4103,7 +4103,7 @@ type RootTranslation = { */ label: string /** - * W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​u​s​e​r​s​ ​w​i​l​l​ ​b​e​ ​a​b​l​e​ ​t​o​ ​s​e​l​e​c​t​ ​a​l​l​ ​r​o​u​t​i​n​g​ ​o​p​t​i​o​n​s​. + * N​o​n​e​ ​-​ ​W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​u​s​e​r​s​ ​w​i​l​l​ ​b​e​ ​a​b​l​e​ ​t​o​ ​s​e​l​e​c​t​ ​a​l​l​ ​r​o​u​t​i​n​g​ ​o​p​t​i​o​n​s​. */ helper: string } @@ -4113,7 +4113,7 @@ type RootTranslation = { */ label: string /** - * W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​u​s​e​r​s​ ​w​i​l​l​ ​n​o​t​ ​b​e​ ​a​b​l​e​ ​t​o​ ​r​o​u​t​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​t​h​r​o​u​g​h​ ​t​h​e​ ​V​P​N​. + * D​i​s​a​b​l​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​-​ ​W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​u​s​e​r​s​ ​w​i​l​l​ ​n​o​t​ ​b​e​ ​a​b​l​e​ ​t​o​ ​r​o​u​t​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​t​h​r​o​u​g​h​ ​t​h​e​ ​V​P​N​. */ helper: string } @@ -4123,7 +4123,7 @@ type RootTranslation = { */ label: string /** - * W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​t​h​e​ ​u​s​e​r​s​ ​w​i​l​l​ ​a​l​w​a​y​s​ ​r​o​u​t​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​t​h​r​o​u​g​h​ ​t​h​e​ ​V​P​N​. + * F​o​r​c​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​-​ ​W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​t​h​e​ ​u​s​e​r​s​ ​w​i​l​l​ ​a​l​w​a​y​s​ ​r​o​u​t​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​t​h​r​o​u​g​h​ ​t​h​e​ ​V​P​N​. */ helper: string } @@ -10860,7 +10860,7 @@ export type TranslationFunctions = { */ label: () => LocalizedString /** - * When this option is enabled, users will be able to select all routing options. + * None - When this option is enabled, users will be able to select all routing options. */ helper: () => LocalizedString } @@ -10870,7 +10870,7 @@ export type TranslationFunctions = { */ label: () => LocalizedString /** - * When this option is enabled, users will not be able to route all traffic through the VPN. + * Disable all traffic - When this option is enabled, users will not be able to route all traffic through the VPN. */ helper: () => LocalizedString } @@ -10880,7 +10880,7 @@ export type TranslationFunctions = { */ label: () => LocalizedString /** - * When this option is enabled, the users will always route all traffic through the VPN. + * Force all traffic - When this option is enabled, the users will always route all traffic through the VPN. */ helper: () => LocalizedString } diff --git a/web/src/i18n/pl/index.ts b/web/src/i18n/pl/index.ts index 7356101f64..3255916235 100644 --- a/web/src/i18n/pl/index.ts +++ b/web/src/i18n/pl/index.ts @@ -1504,17 +1504,17 @@ Uwaga, podane tutaj konfiguracje nie posiadają klucza prywatnego. Musisz uzupe none: { label: 'Brak', helper: - 'Kiedy ta opcja jest włączona, użytkownicy mogą wybierać dowolny typ przekierowania ruchu.', + 'Brak - Kiedy ta opcja jest włączona, użytkownicy mogą wybrać dowolny typ przekierowania ruchu.', }, disableAllTraffic: { label: 'Zablokuj możliwość przekierowania całego ruchu przez VPN', helper: - 'Kiedy ta opcja jest włączona, użytkownicy nie będą mogli przekierować całego ruchu przez VPN.', + 'Zablokuj przekierowanie całego ruchu - Kiedy ta opcja jest włączona, użytkownicy nie będą mogli przekierować całego ruchu przez VPN.', }, forceAllTraffic: { label: 'Wymuś przekierowanie całego ruchu przez VPN', helper: - 'Kiedy ta opcja jest włączona, użytkownicy będą zawsze przekierowywać cały ruch przez VPN.', + 'Wymuś przekierowanie całego ruchu - Kiedy ta opcja jest włączona, użytkownicy będą zawsze przekierowywać cały ruch przez VPN.', }, } }, diff --git a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx index 43fa5f3f9c..2faf81784e 100644 --- a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx +++ b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx @@ -1,9 +1,8 @@ import './style.scss'; import clsx from 'clsx'; -import parse from 'html-react-parser'; import { useMemo } from 'react'; import { useI18nContext } from '../../../../../../i18n/i18n-react'; -import { Helper } from '../../../../../../shared/defguard-ui/components/Layout/Helper/Helper'; +import { MessageBox } from '../../../../../../shared/defguard-ui/components/Layout/MessageBox/MessageBox'; import { RadioButton } from '../../../../../../shared/defguard-ui/components/Layout/RadioButton/Radiobutton'; import type { SelectOption } from '../../../../../../shared/defguard-ui/components/Layout/Select/types'; import { ClientTrafficPolicy } from '../../../../../../shared/types'; @@ -21,57 +20,71 @@ export const ClientTrafficPolicySelect = ({ onChange, fieldValue }: Props) => { key: ClientTrafficPolicy.NONE, value: ClientTrafficPolicy.NONE, label: LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.label(), - meta: LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.helper(), }, { key: ClientTrafficPolicy.DISABLE_ALL_TRAFFIC, value: ClientTrafficPolicy.DISABLE_ALL_TRAFFIC, label: LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.label(), - meta: LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.helper(), }, { key: ClientTrafficPolicy.FORCE_ALL_TRAFFIC, value: ClientTrafficPolicy.FORCE_ALL_TRAFFIC, label: LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.label(), - meta: LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.helper(), }, ], [ LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.label, - LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.helper, LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.label, - LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.helper, LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.label, - LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.helper, ], ); return ( -
- - {options.map(({ key, value, label, meta, disabled = false }) => { - const active = fieldValue === value; - return ( -
{ - if (!disabled) { - onChange(value); - } - }} - > -

{label}

- - {parse(meta)} -
- ); - })} +
+
+

{LL.settingsPage.enterprise.fields.clientTrafficPolicy.header()}

+
+
+ +
    +
  • +

    {LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.helper()}

    +
  • +
  • +

    + {LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.helper()} +

    +
  • +
  • +

    + {LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.helper()} +

    +
  • +
+
+ {options.map(({ key, value, label, disabled = false }) => { + const active = fieldValue === value; + return ( +
{ + if (!disabled) { + onChange(value); + } + }} + > +

{label}

+ +
+ ); + })} +
); }; diff --git a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/style.scss b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/style.scss index 692d1123b8..ad3f917539 100644 --- a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/style.scss +++ b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/style.scss @@ -56,4 +56,17 @@ @include animate-standard; } } + + #client-traffic-policy-message-box { + ul { + list-style-position: inside; + margin-top: 8px; + + li { + p { + display: inline; + } + } + } + } }