From 634ff42538e042de748f3912b027229f91bd8eca Mon Sep 17 00:00:00 2001 From: z0ccc Date: Fri, 7 Oct 2022 15:23:53 -0400 Subject: [PATCH] Added other options page --- src/Popup/Pages/OtherOptionsPage/index.tsx | 34 +++++ src/Popup/Pages/SystemPage/index.tsx | 2 - src/Popup/Pages/UserAgentPage/index.tsx | 5 +- src/Popup/Pages/WebRtcPage/RadioButton.tsx | 51 ++++++++ src/Popup/Pages/WebRtcPage/index.tsx | 144 ++++++++------------- src/Popup/Popup.tsx | 16 ++- src/assets/global.css | 4 + src/theme.ts | 3 +- 8 files changed, 157 insertions(+), 102 deletions(-) create mode 100644 src/Popup/Pages/OtherOptionsPage/index.tsx create mode 100644 src/Popup/Pages/WebRtcPage/RadioButton.tsx diff --git a/src/Popup/Pages/OtherOptionsPage/index.tsx b/src/Popup/Pages/OtherOptionsPage/index.tsx new file mode 100644 index 0000000..6b9089a --- /dev/null +++ b/src/Popup/Pages/OtherOptionsPage/index.tsx @@ -0,0 +1,34 @@ +import { useState, useEffect, ChangeEvent } from 'react' +import { Box, Label, Radio, Flex, Input, Select, Divider } from 'theme-ui' +import userAgents from '../../../utils/userAgents' +import detachDebugger from '../../../utils/detachDebugger' +import SettingsCheckBox from '../SettingsPage/SettingsCheckBox' + +interface OtherOptionsPageProps { + tab: string +} + +const OtherOptionsPage = ({ tab }: OtherOptionsPageProps) => { + return ( + + + Other Options + + + + + + + + + + + + ) +} + +export default OtherOptionsPage diff --git a/src/Popup/Pages/SystemPage/index.tsx b/src/Popup/Pages/SystemPage/index.tsx index 6fe66bd..0bb1d10 100644 --- a/src/Popup/Pages/SystemPage/index.tsx +++ b/src/Popup/Pages/SystemPage/index.tsx @@ -24,7 +24,6 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => { ['systemType', 'configuration', 'timezone', 'locale', 'lat', 'lon'], (storage) => { if (storage.systemType === 'custom') { - console.log(storage.configuration) storage.configuration && setConfiguration(storage.configuration) storage.timezone && setTimezone(storage.timezone) storage.locale && setLocale(storage.locale) @@ -104,7 +103,6 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => { const changeInputText = () => { if (systemType !== 'custom' || configuration !== 'custom') { - console.log(2) setConfiguration('custom') setSystemType('custom') chrome.storage.local.set({ diff --git a/src/Popup/Pages/UserAgentPage/index.tsx b/src/Popup/Pages/UserAgentPage/index.tsx index e9b6785..e5dcdaa 100644 --- a/src/Popup/Pages/UserAgentPage/index.tsx +++ b/src/Popup/Pages/UserAgentPage/index.tsx @@ -1,7 +1,8 @@ import { useState, useEffect, ChangeEvent } from 'react' -import { Box, Label, Radio, Flex, Input, Select } from 'theme-ui' +import { Box, Label, Radio, Flex, Input, Select, Divider } from 'theme-ui' import userAgents from '../../../utils/userAgents' import detachDebugger from '../../../utils/detachDebugger' +import SettingsCheckBox from '../SettingsPage/SettingsCheckBox' interface UserAgentPageProps { tab: string @@ -66,7 +67,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => { }} > - Other Options + User Agent ) => void +} + +const RadioButton = ({ + value, + name, + description, + webRtcPolicy, + onChange, +}: RadioButtonProps) => { + // const [webRtcPolicy, setWebRtcPolicy] = useState('default') + + // useEffect(() => { + // chrome.storage.local.get(['webRtcPolicy'], (storage) => { + // storage.webRtcPolicy && setWebRtcPolicy(storage.webRtcPolicy) + // }) + // }, []) + + // chrome.privacy.network.webRTCIPHandlingPolicy.onChange.addListener(function ( + // details + // ) { + // console.log(details) + // setWebRtcPolicy(details.value) + // }) + + return ( + <> + + {description} + + ) +} + +export default RadioButton diff --git a/src/Popup/Pages/WebRtcPage/index.tsx b/src/Popup/Pages/WebRtcPage/index.tsx index a503d0c..b368de7 100644 --- a/src/Popup/Pages/WebRtcPage/index.tsx +++ b/src/Popup/Pages/WebRtcPage/index.tsx @@ -1,7 +1,7 @@ -import { useState, useEffect } from 'react' -import { Box, Button, Label, Radio, Select, Text } from 'theme-ui' -import getWebRTCData from './getWebRTCData' +import { useState, useEffect, ChangeEvent } from 'react' +import { Box, Label, Radio, Text } from 'theme-ui' import handleWebRtcPolicy from './handleWebRtcPolicy' +import RadioButton from './RadioButton' interface SystemPageProps { tab: string @@ -9,7 +9,6 @@ interface SystemPageProps { const WebRtcPage = ({ tab }: SystemPageProps) => { const [webRtcPolicy, setWebRtcPolicy] = useState('default') - const [webRtcIp, setWebRtcIp] = useState([]) useEffect(() => { chrome.storage.local.get(['webRtcPolicy'], (storage) => { @@ -17,12 +16,17 @@ const WebRtcPage = ({ tab }: SystemPageProps) => { }) }, []) - chrome.privacy.network.webRTCIPHandlingPolicy.onChange.addListener(function ( - details - ) { - console.log(details) - setWebRtcPolicy(details.value) - }) + // chrome.privacy.network.webRTCIPHandlingPolicy.onChange.addListener(function ( + // details + // ) { + // console.log(details) + // setWebRtcPolicy(details.value) + // }) + + const changeRadioValue = (e: ChangeEvent) => { + handleWebRtcPolicy(e.target.value) + setWebRtcPolicy(e.target.value) + } return ( { WebRTC Policy - - - - - - - - - - {/* */} - {/* - IP: {JSON.stringify(webRtcIp)} - - */} + */} ) } diff --git a/src/Popup/Popup.tsx b/src/Popup/Popup.tsx index a3b7b37..20452c1 100644 --- a/src/Popup/Popup.tsx +++ b/src/Popup/Popup.tsx @@ -6,6 +6,7 @@ import { HardDrive, FileText, MessageSquare, + Globe, Sliders, Settings, ExternalLink, @@ -20,6 +21,7 @@ import CurrentPage from './Pages/CurrentPage' import { ipData } from '../types' import getIp from '../utils/getIp' import '../assets/global.css' +import OtherOptionsPage from './Pages/OtherOptionsPage' const Popup = () => { const [tab, setTab] = useState('webRtc') @@ -36,7 +38,7 @@ const Popup = () => { { onClick={() => setTab('webRtc')} /> setTab('useragent')} /> + setTab('otherOptions')} + /> setTab('settings')} /> - window.open('https://vytal.io')} - /> + /> */} @@ -88,6 +95,7 @@ const Popup = () => { + {/*