Add forms and validation for domains (#27)

apps/web/src/app/(dashboard)/domains/[domainId]/delete-domain.tsx

@@ -12,22 +12,51 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@unsend/ui/src/dialog";
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@unsend/ui/src/form";
+
 import { api } from "~/trpc/react";
 import React, { useState } from "react";
 import { Domain } from "@prisma/client";
 import { useRouter } from "next/navigation";
 import { toast } from "@unsend/ui/src/toaster";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+const domainSchema = z.object({
+  domain: z.string(),
+});
 
 export const DeleteDomain: React.FC<{ domain: Domain }> = ({ domain }) => {
   const [open, setOpen] = useState(false);
   const [domainName, setDomainName] = useState("");
   const deleteDomainMutation = api.domain.deleteDomain.useMutation();
 
+  const domainForm = useForm<z.infer<typeof domainSchema>>({
+    resolver: zodResolver(domainSchema),
+  });
+
   const utils = api.useUtils();
 
   const router = useRouter();
 
-  function handleSave() {
+  async function onDomainDelete(values: z.infer<typeof domainSchema>) {
+    if (values.domain !== domain.name) {
+      domainForm.setError("domain", {
+        message: "Domain name does not match",
+      });
+      return;
+    }
+
     deleteDomainMutation.mutate(
       {
         id: domain.id,
@@ -62,30 +91,41 @@ export const DeleteDomain: React.FC<{ domain: Domain }> = ({ domain }) => {
             You can't reverse this.
           </DialogDescription>
         </DialogHeader>
-        <div className="py-2">
-          <Label htmlFor="name" className="text-right">
-            Type <span className="text-primary">{domain.name}</span> to confirm
-          </Label>
-          <Input
-            id="name"
-            defaultValue=""
-            className="mt-2"
-            onChange={(e) => setDomainName(e.target.value)}
-            value={domainName}
-          />
-        </div>
-        <DialogFooter>
-          <Button
-            type="submit"
-            variant="destructive"
-            onClick={handleSave}
-            disabled={
-              deleteDomainMutation.isPending || domainName !== domain.name
-            }
+        <Form {...domainForm}>
+          <form
+            onSubmit={domainForm.handleSubmit(onDomainDelete)}
+            className="space-y-4"
           >
-            {deleteDomainMutation.isPending ? "Deleting..." : "Delete"}
-          </Button>
-        </DialogFooter>
+            <FormField
+              control={domainForm.control}
+              name="domain"
+              render={({ field, formState }) => (
+                <FormItem>
+                  <FormLabel>Domain</FormLabel>
+                  <FormControl>
+                    <Input placeholder="subdomain.example.com" {...field} />
+                  </FormControl>
+                  {formState.errors.domain ? (
+                    <FormMessage />
+                  ) : (
+                    <FormDescription className=" text-transparent">
+                      .
+                    </FormDescription>
+                  )}
+                </FormItem>
+              )}
+            />
+            <div className="flex justify-end">
+              <Button
+                type="submit"
+                variant="destructive"
+                disabled={deleteDomainMutation.isPending}
+              >
+                {deleteDomainMutation.isPending ? "Deleting..." : "Delete"}
+              </Button>
+            </div>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

apps/web/src/app/(dashboard)/domains/add-domain.tsx

@@ -2,34 +2,60 @@
 
 import { Button } from "@unsend/ui/src/button";
 import { Input } from "@unsend/ui/src/input";
-import { Label } from "@unsend/ui/src/label";
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from "@unsend/ui/src/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@unsend/ui/src/form";
 
 import { api } from "~/trpc/react";
 import { useState } from "react";
 import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
+import * as tldts from "tldts";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+const domainSchema = z.object({
+  domain: z.string({ required_error: "Domain is required" }),
+});
 
 export default function AddDomain() {
   const [open, setOpen] = useState(false);
-  const [domainName, setDomainName] = useState("");
   const addDomainMutation = api.domain.createDomain.useMutation();
 
+  const domainForm = useForm<z.infer<typeof domainSchema>>({
+    resolver: zodResolver(domainSchema),
+  });
+
   const utils = api.useUtils();
   const router = useRouter();
 
-  function handleSave() {
+  async function onDomainAdd(values: z.infer<typeof domainSchema>) {
+    const domain = tldts.getDomain(values.domain);
+    if (!domain) {
+      domainForm.setError("domain", {
+        message: "Invalid domain",
+      });
+
+      return;
+    }
+
     addDomainMutation.mutate(
       {
-        name: domainName,
+        name: values.domain,
       },
       {
         onSuccess: async (data) => {
@@ -55,30 +81,45 @@ export default function AddDomain() {
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Add a new domain</DialogTitle>
-          <DialogDescription>This creates a new domain</DialogDescription>
         </DialogHeader>
         <div className="py-2">
-          <Label htmlFor="name" className="text-right">
-            Domain Name
-          </Label>
-          <Input
-            id="name"
-            placeholder="subdomain.example.com"
-            defaultValue=""
-            className="col-span-3"
-            onChange={(e) => setDomainName(e.target.value)}
-            value={domainName}
-          />
+          <Form {...domainForm}>
+            <form
+              onSubmit={domainForm.handleSubmit(onDomainAdd)}
+              className="space-y-8"
+            >
+              <FormField
+                control={domainForm.control}
+                name="domain"
+                render={({ field, formState }) => (
+                  <FormItem>
+                    <FormLabel>Domain</FormLabel>
+                    <FormControl>
+                      <Input placeholder="subdomain.example.com" {...field} />
+                    </FormControl>
+                    {formState.errors.domain ? (
+                      <FormMessage />
+                    ) : (
+                      <FormDescription>
+                        Use subdomains to separate transactional and marketing
+                        emails.{" "}
+                      </FormDescription>
+                    )}
+                  </FormItem>
+                )}
+              />
+              <div className="flex justify-end">
+                <Button
+                  className=" w-[100px] bg-white hover:bg-gray-100 focus:bg-gray-100"
+                  type="submit"
+                  disabled={addDomainMutation.isPending}
+                >
+                  {addDomainMutation.isPending ? "Adding..." : "Add"}
+                </Button>
+              </div>
+            </form>
+          </Form>
         </div>
-        <DialogFooter>
-          <Button
-            type="submit"
-            onClick={handleSave}
-            disabled={addDomainMutation.isPending}
-          >
-            Save changes
-          </Button>
-        </DialogFooter>
       </DialogContent>
     </Dialog>
   );