From d604bfa9c7ddcc287d87f6a8e5027fe7b87c9f97 Mon Sep 17 00:00:00 2001 From: KRSBX Date: Thu, 9 Feb 2023 16:56:59 +0700 Subject: [PATCH 1/4] feat: vpn world maps --- .vscode/settings.json | 3 +- index.html | 11 ++ package.json | 3 + public/images/flags/Indonesia.svg | 1 + src/App.tsx | 5 +- src/components/MapView.tsx | 62 ++++++++++ src/components/StatusBar.tsx | 10 +- src/components/TopBar.tsx | 2 +- src/components/Tunnel.tsx | 42 +++++++ src/components/VpnCard.tsx | 25 +--- src/hooks/useConfigData.tsx | 29 +++++ src/utils/constant.ts | 195 ++++++++++++++++++++++++++++++ types/tunnelbear.d.ts | 6 + yarn.lock | 29 +++++ 14 files changed, 394 insertions(+), 29 deletions(-) create mode 100644 public/images/flags/Indonesia.svg create mode 100644 src/components/MapView.tsx create mode 100644 src/components/Tunnel.tsx create mode 100644 src/hooks/useConfigData.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index e42ff32..8fce226 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,5 +2,6 @@ "editor.codeActionsOnSave": { "source.fixAll": true, "source.sortImports": true - } + }, + "typescript.tsdk": "node_modules/typescript/lib" } diff --git a/index.html b/index.html index 144076a..ed2d0aa 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,17 @@ + + Tunnelbear VPN diff --git a/package.json b/package.json index ea9df05..4864ac1 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@types/aes-js": "^3.1.1", "@types/electron-json-storage": "^4.5.0", "@types/file-saver": "^2.0.5", + "@types/leaflet": "^1.9.0", "@types/lodash": "^4.14.191", "@types/node": "^18.11.13", "@types/react": "^18.0.26", @@ -69,6 +70,8 @@ }, "dependencies": { "aes-js": "^3.1.2", + "leaflet": "^1.9.3", + "react-leaflet": "^4.2.0", "sudo-prompt": "^9.2.1" } } diff --git a/public/images/flags/Indonesia.svg b/public/images/flags/Indonesia.svg new file mode 100644 index 0000000..20d0adc --- /dev/null +++ b/public/images/flags/Indonesia.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 92fca3e..d19be85 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,11 @@ import { Flex, useDisclosure } from '@chakra-ui/react'; import _ from 'lodash'; import React from 'react'; +import MapView from './components/MapView'; import Credentials from './components/modals/Credentials'; import ProcessingOverlay from './components/ProcessingOverlay'; import StatusBar from './components/StatusBar'; import TopBar from './components/TopBar'; -import VpnSelection from './components/VpnSelection'; import useAppStateListener from './hooks/useAppStateListener'; import useStoragePopulator from './hooks/useStoragePopulator'; @@ -19,14 +19,13 @@ const App: React.FC = () => { - + diff --git a/src/components/MapView.tsx b/src/components/MapView.tsx new file mode 100644 index 0000000..ff7f491 --- /dev/null +++ b/src/components/MapView.tsx @@ -0,0 +1,62 @@ +import { Box } from '@chakra-ui/react'; +import { Map } from 'leaflet'; +import _ from 'lodash'; +import React, { createRef } from 'react'; +import { MapContainer, TileLayer } from 'react-leaflet'; +import useAppContext from '../hooks/useAppContext'; +import { LAT_LNG } from '../utils/constant'; +import Tunnel from './Tunnel'; + +const MapView = () => { + const { + state: { vpns }, + } = useAppContext(); + + const mapRef = createRef(); + + return ( + + + + {_.map(vpns, (config, key) => { + const countryData = LAT_LNG.find(({ country }) => + key.includes(country) + ); + + if (!countryData) return; + + return ( + + ); + })} + + + ); +}; + +export default MapView; diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx index 78cf873..0554cf0 100644 --- a/src/components/StatusBar.tsx +++ b/src/components/StatusBar.tsx @@ -10,7 +10,15 @@ const StatusBar = () => { } = useAppContext(); return ( - + = ({ onOpen }) => { Configure Auth - + Tunnelbear VPN diff --git a/src/components/Tunnel.tsx b/src/components/Tunnel.tsx new file mode 100644 index 0000000..856ac96 --- /dev/null +++ b/src/components/Tunnel.tsx @@ -0,0 +1,42 @@ +import { LatLngTuple, Map } from 'leaflet'; +import React from 'react'; +import { Marker } from 'react-leaflet'; +import useConfigData from '../hooks/useConfigData'; +import useOpenVpn from '../hooks/useOpenVpn'; +import useReadWriteIpcEvent from '../hooks/useReadWriteIpcEvent'; + +const Tunnel: React.FC = ({ config, mapRef, position }) => { + const { dirPath } = useConfigData(config); + const { readFile } = useReadWriteIpcEvent(); + const { connectOpenVpn } = useOpenVpn(); + + const onClick = async () => { + if (!mapRef.current) return; + + mapRef.current.panTo(position, { + animate: true, + duration: 500, + }); + + const contents = (await readFile(config.path)).split('\n'); + + return connectOpenVpn(dirPath, contents); + }; + + return ( + + ); +}; + +type Props = { + config: Tunnelbear.VpnConfig; + mapRef: React.RefObject | React.MutableRefObject; + position: LatLngTuple; +}; + +export default Tunnel; diff --git a/src/components/VpnCard.tsx b/src/components/VpnCard.tsx index b9aa3a6..260e798 100644 --- a/src/components/VpnCard.tsx +++ b/src/components/VpnCard.tsx @@ -1,13 +1,14 @@ import { Box, BoxProps, Button, Flex, GridItem, Text } from '@chakra-ui/react'; import React, { createRef, useMemo, useState } from 'react'; import { IoMdClose } from 'react-icons/io'; +import useConfigData from '../hooks/useConfigData'; import useOnHover from '../hooks/useOnHover'; import useOpenVpn from '../hooks/useOpenVpn'; import useReadWriteIpcEvent from '../hooks/useReadWriteIpcEvent'; import useStorage from '../hooks/useStorage'; -import Storage from '../utils/Storage'; const VpnCard: React.FC = ({ config, ...props }) => { + const { configImagePath, configName, dirPath } = useConfigData(config); const { readFile } = useReadWriteIpcEvent(); const { connectOpenVpn } = useOpenVpn(); const [isOnHover, setIsOnHover] = useState(false); @@ -20,28 +21,6 @@ const VpnCard: React.FC = ({ config, ...props }) => { () => setIsOnHover(false) ); - const { configName, configImagePath, dirPath } = useMemo(() => { - const names = config.name.replace(/.ovpn/g, '').replace(/.txt/g, ''); - - const configName = names.replace(/TunnelBear /g, ''); - const configImagePath = `./images/flags/${configName.replace( - / /g, - '' - )}.svg`; - - const paths = config.path.split('/'); - - paths.pop(); - - const dirPath = paths.join('/'); - - return { - configName, - configImagePath, - dirPath, - }; - }, [config.name, config.path]); - const onClickOnCard = async () => { const contents = (await readFile(config.path)).split('\n'); diff --git a/src/hooks/useConfigData.tsx b/src/hooks/useConfigData.tsx new file mode 100644 index 0000000..682c971 --- /dev/null +++ b/src/hooks/useConfigData.tsx @@ -0,0 +1,29 @@ +import { useMemo } from 'react'; + +const useConfigData = (config: Tunnelbear.VpnConfig) => { + const configResult = useMemo(() => { + const names = config.name.replace(/.ovpn/g, '').replace(/.txt/g, ''); + + const configName = names.replace(/TunnelBear /g, ''); + const configImagePath = `./images/flags/${configName.replace( + / /g, + '' + )}.svg`; + + const paths = config.path.split('/'); + + paths.pop(); + + const dirPath = paths.join('/'); + + return { + configName, + configImagePath, + dirPath, + }; + }, [config.name, config.path]); + + return configResult; +}; + +export default useConfigData; diff --git a/src/utils/constant.ts b/src/utils/constant.ts index 9036a7d..8740b1c 100644 --- a/src/utils/constant.ts +++ b/src/utils/constant.ts @@ -24,3 +24,198 @@ export const COMMANDS = { }, START_VPN: 'openvpn --config config.ovpn', }; + +export const LAT_LNG: Tunnelbear.CountryLatLng[] = [ + { + country: 'Argentina', + position: [-38.41609, -63.616672], + }, + { + country: 'Austria', + position: [47.516231, 14.550072], + }, + { + country: 'Australia', + position: [-25.274398, 133.775136], + }, + { + country: 'Belgium', + position: [50.503887, 4.469936], + }, + { + country: 'Brazil', + position: [-14.235004, -51.92528], + }, + { + country: 'Bulgaria', + position: [42.733883, 25.48583], + }, + { + country: 'Canada', + position: [56.130366, -106.346771], + }, + { + country: 'Chile', + position: [-35.675147, -71.542969], + }, + { + country: 'Colombia', + position: [4.570868, -74.297333], + }, + { + country: 'Cyprus', + position: [35.126413, 33.429859], + }, + { + country: 'Czech Republic', + position: [49.817492, 15.472962], + }, + { + country: 'Denmark', + position: [56.26392, 9.501785], + }, + { + country: 'Finland', + position: [61.92411, 25.748151], + }, + { + country: 'France', + position: [46.227638, 2.213749], + }, + { + country: 'Germany', + position: [51.165691, 10.451526], + }, + { + country: 'Greece', + position: [39.074208, 21.824312], + }, + { + country: 'Hungary', + position: [47.162494, 19.503304], + }, + { + country: 'India', + position: [20.593684, 78.96288], + }, + { + country: 'Indonesia', + position: [-0.789275, 113.921327], + }, + { + country: 'Ireland', + position: [53.41291, -8.24389], + }, + { + country: 'Italy', + position: [41.87194, 12.56738], + }, + { + country: 'Japan', + position: [36.204824, 138.252924], + }, + { + country: 'Kenya', + position: [-0.023559, 37.906193], + }, + { + country: 'Latvia', + position: [56.879635, 24.603189], + }, + { + country: 'Lithuania', + position: [55.169438, 23.881275], + }, + { + country: 'Malaysia', + position: [4.210484, 101.975766], + }, + { + country: 'Mexico', + position: [23.634501, -102.552784], + }, + { + country: 'Moldova', + position: [47.411631, 28.369885], + }, + { + country: 'Netherlands', + position: [52.132633, 5.291266], + }, + { + country: 'New Zealand', + position: [-40.900557, 174.885971], + }, + { + country: 'Nigeria', + position: [9.081999, 8.675277], + }, + { + country: 'Norway', + position: [60.472024, 8.468946], + }, + { + country: 'Peru', + position: [-9.189967, -75.015152], + }, + { + country: 'Poland', + position: [51.919438, 19.145136], + }, + { + country: 'Portugal', + position: [39.399872, -8.224454], + }, + { + country: 'Romania', + position: [45.943161, 24.96676], + }, + { + country: 'Serbia', + position: [44.016521, 21.005859], + }, + { + country: 'Singapore', + position: [1.352083, 103.819836], + }, + { + country: 'Slovenia', + position: [46.151241, 14.995463], + }, + { + country: 'South Africa', + position: [-30.559482, 22.937506], + }, + { + country: 'South Korea', + position: [35.907757, 127.766922], + }, + { + country: 'Spain', + position: [40.463667, -3.74922], + }, + { + country: 'Sweden', + position: [60.128161, 18.643501], + }, + { + country: 'Switzerland', + position: [46.818188, 8.227512], + }, + { + country: 'Taiwan', + position: [23.69781, 120.960515], + }, + { + country: 'Ukraine', + position: [48.379433, 31.16558], + }, + { + country: 'United Kingdom', + position: [55.378051, -3.435973], + }, + { + country: 'United States', + position: [37.09024, -95.712891], + }, +]; diff --git a/types/tunnelbear.d.ts b/types/tunnelbear.d.ts index 577508f..ed6057b 100644 --- a/types/tunnelbear.d.ts +++ b/types/tunnelbear.d.ts @@ -1,4 +1,5 @@ import { Tray } from 'electron'; +import { LatLngTuple } from 'leaflet'; import z from 'zod'; import { credentialSchema, passwordSchema } from '../src/utils/schema'; @@ -26,4 +27,9 @@ export type AppState = { isProcessing: boolean; }; +export type CountryLatLng = { + country: string; + position: LatLngTuple; +}; + export as namespace Tunnelbear; diff --git a/yarn.lock b/yarn.lock index 3955797..a3d16af 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1606,6 +1606,11 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45" integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw== +"@react-leaflet/core@^2.1.0": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d" + integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg== + "@sindresorhus/is@^4.0.0": version "4.6.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f" @@ -1682,6 +1687,11 @@ dependencies: "@types/node" "*" +"@types/geojson@*": + version "7946.0.10" + resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249" + integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA== + "@types/glob@^7.1.1": version "7.2.0" resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb" @@ -1712,6 +1722,13 @@ dependencies: "@types/node" "*" +"@types/leaflet@^1.9.0": + version "1.9.0" + resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.0.tgz#8caf452255e16cb15e0eabcb0d2a26793da0a6a2" + integrity sha512-7LeOSj7EloC5UcyOMo+1kc3S1UT3MjJxwqsMT1d2PTyvQz53w0Y0oSSk9nwZnOZubCmBvpSNGceucxiq+ZPEUw== + dependencies: + "@types/geojson" "*" + "@types/lodash.mergewith@4.6.6": version "4.6.6" resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz#c4698f5b214a433ff35cb2c75ee6ec7f99d79f10" @@ -3946,6 +3963,11 @@ lazy-val@^1.0.4, lazy-val@^1.0.5: resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.5.tgz#6cf3b9f5bc31cee7ee3e369c0832b7583dcd923d" integrity sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q== +leaflet@^1.9.3: + version "1.9.3" + resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.3.tgz#52ec436954964e2d3d39e0d433da4b2500d74414" + integrity sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ== + levn@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade" @@ -4584,6 +4606,13 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-leaflet@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-4.2.0.tgz#6c2ee4b576209d9fe40e78006cfa37196c216eaa" + integrity sha512-9d8T7hzYrQA5GLe3vn0qtRLJzQKgjr080NKa45yArGwuSl1nH/6aK9gp7DeYdktpdO1vKGSUTGW5AsUS064X0A== + dependencies: + "@react-leaflet/core" "^2.1.0" + react-refresh@^0.14.0: version "0.14.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" From 42228c77eb791bde362d6e4673eabe6c9d661a8e Mon Sep 17 00:00:00 2001 From: KRSBX Date: Thu, 9 Feb 2023 17:21:48 +0700 Subject: [PATCH 2/4] chore: add bounds, new flags --- public/images/flags/Philippines.svg | 1 + src/components/MapView.tsx | 4 ++++ src/utils/constant.ts | 4 ++++ 3 files changed, 9 insertions(+) create mode 100644 public/images/flags/Philippines.svg diff --git a/public/images/flags/Philippines.svg b/public/images/flags/Philippines.svg new file mode 100644 index 0000000..0878385 --- /dev/null +++ b/public/images/flags/Philippines.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/MapView.tsx b/src/components/MapView.tsx index ff7f491..556ef82 100644 --- a/src/components/MapView.tsx +++ b/src/components/MapView.tsx @@ -32,6 +32,10 @@ const MapView = () => { height: '100%', }} attributionControl={false} + maxBounds={[ + [81.427274, -173.201662], + [-84.136577, 178.66761], + ]} ref={mapRef} > Date: Thu, 9 Feb 2023 18:41:53 +0700 Subject: [PATCH 3/4] feat: tunnel icons --- package.json | 2 +- src/assets/tunnel.svg | 9 +++++++++ src/components/MapView.tsx | 4 +++- src/components/Marker.tsx | 8 ++++++++ src/components/Tunnel.tsx | 2 ++ 5 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 src/assets/tunnel.svg create mode 100644 src/components/Marker.tsx diff --git a/package.json b/package.json index 4864ac1..d546904 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "tunnelbear-vpn", "private": true, - "version": "1.1.0", + "version": "1.2.0", "main": "dist-electron/main.js", "description": "Project created with create-roses-electron", "scripts": { diff --git a/src/assets/tunnel.svg b/src/assets/tunnel.svg new file mode 100644 index 0000000..63a5e0c --- /dev/null +++ b/src/assets/tunnel.svg @@ -0,0 +1,9 @@ + + TB + + + + + + \ No newline at end of file diff --git a/src/components/MapView.tsx b/src/components/MapView.tsx index 556ef82..20f25ce 100644 --- a/src/components/MapView.tsx +++ b/src/components/MapView.tsx @@ -40,7 +40,9 @@ const MapView = () => { > {_.map(vpns, (config, key) => { const countryData = LAT_LNG.find(({ country }) => diff --git a/src/components/Marker.tsx b/src/components/Marker.tsx new file mode 100644 index 0000000..341ef20 --- /dev/null +++ b/src/components/Marker.tsx @@ -0,0 +1,8 @@ +import L from 'leaflet'; +import tunnelIcon from '../assets/tunnel.svg'; + +export const TunnelIcon = new L.Icon({ + iconUrl: tunnelIcon, + iconRetinaUrl: tunnelIcon, + iconSize: new L.Point(25, 60), +}); diff --git a/src/components/Tunnel.tsx b/src/components/Tunnel.tsx index 856ac96..122078a 100644 --- a/src/components/Tunnel.tsx +++ b/src/components/Tunnel.tsx @@ -4,6 +4,7 @@ import { Marker } from 'react-leaflet'; import useConfigData from '../hooks/useConfigData'; import useOpenVpn from '../hooks/useOpenVpn'; import useReadWriteIpcEvent from '../hooks/useReadWriteIpcEvent'; +import { TunnelIcon } from './Marker'; const Tunnel: React.FC = ({ config, mapRef, position }) => { const { dirPath } = useConfigData(config); @@ -26,6 +27,7 @@ const Tunnel: React.FC = ({ config, mapRef, position }) => { return ( Date: Thu, 9 Feb 2023 20:40:46 +0700 Subject: [PATCH 4/4] fix: encrypt/decrypt --- electron/preload.ts | 3 +++ index.html | 11 ---------- package.json | 9 ++++---- src/components/modals/Confirmations.tsx | 3 +-- src/components/modals/CreateConfirmations.tsx | 3 +-- src/components/modals/Credentials.tsx | 9 ++++---- src/hooks/useOpenVpn.tsx | 5 ++--- src/main.tsx | 2 ++ types/global.d.ts | 3 +++ yarn.lock | 22 +------------------ 10 files changed, 21 insertions(+), 49 deletions(-) diff --git a/electron/preload.ts b/electron/preload.ts index d7f1828..c8e7d7c 100644 --- a/electron/preload.ts +++ b/electron/preload.ts @@ -1,4 +1,5 @@ import { contextBridge, ipcRenderer } from 'electron'; +import { decrypt, encrypt } from '../src/crypto'; // See the Electron documentation for details on how to use preload scripts: // https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts @@ -7,3 +8,5 @@ contextBridge.exposeInMainWorld('ipcRenderer', { ...ipcRenderer, on: ipcRenderer.on.bind(ipcRenderer), }); +contextBridge.exposeInMainWorld('encrypt', encrypt); +contextBridge.exposeInMainWorld('decrypt', decrypt); diff --git a/index.html b/index.html index ed2d0aa..144076a 100644 --- a/index.html +++ b/index.html @@ -3,17 +3,6 @@ - - Tunnelbear VPN diff --git a/package.json b/package.json index d546904..c52ab29 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@hookform/resolvers": "^2.9.10", - "@monaco-editor/react": "^4.4.6", "@types/aes-js": "^3.1.1", "@types/electron-json-storage": "^4.5.0", "@types/file-saver": "^2.0.5", @@ -43,6 +42,7 @@ "@typescript-eslint/eslint-plugin": "^5.46.1", "@typescript-eslint/parser": "^5.46.1", "@vitejs/plugin-react": "^3.0.0", + "aes-js": "^3.1.2", "electron": "^22.0.0", "electron-builder": "^23.6.0", "electron-json-storage": "^4.6.0", @@ -51,14 +51,17 @@ "framer-motion": "^7.6.19", "fs-extra": "^11.1.0", "husky": "^8.0.2", + "leaflet": "^1.9.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", "react-github-corner": "^2.5.0", "react-hook-form": "^7.43.0", "react-icons": "^4.7.1", + "react-leaflet": "^4.2.0", "split-pane-react": "^0.1.3", "store": "^2.0.12", + "sudo-prompt": "^9.2.1", "ts-node": "^10.9.1", "type-fest": "^3.5.5", "typescript": "^4.9.4", @@ -69,9 +72,5 @@ "zod": "^3.20.2" }, "dependencies": { - "aes-js": "^3.1.2", - "leaflet": "^1.9.3", - "react-leaflet": "^4.2.0", - "sudo-prompt": "^9.2.1" } } diff --git a/src/components/modals/Confirmations.tsx b/src/components/modals/Confirmations.tsx index d7f3c36..df4e366 100644 --- a/src/components/modals/Confirmations.tsx +++ b/src/components/modals/Confirmations.tsx @@ -19,7 +19,6 @@ import React, { useState } from 'react'; import { useForm } from 'react-hook-form'; import { FiEye, FiEyeOff } from 'react-icons/fi'; import store from 'store'; -import crypto from '../../crypto'; import { CREDENTIALS } from '../../utils/constant'; import { passwordSchema } from '../../utils/schema'; import Form from '../Form'; @@ -46,7 +45,7 @@ const Confirmations = ({ isOpen, onClose, onOpen }: Props) => { return; } - if (password !== crypto.decrypt(values.password)) return; + if (window.decrypt(password) !== values.password) return; reset(); onOpen(); diff --git a/src/components/modals/CreateConfirmations.tsx b/src/components/modals/CreateConfirmations.tsx index a80ef2b..dc5376a 100644 --- a/src/components/modals/CreateConfirmations.tsx +++ b/src/components/modals/CreateConfirmations.tsx @@ -19,7 +19,6 @@ import React, { useState } from 'react'; import { useForm } from 'react-hook-form'; import { FiEye, FiEyeOff } from 'react-icons/fi'; import store from 'store'; -import crypto from '../../crypto'; import { CREDENTIALS } from '../../utils/constant'; import { passwordSchema } from '../../utils/schema'; import Form from '../Form'; @@ -37,7 +36,7 @@ const CreateConfirmations = ({ isOpen, onClose }: Props) => { }); const onSubmit = (values: Tunnelbear.Schema['Password']) => { - store.set(CREDENTIALS.CONFIRMATION, crypto.encrypt(values.password)); + store.set(CREDENTIALS.CONFIRMATION, window.encrypt(values.password)); reset(); diff --git a/src/components/modals/Credentials.tsx b/src/components/modals/Credentials.tsx index 1e3b639..7ff4d56 100644 --- a/src/components/modals/Credentials.tsx +++ b/src/components/modals/Credentials.tsx @@ -20,7 +20,6 @@ import React, { useEffect, useState } from 'react'; import { useForm } from 'react-hook-form'; import { FiEye, FiEyeOff } from 'react-icons/fi'; import store from 'store'; -import crypto from '../../crypto'; import { CREDENTIALS } from '../../utils/constant'; import { credentialSchema } from '../../utils/schema'; import Form from '../Form'; @@ -70,8 +69,8 @@ const Credentials = ({ isOpen, onClose: onCloseFromProps }: Props) => { store.set( CREDENTIALS.CREDENTIALS, JSON.stringify({ - username: crypto.encrypt(values.username), - password: crypto.encrypt(values.password), + username: window.encrypt(values.username), + password: window.encrypt(values.password), }) ); @@ -90,7 +89,7 @@ const Credentials = ({ isOpen, onClose: onCloseFromProps }: Props) => { if (credentials) { const username = JSON.parse(credentials)?.username; - if (username) setValue('username', crypto.decrypt(username)); + if (username) setValue('username', window.decrypt(username)); } onCredentialOpen(); @@ -109,7 +108,7 @@ const Credentials = ({ isOpen, onClose: onCloseFromProps }: Props) => { if (credentials) { const username = JSON.parse(credentials)?.username; - if (username) setValue('username', crypto.decrypt(username)); + if (username) setValue('username', window.decrypt(username)); } onCredentialOpen(); diff --git a/src/hooks/useOpenVpn.tsx b/src/hooks/useOpenVpn.tsx index e155cb5..a3fc2b0 100644 --- a/src/hooks/useOpenVpn.tsx +++ b/src/hooks/useOpenVpn.tsx @@ -1,7 +1,6 @@ import _ from 'lodash'; import { useCallback } from 'react'; import store from 'store'; -import crypto from '../crypto'; import { CREDENTIALS } from '../utils/constant'; import { OPEN_VPN } from '../utils/enums/ipc.openvpn'; @@ -24,8 +23,8 @@ const useOpenVpn = () => { OPEN_VPN.CONNECT_VPN, dirPath, { - username: crypto.decrypt(credentials.username), - password: crypto.decrypt(credentials.password), + username: window.decrypt(credentials.username), + password: window.decrypt(credentials.password), }, contents ) as Promise; diff --git a/src/main.tsx b/src/main.tsx index f0f1f1d..597ea00 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,4 +1,6 @@ import { ChakraProvider } from '@chakra-ui/react'; +import 'leaflet/dist/leaflet.css'; +import 'leaflet/dist/leaflet.js'; import ReactDOM from 'react-dom/client'; import App from './App'; import AppProvider from './provider/AppProvider'; diff --git a/types/global.d.ts b/types/global.d.ts index efcec52..0a5426a 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -1,10 +1,13 @@ import { ipcRenderer } from 'electron'; +import { decrypt, encrypt } from '../src/crypto'; import { APP_NAME } from '../utils/constant'; declare global { interface Window { [APP_NAME]: {}; ipcRenderer: typeof ipcRenderer; + encrypt: typeof encrypt; + decrypt: typeof decrypt; } type KeyOf = keyof T; diff --git a/yarn.lock b/yarn.lock index a3d16af..85251f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1512,21 +1512,6 @@ lodash "^4.17.15" tmp-promise "^3.0.2" -"@monaco-editor/loader@^1.3.2": - version "1.3.2" - resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8" - integrity sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g== - dependencies: - state-local "^1.0.6" - -"@monaco-editor/react@^4.4.6": - version "4.4.6" - resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.6.tgz#8ae500b0edf85276d860ed702e7056c316548218" - integrity sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA== - dependencies: - "@monaco-editor/loader" "^1.3.2" - prop-types "^15.7.2" - "@motionone/animation@^10.15.1": version "10.15.1" resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.15.1.tgz#4a85596c31cbc5100ae8eb8b34c459fb0ccf6807" @@ -4512,7 +4497,7 @@ progress@^2.0.3: resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8" integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA== -prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.6.2: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -5014,11 +4999,6 @@ stat-mode@^1.0.0: resolved "https://registry.yarnpkg.com/stat-mode/-/stat-mode-1.0.0.tgz#68b55cb61ea639ff57136f36b216a291800d1465" integrity sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg== -state-local@^1.0.6: - version "1.0.7" - resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5" - integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w== - store@^2.0.12: version "2.0.12" resolved "https://registry.yarnpkg.com/store/-/store-2.0.12.tgz#8c534e2a0b831f72b75fc5f1119857c44ef5d593"