me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added other options page

Browse source
This commit is contained in:
z0ccc 2022-10-07 15:23:53 -04:00
parent 8c7b07ef44
commit 634ff42538
8 changed files with 157 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/Popup/Pages/OtherOptionsPage/index.tsx Normal file
View file

@ -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 (
<Box
sx={{
display: tab === 'otherOptions' ? 'block' : 'none',
}}
>
<Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
Other Options
</Box>
<SettingsCheckBox title={'Network Prediction Enabled'} />
<SettingsCheckBox title={'Alternate Error Pages Enabled'} />
<SettingsCheckBox title={'Search Suggest Enabled'} />
<SettingsCheckBox title={'Spelling Service Enabled'} />
<SettingsCheckBox title={'Translation Service Enabled'} />
<SettingsCheckBox title={'Hyperlink Auditing Enabled'} />
<SettingsCheckBox title={'Referrers Enabled'} />
<SettingsCheckBox title={'Third Party Cookies Allowed'} />
</Box>
)
}
export default OtherOptionsPage

2
src/Popup/Pages/SystemPage/index.tsx
View file

@ -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({

5
src/Popup/Pages/UserAgentPage/index.tsx
View file

@ -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) => {
}}
>
<Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
Other Options
User Agent
</Box>
<Flex
sx={{

51
src/Popup/Pages/WebRtcPage/RadioButton.tsx Normal file
View file

@ -0,0 +1,51 @@
import { useState, useEffect, ChangeEvent } from 'react'
import { Box, Label, Radio, Text } from 'theme-ui'
import handleWebRtcPolicy from './handleWebRtcPolicy'
interface RadioButtonProps {
value: string
name: string
description: string
webRtcPolicy: string
onChange: (e: ChangeEvent<HTMLInputElement>) => 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 (
<>
<Label sx={{ cursor: 'pointer' }}>
<Radio
name="webRtcPolicy"
value={value}
onChange={onChange}
checked={webRtcPolicy === value}
/>
<Text sx={{ fontWeight: '700' }}>{name}</Text>
</Label>
<Box sx={{ ml: '32px', mb: '12px', fontSize: '12px' }}>{description}</Box>
</>
)
}
export default RadioButton

144
src/Popup/Pages/WebRtcPage/index.tsx
View file

@ -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<HTMLInputElement>) => {
handleWebRtcPolicy(e.target.value)
setWebRtcPolicy(e.target.value)
}
return (
<Box
@ -33,57 +37,43 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
<Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
WebRTC Policy
</Box>
<Label>
<Radio
name="webRtcPolicy"
value="default"
onChange={(e) => handleWebRtcPolicy(e.target.value)}
checked={webRtcPolicy === 'default'}
/>
<Box>
<Text sx={{ fontWeight: '700' }}>Default</Text>
<Box sx={{ mb: '12px', fontSize: '12px' }}>
Same as above, except allow WebRTC traffic through the default
private
</Box>
</Box>
</Label>
<Label>
<Radio
name="webRtcPolicy"
value="default_public_and_private_interfaces"
onChange={(e) => handleWebRtcPolicy(e.target.value)}
checked={webRtcPolicy === 'default_public_and_private_interfaces'}
/>
<Box>
<Text sx={{ fontWeight: '700' }}>
Default public and private interfaces
</Text>
<Box sx={{ mb: '12px', fontSize: '12px' }}>
Send WebRTC traffic via the default public network adapter to the
Internet. This will be.
</Box>
</Box>
</Label>
<Label>
<Radio
name="webRtcPolicy"
value="default_public_interface_only"
onChange={(e) => handleWebRtcPolicy(e.target.value)}
checked={webRtcPolicy === 'default_public_interface_only'}
/>
<Box>
<Text sx={{ fontWeight: '700' }}>Default public interface only</Text>
<Box sx={{ mb: '12px', fontSize: '12px' }}>
Same as above, except allow WebRTC traffic through the default
private interface to your.
</Box>
</Box>
</Label>
<Label>
<RadioButton
value={'default'}
name={'Default'}
description={
'Same as above, except allow WebRTC traffic through the default private'
}
webRtcPolicy={webRtcPolicy}
onChange={changeRadioValue}
/>
<RadioButton
value={'disable_non_proxied_udp'}
name={'Disable non-proxied UDP (force proxy)'}
description={
'Same as above, except allow WebRTC traffic through the default private'
}
webRtcPolicy={webRtcPolicy}
onChange={changeRadioValue}
/>
<RadioButton
value={'default_public_and_private_interfaces'}
name={'Default public and private interfaces'}
description={
'Same as above, except allow WebRTC traffic through the default private'
}
webRtcPolicy={webRtcPolicy}
onChange={changeRadioValue}
/>
<RadioButton
value={'default_public_interface_only'}
name={'Default public interface only'}
description={
'Same as above, except allow WebRTC traffic through the default private'
}
webRtcPolicy={webRtcPolicy}
onChange={changeRadioValue}
/>
{/* <Label>
<Radio
name="webRtcPolicy"
value="disable_non_proxied_udp"
@ -97,37 +87,7 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
proxies.
</Box>
</Box>
</Label>
{/* <Select
name="webRtcPolicy"
id="webRtcPolicy"
value={webRtcPolicy}
onChange={(e) => handleWebRtcPolicy(e.target.value)}
>
<option value="default">Default</option>
<option value="default_public_and_private_interfaces">
Default public and private interfaces
</option>
<option value="default_public_interface_only">
Default public interface only
</option>
<option value="disable_non_proxied_udp">Disable non proxied udp</option>
</Select> */}
{/* <Box sx={{ fontSize: '12px', mb: '8px' }}>
IP: {JSON.stringify(webRtcIp)}
</Box>
<Button
onClick={() => {
getWebRTCData(setWebRtcIp)
// getWebRTCData().then((ip) => {
// console.log(ip)
// setWebRtcIp(ip)
// })
}}
>
Reload
</Button> */}
</Label> */}
</Box>
)
}

16
src/Popup/Popup.tsx
View file

@ -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 = () => {
<Flex
sx={{
width: '350px',
height: '390px',
height: '400px',
}}
>
<Flex
@ -68,19 +70,24 @@ const Popup = () => {
onClick={() => setTab('webRtc')}
/>
<TabItem
Icon={Sliders}
Icon={Globe}
active={tab === 'useragent'}
onClick={() => setTab('useragent')}
/>
<TabItem
Icon={Sliders}
active={tab === 'otherOptions'}
onClick={() => setTab('otherOptions')}
/>
<TabItem
Icon={Settings}
active={tab === 'settings'}
onClick={() => setTab('settings')}
/>
<TabItem
{/* <TabItem
Icon={ExternalLink}
onClick={() => window.open('https://vytal.io')}
/>
/> */}
</Flex>
<Box sx={{ m: '12px', width: '100%' }}>
<CurrentPage tab={tab} />
@ -88,6 +95,7 @@ const Popup = () => {
<AutofillPage tab={tab} />
<WebRtcPage tab={tab} />
<UserAgentPage tab={tab} />
<OtherOptionsPage tab={tab} />
<SettingsPage tab={tab} />
{/* <Text
sx={{

4
src/assets/global.css
View file

@ -8,3 +8,7 @@ body {
font-family: 'Nunito';
font-weight: 500;
}
input {
font-family: 'Nunito';
}

3
src/theme.ts
View file

@ -21,9 +21,8 @@ export const theme: Theme = {
margin: '0',
},
},
forms: {
label: { width: 'auto' },
label: { width: 'auto', alignItems: 'center' },
input: {
p: '2px 8px',
mb: '8px',