diff --git a/src/Popup/Components/Table.tsx b/src/Popup/Components/Table.tsx new file mode 100644 index 0000000..45ebc96 --- /dev/null +++ b/src/Popup/Components/Table.tsx @@ -0,0 +1,39 @@ +import { Box } from 'theme-ui' + +interface TableProps { + title?: string + children: React.ReactNode +} + +const Table = ({ title, children }: TableProps) => { + return ( + <> + {title && ( + + {title} + + )} + + + {children} +
+ + + ) +} + +export default Table diff --git a/src/Popup/Components/TableRow.tsx b/src/Popup/Components/TableRow.tsx new file mode 100644 index 0000000..5166ff7 --- /dev/null +++ b/src/Popup/Components/TableRow.tsx @@ -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 ( + + {title} + + + {value} + + + + ) +} + +export default TableRow diff --git a/src/Popup/Pages/AutofillPage/index.tsx b/src/Popup/Pages/AutofillPage/index.tsx index d3f1b41..9aaa91a 100644 --- a/src/Popup/Pages/AutofillPage/index.tsx +++ b/src/Popup/Pages/AutofillPage/index.tsx @@ -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 ( - + - - - - - + + + + + + + + +
) } diff --git a/src/Popup/Pages/ConnectionPage/index.tsx b/src/Popup/Pages/ConnectionPage/index.tsx new file mode 100644 index 0000000..b01a380 --- /dev/null +++ b/src/Popup/Pages/ConnectionPage/index.tsx @@ -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 ( + + + + + + + + + + +
+ + ) +} + +export default ConnectionPage diff --git a/src/Popup/Pages/CurrentPage/index.tsx b/src/Popup/Pages/CurrentPage/index.tsx deleted file mode 100644 index 4f08575..0000000 --- a/src/Popup/Pages/CurrentPage/index.tsx +++ /dev/null @@ -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 ( - - hello - - ) -} - -export default CurrentPage diff --git a/src/Popup/Pages/SettingsPage/index.tsx b/src/Popup/Pages/SettingsPage/index.tsx index ac966ce..8fae8ad 100644 --- a/src/Popup/Pages/SettingsPage/index.tsx +++ b/src/Popup/Pages/SettingsPage/index.tsx @@ -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 diff --git a/src/Popup/Popup.tsx b/src/Popup/Popup.tsx index 5e9d019..1e2f5a9 100644 --- a/src/Popup/Popup.tsx +++ b/src/Popup/Popup.tsx @@ -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 = () => { }} > setTab('current')} + Icon={Wifi} + active={tab === 'connection'} + onClick={() => setTab('connection')} /> { /> */} - + - + @@ -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. */} diff --git a/src/types.ts b/src/types.ts index 9e49347..46d6f53 100644 --- a/src/types.ts +++ b/src/types.ts @@ -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 } diff --git a/src/utils/addresses.ts b/src/utils/addresses.ts new file mode 100644 index 0000000..271f5b2 --- /dev/null +++ b/src/utils/addresses.ts @@ -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 diff --git a/src/utils/getIp.ts b/src/utils/getIp.ts index cb1852c..2df5ea7 100644 --- a/src/utils/getIp.ts +++ b/src/utils/getIp.ts @@ -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)