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