gitscope
/
← marzneshin / dashboard/src/features/hosts/dialogs/mutation/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/hosts/dialogs/mutation/index.tsx · v0.3.0-alpha7
Source
1 3b7feef Mrdn 2y ago
2 3b7feef Mrdn 2y ago import { FC, useEffect, useState } from "react";
3 3b7feef Mrdn 2y ago import {
4 3b7feef Mrdn 2y ago DialogTitle,
5 3b7feef Mrdn 2y ago DialogContent,
6 3b7feef Mrdn 2y ago Dialog,
7 3b7feef Mrdn 2y ago DialogHeader,
8 3b7feef Mrdn 2y ago Form,
9 3b7feef Mrdn 2y ago FormItem,
10 3b7feef Mrdn 2y ago FormControl,
11 3b7feef Mrdn 2y ago FormMessage,
12 3b7feef Mrdn 2y ago FormLabel,
13 3b7feef Mrdn 2y ago Input,
14 3b7feef Mrdn 2y ago FormField,
15 3b7feef Mrdn 2y ago Checkbox,
16 3b7feef Mrdn 2y ago Button,
17 3b7feef Mrdn 2y ago SelectItem,
18 3b7feef Mrdn 2y ago SelectContent,
19 3b7feef Mrdn 2y ago SelectValue,
20 3b7feef Mrdn 2y ago Select,
21 3b7feef Mrdn 2y ago SelectTrigger,
22 3b7feef Mrdn 2y ago Alert,
23 3b7feef Mrdn 2y ago AlertTitle,
24 3b7feef Mrdn 2y ago AlertDescription
25 3b7feef Mrdn 2y ago } from '@marzneshin/components';
26 3b7feef Mrdn 2y ago import { useForm } from 'react-hook-form';
27 3b7feef Mrdn 2y ago import { zodResolver } from '@hookform/resolvers/zod';
28 3b7feef Mrdn 2y ago import { useTranslation } from 'react-i18next';
29 3b7feef Mrdn 2y ago import {
30 3b7feef Mrdn 2y ago HostSchema,
31 3b7feef Mrdn 2y ago HostType,
32 3b7feef Mrdn 2y ago getDefaultValues,
33 3b7feef Mrdn 2y ago useHostsCreationMutation,
34 3b7feef Mrdn 2y ago useHostsUpdateMutation
35 3b7feef Mrdn 2y ago } from "@marzneshin/features/hosts";
36 3b7feef Mrdn 2y ago import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
37 3b7feef Mrdn 2y ago
38 3b7feef Mrdn 2y ago interface MutationDialogProps {
39 3b7feef Mrdn 2y ago entity: HostType | null
40 3b7feef Mrdn 2y ago open: boolean
41 3b7feef Mrdn 2y ago inboundId: number
42 3b7feef Mrdn 2y ago onOpenChange: (state: boolean) => void
43 3b7feef Mrdn 2y ago }
44 3b7feef Mrdn 2y ago
45 3b7feef Mrdn 2y ago
46 3b7feef Mrdn 2y ago export const HostsMutationDialog: FC<MutationDialogProps> = ({
47 3b7feef Mrdn 2y ago inboundId,
48 3b7feef Mrdn 2y ago entity,
49 3b7feef Mrdn 2y ago open,
50 3b7feef Mrdn 2y ago onOpenChange,
51 3b7feef Mrdn 2y ago }) => {
52 3b7feef Mrdn 2y ago const form = useForm({
53 3b7feef Mrdn 2y ago defaultValues: entity ? entity : getDefaultValues(),
54 3b7feef Mrdn 2y ago resolver: zodResolver(HostSchema)
55 3b7feef Mrdn 2y ago });
56 3b7feef Mrdn 2y ago const updateMutation = useHostsUpdateMutation();
57 3b7feef Mrdn 2y ago const createMutation = useHostsCreationMutation();
58 3b7feef Mrdn 2y ago const { t } = useTranslation();
59 3b7feef Mrdn 2y ago const security = form.watch().security
60 3b7feef Mrdn 2y ago const [extraSecurity, setExtraSecurity] = useState<boolean>(["tls", "inbound_default"].includes(security))
61 3b7feef Mrdn 2y ago
62 3b7feef Mrdn 2y ago useEffect(() => {
63 3b7feef Mrdn 2y ago setExtraSecurity(["tls", "inbound_default"].includes(security))
64 3b7feef Mrdn 2y ago }, [security, setExtraSecurity])
65 3b7feef Mrdn 2y ago
66 3b7feef Mrdn 2y ago const submit = (values: HostType) => {
67 3b7feef Mrdn 2y ago if (entity) {
68 3b7feef Mrdn 2y ago updateMutation.mutate({ inboundId, host: values });
69 3b7feef Mrdn 2y ago } else {
70 3b7feef Mrdn 2y ago createMutation.mutate({ inboundId, host: values });
71 3b7feef Mrdn 2y ago }
72 3b7feef Mrdn 2y ago onOpenChange(false);
73 3b7feef Mrdn 2y ago };
74 3b7feef Mrdn 2y ago
75 3b7feef Mrdn 2y ago useEffect(() => {
76 3b7feef Mrdn 2y ago if (entity) form.reset(entity);
77 3b7feef Mrdn 2y ago else form.reset(getDefaultValues());
78 3b7feef Mrdn 2y ago }, [entity, form]);
79 3b7feef Mrdn 2y ago
80 3b7feef Mrdn 2y ago return (
81 3b7feef Mrdn 2y ago <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={true}>
82 3b7feef Mrdn 2y ago <DialogContent>
83 3b7feef Mrdn 2y ago <DialogHeader>
84 3b7feef Mrdn 2y ago <DialogTitle className="text-primary">
85 3b7feef Mrdn 2y ago {entity
86 3b7feef Mrdn 2y ago ? t('page.hosts.dialogs.edition.title')
87 3b7feef Mrdn 2y ago : t('page.hosts.dialogs.creation.title')}
88 3b7feef Mrdn 2y ago </DialogTitle>
89 3b7feef Mrdn 2y ago </DialogHeader>
90 3b7feef Mrdn 2y ago <Form {...form}>
91 3b7feef Mrdn 2y ago <form onSubmit={form.handleSubmit(submit)}>
92 3b7feef Mrdn 2y ago <FormField
93 3b7feef Mrdn 2y ago control={form.control}
94 3b7feef Mrdn 2y ago name="remark"
95 3b7feef Mrdn 2y ago render={({ field }) => (
96 3b7feef Mrdn 2y ago <FormItem >
97 3b7feef Mrdn 2y ago <FormLabel>{t('name')}</FormLabel>
98 3b7feef Mrdn 2y ago <FormControl>
99 3b7feef Mrdn 2y ago <Input {...field} />
100 3b7feef Mrdn 2y ago </FormControl>
101 3b7feef Mrdn 2y ago <FormMessage />
102 3b7feef Mrdn 2y ago </FormItem>
103 3b7feef Mrdn 2y ago )}
104 3b7feef Mrdn 2y ago />
105 3b7feef Mrdn 2y ago <div className="flex flex-row gap-1 items-center">
106 3b7feef Mrdn 2y ago <FormField
107 3b7feef Mrdn 2y ago control={form.control}
108 3b7feef Mrdn 2y ago name="address"
109 3b7feef Mrdn 2y ago render={({ field }) => (
110 3b7feef Mrdn 2y ago <FormItem className="w-2/3">
111 3b7feef Mrdn 2y ago <FormLabel>{t('address')}</FormLabel>
112 3b7feef Mrdn 2y ago <FormControl>
113 3b7feef Mrdn 2y ago <Input {...field} />
114 3b7feef Mrdn 2y ago </FormControl>
115 3b7feef Mrdn 2y ago <FormMessage />
116 3b7feef Mrdn 2y ago </FormItem>
117 3b7feef Mrdn 2y ago )}
118 3b7feef Mrdn 2y ago />
119 3b7feef Mrdn 2y ago <FormField
120 3b7feef Mrdn 2y ago control={form.control}
121 3b7feef Mrdn 2y ago name="port"
122 3b7feef Mrdn 2y ago render={({ field }) => (
123 3b7feef Mrdn 2y ago <FormItem className="w-1/3">
124 3b7feef Mrdn 2y ago <FormLabel>{t('port')}</FormLabel>
125 3b7feef Mrdn 2y ago <FormControl>
126 3b7feef Mrdn 2y ago <Input type="number" {...field} />
127 3b7feef Mrdn 2y ago </FormControl>
128 3b7feef Mrdn 2y ago <FormMessage />
129 3b7feef Mrdn 2y ago </FormItem>
130 3b7feef Mrdn 2y ago )}
131 3b7feef Mrdn 2y ago />
132 3b7feef Mrdn 2y ago </div>
133 3b7feef Mrdn 2y ago <FormField
134 3b7feef Mrdn 2y ago control={form.control}
135 3b7feef Mrdn 2y ago name="path"
136 3b7feef Mrdn 2y ago render={({ field }) => (
137 3b7feef Mrdn 2y ago <FormItem >
138 3b7feef Mrdn 2y ago <FormLabel>{t('path')}</FormLabel>
139 3b7feef Mrdn 2y ago <FormControl>
140 3b7feef Mrdn 2y ago <Input {...field} />
141 3b7feef Mrdn 2y ago </FormControl>
142 3b7feef Mrdn 2y ago <FormMessage />
143 3b7feef Mrdn 2y ago </FormItem>
144 3b7feef Mrdn 2y ago )}
145 3b7feef Mrdn 2y ago />
146 3b7feef Mrdn 2y ago
147 3b7feef Mrdn 2y ago <FormField
148 3b7feef Mrdn 2y ago control={form.control}
149 3b7feef Mrdn 2y ago name="host"
150 3b7feef Mrdn 2y ago render={({ field }) => (
151 3b7feef Mrdn 2y ago <FormItem >
152 3b7feef Mrdn 2y ago <FormLabel>{t('host')}</FormLabel>
153 3b7feef Mrdn 2y ago <FormControl>
154 3b7feef Mrdn 2y ago <Input {...field} />
155 3b7feef Mrdn 2y ago </FormControl>
156 3b7feef Mrdn 2y ago <FormMessage />
157 3b7feef Mrdn 2y ago </FormItem>
158 3b7feef Mrdn 2y ago )}
159 3b7feef Mrdn 2y ago />
160 3b7feef Mrdn 2y ago
161 3b7feef Mrdn 2y ago <FormField
162 3b7feef Mrdn 2y ago control={form.control}
163 3b7feef Mrdn 2y ago name="security"
164 3b7feef Mrdn 2y ago render={({ field }) => (
165 3b7feef Mrdn 2y ago <FormItem>
166 3b7feef Mrdn 2y ago <FormLabel>{t('security')}</FormLabel>
167 3b7feef Mrdn 2y ago <Select onValueChange={field.onChange} defaultValue={field.value}>
168 3b7feef Mrdn 2y ago <FormControl>
169 3b7feef Mrdn 2y ago <SelectTrigger>
170 3b7feef Mrdn 2y ago <SelectValue placeholder="Select a verified email to display" />
171 3b7feef Mrdn 2y ago </SelectTrigger>
172 3b7feef Mrdn 2y ago </FormControl>
173 3b7feef Mrdn 2y ago <SelectContent>
174 3b7feef Mrdn 2y ago <SelectItem value="none">None</SelectItem>
175 3b7feef Mrdn 2y ago <SelectItem value="tls">TLS</SelectItem>
176 3b7feef Mrdn 2y ago <SelectItem value="inbound_default">Inbound Default</SelectItem>
177 3b7feef Mrdn 2y ago </SelectContent>
178 3b7feef Mrdn 2y ago </Select>
179 3b7feef Mrdn 2y ago <FormMessage />
180 3b7feef Mrdn 2y ago </FormItem>
181 3b7feef Mrdn 2y ago )}
182 3b7feef Mrdn 2y ago />
183 3b7feef Mrdn 2y ago {extraSecurity &&
184 3b7feef Mrdn 2y ago <>
185 3b7feef Mrdn 2y ago <FormField
186 3b7feef Mrdn 2y ago control={form.control}
187 3b7feef Mrdn 2y ago name="sni"
188 3b7feef Mrdn 2y ago render={({ field }) => (
189 3b7feef Mrdn 2y ago <FormItem >
190 3b7feef Mrdn 2y ago <FormLabel>{t('SNI')}</FormLabel>
191 3b7feef Mrdn 2y ago <FormControl>
192 3b7feef Mrdn 2y ago <Input {...field} />
193 3b7feef Mrdn 2y ago </FormControl>
194 3b7feef Mrdn 2y ago <FormMessage />
195 3b7feef Mrdn 2y ago </FormItem>
196 3b7feef Mrdn 2y ago )}
197 3b7feef Mrdn 2y ago />
198 3b7feef Mrdn 2y ago
199 3b7feef Mrdn 2y ago <FormField
200 3b7feef Mrdn 2y ago control={form.control}
201 3b7feef Mrdn 2y ago name="alpn"
202 3b7feef Mrdn 2y ago render={({ field }) => (
203 3b7feef Mrdn 2y ago <FormItem>
204 3b7feef Mrdn 2y ago <FormLabel>{t('alpn')}</FormLabel>
205 3b7feef Mrdn 2y ago <Select onValueChange={field.onChange} defaultValue={field.value}>
206 3b7feef Mrdn 2y ago <FormControl>
207 3b7feef Mrdn 2y ago <SelectTrigger>
208 3b7feef Mrdn 2y ago <SelectValue placeholder="Select ALPN" />
209 3b7feef Mrdn 2y ago </SelectTrigger>
210 3b7feef Mrdn 2y ago </FormControl>
211 3b7feef Mrdn 2y ago <SelectContent>
212 3b7feef Mrdn 2y ago <SelectItem value="none">None</SelectItem>
213 3b7feef Mrdn 2y ago <SelectItem value="h2">h2</SelectItem>
214 3b7feef Mrdn 2y ago <SelectItem value="http/1.1">HTTP 1.1</SelectItem>
215 3b7feef Mrdn 2y ago <SelectItem value="h2,http/1.1"> H2 HTTP 1.1</SelectItem>
216 3b7feef Mrdn 2y ago </SelectContent>
217 3b7feef Mrdn 2y ago </Select>
218 3b7feef Mrdn 2y ago <FormMessage />
219 3b7feef Mrdn 2y ago </FormItem>
220 3b7feef Mrdn 2y ago )}
221 3b7feef Mrdn 2y ago />
222 3b7feef Mrdn 2y ago
223 3b7feef Mrdn 2y ago <FormField
224 3b7feef Mrdn 2y ago control={form.control}
225 3b7feef Mrdn 2y ago name="fingerprint"
226 3b7feef Mrdn 2y ago render={({ field }) => (
227 3b7feef Mrdn 2y ago <FormItem>
228 3b7feef Mrdn 2y ago <FormLabel>{t('fingerprint')}</FormLabel>
229 3b7feef Mrdn 2y ago <Select onValueChange={field.onChange} defaultValue={field.value}>
230 3b7feef Mrdn 2y ago <FormControl>
231 3b7feef Mrdn 2y ago <SelectTrigger>
232 3b7feef Mrdn 2y ago <SelectValue placeholder="Select fingerprint" />
233 3b7feef Mrdn 2y ago </SelectTrigger>
234 3b7feef Mrdn 2y ago </FormControl>
235 3b7feef Mrdn 2y ago <SelectContent>
236 3b7feef Mrdn 2y ago <SelectItem value="none">None</SelectItem>
237 3b7feef Mrdn 2y ago <SelectItem value="chrome">Chrome</SelectItem>
238 3b7feef Mrdn 2y ago <SelectItem value="firefox">Firefox</SelectItem>
239 3b7feef Mrdn 2y ago <SelectItem value="safari">Safari</SelectItem>
240 3b7feef Mrdn 2y ago <SelectItem value="ios">iOS</SelectItem>
241 3b7feef Mrdn 2y ago <SelectItem value="android">Android</SelectItem>
242 3b7feef Mrdn 2y ago <SelectItem value="edge">Edge</SelectItem>
243 3b7feef Mrdn 2y ago <SelectItem value="360">360</SelectItem>
244 3b7feef Mrdn 2y ago <SelectItem value="qq">qq</SelectItem>
245 3b7feef Mrdn 2y ago <SelectItem value="random">Random</SelectItem>
246 3b7feef Mrdn 2y ago <SelectItem value="randomized">Randomized</SelectItem>
247 3b7feef Mrdn 2y ago </SelectContent>
248 3b7feef Mrdn 2y ago </Select>
249 3b7feef Mrdn 2y ago <FormMessage />
250 3b7feef Mrdn 2y ago </FormItem>
251 3b7feef Mrdn 2y ago )}
252 3b7feef Mrdn 2y ago />
253 3b7feef Mrdn 2y ago
254 3b7feef Mrdn 2y ago <FormField
255 3b7feef Mrdn 2y ago control={form.control}
256 3b7feef Mrdn 2y ago name="allowinsecure"
257 3b7feef Mrdn 2y ago render={({ field }) => (
258 3b7feef Mrdn 2y ago <FormItem className="my-2">
259 3b7feef Mrdn 2y ago <FormControl>
260 3b7feef Mrdn 2y ago <div className="flex flex-row gap-1 items-center">
261 3b7feef Mrdn 2y ago <Checkbox
262 3b7feef Mrdn 2y ago checked={field.value}
263 3b7feef Mrdn 2y ago onCheckedChange={field.onChange}
264 3b7feef Mrdn 2y ago />
265 3b7feef Mrdn 2y ago <FormLabel>
266 3b7feef Mrdn 2y ago {t('page.hosts.allowinsecure')}
267 3b7feef Mrdn 2y ago </FormLabel>
268 3b7feef Mrdn 2y ago </div>
269 3b7feef Mrdn 2y ago </FormControl>
270 3b7feef Mrdn 2y ago <FormMessage />
271 3b7feef Mrdn 2y ago {form.getValues().allowinsecure &&
272 3b7feef Mrdn 2y ago <Alert variant="destructive">
273 3b7feef Mrdn 2y ago <ExclamationTriangleIcon className="w-4 h-4" />
274 3b7feef Mrdn 2y ago <AlertTitle>
275 3b7feef Mrdn 2y ago Warning
276 3b7feef Mrdn 2y ago </AlertTitle>
277 3b7feef Mrdn 2y ago <AlertDescription>
278 3b7feef Mrdn 2y ago {t('page.hosts.dialogs.mutation.allowinsecure.alert')}
279 3b7feef Mrdn 2y ago </AlertDescription>
280 3b7feef Mrdn 2y ago </Alert>}
281 3b7feef Mrdn 2y ago </FormItem>
282 3b7feef Mrdn 2y ago )}
283 3b7feef Mrdn 2y ago />
284 3b7feef Mrdn 2y ago </>
285 3b7feef Mrdn 2y ago }
286 3b7feef Mrdn 2y ago <Button
287 3b7feef Mrdn 2y ago className="mt-3 w-full font-semibold"
288 3b7feef Mrdn 2y ago type="submit"
289 3b7feef Mrdn 2y ago disabled={form.formState.isSubmitting}
290 3b7feef Mrdn 2y ago >
291 3b7feef Mrdn 2y ago {t('submit')}
292 3b7feef Mrdn 2y ago </Button>
293 3b7feef Mrdn 2y ago </form>
294 3b7feef Mrdn 2y ago </Form>
295 3b7feef Mrdn 2y ago </DialogContent>
296 3b7feef Mrdn 2y ago </Dialog>
297 3b7feef Mrdn 2y ago );
298 3b7feef Mrdn 2y ago };