diff --git a/apps/dokploy/components/dashboard/settings/servers/add-server.tsx b/apps/dokploy/components/dashboard/settings/servers/add-server.tsx new file mode 100644 index 000000000..3fbb82975 --- /dev/null +++ b/apps/dokploy/components/dashboard/settings/servers/add-server.tsx @@ -0,0 +1,253 @@ +import { AlertBlock } from "@/components/shared/alert-block"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { api } from "@/utils/api"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { PlusIcon } from "lucide-react"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; +import { useForm } from "react-hook-form"; +import { toast } from "sonner"; +import { z } from "zod"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; + +const Schema = z.object({ + name: z.string().min(1, { + message: "Name is required", + }), + description: z.string().optional(), + ipAddress: z.string().min(1, { + message: "IP Address is required", + }), + port: z.number().optional(), + username: z.string().optional(), + sshKeyId: z.string().min(1, { + message: "SSH Key is required", + }), +}); + +type Schema = z.infer; + +export const AddServer = () => { + const utils = api.useUtils(); + const [isOpen, setIsOpen] = useState(false); + const { data: sshKeys } = api.sshKey.all.useQuery(); + const { mutateAsync, error, isError } = api.server.create.useMutation(); + const form = useForm({ + defaultValues: { + description: "", + name: "", + ipAddress: "", + port: 22, + username: "root", + sshKeyId: "", + }, + resolver: zodResolver(Schema), + }); + + useEffect(() => { + form.reset({ + description: "", + name: "", + ipAddress: "", + port: 22, + username: "root", + sshKeyId: "", + }); + }, [form, form.reset, form.formState.isSubmitSuccessful]); + + const onSubmit = async (data: Schema) => { + await mutateAsync({ + name: data.name, + description: data.description || "", + ipAddress: data.ipAddress || "", + port: data.port || 22, + username: data.username || "root", + sshKeyId: data.sshKeyId || "", + }) + .then(async (data) => { + await utils.server.all.invalidate(); + toast.success("Server Created"); + setIsOpen(false); + }) + .catch(() => { + toast.error("Error to create a server"); + }); + }; + + return ( + + + + + + + Add Server + + Add a server to deploy your applications remotely. + + + {isError && {error?.message}} +
+ +
+ ( + + Name + + + + + + + )} + /> +
+ ( + + Description + +