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

dev2

Browse source
This commit is contained in:
z0ccc 2022-11-07 11:08:40 -05:00
parent 0f9706dd60
commit 4f663f8868
11 changed files with 96 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/Popup/Components/FooterLink.tsx
View file

@ -1,25 +1,29 @@
import { Link, Text } from 'theme-ui'
import { Link } from 'theme-ui'
interface FooterLinkProps {
link: string
text: string
hoverText: string
}
const FooterLink = ({ link, text, hoverText }: FooterLinkProps) => {
const FooterLink = () => {
return (
<Link variant="footer" href={`https://vytal.io/${link}`} target="_blank">
{text}{' '}
<Text
sx={{
color: 'primaryDark',
':hover': {
textDecoration: 'underline',
},
}}
<Link
variant="footer"
href={`https://go.nordvpn.net/aff_c?offer_id=15&aff_id=79520&url_id=902`}
target="_blank"
>
Vytal does not change your IP address. To change your IP you will need to
use a VPN such as{' '}
<Link
variant="hover"
href={`https://go.nordvpn.net/aff_c?offer_id=15&aff_id=79520&url_id=902`}
target="_blank"
>
{hoverText}
</Text>
NordVPN
</Link>{' '}
or{' '}
<Link
variant="hover"
href={`https://go.getproton.me/aff_c?offer_id=26&aff_id=3825`}
target="_blank"
>
ProtonVPN
</Link>
</Link>
)
}

3
src/Popup/Components/Table.tsx
View file

@ -9,7 +9,8 @@ const Table = ({ children }: TableProps) => {
<Box
sx={{
border: '1px solid',
mb: '12px',
mt: '12px',
mb: '8px',
borderRadius: '4px',
borderColor: 'grey',
}}

2
src/Popup/Components/TableRow.tsx
View file

@ -14,7 +14,7 @@ const TableRow = ({ title, value, noBorder = false }: TableRowProps) => {
borderBottomColor: 'grey',
}}
>
<td sx={{ fontWeight: '700', width: '100px', p: '8px' }}>{title}</td>
<td sx={{ fontWeight: '700', width: '100px', p: '5px 8px' }}>{title}</td>
<td>
<Box
sx={{

1
src/Popup/Pages/AutofillPage/index.tsx
View file

@ -140,7 +140,6 @@ const AutofillPage = ({ tab, autofillData }: AutofillPageProps) => {
>
Autofill Current Page
</Button>
<FooterLink link="test" text="Test" hoverText="autofill data" />
</Page>
)
}

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

@ -48,11 +48,6 @@ const ConnectionPage = ({ tab, ipData }: ConnectionPageProps) => {
noBorder
/>
</Table>
<FooterLink
link="test"
text="Connection info can be changed by using a"
hoverText="VPN or proxy"
/>
</Page>
)
}

77
src/Popup/Pages/SystemPage/index.tsx → src/Popup/Pages/LocationPage/index.tsx
View file

@ -6,17 +6,18 @@ import detachDebugger from '../../../utils/detachDebugger'
import countryLocales from '../../../utils/countryLocales'
import { ipData } from '../../../types'
import configurations from '../../../utils/configurations'
import CheckBox from '../../Components/CheckBox'
import FooterLink from '../../Components/FooterLink'
import Table from '../../Components/Table'
import TableRow from '../../Components/TableRow'
interface SystemPageProps {
interface LocationPageProps {
tab: string
ipData?: ipData
geolocation?: GeolocationCoordinates
}
const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
const [systemType, setSystemType] = useState('')
const LocationPage = ({ tab, ipData, geolocation }: LocationPageProps) => {
const [locationType, setLocationType] = useState('')
const [timezone, setTimezone] = useState('')
const [locale, setLocale] = useState('')
const [lat, setLatitude] = useState('')
@ -27,9 +28,9 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
useEffect(() => {
chrome.storage.local.get(
['systemType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
['locationType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
(storage) => {
if (!storage.systemType || storage.systemType === 'default') {
if (!storage.locationType || storage.locationType === 'default') {
setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone)
setLocale(Intl.DateTimeFormat().resolvedOptions().locale)
if (geolocation) {
@ -37,7 +38,7 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
setLongitude(`${geolocation.longitude}`)
}
}
if (storage.systemType === 'matchIp' && ipData) {
if (storage.locationType === 'matchIp' && ipData) {
setTimezone(ipData.timezone)
setLocale(countryLocales[ipData.countryCode].locale)
setLatitude(`${ipData.lat}`)
@ -48,24 +49,24 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
lat: ipData.lat,
lon: ipData.lon,
})
} else if (storage.systemType === 'custom') {
} else if (storage.locationType === 'custom') {
storage.configuration && setConfiguration(storage.configuration)
storage.timezone && setTimezone(storage.timezone)
storage.locale && setLocale(storage.locale)
storage.lat && setLatitude(storage.lat)
storage.lon && setLongitude(storage.lon)
}
storage.systemType
? setSystemType(storage.systemType)
: setSystemType('default')
storage.locationType
? setLocationType(storage.locationType)
: setLocationType('default')
}
)
}, [geolocation, ipData])
const changeType = (e: ChangeEvent<HTMLInputElement>) => {
detachDebugger()
setSystemType(e.target.value)
chrome.storage.local.set({ systemType: e.target.value })
setLocationType(e.target.value)
chrome.storage.local.set({ locationType: e.target.value })
if (e.target.value === 'default') {
setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone)
@ -129,18 +130,26 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
}
const changeInputText = () => {
if (systemType !== 'custom' || configuration !== 'custom') {
if (locationType !== 'custom' || configuration !== 'custom') {
setConfiguration('custom')
setSystemType('custom')
setLocationType('custom')
chrome.storage.local.set({
configuration: 'custom',
systemType: 'custom',
locationType: 'custom',
})
}
}
const getFlagEmoji = (countryCode: string) => {
const codePoints = countryCode
.toUpperCase()
.split('')
.map((char) => 127397 + char.charCodeAt(0))
return String.fromCodePoint(...codePoints)
}
return (
<Page isCurrentTab={tab === 'system'} title={'System Data'}>
<Page isCurrentTab={tab === 'location'} title={'Location Data'}>
<Flex
sx={{
justifyContent: 'space-between',
@ -149,33 +158,46 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
>
<Label>
<Radio
name="systemType"
name="locationType"
value="default"
onChange={changeType}
checked={systemType === 'default'}
checked={locationType === 'default'}
/>
Default
</Label>
<Label>
<Radio
name="systemType"
name="locationType"
value="matchIp"
onChange={changeType}
checked={systemType === 'matchIp'}
checked={locationType === 'matchIp'}
/>
Match IP
</Label>
<Label>
<Radio
name="systemType"
name="locationType"
value="custom"
onChange={changeType}
checked={systemType === 'custom'}
checked={locationType === 'custom'}
/>
Custom
</Label>
</Flex>
{systemType === 'custom' && (
{locationType === 'matchIp' && (
<Table>
<TableRow
title="IP Address"
value={
ipData
? `${getFlagEmoji(ipData.countryCode)} ${ipData?.query}`
: 'loading...'
}
noBorder
/>
</Table>
)}
{locationType === 'custom' && (
<>
<Label htmlFor="configuration">Configuration</Label>
<Select
@ -222,12 +244,9 @@ const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
onChange={changeInputText}
mb="12px"
/>
{systemType !== 'default' && (
<CheckBox title={'Enable Debugger API Spoofing'} />
)}
<FooterLink link="test" text="Test with" hoverText="system data scan" />
<FooterLink />
</Page>
)
}
export default SystemPage
export default LocationPage

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

@ -3,9 +3,7 @@ import { Box, Label, Radio, Flex, Select } from 'theme-ui'
import DebouncedInput from '../../Components/DebouncedInput'
import userAgents from '../../../utils/userAgents'
import detachDebugger from '../../../utils/detachDebugger'
import attachCurrentTab from '../../../utils/attachCurrentTab'
import Page from '../../Components/Page'
import CheckBox from '../../Components/CheckBox'
import FooterLink from '../../Components/FooterLink'
interface UserAgentPageProps {
@ -64,7 +62,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
platform: userAgents[e.target.value]['platform'],
operatingSystem: e.target.value,
})
await attachCurrentTab()
// await attachCurrentTab()
}
const changeBrowser = (e: ChangeEvent<HTMLSelectElement>) => {
@ -176,10 +174,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
onChange={changeTextInput}
mb="12px"
/>
{userAgentType !== 'default' && (
<CheckBox title={'Enable Debugger API Spoofing'} />
)}
<FooterLink link="test" text="Scan for" hoverText="user agent leaks" />
<FooterLink />
</Page>
)
}

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

@ -60,7 +60,6 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
webRtcPolicy={webRtcPolicy}
onChange={changeRadioValue}
/>
<FooterLink link="test" text="Scan for" hoverText="WebRTC leaks" />
</Page>
)
}

22
src/Popup/Popup.tsx
View file

@ -3,14 +3,14 @@ import { ThemeProvider, Flex, Box } from 'theme-ui'
import { theme } from '../theme'
import {
Wifi,
HardDrive,
MapPin,
FileText,
MessageSquare,
Globe,
Settings,
} from 'react-feather'
import TabItem from './TabItem'
import SystemPage from './Pages/SystemPage'
import LocationPage from './Pages/LocationPage'
import UserAgentPage from './Pages/UserAgentPage'
import SettingsPage from './Pages/SettingsPage'
import AutofillPage from './Pages/AutofillPage'
@ -24,7 +24,7 @@ import OtherOptionsPage from './Pages/OtherOptionsPage'
import addresses from '../utils/addresses'
const Popup = () => {
const [tab, setTab] = useState('autofill')
const [tab, setTab] = useState('location')
const [ipData, setIpData] = useState<ipData>()
// const [reverseGeocoding, setReverseGeocoding] = useState<any>(undefined)
const [geolocation, setGeolocation] = useState<GeolocationCoordinates>()
@ -69,17 +69,17 @@ const Popup = () => {
flexDirection: 'column',
}}
>
<TabItem
{/* <TabItem
Icon={Wifi}
active={tab === 'connection'}
onClick={() => setTab('connection')}
/>
/> */}
<TabItem
Icon={HardDrive}
active={tab === 'system'}
onClick={() => setTab('system')}
Icon={MapPin}
active={tab === 'location'}
onClick={() => setTab('location')}
/>
<TabItem
{/* <TabItem
Icon={FileText}
active={tab === 'autofill'}
onClick={() => setTab('autofill')}
@ -88,7 +88,7 @@ const Popup = () => {
Icon={MessageSquare}
active={tab === 'webRtc'}
onClick={() => setTab('webRtc')}
/>
/> */}
<TabItem
Icon={Globe}
active={tab === 'userAgent'}
@ -111,7 +111,7 @@ const Popup = () => {
</Flex>
<Box sx={{ m: '12px', width: '100%' }}>
<ConnectionPage tab={tab} ipData={ipData} />
<SystemPage tab={tab} ipData={ipData} geolocation={geolocation} />
<LocationPage tab={tab} ipData={ipData} geolocation={geolocation} />
<AutofillPage
tab={tab}
autofillData={autofillData}

4
src/manifest.json
View file

@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "Vytal - VPN Companion",
"version": "2.0.0",
"name": "Vytal - Spoof timezone, location & user agent",
"version": "2.1.0",
"description": "Spoof Timezone, Geolocation, Locale and User Agent.",
"permissions": ["storage", "debugger", "privacy", "geolocation"],
"background": { "service_worker": "background.bundle.js" },

7
src/theme.ts
View file

@ -79,5 +79,12 @@ export const theme: Theme = {
bottom: '0',
textDecoration: 'none',
},
hover: {
color: 'primaryDark',
textDecoration: 'none',
'&:hover': {
textDecoration: 'underline',
},
},
},
}