1import {
2 FormControl,
3 FormField,
4 FormItem,
5 FormLabel,
6 FormMessage,
7 Select,
8 SelectContent,
9 SelectItem,
10 SelectTrigger,
11 SelectValue,
12} from "@marzneshin/common/components";
13import { useEffect, useState } from "react";
14import { useFormContext } from "react-hook-form";
15import { useTranslation } from "react-i18next";
16import { AllowInsecureField, AlpnField, FingerprintField, SniField } from ".";
17
18export const SecurityFields = () => {
19 const { t } = useTranslation();
20 const form = useFormContext();
21 const security = form.watch().security;
22
23 const [extraSecurity, setExtraSecurity] = useState<boolean>(
24 ["tls", "inbound_default"].includes(security),
25 );
26 useEffect(() => {
27 setExtraSecurity(["tls", "inbound_default"].includes(security));
28 }, [security, setExtraSecurity]);
29
30 return (
31 <>
32 <FormField
33 control={form.control}
34 name="security"
35 render={({ field }) => (
36 <FormItem>
37 <FormLabel>{t("security")}</FormLabel>
38 <Select onValueChange={field.onChange} defaultValue={field.value}>
39 <FormControl>
40 <SelectTrigger>
41 <SelectValue placeholder="Select a verified email to display" />
42 </SelectTrigger>
43 </FormControl>
44 <SelectContent>
45 <SelectItem value="none">None</SelectItem>
46 <SelectItem value="tls">TLS</SelectItem>
47 <SelectItem value="inbound_default">Inbound Default</SelectItem>
48 </SelectContent>
49 </Select>
50 <FormMessage />
51 </FormItem>
52 )}
53 />
54 {extraSecurity && (
55 <>
56 <SniField />
57 <div className="flex flex-row w-full gap-2">
58 <AlpnField />
59 <FingerprintField />
60 </div>
61 <AllowInsecureField />
62 </>
63 )}
64 </>
65 );
66};