Skip to content

Commit 27be4f5

Browse files
sajjadmrxsajjadmrx
committed
feat(UI): add support for IPv4 and IPv6 DNS server configuration
1 parent 40c5b55 commit 27be4f5

File tree

9 files changed

+479
-372
lines changed

9 files changed

+479
-372
lines changed

‎src/main/ipc/dialogs.ts‎

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -94,45 +94,10 @@ ipcMain.handle(EventsKeys.CLEAR_DNS, async (event, server: Server) => {
9494
})
9595

9696
ipcMain.handle(EventsKeys.ADD_DNS, async (event, data: Partial<Server>) => {
97-
if (data.name === 'default') {
98-
const defaultServer = store.get('defaultServer')
99-
const server: Server = {
100-
key: 'default',
101-
servers: data.servers,
102-
name: 'default',
103-
tags: [],
104-
avatar: '',
105-
rate: 0,
106-
}
107-
108-
if (!defaultServer) {
109-
store.set('defaultServer', server)
110-
} else {
111-
defaultServer.servers = data.servers
112-
store.set('defaultServer', defaultServer)
113-
}
114-
115-
return { success: true, server: server }
116-
}
117-
11897
const nameServer1 = data.servers[0]
11998
const nameServer2 = data.servers[1]
12099
if (!nameServer1) return { success: false, message: 'DNS1 is required' }
121100

122-
const currentLng = LN[getCurrentLng()]
123-
124-
if (!isValidDnsAddress(nameServer1))
125-
return { success: false, message: currentLng.validator.invalid_dns1 }
126-
127-
if (nameServer2 && !isValidDnsAddress(nameServer2))
128-
return { success: false, message: currentLng.validator.invalid_dns2 }
129-
130-
if (nameServer1.toString() === nameServer2.toString())
131-
return {
132-
success: false,
133-
message: currentLng.validator.dns1_dns2_duplicates,
134-
}
135-
136101
const list: Server[] = store.get('dnsList') || []
137102

138103
const newServer: ServerStore = {
@@ -143,6 +108,7 @@ ipcMain.handle(EventsKeys.ADD_DNS, async (event, data: Partial<Server>) => {
143108
rate: data.rate || 0,
144109
tags: data.tags || [],
145110
isPin: false,
111+
type: data.type,
146112
}
147113

148114
const isDupKey = list.find((s) => s.key === newServer.key)

‎src/renderer/component/cards/server-info/index.tsx‎

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
import { Chip } from '@material-tailwind/react'
2+
import { useContext, useEffect, useState } from 'react'
13
import { Avatar, Button } from 'react-daisyui'
24
import { FiCopy } from 'react-icons/fi'
35
import { TfiReload } from 'react-icons/tfi'
4-
import { useContext, useEffect, useState } from 'react'
5-
import { serversContext } from '../../../context/servers.context'
6-
import { useI18nContext } from '../../../../i18n/i18n-react'
76
import icon from '../../../../../public/icons/icon.png'
7+
import { useI18nContext } from '../../../../i18n/i18n-react'
8+
import { serversContext } from '../../../context/servers.context'
89
import { getPingIcon } from '../../../utils/icons.util'
9-
import { Chip } from '@material-tailwind/react'
1010
interface Prop {
1111
loadingCurrentActive: boolean
1212
}
@@ -25,6 +25,7 @@ export function ServerInfoCardComponent(prop: Prop) {
2525
}
2626
}, [isCopyAdds])
2727

28+
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
2829
useEffect(() => {
2930
if (serversStateContext.selected) getPing()
3031
}, [serversStateContext.selected, serversStateContext.currentActive])
@@ -73,45 +74,51 @@ export function ServerInfoCardComponent(prop: Prop) {
7374
serversStateContext.currentActive?.key == serversStateContext.selected.key
7475
const name =
7576
serversStateContext.selected.name?.length > 14
76-
? serversStateContext.selected.name.slice(0, 12) + '...'
77+
? `${serversStateContext.selected.name.slice(0, 12)}...`
7778
: serversStateContext.selected.name
7879

7980
const network =
8081
serversStateContext.network?.length > 14
81-
? serversStateContext.network.slice(0, 12) + '...'
82+
? `${serversStateContext.network.slice(0, 12)}...`
8283
: serversStateContext.network
8384

8485
return (
8586
<div className="dark:bg-[#262626] bg-base-200 h-[189px] w-[362px] mt-5 rounded-[23px]">
8687
<div
8788
className={
88-
'grid grid-cols-2 gap-4 mt-5 text-[#434343] dark:text-[#A6A6A6] '
89+
'grid grid-cols-2 mt-2 gap-6 px-2 text-[#434343] dark:text-[#A6A6A6]'
8990
}
9091
>
91-
<div className={'flex flex-col gap-2'}>
92+
<div className={'flex flex-col gap-2 '}>
9293
<h3 className={'font-semibold text-gray-500'}>Name</h3>
9394

94-
<div
95-
className={'w-100 text-center flex flex-row gap-2 justify-center'}
96-
>
97-
<div className="flex items-center gap-3 p-2 rounded-[10px] dark:bg-gray-900 bg-gray-300">
95+
<div className="relative flex justify-center text-center ">
96+
<div className="absolute w-20 transform -translate-x-1/2 bg-gray-300 border-[#7487FF] border-l border-r rounded-bl-lg rounded-br-lg dark:bg-gray-900 left-1/2 -bottom-3.5">
97+
<p className="px-3 text-[10px] text-center rounded text-brown-500-500">
98+
{serversStateContext.selected.type?.toUpperCase() || 'IPV4'}
99+
</p>
100+
</div>
101+
102+
<div className="flex items-center p-2 rounded-[10px] dark:bg-gray-900 bg-gray-300 border-[#7487FF] border-l border-r border-b">
98103
<img
99104
src={`./servers-icon/${serversStateContext.selected.avatar}`}
100-
alt=""
101-
className="self-center w-5 h-5 rounded-full mr-1"
105+
alt={`${name} logo`}
106+
className="w-4 h-4 rounded-full"
102107
onError={({ currentTarget }) => {
103-
currentTarget.onerror = null // prevents looping
108+
currentTarget.onerror = null
104109
currentTarget.src = './servers-icon/def.png'
105110
}}
106111
/>
107-
<span className="ml-1 inline-flex items-baseline text-sm">
108-
<span className="font-medium text-slate-900 dark:text-slate-200 ">
112+
113+
<div className="flex items-center gap-1 ml-1">
114+
<span className="font-medium text-slate-900 dark:text-slate-200 text-left ml-1 truncate text-[11px] sm:text-sm max-w-32 min-w-32">
109115
{name || 'Unknown'}
110116
</span>
111-
</span>
117+
</div>
112118
</div>
113119
</div>
114120
</div>
121+
115122
<div className={'flex flex-col gap-2 text-center justify-center'}>
116123
<h3 className={'font-semibold text-gray-500'}>Ping</h3>
117124

@@ -121,11 +128,11 @@ export function ServerInfoCardComponent(prop: Prop) {
121128
<Button
122129
color="ghost"
123130
size="sm"
124-
className="flex items-center gap-3 border-1 border-gray-300 dark:border-gray-900 bg-gray-300 dark:bg-gray-900 dark:hover:bg-gray-800 dark:hover:border-none"
131+
className="flex items-center gap-3 bg-gray-300 border-gray-300 border-1 dark:border-gray-900 dark:bg-gray-900 dark:hover:bg-gray-800 dark:hover:border-none"
125132
onClick={getPing}
126133
>
127134
{ping > 0 && getPingIcon(ping)}
128-
<span className="ml-1 inline-flex items-baseline text-sm">
135+
<span className="inline-flex items-baseline ml-1 text-sm">
129136
<span className="font-medium text-slate-900 dark:text-slate-200">
130137
{ping}
131138
</span>
@@ -134,19 +141,22 @@ export function ServerInfoCardComponent(prop: Prop) {
134141
</Button>
135142
</div>
136143
</div>
144+
137145
<div className={'flex flex-col gap-2 text-center justify-center'}>
138146
<h3 className={'font-semibold text-gray-500'}>Address</h3>
139147
<div
140-
className={'w-100 flex flex-row gap-2 justify-center text-center'}
148+
className={
149+
'w-100 flex flex-row gap-2 justify-center text-center '
150+
}
141151
>
142152
{isCopyAdds ? (
143153
<Button
144154
color="success"
145155
size="sm"
146156
className="flex items-center gap-3"
147157
>
148-
<span className="ml-1 inline-flex items-baseline text-sm">
149-
<span className="font-medium text-slate-900 dark:text-slate-200 normal-case">
158+
<span className="inline-flex items-baseline ml-1 text-sm">
159+
<span className="font-medium normal-case text-slate-900 dark:text-slate-200">
150160
Copied!
151161
</span>
152162
</span>
@@ -155,25 +165,25 @@ export function ServerInfoCardComponent(prop: Prop) {
155165
<Button
156166
color="ghost"
157167
size="sm"
158-
className="flex items-center gap-3 border-1 border-gray-300 dark:border-gray-900 bg-gray-300 dark:bg-gray-900 dark:hover:bg-gray-800 dark:hover:border-none"
168+
className="flex items-center gap-3 bg-gray-300 border-gray-300 border-1 dark:border-gray-900 dark:bg-gray-900 dark:hover:bg-gray-800 dark:hover:border-none"
159169
onClick={() => {
160170
navigator.clipboard.writeText(
161171
serversStateContext.selected.servers.join(','),
162172
)
163173
setIsCopyAdds(true)
164174
}}
165175
>
166-
<span className="ml-1 inline-flex items-baseline text-sm">
176+
<span className="inline-flex items-baseline ml-1 text-sm ">
167177
<span className="font-medium text-slate-900 dark:text-slate-200">
168-
{serversStateContext.selected.servers[0].slice(0, 10) +
169-
'...'}
178+
{`${serversStateContext.selected.servers[0].slice(0, 10)}...`}
170179
</span>
171180
</span>
172181
<FiCopy />
173182
</Button>
174183
)}
175184
</div>
176185
</div>
186+
177187
<div className={'flex flex-col gap-2 text-center justify-center'}>
178188
{window.os.os == 'win32' ? (
179189
<>

0 commit comments

Comments
 (0)