misc changes

src/Popup/Components/DebouncedInput.tsx

@@ -9,6 +9,7 @@ interface DebouncedInputProps {
   value: string
   setValue: Dispatch<SetStateAction<string>>
   onChange: () => void
+  mb?: string
 }
 
 const DebouncedInput = ({
@@ -17,6 +18,7 @@ const DebouncedInput = ({
   value,
   setValue,
   onChange,
+  mb,
 }: DebouncedInputProps) => {
   const debouncedChangeHandler = useMemo(
     () =>
@@ -36,7 +38,7 @@ const DebouncedInput = ({
   return (
     <>
       <Label htmlFor={name}>{title}</Label>
-      <Input name={name} value={value} onChange={changeInputText} />
+      <Input name={name} value={value} onChange={changeInputText} mb={mb} />
     </>
   )
 }

src/Popup/Pages/AutofillPage/index.tsx

@@ -1,6 +1,9 @@
 // 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'
 
 interface SystemPageProps {
   tab: string
@@ -23,7 +26,30 @@ const AutofillPage = ({ tab }: SystemPageProps) => {
 
   return (
     <Page isCurrentTab={tab === 'autofill'} title={'Autofill Options'}>
-      hello
+      <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="userAgent"
+        title="User Agent"
+        value={userAgent}
+        setValue={setUserAgent}
+        onChange={changeUserAgent}
+      /> */}
     </Page>
   )
 }

src/Popup/Pages/CurrentPage/index.tsx

@@ -6,6 +6,27 @@ interface CurrentPageProps {
 }
 
 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

src/Popup/Pages/OtherOptionsPage/index.tsx

@@ -1,4 +1,4 @@
-import SettingsCheckBox from '../SettingsPage/SettingsCheckBox'
+import CheckBox from '../../Components/CheckBox'
 import Page from '../../Components/Page'
 
 interface OtherOptionsPageProps {
@@ -8,15 +8,15 @@ interface OtherOptionsPageProps {
 const OtherOptionsPage = ({ tab }: OtherOptionsPageProps) => {
   return (
     <Page isCurrentTab={tab === 'otherOptions'} title={'Other Options'}>
-      <SettingsCheckBox title={'Network Prediction Enabled'} />
-      <SettingsCheckBox title={'Alternate Error Pages Enabled'} />
-      <SettingsCheckBox title={'Safe Browsing Reporting 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'} />
+      <CheckBox title={'Network Prediction Enabled'} />
+      <CheckBox title={'Alternate Error Pages Enabled'} />
+      <CheckBox title={'Safe Browsing Reporting Enabled'} />
+      <CheckBox title={'Search Suggest Enabled'} />
+      <CheckBox title={'Spelling Service Enabled'} />
+      <CheckBox title={'Translation Service Enabled'} />
+      <CheckBox title={'Hyperlink Auditing Enabled'} />
+      <CheckBox title={'Referrers Enabled'} />
+      <CheckBox title={'Third Party Cookies Allowed'} />
     </Page>
   )
 }

src/Popup/Pages/SettingsPage/SettingsCheckBox.tsx

@@ -1,18 +0,0 @@
-import { Label, Checkbox } from 'theme-ui'
-
-interface SystemPageProps {
-  title: string
-  onChange?: () => void
-  checked?: boolean
-}
-
-const SettingsCheckBox = ({ title, onChange, checked }: SystemPageProps) => {
-  return (
-    <Label sx={{ mb: '8px' }}>
-      <Checkbox onChange={onChange} checked={checked} />
-      {title}
-    </Label>
-  )
-}
-
-export default SettingsCheckBox

src/Popup/Pages/SettingsPage/index.tsx

@@ -1,6 +1,6 @@
 import { Label, Select } from 'theme-ui'
 import Page from '../../Components/Page'
-import SettingsCheckBox from './SettingsCheckBox'
+import CheckBox from '../../Components/CheckBox'  
 
 interface SystemPageProps {
   tab: string
@@ -9,8 +9,8 @@ interface SystemPageProps {
 const SettingsPage = ({ tab }: SystemPageProps) => {
   return (
     <Page isCurrentTab={tab === 'settings'} title={'Settings'}>
-      <SettingsCheckBox title={'Disable Address Autofill'} />
-      <SettingsCheckBox title={'Dark Mode'} />
+      <CheckBox title={'Disable Address Autofill'} />
+      <CheckBox title={'Dark Mode'} />
       <Label htmlFor="configuration">Language</Label>
       <Select name="Language" id="Language">
         <option>Arabic</option>

src/Popup/Pages/SystemPage/index.tsx

@@ -6,6 +6,7 @@ import detachDebugger from '../../../utils/detachDebugger'
 import countryLocales from '../../../utils/countryLocales'
 import { ipData } from '../../../types'
 import configurations from '../../../utils/configurations'
+import CheckBox from '../../Components/CheckBox'
 
 interface SystemPageProps {
   tab: string
@@ -194,7 +195,9 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
         value={lon}
         setValue={setLongitude}
         onChange={changeInputText}
+        mb="12px"
       />
+      <CheckBox title={'Enable Debugger API Spoofing'} />
     </Page>
   )
 }

src/Popup/Popup.tsx

@@ -23,7 +23,7 @@ import '../assets/global.css'
 import OtherOptionsPage from './Pages/OtherOptionsPage'
 
 const Popup = () => {
-  const [tab, setTab] = useState('userAgent')
+  const [tab, setTab] = useState('autofill')
   const [ipData, setIpData] = useState<ipData | undefined>(undefined)
 
   useEffect(() => {
@@ -37,7 +37,7 @@ const Popup = () => {
       <Flex
         sx={{
           width: '350px',
-          height: '400px',
+          height: '410px',
         }}
       >
         <Flex
@@ -73,11 +73,11 @@ const Popup = () => {
             active={tab === 'userAgent'}
             onClick={() => setTab('userAgent')}
           />
-          <TabItem
+          {/* <TabItem
             Icon={Sliders}
             active={tab === 'otherOptions'}
             onClick={() => setTab('otherOptions')}
-          />
+          /> */}
           <TabItem
             Icon={Settings}
             active={tab === 'settings'}

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "Vytal - VPN Companion",
   "version": "2.0.0",
   "description": "Spoof Timezone, Geolocation, Locale and User Agent.",
-  "permissions": ["storage", "debugger", "activeTab", "privacy"],
+  "permissions": ["storage", "debugger", "activeTab", "privacy", "geolocation"],
   "background": { "service_worker": "background.bundle.js" },
   "action": {
     "default_popup": "popup.html",