diff --git a/components/dashboard/application/domains/add-domain.tsx b/components/dashboard/application/domains/add-domain.tsx index 17adf275..71e44f92 100644 --- a/components/dashboard/application/domains/add-domain.tsx +++ b/components/dashboard/application/domains/add-domain.tsx @@ -28,84 +28,103 @@ import { } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; import { api } from "@/utils/api"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { PlusIcon } from "lucide-react"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { toast } from "sonner"; -import { z } from "zod"; -// const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/; -// .regex(hostnameRegex -const addDomain = z.object({ - host: z.string().min(1, "Hostname is required"), - path: z.string().min(1), - port: z.number(), - https: z.boolean(), - certificateType: z.enum(["letsencrypt", "none"]), -}); +import { domain } from "@/server/db/validations"; +import { zodResolver } from "@hookform/resolvers/zod"; +import type z from "zod"; -type AddDomain = z.infer; +type Domain = z.infer; interface Props { applicationId: string; - children?: React.ReactNode; + domainId?: string; + children: React.ReactNode; } export const AddDomain = ({ applicationId, - children = , + domainId = "", + children, }: Props) => { + const [isOpen, setIsOpen] = useState(false); const utils = api.useUtils(); - - const { mutateAsync, isError, error } = api.domain.create.useMutation(); - - const form = useForm({ - defaultValues: { - host: "", - https: false, - path: "/", - port: 3000, - certificateType: "none", + const { data, refetch } = api.domain.one.useQuery( + { + domainId, }, - resolver: zodResolver(addDomain), + { + enabled: !!domainId, + }, + ); + + const { mutateAsync, isError, error, isLoading } = domainId + ? api.domain.update.useMutation() + : api.domain.create.useMutation(); + + const form = useForm({ + resolver: zodResolver(domain), }); useEffect(() => { - form.reset(); - }, [form, form.reset, form.formState.isSubmitSuccessful]); + if (data) { + form.reset({ + ...data, + /* Convert null to undefined */ + path: data?.path || undefined, + port: data?.port || undefined, + }); + } - const onSubmit = async (data: AddDomain) => { + if (!domainId) { + form.reset({}); + } + }, [form, form.reset, data, isLoading]); + + const dictionary = { + success: domainId ? "Domain Updated" : "Domain Created", + error: domainId + ? "Error to update the domain" + : "Error to create the domain", + submit: domainId ? "Update" : "Create", + dialogDescription: domainId + ? "In this section you can edit a domain" + : "In this section you can add domains", + }; + + const onSubmit = async (data: Domain) => { await mutateAsync({ + domainId, applicationId, - host: data.host, - https: data.https, - path: data.path, - port: data.port, - certificateType: data.certificateType, + ...data, }) .then(async () => { - toast.success("Domain Created"); + toast.success(dictionary.success); await utils.domain.byApplicationId.invalidate({ applicationId, }); await utils.application.readTraefikConfig.invalidate({ applicationId }); + + if (domainId) { + refetch(); + } + setIsOpen(false); }) .catch(() => { - toast.error("Error to create the domain"); + toast.error(dictionary.error); }); }; return ( - + - + {children} Domain - - In this section you can add custom domains - + {dictionary.dialogDescription} {isError && {error?.message}} @@ -169,33 +188,36 @@ export const AddDomain = ({ ); }} /> - ( - - Certificate - + + + + + + + + None + + Letsencrypt (Default) + + + + + + )} + /> + )} - - None - - Letsencrypt (Default) - - - - - - )} - /> Automatically provision SSL Certificate. + - Create + {dictionary.submit} diff --git a/components/dashboard/application/domains/show-domains.tsx b/components/dashboard/application/domains/show-domains.tsx index 5aed3524..d7724ce7 100644 --- a/components/dashboard/application/domains/show-domains.tsx +++ b/components/dashboard/application/domains/show-domains.tsx @@ -8,13 +8,11 @@ import { } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { api } from "@/utils/api"; -import { ExternalLink, GlobeIcon, RefreshCcw } from "lucide-react"; +import { ExternalLink, GlobeIcon, PenBoxIcon } from "lucide-react"; import Link from "next/link"; -import React from "react"; import { AddDomain } from "./add-domain"; import { DeleteDomain } from "./delete-domain"; import { GenerateDomain } from "./generate-domain"; -import { UpdateDomain } from "./update-domain"; interface Props { applicationId: string; @@ -43,7 +41,9 @@ export const ShowDomains = ({ applicationId }: Props) => {
{data && data?.length > 0 && ( - Add Domain + )} {data && data?.length > 0 && ( @@ -61,7 +61,9 @@ export const ShowDomains = ({ applicationId }: Props) => {
- Add Domain + @@ -90,7 +92,14 @@ export const ShowDomains = ({ applicationId }: Props) => { {item.https ? "HTTPS" : "HTTP"}
- + + +
diff --git a/components/dashboard/application/domains/update-domain.tsx b/components/dashboard/application/domains/update-domain.tsx deleted file mode 100644 index 6614a480..00000000 --- a/components/dashboard/application/domains/update-domain.tsx +++ /dev/null @@ -1,254 +0,0 @@ -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, - FormDescription, - FormField, - FormItem, - FormLabel, - FormMessage, -} from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; -import { Switch } from "@/components/ui/switch"; -import { api } from "@/utils/api"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { PenBoxIcon } from "lucide-react"; -import { useEffect } from "react"; -import { useForm } from "react-hook-form"; -import { toast } from "sonner"; -import { z } from "zod"; - -const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/; - -const updateDomain = z.object({ - host: z.string().regex(hostnameRegex, { message: "Invalid hostname" }), - path: z.string().min(1), - port: z - .number() - .min(1, { message: "Port must be at least 1" }) - .max(65535, { message: "Port must be 65535 or below" }), - https: z.boolean(), - certificateType: z.enum(["letsencrypt", "none"]), -}); - -type UpdateDomain = z.infer; - -interface Props { - domainId: string; -} - -export const UpdateDomain = ({ domainId }: Props) => { - const utils = api.useUtils(); - const { data, refetch } = api.domain.one.useQuery( - { - domainId, - }, - { - enabled: !!domainId, - }, - ); - const { mutateAsync, isError, error } = api.domain.update.useMutation(); - - const form = useForm({ - defaultValues: { - host: "", - https: true, - path: "/", - port: 3000, - certificateType: "none", - }, - resolver: zodResolver(updateDomain), - }); - - useEffect(() => { - if (data) { - form.reset({ - host: data.host || "", - port: data.port || 3000, - path: data.path || "/", - https: data.https, - certificateType: data.certificateType, - }); - } - }, [form, form.reset, data]); - - const onSubmit = async (data: UpdateDomain) => { - await mutateAsync({ - domainId, - host: data.host, - https: data.https, - path: data.path, - port: data.port, - certificateType: data.certificateType, - }) - .then(async (data) => { - toast.success("Domain Updated"); - await refetch(); - await utils.domain.byApplicationId.invalidate({ - applicationId: data?.applicationId, - }); - await utils.application.readTraefikConfig.invalidate({ - applicationId: data?.applicationId, - }); - }) - .catch(() => { - toast.error("Error to update the domain"); - }); - }; - return ( - - - - - - - Domain - - In this section you can add custom domains - - - {isError && {error?.message}} - -
- -
-
- ( - - Host - - - - - - - )} - /> - - { - return ( - - Path - - - - - - ); - }} - /> - - { - return ( - - Container Port - - { - field.onChange(Number.parseInt(e.target.value)); - }} - /> - - - - ); - }} - /> - ( - - Certificate - - - - )} - /> - ( - -
- HTTPS - - Automatically provision SSL Certificate. - -
- - - - - )} - /> -
-
-
- - - - - - - - ); -}; diff --git a/server/db/schema/domain.ts b/server/db/schema/domain.ts index 3ceca6b5..48dc05a7 100644 --- a/server/db/schema/domain.ts +++ b/server/db/schema/domain.ts @@ -1,8 +1,8 @@ +import { domain } from "@/server/db/validations"; import { relations } from "drizzle-orm"; import { boolean, integer, pgTable, serial, text } from "drizzle-orm/pg-core"; import { createInsertSchema } from "drizzle-zod"; import { nanoid } from "nanoid"; -import { z } from "zod"; import { applications } from "./application"; import { certificateType } from "./shared"; @@ -31,27 +31,17 @@ export const domainsRelations = relations(domains, ({ one }) => ({ references: [applications.applicationId], }), })); -const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/; -const createSchema = createInsertSchema(domains, { - domainId: z.string().min(1), - host: z.string().min(1), - path: z.string().min(1), - port: z.number(), - https: z.boolean(), - applicationId: z.string(), - certificateType: z.enum(["letsencrypt", "none"]), -}); -export const apiCreateDomain = createSchema - .pick({ - host: true, - path: true, - port: true, - https: true, - applicationId: true, - certificateType: true, - }) - .required(); +const createSchema = createInsertSchema(domains, domain._def.schema.shape); + +export const apiCreateDomain = createSchema.pick({ + host: true, + path: true, + port: true, + https: true, + applicationId: true, + certificateType: true, +}); export const apiFindDomain = createSchema .pick({ @@ -59,19 +49,16 @@ export const apiFindDomain = createSchema }) .required(); -export const apiFindDomainByApplication = createSchema - .pick({ - applicationId: true, - }) - .required(); +export const apiFindDomainByApplication = createSchema.pick({ + applicationId: true, +}); export const apiUpdateDomain = createSchema .pick({ - domainId: true, host: true, path: true, port: true, https: true, certificateType: true, }) - .required(); + .merge(createSchema.pick({ domainId: true }).required()); diff --git a/server/db/validations/index.ts b/server/db/validations/index.ts new file mode 100644 index 00000000..fcb6117a --- /dev/null +++ b/server/db/validations/index.ts @@ -0,0 +1,25 @@ +import { z } from "zod"; + +export const domain = z + .object({ + host: z.string().regex(/^[a-zA-Z0-9][a-zA-Z0-9\.-]*\.[a-zA-Z]{2,}$/, { + message: "Invalid hostname", + }), + path: z.string().min(1).optional(), + port: z + .number() + .min(1, { message: "Port must be at least 1" }) + .max(65535, { message: "Port must be 65535 or below" }) + .optional(), + https: z.boolean().optional(), + certificateType: z.enum(["letsencrypt", "none"]).optional(), + }) + .superRefine((input, ctx) => { + if (input.https && !input.certificateType) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + path: ["certificateType"], + message: "Required", + }); + } + });