-
+
{intl.getMessage('logout')}
diff --git a/client_v2/src/components/App/index.tsx b/client_v2/src/components/App/index.tsx
index 487ccdfa..d329b967 100644
--- a/client_v2/src/components/App/index.tsx
+++ b/client_v2/src/components/App/index.tsx
@@ -7,14 +7,15 @@ import { Sidebar } from 'panel/common/ui/Sidebar';
import { Icons } from 'panel/common/ui/Icons';
import { Footer } from 'panel/common/ui/Footer';
import { Header } from 'panel/common/ui/Header';
+import { Settings } from 'panel/components/Settings';
+import { LocalesType } from 'panel/common/intl';
+import { LOCAL_STORAGE_KEYS, LocalStorageHelper } from 'panel/helpers/localStorageHelper';
import Toasts from '../Toasts';
import i18n from '../../i18n';
-
import { THEMES } from '../../helpers/constants';
import { setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
import { changeLanguage, getDnsStatus, getTimerStatus } from '../../actions';
-
import { RootState } from '../../initialState';
import s from './styles.module.pcss';
@@ -25,7 +26,13 @@ type RouteConfig = {
exact: boolean;
};
-const ROUTES: RouteConfig[] = [];
+const ROUTES: RouteConfig[] = [
+ {
+ path: '/settings',
+ component: Settings,
+ exact: true,
+ },
+];
const App = () => {
const dispatch = useDispatch();
@@ -55,10 +62,11 @@ const App = () => {
if (language) {
i18n.changeLanguage(language);
setHtmlLangAttr(language);
+ LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.LANGUAGE, language);
}
}
- i18n.on('languageChanged', (lang) => {
+ i18n.on('languageChanged', (lang: LocalesType) => {
dispatch(changeLanguage(lang));
});
};
diff --git a/client_v2/src/components/Expo/styles.module.pcss b/client_v2/src/components/Expo/styles.module.pcss
deleted file mode 100644
index cfc57055..00000000
--- a/client_v2/src/components/Expo/styles.module.pcss
+++ /dev/null
@@ -1,208 +0,0 @@
-.title {
- margin: 0 0 16px 0;
-}
-
-.subtitle {
- margin-top: 40px;
- margin-bottom: 16px;
-}
-
-.iconsContainer {
- display: flex;
- flex-wrap: wrap;
- gap: 16px;
- margin-top: 16px;
-}
-
-.iconItem {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 100px;
- padding: 12px;
- border: 1px solid var(--default-item-divider);
- border-radius: 4px;
-}
-
-.icon {
- width: 24px;
- height: 24px;
- margin-bottom: 8px;
- color: var(--default-gray-icons);
-}
-
-.iconName {
- font-size: 12px;
- text-align: center;
- word-break: break-word;
-}
-
-.colorsContainer {
- list-style: none;
- margin: 8px 0 0 0;
- padding: 0;
- display: block;
-}
-
-.colorSwatch {
- display: flex;
- flex-direction: row;
- align-items: center;
- width: 100%;
- padding: 6px 0;
- border: none;
- border-radius: 0;
- margin-bottom: 0;
- gap: 16px;
- border-bottom: 1px solid var(--default-item-divider);
-}
-
-.colorBox {
- width: 36px;
- height: 18px;
- border-radius: 3px;
- border: 1px solid var(--default-item-divider);
- margin-bottom: 0;
- margin-right: 12px;
-}
-
-.colorName {
- font-size: 12px;
- margin: 0 12px 0 0;
- text-align: left;
- word-break: break-all;
- min-width: 180px;
-}
-
-.colorValue {
- min-width: 55px;
- font-size: 12px;
- color: var(--default-main-text);
- text-align: left;
- word-break: break-all;
-}
-
-.iconsContainer {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- margin-top: 8px;
-}
-
-.iconItem {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 110px;
- padding: 6px;
- border: 1px solid var(--default-item-divider);
- border-radius: 4px;
-}
-
-.icon {
- width: 24px;
- height: 24px;
- margin-bottom: 4px;
- color: var(--default-gray-icons);
-}
-
-.iconName {
- font-size: 10px;
- text-align: center;
- word-break: break-word;
-}
-
-.buttonsContainer {
- display: grid;
- gap: 16px;
- grid-template-columns: repeat(2, 1fr);
- margin-top: 16px;
-
- @media (min-width: 768px) {
- grid-template-columns: repeat(3, 1fr);
- }
-}
-
-.typographySection {
- display: flex;
- flex-direction: column;
- gap: 16px;
- margin: 24px 0;
-}
-
-.typographyBlock {
- margin-bottom: 24px;
-}
-
-.typographyHeading {
- font-weight: 600;
- margin-bottom: 8px;
-}
-
-.typographyList {
- display: flex;
- flex-direction: column;
- gap: 4px;
-}
-
-.selectExamples {
- display: flex;
- flex-direction: column;
- gap: 24px;
- margin-top: 16px;
-}
-
-.selectExample {
- margin-bottom: 8px;
-}
-
-.exampleTitle {
- font-size: 12px;
- font-weight: 600;
- margin-bottom: 8px;
-}
-
-.selectRow {
- display: flex;
- flex-wrap: wrap;
- gap: 16px;
-}
-
-.selectItem {
- min-width: 200px;
- margin-bottom: 8px;
-}
-
-.selectLabel {
- font-size: 12px;
- margin-bottom: 4px;
- color: var(--default-description-text);
-}
-
-.contolsList {
- display: flex;
- gap: 8px;
- flex-direction: column;
-}
-
-.deprecationNotice {
- padding: 24px;
- border: 2px solid #ff9800;
- border-radius: 8px;
- background-color: #fff8e1;
- margin: 24px 0;
-}
-
-.storyBookInstructions {
- background-color: #f5f5f5;
- padding: 16px 24px;
- border-radius: 4px;
- margin: 16px 0;
-}
-
-.storyBookInstructions code {
- background-color: #e0e0e0;
- padding: 2px 6px;
- border-radius: 4px;
- font-family: monospace;
-}
diff --git a/client_v2/src/components/Settings/FiltersConfig.tsx b/client_v2/src/components/Settings/FiltersConfig.tsx
new file mode 100644
index 00000000..6087f277
--- /dev/null
+++ b/client_v2/src/components/Settings/FiltersConfig.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import intl from 'panel/common/intl';
+import theme from 'panel/lib/theme';
+import { RoutePath } from 'panel/components/Routes/Paths';
+import { Link } from 'panel/common/ui/Link';
+
+import { setFiltersConfig } from 'panel/actions/filtering';
+import { useDispatch } from 'react-redux';
+import { SwitchGroup } from './SettingsGroup';
+
+export type FormValues = {
+ enabled: boolean;
+ interval: number;
+};
+
+type Props = {
+ initialValues: FormValues;
+ processing: boolean;
+};
+
+export const FiltersConfig = ({ initialValues, processing }: Props) => {
+ const dispatch = useDispatch();
+
+ const { watch, control, setValue } = useForm({
+ mode: 'onBlur',
+ defaultValues: initialValues,
+ });
+
+ const enabled = watch('enabled');
+
+ useEffect(() => {
+ dispatch(setFiltersConfig({ ...initialValues, enabled }));
+ }, [enabled]);
+
+ return (
+
+ (
+ (
+ e.stopPropagation()}>
+ {text}
+
+ ),
+ b: (text: string) => (
+ e.stopPropagation()}>
+ {text}
+
+ ),
+ c: (text: string) => (
+ e.stopPropagation()}>
+ {text}
+
+ ),
+ })}
+ disabled={processing}
+ onChange={(e) => setValue('enabled', e.target.checked)}
+ id="filters_enabled"
+ checked={enabled}
+ />
+ )}
+ />
+
+ );
+};
diff --git a/client_v2/src/components/Settings/IgnoredDomains/IgnoredDomains.tsx b/client_v2/src/components/Settings/IgnoredDomains/IgnoredDomains.tsx
new file mode 100644
index 00000000..51c2dbf7
--- /dev/null
+++ b/client_v2/src/components/Settings/IgnoredDomains/IgnoredDomains.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { Controller, type Control, type UseFormSetValue } from 'react-hook-form';
+import cn from 'clsx';
+
+import { Textarea } from 'panel/common/controls/Textarea';
+import intl from 'panel/common/intl';
+import { trimLinesAndRemoveEmpty } from 'panel/helpers/helpers';
+import { Dropdown } from 'panel/common/ui/Dropdown';
+import theme from 'panel/lib/theme';
+import { Icon } from 'panel/common/ui/Icon';
+
+import s from './styles.module.pcss';
+import { SwitchGroup } from '../SettingsGroup';
+
+type Props = {
+ control: Control
;
+ processing: boolean;
+ ignoreEnabled: boolean;
+ setValue: UseFormSetValue;
+ switchId: string;
+ textareaId: string;
+};
+
+export const IgnoredDomains = ({ control, processing, ignoreEnabled, setValue, switchId, textareaId }: Props) => {
+ return (
+ setValue('ignore_enabled', e.target.checked)}
+ disabled={processing}>
+ (
+