gitscope
/
← marzneshin / app/dashboard/src/pages/hosts/dialog/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/pages/hosts/dialog/index.tsx · v0.2.1
Source
1 89f8f93 Mardin 2y ago import {
2 89f8f93 Mardin 2y ago Button,
3 89f8f93 Mardin 2y ago Select as ChakraSelect,
4 89f8f93 Mardin 2y ago FormControl,
5 89f8f93 Mardin 2y ago FormLabel,
6 89f8f93 Mardin 2y ago HStack,
7 89f8f93 Mardin 2y ago IconButton,
8 89f8f93 Mardin 2y ago Modal,
9 89f8f93 Mardin 2y ago ModalBody,
10 89f8f93 Mardin 2y ago ModalCloseButton,
11 89f8f93 Mardin 2y ago ModalContent,
12 89f8f93 Mardin 2y ago ModalOverlay,
13 89f8f93 Mardin 2y ago Tooltip,
14 89f8f93 Mardin 2y ago VStack,
15 89f8f93 Mardin 2y ago chakra,
16 89f8f93 Mardin 2y ago useToast,
17 89f8f93 Mardin 2y ago Spacer,
18 89f8f93 Mardin 2y ago Popover,
19 89f8f93 Mardin 2y ago PopoverTrigger,
20 89f8f93 Mardin 2y ago Portal,
21 89f8f93 Mardin 2y ago PopoverContent,
22 89f8f93 Mardin 2y ago PopoverArrow,
23 89f8f93 Mardin 2y ago PopoverCloseButton,
24 89f8f93 Mardin 2y ago Text,
25 89f8f93 Mardin 2y ago Badge,
26 89f8f93 Mardin 2y ago Alert,
27 89f8f93 Mardin 2y ago AlertIcon,
28 89f8f93 Mardin 2y ago InputRightElement,
29 89f8f93 Mardin 2y ago InputGroup,
30 89f8f93 Mardin 2y ago } from '@chakra-ui/react';
31 89f8f93 Mardin 2y ago import { zodResolver } from '@hookform/resolvers/zod';
32 89f8f93 Mardin 2y ago import { FC, useEffect, useState } from 'react';
33 89f8f93 Mardin 2y ago import { useInbounds, HostType, HostSchema, hostSchema } from 'stores';
34 89f8f93 Mardin 2y ago import { Trans, useTranslation } from 'react-i18next';
35 89f8f93 Mardin 2y ago import { getDefaultValues } from './default-values';
36 89f8f93 Mardin 2y ago import { useForm } from 'react-hook-form';
37 89f8f93 Mardin 2y ago import 'slick-carousel/slick/slick-theme.css';
38 89f8f93 Mardin 2y ago import 'slick-carousel/slick/slick.css';
39 5825ea4 Mardin 2y ago import { DialogModalHeader, AddIcon, DeleteIcon } from 'components/dialog';
40 5825ea4 Mardin 2y ago import { Input as CustomInput } from 'components/input';
41 89f8f93 Mardin 2y ago import { EditIcon } from 'components/table';
42 89f8f93 Mardin 2y ago import { InfoIcon } from './icons';
43 89f8f93 Mardin 2y ago import {
44 89f8f93 Mardin 2y ago proxyALPN,
45 89f8f93 Mardin 2y ago proxyFingerprint,
46 89f8f93 Mardin 2y ago proxyHostSecurity,
47 89f8f93 Mardin 2y ago } from 'constants/Proxies';
48 89f8f93 Mardin 2y ago import { RemarkFieldPopover } from './remark-field-popover';
49 89f8f93 Mardin 2y ago
50 89f8f93 Mardin 2y ago export const Select = chakra(ChakraSelect, {
51 89f8f93 Mardin 2y ago baseStyle: {
52 89f8f93 Mardin 2y ago bg: 'white',
53 89f8f93 Mardin 2y ago _dark: {
54 89f8f93 Mardin 2y ago bg: 'gray.700',
55 89f8f93 Mardin 2y ago },
56 89f8f93 Mardin 2y ago },
57 89f8f93 Mardin 2y ago });
58 89f8f93 Mardin 2y ago
59 89f8f93 Mardin 2y ago export const Input = chakra(CustomInput, {
60 89f8f93 Mardin 2y ago baseStyle: {
61 89f8f93 Mardin 2y ago bg: 'white',
62 89f8f93 Mardin 2y ago _dark: {
63 89f8f93 Mardin 2y ago bg: 'gray.700',
64 89f8f93 Mardin 2y ago },
65 89f8f93 Mardin 2y ago },
66 89f8f93 Mardin 2y ago });
67 89f8f93 Mardin 2y ago
68 89f8f93 Mardin 2y ago /* TODO: Impelement specific errors and input verifications
69 89f8f93 Mardin 2y ago * */
70 89f8f93 Mardin 2y ago export const HostsDialog: FC = () => {
71 89f8f93 Mardin 2y ago const {
72 89f8f93 Mardin 2y ago selectedHost, isEditingHost, isCreatingHost, selectedInbound,
73 89f8f93 Mardin 2y ago onEditingHost, editHost, createHost, onCreatingHost, onDeletingHost
74 89f8f93 Mardin 2y ago } = useInbounds();
75 89f8f93 Mardin 2y ago const [loading, setLoading] = useState(false);
76 89f8f93 Mardin 2y ago const [error, setError] = useState<string | null>('');
77 89f8f93 Mardin 2y ago const { t } = useTranslation();
78 89f8f93 Mardin 2y ago const toast = useToast();
79 8d27a8d Mrdn 2y ago
80 89f8f93 Mardin 2y ago const defaultValueHost: HostSchema = (isEditingHost === true && selectedHost !== null) ? selectedHost : getDefaultValues();
81 8d27a8d Mrdn 2y ago
82 89f8f93 Mardin 2y ago const form = useForm<HostSchema>({
83 89f8f93 Mardin 2y ago resolver: zodResolver(hostSchema),
84 89f8f93 Mardin 2y ago defaultValues: defaultValueHost,
85 89f8f93 Mardin 2y ago });
86 8d27a8d Mrdn 2y ago
87 89f8f93 Mardin 2y ago const isOpen = isEditingHost || isCreatingHost;
88 89f8f93 Mardin 2y ago const onClose = () => {
89 89f8f93 Mardin 2y ago onCreatingHost(false);
90 89f8f93 Mardin 2y ago onEditingHost(false, null);
91 89f8f93 Mardin 2y ago };
92 8d27a8d Mrdn 2y ago
93 89f8f93 Mardin 2y ago useEffect(() => {
94 8d27a8d Mrdn 2y ago (isOpen) && form.reset(defaultValueHost);
95 89f8f93 Mardin 2y ago }, [isOpen]);
96 89f8f93 Mardin 2y ago
97 89f8f93 Mardin 2y ago const submit = async (values: HostSchema | HostType) => {
98 89f8f93 Mardin 2y ago setLoading(true);
99 89f8f93 Mardin 2y ago const methods = { edited: editHost, created: createHost };
100 89f8f93 Mardin 2y ago const method = isEditingHost ? 'edited' : 'created';
101 89f8f93 Mardin 2y ago const refId = (isEditingHost ? selectedHost?.id : null) ?? selectedInbound?.id;
102 89f8f93 Mardin 2y ago setError(null);
103 89f8f93 Mardin 2y ago await methods[method](refId, values)
104 89f8f93 Mardin 2y ago .then(() => {
105 89f8f93 Mardin 2y ago toast({
106 89f8f93 Mardin 2y ago title: t(
107 fca98f0 Mrdn 2y ago isEditingHost ? 'hostsDialog.editHost' : 'hostsDialog.createHost',
108 89f8f93 Mardin 2y ago { hoshtName: values.host }
109 89f8f93 Mardin 2y ago ),
110 89f8f93 Mardin 2y ago status: 'success',
111 89f8f93 Mardin 2y ago isClosable: true,
112 89f8f93 Mardin 2y ago position: 'top',
113 89f8f93 Mardin 2y ago duration: 3000,
114 89f8f93 Mardin 2y ago });
115 89f8f93 Mardin 2y ago onClose();
116 89f8f93 Mardin 2y ago })
117 89f8f93 Mardin 2y ago .catch((err) => {
118 89f8f93 Mardin 2y ago if (err?.response?.status === 409 || err?.response?.status === 400)
119 89f8f93 Mardin 2y ago setError(err?.response?._data?.detail);
120 89f8f93 Mardin 2y ago if (err?.response?.status === 422) {
121 89f8f93 Mardin 2y ago Object.keys(err.response._data.detail).forEach((key) => {
122 89f8f93 Mardin 2y ago setError(err?.response._data.detail[key] as string);
123 89f8f93 Mardin 2y ago form.setError(
124 89f8f93 Mardin 2y ago key as 'address' | 'port' | 'host' | 'path' | 'remark' | 'sni' | 'security' | 'alpn' | 'fingerprint',
125 89f8f93 Mardin 2y ago {
126 89f8f93 Mardin 2y ago type: 'custom',
127 89f8f93 Mardin 2y ago message: err.response._data.detail[key],
128 89f8f93 Mardin 2y ago }
129 89f8f93 Mardin 2y ago );
130 89f8f93 Mardin 2y ago });
131 89f8f93 Mardin 2y ago }
132 89f8f93 Mardin 2y ago })
133 89f8f93 Mardin 2y ago .finally(() => {
134 89f8f93 Mardin 2y ago setLoading(false);
135 89f8f93 Mardin 2y ago });
136 89f8f93 Mardin 2y ago };
137 89f8f93 Mardin 2y ago
138 89f8f93 Mardin 2y ago return (
139 89f8f93 Mardin 2y ago <Modal isOpen={isOpen} onClose={onClose}>
140 89f8f93 Mardin 2y ago <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
141 6aab6f0 Mrdn 2y ago <ModalContent mx="3" w="lg" >
142 6aab6f0 Mrdn 2y ago <DialogModalHeader HeaderIcon={isEditingHost ? EditIcon : AddIcon} title={isEditingHost ? t('hostsDialog.editHost') : t('hostsDialog.createHost')} />
143 89f8f93 Mardin 2y ago <ModalCloseButton mt={3} />
144 6aab6f0 Mrdn 2y ago <ModalBody pb={4} pt={3}>
145 6aab6f0 Mrdn 2y ago {loading && 'loading...'}
146 6aab6f0 Mrdn 2y ago <form onSubmit={form.handleSubmit((v) => submit(v))}>
147 6aab6f0 Mrdn 2y ago <VStack>
148 6aab6f0 Mrdn 2y ago <HStack w="100%" alignItems="flex-start">
149 6aab6f0 Mrdn 2y ago <FormControl
150 6aab6f0 Mrdn 2y ago position="relative"
151 6aab6f0 Mrdn 2y ago zIndex={10}
152 6aab6f0 Mrdn 2y ago >
153 89f8f93 Mardin 2y ago <InputGroup>
154 89f8f93 Mardin 2y ago <Input
155 6aab6f0 Mrdn 2y ago {...form.register('remark')}
156 89f8f93 Mardin 2y ago size="sm"
157 89f8f93 Mardin 2y ago borderRadius="4px"
158 6aab6f0 Mrdn 2y ago placeholder="Remark"
159 89f8f93 Mardin 2y ago />
160 89f8f93 Mardin 2y ago <InputRightElement>
161 89f8f93 Mardin 2y ago <RemarkFieldPopover />
162 89f8f93 Mardin 2y ago </InputRightElement>
163 89f8f93 Mardin 2y ago </InputGroup>
164 89f8f93 Mardin 2y ago </FormControl>
165 6aab6f0 Mrdn 2y ago </HStack>
166 6aab6f0 Mrdn 2y ago <FormControl>
167 6aab6f0 Mrdn 2y ago <InputGroup>
168 89f8f93 Mardin 2y ago <Input
169 89f8f93 Mardin 2y ago size="sm"
170 89f8f93 Mardin 2y ago borderRadius="4px"
171 6aab6f0 Mrdn 2y ago placeholder="Address (e.g. example.com)"
172 6aab6f0 Mrdn 2y ago {...form.register('address')}
173 89f8f93 Mardin 2y ago />
174 6aab6f0 Mrdn 2y ago <InputRightElement>
175 6aab6f0 Mrdn 2y ago <RemarkFieldPopover />
176 6aab6f0 Mrdn 2y ago </InputRightElement>
177 6aab6f0 Mrdn 2y ago </InputGroup>
178 6aab6f0 Mrdn 2y ago </FormControl>
179 6aab6f0 Mrdn 2y ago <FormControl>
180 6aab6f0 Mrdn 2y ago <FormLabel
181 6aab6f0 Mrdn 2y ago display="flex"
182 6aab6f0 Mrdn 2y ago pb={1}
183 6aab6f0 Mrdn 2y ago alignItems="center"
184 6aab6f0 Mrdn 2y ago justifyContent="space-between"
185 6aab6f0 Mrdn 2y ago gap={1}
186 6aab6f0 Mrdn 2y ago m="0"
187 6aab6f0 Mrdn 2y ago >
188 6aab6f0 Mrdn 2y ago <span>{t('hostsDialog.port')}</span>
189 6aab6f0 Mrdn 2y ago <Popover isLazy placement="right">
190 6aab6f0 Mrdn 2y ago <PopoverTrigger>
191 6aab6f0 Mrdn 2y ago <InfoIcon />
192 6aab6f0 Mrdn 2y ago </PopoverTrigger>
193 6aab6f0 Mrdn 2y ago <Portal>
194 6aab6f0 Mrdn 2y ago <PopoverContent p={2}>
195 6aab6f0 Mrdn 2y ago <PopoverArrow />
196 6aab6f0 Mrdn 2y ago <PopoverCloseButton />
197 6aab6f0 Mrdn 2y ago <Text fontSize="xs" pr={5}>
198 6aab6f0 Mrdn 2y ago {t('hostsDialog.port.info')}
199 6aab6f0 Mrdn 2y ago </Text>
200 6aab6f0 Mrdn 2y ago </PopoverContent>
201 6aab6f0 Mrdn 2y ago </Portal>
202 6aab6f0 Mrdn 2y ago </Popover>
203 6aab6f0 Mrdn 2y ago </FormLabel>
204 6aab6f0 Mrdn 2y ago <Input
205 6aab6f0 Mrdn 2y ago size="sm"
206 6aab6f0 Mrdn 2y ago borderRadius="4px"
207 6aab6f0 Mrdn 2y ago placeholder={String(selectedInbound?.port || '8080')}
208 6aab6f0 Mrdn 2y ago type="number"
209 6aab6f0 Mrdn 2y ago {...form.register('port')}
210 6aab6f0 Mrdn 2y ago />
211 6aab6f0 Mrdn 2y ago </FormControl>
212 6aab6f0 Mrdn 2y ago <FormControl>
213 6aab6f0 Mrdn 2y ago <FormLabel
214 6aab6f0 Mrdn 2y ago display="flex"
215 6aab6f0 Mrdn 2y ago pb={1}
216 6aab6f0 Mrdn 2y ago alignItems="center"
217 6aab6f0 Mrdn 2y ago gap={1}
218 6aab6f0 Mrdn 2y ago justifyContent="space-between"
219 6aab6f0 Mrdn 2y ago m="0"
220 6aab6f0 Mrdn 2y ago >
221 6aab6f0 Mrdn 2y ago <span>{t('hostsDialog.sni')}</span>
222 6aab6f0 Mrdn 2y ago <Popover isLazy placement="right">
223 6aab6f0 Mrdn 2y ago <PopoverTrigger>
224 6aab6f0 Mrdn 2y ago <InfoIcon />
225 6aab6f0 Mrdn 2y ago </PopoverTrigger>
226 6aab6f0 Mrdn 2y ago <Portal>
227 6aab6f0 Mrdn 2y ago <PopoverContent p={2}>
228 6aab6f0 Mrdn 2y ago <PopoverArrow />
229 6aab6f0 Mrdn 2y ago <PopoverCloseButton />
230 6aab6f0 Mrdn 2y ago <Text fontSize="xs" pr={5}>
231 6aab6f0 Mrdn 2y ago {t('hostsDialog.sni.info')}
232 6aab6f0 Mrdn 2y ago </Text>
233 6aab6f0 Mrdn 2y ago <Text fontSize="xs" mt="2">
234 6aab6f0 Mrdn 2y ago <Trans
235 6aab6f0 Mrdn 2y ago i18nKey="hostsDialog.host.wildcard"
236 6aab6f0 Mrdn 2y ago components={{
237 6aab6f0 Mrdn 2y ago badge: <Badge />,
238 6aab6f0 Mrdn 2y ago }}
239 6aab6f0 Mrdn 2y ago />
240 6aab6f0 Mrdn 2y ago </Text>
241 6aab6f0 Mrdn 2y ago <Text fontSize="xs">
242 6aab6f0 Mrdn 2y ago <Trans
243 6aab6f0 Mrdn 2y ago i18nKey="hostsDialog.host.multiHost"
244 6aab6f0 Mrdn 2y ago components={{
245 6aab6f0 Mrdn 2y ago badge: <Badge />,
246 6aab6f0 Mrdn 2y ago }}
247 6aab6f0 Mrdn 2y ago />
248 6aab6f0 Mrdn 2y ago </Text>
249 6aab6f0 Mrdn 2y ago </PopoverContent>
250 6aab6f0 Mrdn 2y ago </Portal>
251 6aab6f0 Mrdn 2y ago </Popover>
252 6aab6f0 Mrdn 2y ago </FormLabel>
253 6aab6f0 Mrdn 2y ago <Input
254 6aab6f0 Mrdn 2y ago size="sm"
255 6aab6f0 Mrdn 2y ago borderRadius="4px"
256 6aab6f0 Mrdn 2y ago placeholder="SNI (e.g. example.com)"
257 6aab6f0 Mrdn 2y ago {...form.register('sni')}
258 6aab6f0 Mrdn 2y ago />
259 6aab6f0 Mrdn 2y ago </FormControl>
260 6aab6f0 Mrdn 2y ago <FormControl>
261 6aab6f0 Mrdn 2y ago <FormLabel
262 6aab6f0 Mrdn 2y ago display="flex"
263 6aab6f0 Mrdn 2y ago pb={1}
264 6aab6f0 Mrdn 2y ago alignItems="center"
265 6aab6f0 Mrdn 2y ago gap={1}
266 6aab6f0 Mrdn 2y ago justifyContent="space-between"
267 6aab6f0 Mrdn 2y ago m="0"
268 6aab6f0 Mrdn 2y ago >
269 6aab6f0 Mrdn 2y ago <span>{t('hostsDialog.host')}</span>
270 89f8f93 Mardin 2y ago
271 6aab6f0 Mrdn 2y ago <Popover isLazy placement="right">
272 6aab6f0 Mrdn 2y ago <PopoverTrigger>
273 6aab6f0 Mrdn 2y ago <InfoIcon />
274 6aab6f0 Mrdn 2y ago </PopoverTrigger>
275 6aab6f0 Mrdn 2y ago <Portal>
276 6aab6f0 Mrdn 2y ago <PopoverContent p={2}>
277 6aab6f0 Mrdn 2y ago <PopoverArrow />
278 6aab6f0 Mrdn 2y ago <PopoverCloseButton />
279 6aab6f0 Mrdn 2y ago <Text fontSize="xs" pr={5}>
280 6aab6f0 Mrdn 2y ago {t('hostsDialog.host.info')}
281 6aab6f0 Mrdn 2y ago </Text>
282 6aab6f0 Mrdn 2y ago <Text fontSize="xs" mt="2">
283 6aab6f0 Mrdn 2y ago <Trans
284 6aab6f0 Mrdn 2y ago i18nKey="hostsDialog.host.wildcard"
285 6aab6f0 Mrdn 2y ago components={{
286 6aab6f0 Mrdn 2y ago badge: <Badge />,
287 6aab6f0 Mrdn 2y ago }}
288 6aab6f0 Mrdn 2y ago />
289 6aab6f0 Mrdn 2y ago </Text>
290 6aab6f0 Mrdn 2y ago <Text fontSize="xs">
291 6aab6f0 Mrdn 2y ago <Trans
292 6aab6f0 Mrdn 2y ago i18nKey="hostsDialog.host.multiHost"
293 6aab6f0 Mrdn 2y ago components={{
294 6aab6f0 Mrdn 2y ago badge: <Badge />,
295 6aab6f0 Mrdn 2y ago }}
296 6aab6f0 Mrdn 2y ago />
297 6aab6f0 Mrdn 2y ago </Text>
298 6aab6f0 Mrdn 2y ago </PopoverContent>
299 6aab6f0 Mrdn 2y ago </Portal>
300 6aab6f0 Mrdn 2y ago </Popover>
301 6aab6f0 Mrdn 2y ago </FormLabel>
302 6aab6f0 Mrdn 2y ago <Input
303 6aab6f0 Mrdn 2y ago size="sm"
304 6aab6f0 Mrdn 2y ago borderRadius="4px"
305 6aab6f0 Mrdn 2y ago placeholder="Host (e.g. example.com)"
306 6aab6f0 Mrdn 2y ago {...form.register('host')}
307 6aab6f0 Mrdn 2y ago />
308 6aab6f0 Mrdn 2y ago </FormControl>
309 6aab6f0 Mrdn 2y ago <FormControl>
310 6aab6f0 Mrdn 2y ago <FormLabel
311 6aab6f0 Mrdn 2y ago display="flex"
312 6aab6f0 Mrdn 2y ago pb={1}
313 6aab6f0 Mrdn 2y ago alignItems="center"
314 6aab6f0 Mrdn 2y ago gap={1}
315 6aab6f0 Mrdn 2y ago justifyContent="space-between"
316 6aab6f0 Mrdn 2y ago m="0"
317 6aab6f0 Mrdn 2y ago >
318 6aab6f0 Mrdn 2y ago <span>{t('hostsDialog.path')}</span>
319 6aab6f0 Mrdn 2y ago <Popover isLazy placement="right">
320 6aab6f0 Mrdn 2y ago <PopoverTrigger>
321 6aab6f0 Mrdn 2y ago <InfoIcon />
322 6aab6f0 Mrdn 2y ago </PopoverTrigger>
323 6aab6f0 Mrdn 2y ago <Portal>
324 6aab6f0 Mrdn 2y ago <PopoverContent p={2}>
325 6aab6f0 Mrdn 2y ago <PopoverArrow />
326 6aab6f0 Mrdn 2y ago <PopoverCloseButton />
327 6aab6f0 Mrdn 2y ago <Text fontSize="xs" pr={5}>
328 6aab6f0 Mrdn 2y ago {t('hostsDialog.path.info')}
329 6aab6f0 Mrdn 2y ago </Text>
330 6aab6f0 Mrdn 2y ago </PopoverContent>
331 6aab6f0 Mrdn 2y ago </Portal>
332 6aab6f0 Mrdn 2y ago </Popover>
333 6aab6f0 Mrdn 2y ago </FormLabel>
334 6aab6f0 Mrdn 2y ago <Input
335 6aab6f0 Mrdn 2y ago size="sm"
336 6aab6f0 Mrdn 2y ago borderRadius="4px"
337 6aab6f0 Mrdn 2y ago placeholder="path (e.g. /vless)"
338 6aab6f0 Mrdn 2y ago {...form.register('path')}
339 6aab6f0 Mrdn 2y ago />
340 6aab6f0 Mrdn 2y ago </FormControl>
341 6aab6f0 Mrdn 2y ago <FormControl height="66px">
342 6aab6f0 Mrdn 2y ago <FormLabel
343 6aab6f0 Mrdn 2y ago display="flex"
344 6aab6f0 Mrdn 2y ago pb={1}
345 6aab6f0 Mrdn 2y ago alignItems="center"
346 6aab6f0 Mrdn 2y ago gap={1}
347 6aab6f0 Mrdn 2y ago justifyContent="space-between"
348 6aab6f0 Mrdn 2y ago m="0"
349 6aab6f0 Mrdn 2y ago >
350 6aab6f0 Mrdn 2y ago <span>{t('hostsDialog.security')}</span>
351 6aab6f0 Mrdn 2y ago <Popover isLazy placement="right">
352 6aab6f0 Mrdn 2y ago <PopoverTrigger>
353 6aab6f0 Mrdn 2y ago <InfoIcon />
354 6aab6f0 Mrdn 2y ago </PopoverTrigger>
355 6aab6f0 Mrdn 2y ago <Portal>
356 6aab6f0 Mrdn 2y ago <PopoverContent p={2}>
357 6aab6f0 Mrdn 2y ago <PopoverArrow />
358 6aab6f0 Mrdn 2y ago <PopoverCloseButton />
359 6aab6f0 Mrdn 2y ago <Text fontSize="xs" pr={5}>
360 6aab6f0 Mrdn 2y ago {t('hostsDialog.security.info')}
361 6aab6f0 Mrdn 2y ago </Text>
362 6aab6f0 Mrdn 2y ago </PopoverContent>
363 6aab6f0 Mrdn 2y ago </Portal>
364 6aab6f0 Mrdn 2y ago </Popover>
365 6aab6f0 Mrdn 2y ago </FormLabel>
366 6aab6f0 Mrdn 2y ago <Select size="sm" {...form.register('security')} >
367 6aab6f0 Mrdn 2y ago {proxyHostSecurity.map((s) => {
368 6aab6f0 Mrdn 2y ago return (
369 6aab6f0 Mrdn 2y ago <option key={s.value} value={s.value}>
370 6aab6f0 Mrdn 2y ago {s.title}
371 6aab6f0 Mrdn 2y ago </option>
372 6aab6f0 Mrdn 2y ago );
373 6aab6f0 Mrdn 2y ago })}
374 6aab6f0 Mrdn 2y ago </Select>
375 6aab6f0 Mrdn 2y ago </FormControl>
376 6aab6f0 Mrdn 2y ago {/* TODO: Add ALPN and fingerprint fields smooth entrance and
377 89f8f93 Mardin 2y ago * pushing down animation when security field is TLS
378 89f8f93 Mardin 2y ago * - Insertion and pushing down the below element
379 89f8f93 Mardin 2y ago * - Slowly increasing the opacity
380 89f8f93 Mardin 2y ago * Related issue: #95
381 89f8f93 Mardin 2y ago */}
382 57a4cf7 Mrdn 2y ago <FormControl height="66px">
383 57a4cf7 Mrdn 2y ago <FormLabel
384 57a4cf7 Mrdn 2y ago display="flex"
385 57a4cf7 Mrdn 2y ago pb={1}
386 57a4cf7 Mrdn 2y ago alignItems="center"
387 57a4cf7 Mrdn 2y ago gap={1}
388 57a4cf7 Mrdn 2y ago justifyContent="space-between"
389 57a4cf7 Mrdn 2y ago m="0"
390 57a4cf7 Mrdn 2y ago >
391 57a4cf7 Mrdn 2y ago <span>{t('hostsDialog.alpn')}</span>
392 57a4cf7 Mrdn 2y ago </FormLabel>
393 57a4cf7 Mrdn 2y ago <Select
394 57a4cf7 Mrdn 2y ago size="sm"
395 57a4cf7 Mrdn 2y ago {...form.register('alpn')}
396 57a4cf7 Mrdn 2y ago >
397 57a4cf7 Mrdn 2y ago {proxyALPN.map((s) => {
398 57a4cf7 Mrdn 2y ago return (
399 57a4cf7 Mrdn 2y ago <option key={s.value} value={s.value}>
400 57a4cf7 Mrdn 2y ago {s.title}
401 57a4cf7 Mrdn 2y ago </option>
402 57a4cf7 Mrdn 2y ago );
403 57a4cf7 Mrdn 2y ago })}
404 57a4cf7 Mrdn 2y ago </Select>
405 57a4cf7 Mrdn 2y ago </FormControl>
406 57a4cf7 Mrdn 2y ago <FormControl height="66px">
407 57a4cf7 Mrdn 2y ago <FormLabel
408 57a4cf7 Mrdn 2y ago display="flex"
409 57a4cf7 Mrdn 2y ago pb={1}
410 57a4cf7 Mrdn 2y ago alignItems="center"
411 57a4cf7 Mrdn 2y ago gap={1}
412 57a4cf7 Mrdn 2y ago justifyContent="space-between"
413 57a4cf7 Mrdn 2y ago m="0"
414 57a4cf7 Mrdn 2y ago >
415 57a4cf7 Mrdn 2y ago <span>{t('hostsDialog.fingerprint')}</span>
416 57a4cf7 Mrdn 2y ago </FormLabel>
417 57a4cf7 Mrdn 2y ago <Select
418 57a4cf7 Mrdn 2y ago size="sm"
419 57a4cf7 Mrdn 2y ago {...form.register('fingerprint')}
420 57a4cf7 Mrdn 2y ago >
421 57a4cf7 Mrdn 2y ago {proxyFingerprint.map((s) => {
422 57a4cf7 Mrdn 2y ago return (
423 57a4cf7 Mrdn 2y ago <option key={s.value} value={s.value}>
424 57a4cf7 Mrdn 2y ago {s.title}
425 57a4cf7 Mrdn 2y ago </option>
426 57a4cf7 Mrdn 2y ago );
427 57a4cf7 Mrdn 2y ago })}
428 57a4cf7 Mrdn 2y ago </Select>
429 57a4cf7 Mrdn 2y ago </FormControl>
430 6aab6f0 Mrdn 2y ago <Spacer m={2}></Spacer>
431 6aab6f0 Mrdn 2y ago <HStack w="full">
432 6aab6f0 Mrdn 2y ago <Tooltip label={t('delete')} placement="top">
433 6aab6f0 Mrdn 2y ago <IconButton
434 6aab6f0 Mrdn 2y ago colorScheme="red"
435 6aab6f0 Mrdn 2y ago variant="ghost"
436 89f8f93 Mardin 2y ago size="sm"
437 6aab6f0 Mrdn 2y ago aria-label="delete host"
438 6aab6f0 Mrdn 2y ago onClick={() => {
439 6aab6f0 Mrdn 2y ago if (selectedHost !== null) {
440 6aab6f0 Mrdn 2y ago onDeletingHost(true, selectedHost);
441 6aab6f0 Mrdn 2y ago onClose();
442 6aab6f0 Mrdn 2y ago }
443 6aab6f0 Mrdn 2y ago }}
444 89f8f93 Mardin 2y ago >
445 6aab6f0 Mrdn 2y ago <DeleteIcon />
446 6aab6f0 Mrdn 2y ago </IconButton>
447 6aab6f0 Mrdn 2y ago </Tooltip>
448 6aab6f0 Mrdn 2y ago <Button
449 6aab6f0 Mrdn 2y ago flexGrow={1}
450 6aab6f0 Mrdn 2y ago type="submit"
451 6aab6f0 Mrdn 2y ago colorScheme="primary"
452 6aab6f0 Mrdn 2y ago size="sm"
453 6aab6f0 Mrdn 2y ago px={5}
454 6aab6f0 Mrdn 2y ago w="full"
455 6aab6f0 Mrdn 2y ago isLoading={loading}
456 6aab6f0 Mrdn 2y ago >
457 6aab6f0 Mrdn 2y ago {isEditingHost ? t('hostsDialog.editSubmit') : t('hostsDialog.createSubmit')}
458 6aab6f0 Mrdn 2y ago </Button>
459 6aab6f0 Mrdn 2y ago </HStack>
460 6aab6f0 Mrdn 2y ago {error && (
461 6aab6f0 Mrdn 2y ago <Alert
462 6aab6f0 Mrdn 2y ago status="error"
463 6aab6f0 Mrdn 2y ago display={{ base: 'none', md: 'flex' }}
464 6aab6f0 Mrdn 2y ago >
465 6aab6f0 Mrdn 2y ago <AlertIcon />
466 6aab6f0 Mrdn 2y ago {error}
467 6aab6f0 Mrdn 2y ago </Alert>
468 6aab6f0 Mrdn 2y ago )}
469 6aab6f0 Mrdn 2y ago </VStack>
470 6aab6f0 Mrdn 2y ago </form>
471 89f8f93 Mardin 2y ago </ModalBody>
472 89f8f93 Mardin 2y ago </ModalContent>
473 89f8f93 Mardin 2y ago </Modal>
474 89f8f93 Mardin 2y ago );
475 89f8f93 Mardin 2y ago };