Add verify domain button (#22)

apps/web/prisma/migrations/20240527202531_add_is_verifying/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Domain" ADD COLUMN     "isVerifying" BOOLEAN NOT NULL DEFAULT false;

apps/web/prisma/schema.prisma

@@ -115,6 +115,7 @@ model Domain {
   dmarcAdded    Boolean      @default(false)
   errorMessage  String?
   subdomain     String?
+  isVerifying   Boolean      @default(false)
   createdAt     DateTime     @default(now())
   updatedAt     DateTime     @updatedAt
   team          Team         @relation(fields: [teamId], references: [id], onDelete: Cascade)

apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx

@@ -24,15 +24,35 @@ import React from "react";
 import { Switch } from "@unsend/ui/src/switch";
 import DeleteDomain from "./delete-domain";
 import SendTestMail from "./send-test-mail";
+import { Button } from "@unsend/ui/src/button";
 
 export default function DomainItemPage({
   params,
 }: {
   params: { domainId: string };
 }) {
-  const domainQuery = api.domain.getDomain.useQuery({
+  const domainQuery = api.domain.getDomain.useQuery(
+    {
       id: Number(params.domainId),
-  });
+    },
+    {
+      refetchInterval: (q) => (q?.state.data?.isVerifying ? 10000 : false),
+      refetchIntervalInBackground: true,
+    }
+  );
+
+  const verifyQuery = api.domain.startVerification.useMutation();
+
+  const handleVerify = () => {
+    verifyQuery.mutate(
+      { id: Number(params.domainId) },
+      {
+        onSettled: () => {
+          domainQuery.refetch();
+        },
+      }
+    );
+  };
 
   return (
     <div>
@@ -67,10 +87,25 @@ export default function DomainItemPage({
                 />
               </div>
             </div>
+            <div className="flex gap-4">
+              <div>
+                <Button
+                  variant="outline"
+                  onClick={handleVerify}
+                  disabled={domainQuery.data?.isVerifying}
+                >
+                  {domainQuery.data?.isVerifying
+                    ? "Verifying..."
+                    : domainQuery.data?.status === DomainStatus.SUCCESS
+                      ? "Verify again"
+                      : "Verify domain"}
+                </Button>
+              </div>
               {domainQuery.data ? (
                 <SendTestMail domain={domainQuery.data} />
               ) : null}
             </div>
+          </div>
 
           <div className=" border rounded-lg p-4">
             <p className="font-semibold text-xl">DNS records</p>
@@ -155,9 +190,14 @@ export default function DomainItemPage({
                 <TableRow>
                   <TableCell className="">TXT</TableCell>
                   <TableCell>
+                    <div className="flex gap-2 items-center">
+                      <span className="text-sm text-muted-foreground">
+                        (optional)
+                      </span>
                       <TextWithCopyButton
                         value={`_dmarc.${domainQuery.data?.subdomain || domainQuery.data?.name}`}
                       />
+                    </div>
                   </TableCell>
                   <TableCell className="">
                     <TextWithCopyButton

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

@@ -16,6 +16,7 @@ import {
 import { api } from "~/trpc/react";
 import { useState } from "react";
 import { Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 export default function AddDomain() {
   const [open, setOpen] = useState(false);
@@ -23,6 +24,7 @@ export default function AddDomain() {
   const addDomainMutation = api.domain.createDomain.useMutation();
 
   const utils = api.useUtils();
+  const router = useRouter();
 
   function handleSave() {
     addDomainMutation.mutate(
@@ -30,8 +32,9 @@ export default function AddDomain() {
         name: domainName,
       },
       {
-        onSuccess: () => {
+        onSuccess: async (data) => {
           utils.domain.domains.invalidate();
+          await router.push(`/domains/${data.id}`);
           setOpen(false);
         },
       }

apps/web/src/server/api/routers/domain.ts

@@ -17,6 +17,15 @@ export const domainRouter = createTRPCRouter({
       return createDomain(ctx.team.id, input.name);
     }),
 
+  startVerification: teamProcedure
+    .input(z.object({ id: z.number() }))
+    .mutation(async ({ ctx, input }) => {
+      await ctx.db.domain.update({
+        where: { id: input.id },
+        data: { isVerifying: true },
+      });
+    }),
+
   domains: teamProcedure.query(async ({ ctx }) => {
     const domains = await db.domain.findMany({
       where: {

apps/web/src/server/service/domain-service.ts

@@ -33,7 +33,7 @@ export async function getDomain(id: number) {
     throw new Error("Domain not found");
   }
 
-  if (domain.status !== "SUCCESS") {
+  if (domain.isVerifying) {
     const domainIdentity = await ses.getDomainIdentity(
       domain.name,
       domain.region
@@ -48,15 +48,6 @@ export async function getDomain(id: number) {
     const _dmarcRecord = await getDmarcRecord(domain.name);
     const dmarcRecord = _dmarcRecord?.[0]?.[0];
 
-    console.log(domainIdentity);
-    console.log(dmarcRecord);
-
-    if (
-      domain.dkimStatus !== dkimStatus ||
-      domain.spfDetails !== spfDetails ||
-      domain.status !== verificationStatus ||
-      domain.dmarcAdded !== (dmarcRecord ? true : false)
-    ) {
     domain = await db.domain.update({
       where: {
         id,
@@ -66,9 +57,14 @@ export async function getDomain(id: number) {
         spfDetails,
         status: verificationStatus ?? "NOT_STARTED",
         dmarcAdded: dmarcRecord ? true : false,
+        isVerifying:
+          verificationStatus === "SUCCESS" &&
+          dkimStatus === "SUCCESS" &&
+          spfDetails === "SUCCESS"
+            ? false
+            : true,
       },
     });
-    }
 
     return {
       ...domain,