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

table components

Browse source
This commit is contained in:
z0ccc 2022-10-16 18:34:52 -04:00
parent 1f9d9a84e8
commit cf1f58e194
10 changed files with 258 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/Popup/Components/Table.tsx Normal file
View file

@ -0,0 +1,39 @@
import { Box } from 'theme-ui'
interface TableProps {
title?: string
children: React.ReactNode
}
const Table = ({ title, children }: TableProps) => {
return (
<>
{title && (
<Box
sx={{ fontSize: '16px', mt: '12px', mb: '6px', fontWeight: '600' }}
>
{title}
</Box>
)}
<Box
sx={{
border: '1px solid',
mb: '8px',
borderRadius: '4px',
borderColor: 'grey',
}}
>
<table
sx={{
borderCollapse: 'collapse',
borderSpacing: '0 10px',
}}
>
<tbody>{children}</tbody>
</table>
</Box>
</>
)
}
export default Table

35
src/Popup/Components/TableRow.tsx Normal file
View file

@ -0,0 +1,35 @@
import { Box } from 'theme-ui'
interface TableRowProps {
title: string
value?: string
noBorder?: boolean
}
const TableRow = ({ title, value, noBorder = false }: TableRowProps) => {
return (
<tr
sx={{
borderBottom: noBorder ? 'none' : '1px solid',
borderBottomColor: 'grey',
}}
>
<td sx={{ fontWeight: '700', width: '100px', p: '8px' }}>{title}</td>
<td>
<Box
sx={{
width: '188px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
title={value}
>
{value}
</Box>
</td>
</tr>
)
}
export default TableRow

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

@ -1,65 +1,113 @@
import { useState, useEffect } from 'react'
// import { Box } from 'theme-ui'
import Page from '../../Components/Page'
import CheckBox from '../../Components/CheckBox'
import DebouncedInput from '../../Components/DebouncedInput'
import { Box, Label, Select } from 'theme-ui'
import { ipData } from '../../../types'
import Table from '../../Components/Table'
import TableRow from '../../Components/TableRow'
interface SystemPageProps {
interface AutofillPageProps {
tab: string
ipData?: ipData
reverseGeocoding: any
}
const AutofillPage = ({ tab, reverseGeocoding }: SystemPageProps) => {
const AutofillPage = ({ tab, ipData, reverseGeocoding }: AutofillPageProps) => {
const [country, setCountry] = useState('')
const [city, setCity] = useState('')
const [region, setRegion] = useState('')
const [postCode, setPostCode] = useState('')
const [address, setAddress] = useState('')
const [phone, setPhone] = useState(
'fjkdskf fdkfksj 324324kk dj3223j4k3l jerwkjjekjjwrjrhwehrwjejhwreherwjrwhje'
)
// const [configuration, setConfiguration] = useState('default')
// useEffect(() => {
// chrome.storage.local.get(['configuration', 'ipData'], (storage) => {
// storage.configuration && setConfiguration(storage.configuration)
// if (storage.ipData) {
// setIP(storage.ipData)
// } else {
// Promise.resolve(getIP()).then((ipData) => setIP(ipData))
// }
// })
// }, [])
useEffect(() => {
// chrome.storage.local.get(['configuration', 'ipData'], (storage) => {
// storage.configuration && setConfiguration(storage.configuration)
// if (storage.ipData) {
// setIP(storage.ipData)
// } else {
// Promise.resolve(getIP()).then((ipData) => setIP(ipData))
// }
// })
if (ipData?.country) {
setCountry(ipData.country)
chrome.storage.local.set({
country: ipData.country,
})
}
if (ipData?.city) {
setCity(ipData.city)
chrome.storage.local.set({
city: ipData.city,
})
}
if (ipData?.regionName) {
setRegion(ipData.regionName)
chrome.storage.local.set({
region: ipData.regionName,
})
}
if (ipData?.zip) {
setPostCode(ipData.zip)
chrome.storage.local.set({
postCode: ipData.zip,
})
}
// ipData?.city && setCity(ipData.city)
// ipData?.regionName && setRegion(ipData.regionName)
// ipData?.zip && setPostCode()
// chrome.storage.local.set({
// country: ipData.country,
// city: ipData.city,
// regionName: ipData.regionName,
// zip: ipData.zip,
// })
}, [ipData, setCity, setPostCode, setRegion])
const changeUserAgent = () => {
// if (userAgentType !== 'custom') {
// setUserAgentType('custom')
// chrome.storage.local.set({
// userAgentType: 'custom',
// })
// }
}
useEffect(() => {
if (!postCode && reverseGeocoding?.postcode) {
setPostCode(reverseGeocoding?.postcode)
chrome.storage.local.set({
postCode: reverseGeocoding?.postcode,
})
}
if (reverseGeocoding?.house_number && reverseGeocoding?.road) {
setAddress(`${reverseGeocoding.house_number} ${reverseGeocoding.road}`)
chrome.storage.local.set({
address: `${reverseGeocoding.house_number} ${reverseGeocoding.road}`,
})
} else if (reverseGeocoding?.road) {
setAddress(reverseGeocoding.road)
chrome.storage.local.set({
address: reverseGeocoding.road,
})
}
}, [postCode, reverseGeocoding, setAddress])
// const changeUserAgent = () => {
// // if (userAgentType !== 'custom') {
// // setUserAgentType('custom')
// // chrome.storage.local.set({
// // userAgentType: 'custom',
// // })
// // }
// }
return (
<Page isCurrentTab={tab === 'autofill'} title={'Autofill Options'}>
<Page isCurrentTab={tab === 'autofill'} title={'Autofill'}>
<CheckBox title={'Disable Built-In Address Autofill'} />
<Box sx={{ width: '100%' }}>
<Label htmlFor="country">Country</Label>
<Select
name="country"
id="browser"
// value={browser}
// onChange={changeBrowser}
mb={'8px'}
>
{/* {Object.keys(userAgents[operatingSystem]).map((key) => (
<option value={key} key={key}>
{key}
</option>
))} */}
</Select>
</Box>
<DebouncedInput
name="city"
title="City"
value={city}
setValue={setCity}
onChange={changeUserAgent}
/>
<CheckBox title={'Automatically Autofill'} />
<Table title="Autofill Data">
<TableRow title="Country" value={country} />
<TableRow title="Region" value={region} />
<TableRow title="City" value={city} />
<TableRow title="Postal Code" value={postCode} />
<TableRow title="Address" value={address} />
<TableRow title="Phone" value={phone} noBorder />
</Table>
</Page>
)
}

53
src/Popup/Pages/ConnectionPage/index.tsx Normal file
View file

@ -0,0 +1,53 @@
import { ipData } from '../../../types'
import Page from '../../Components/Page'
import Table from '../../Components/Table'
import TableRow from '../../Components/TableRow'
interface ConnectionPageProps {
tab: string
ipData?: ipData
}
const ConnectionPage = ({ tab, ipData }: ConnectionPageProps) => {
// let options: any
// function success(pos: any) {
// var crd = pos.coords
// console.log('Your connection position is:')
// console.log(`Latitude : ${crd.latitude}`)
// console.log(`Longitude: ${crd.longitude}`)
// console.log(`More or less ${crd.accuracy} meters.`)
// }
// function error(err: any) {
// console.error(`ERROR(${err.code}): ${err.message}`)
// }
// options = {
// enableHighAccuracy: false,
// timeout: 5000,
// maximumAge: 0,
// }
// navigator.geolocation.watchPosition(success, error)
return (
<Page isCurrentTab={tab === 'connection'} title={'Connection Info'}>
<Table>
<TableRow title="IP Address" value={ipData?.query} />
<TableRow title="Country" value={ipData?.country} />
<TableRow title="Region" value={ipData?.regionName} />
<TableRow title="City" value={ipData?.city} />
<TableRow title="Latitude" value={`${ipData?.lat}`} />
<TableRow title="Longitude" value={`${ipData?.lon}`} />
<TableRow title="ISP" value={ipData?.isp} />
<TableRow
title="Proxy"
value={ipData?.proxy ? 'True' : 'False'}
noBorder
/>
</Table>
</Page>
)
}
export default ConnectionPage

37
src/Popup/Pages/CurrentPage/index.tsx
View file

@ -1,37 +0,0 @@
// import { Box } from 'theme-ui'
import Page from '../../Components/Page'
interface CurrentPageProps {
tab: string
}
const CurrentPage = ({ tab }: CurrentPageProps) => {
// let options: any
// function success(pos: any) {
// var crd = pos.coords
// console.log('Your current position is:')
// console.log(`Latitude : ${crd.latitude}`)
// console.log(`Longitude: ${crd.longitude}`)
// console.log(`More or less ${crd.accuracy} meters.`)
// }
// function error(err: any) {
// console.error(`ERROR(${err.code}): ${err.message}`)
// }
// options = {
// enableHighAccuracy: false,
// timeout: 5000,
// maximumAge: 0,
// }
// navigator.geolocation.watchPosition(success, error)
return (
<Page isCurrentTab={tab === 'current'} title={'Current Info'}>
hello
</Page>
)
}
export default CurrentPage

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

@ -1,6 +1,6 @@
import { Label, Select } from 'theme-ui'
import Page from '../../Components/Page'
import CheckBox from '../../Components/CheckBox'
import CheckBox from '../../Components/CheckBox'
interface SystemPageProps {
tab: string

22
src/Popup/Popup.tsx
View file

@ -2,12 +2,11 @@ import { useState, useEffect } from 'react'
import { ThemeProvider, Flex, Box } from 'theme-ui'
import { theme } from '../theme'
import {
MapPin,
Wifi,
HardDrive,
FileText,
MessageSquare,
Globe,
Sliders,
Settings,
} from 'react-feather'
import TabItem from './TabItem'
@ -16,7 +15,7 @@ import UserAgentPage from './Pages/UserAgentPage'
import SettingsPage from './Pages/SettingsPage'
import AutofillPage from './Pages/AutofillPage'
import WebRtcPage from './Pages/WebRtcPage'
import CurrentPage from './Pages/CurrentPage'
import ConnectionPage from './Pages/ConnectionPage'
import { ipData } from '../types'
import getIp from '../utils/getIp'
import getReverseGeocoding from '../utils/getReverseGeocoding'
@ -30,7 +29,6 @@ const Popup = () => {
useEffect(() => {
getIp().then((ipDataRes) => {
setIpData(ipDataRes)
if (ipDataRes.lat && ipDataRes.lon) {
getReverseGeocoding(ipDataRes.lat, ipDataRes.lon).then(
@ -60,9 +58,9 @@ const Popup = () => {
}}
>
<TabItem
Icon={MapPin}
active={tab === 'current'}
onClick={() => setTab('current')}
Icon={Wifi}
active={tab === 'connection'}
onClick={() => setTab('connection')}
/>
<TabItem
Icon={HardDrive}
@ -100,9 +98,13 @@ const Popup = () => {
/> */}
</Flex>
<Box sx={{ m: '12px', width: '100%' }}>
<CurrentPage tab={tab} />
<ConnectionPage tab={tab} ipData={ipData} />
<SystemPage tab={tab} ipData={ipData} />
<AutofillPage tab={tab} reverseGeocoding={reverseGeocoding} />
<AutofillPage
tab={tab}
ipData={ipData}
reverseGeocoding={reverseGeocoding}
/>
<WebRtcPage tab={tab} />
<UserAgentPage tab={tab} />
<OtherOptionsPage tab={tab} />
@ -115,7 +117,7 @@ const Popup = () => {
bottom: '0',
}}
>
Current tab won't be fully spoofed until after 1st or 2nd reload.
Connection tab won't be fully spoofed until after 1st or 2nd reload.
</Text> */}
</Box>
</Flex>

7
src/types.ts
View file

@ -2,6 +2,13 @@ export interface ipData {
query: string
timezone: string
countryCode: string
country: string
city: string
region: string
regionName: string
zip?: string
lat: number
lon: number
isp: string
proxy: boolean
}

13
src/utils/addresses.ts Normal file
View file

@ -0,0 +1,13 @@
const addresses: any = [
{
country: 'United States',
region: 'New York',
city: 'Brooklyn',
postCode: '11211',
address: '38 Powers St',
lat: 40.71171288866269,
lon: 40.71171288866269,
},
]
export default addresses

4
src/utils/getIp.ts
View file

@ -1,5 +1,7 @@
const getIp = () =>
fetch('http://ip-api.com/json/')
fetch(
'http://ip-api.com/json?fields=status,message,country,countryCode,region,regionName,city,zip,lat,lon,timezone,isp,proxy,query'
)
.then((response) => response.json())
.then((ipData) => {
console.log(ipData)