1
 2import {
 3    Alert,
 4    AlertDescription,
 5    AlertTitle,
 6    Checkbox,
 7    FormControl,
 8    FormField,
 9    FormItem,
10    FormLabel,
11    FormMessage,
12} from "@marzneshin/components";
13import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
14import { useFormContext } from "react-hook-form";
15import { useTranslation } from "react-i18next";
16
17export const AllowInsecureField = () => {
18    const { t } = useTranslation()
19    const form = useFormContext()
20    return (
21        <FormField
22            control={form.control}
23            name="allowinsecure"
24            render={({ field }) => (
25                <FormItem className="my-2">
26                    <FormControl>
27                        <div className="flex flex-row gap-1 items-center">
28                            <Checkbox
29                                checked={field.value}
30                                onCheckedChange={field.onChange}
31                            />
32                            <FormLabel>
33                                {t('page.hosts.allowinsecure')}
34                            </FormLabel>
35                        </div>
36                    </FormControl>
37                    <FormMessage />
38                    {form.getValues().allowinsecure &&
39                        <Alert variant="destructive">
40                            <ExclamationTriangleIcon className="w-4 h-4" />
41                            <AlertTitle>
42                                Warning
43                            </AlertTitle>
44                            <AlertDescription>
45                                {t('page.hosts.dialogs.mutation.allowinsecure.alert')}
46                            </AlertDescription>
47                        </Alert>}
48                </FormItem>
49            )}
50        />
51    )
52}