From 4bb38b9f43cf495cf08ec6d95466e1b8cea409ce Mon Sep 17 00:00:00 2001
From: Nana Kofi Larbi Mantey <nanakofilarbimantey@gmail.com>
Date: Mon, 28 Oct 2024 09:22:57 +0000
Subject: [PATCH] fix: incorrect domain verification records

---
 .../dashboard/src/pages/settings/identity.tsx | 555 +++++++++---------
 1 file changed, 279 insertions(+), 276 deletions(-)

diff --git a/packages/dashboard/src/pages/settings/identity.tsx b/packages/dashboard/src/pages/settings/identity.tsx
index f15aef3..ddae40f 100644
--- a/packages/dashboard/src/pages/settings/identity.tsx
+++ b/packages/dashboard/src/pages/settings/identity.tsx
@@ -12,305 +12,308 @@ import { useActiveProject, useActiveProjectVerifiedIdentity, useProjects } from
 import { network } from "../../lib/network";
 
 interface EmailValues {
-	email: string;
+  email: string;
 }
 
 interface FromValues {
-	from: string;
+  from: string;
 }
 
 /**
  *
  */
 export default function Index() {
-	const activeProject = useActiveProject();
-	const { mutate: projectsMutate } = useProjects();
-	const { data: identity, mutate: identityMutate } = useActiveProjectVerifiedIdentity();
+  const activeProject = useActiveProject();
+  const { mutate: projectsMutate } = useProjects();
+  const { data: identity, mutate: identityMutate } = useActiveProjectVerifiedIdentity();
 
-	const {
-		register,
-		handleSubmit,
-		formState: { errors },
-	} = useForm<EmailValues>({
-		resolver: zodResolver(IdentitySchemas.create.omit({ id: true })),
-	});
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<EmailValues>({
+    resolver: zodResolver(IdentitySchemas.create.omit({ id: true })),
+  });
 
-	const {
-		register: registerUpdate,
-		handleSubmit: handleSubmitUpdate,
-		formState: { errors: errorsUpdate },
-		reset,
-	} = useForm<FromValues>({
-		resolver: zodResolver(IdentitySchemas.update.omit({ id: true })),
-	});
+  const {
+    register: registerUpdate,
+    handleSubmit: handleSubmitUpdate,
+    formState: { errors: errorsUpdate },
+    reset,
+  } = useForm<FromValues>({
+    resolver: zodResolver(IdentitySchemas.update.omit({ id: true })),
+  });
 
-	useEffect(() => {
-		if (!activeProject) {
-			return;
-		}
+  useEffect(() => {
+    if (!activeProject) {
+      return;
+    }
 
-		reset({ from: activeProject.from ?? undefined });
-	}, [reset, activeProject]);
+    reset({ from: activeProject.from ?? undefined });
+  }, [reset, activeProject]);
 
-	if (!activeProject || !identity) {
-		return <FullscreenLoader />;
-	}
+  if (!activeProject || !identity) {
+    return <FullscreenLoader />;
+  }
 
-	const create = async (data: EmailValues) => {
-		toast.promise(
-			network.fetch<
-				{
-					success: true;
-					tokens: string[];
-				},
-				typeof IdentitySchemas.create
-			>("POST", "/identities/create", {
-				id: activeProject.id,
-				...data,
-			}),
-			{
-				loading: "Adding your domain",
-				success: (res) => {
-					void identityMutate({ tokens: res.tokens }, { revalidate: false });
-					void projectsMutate();
+  const create = async (data: EmailValues) => {
+    toast.promise(
+      network.fetch<
+        {
+          success: true;
+          tokens: string[];
+        },
+        typeof IdentitySchemas.create
+      >("POST", "/identities/create", {
+        id: activeProject.id,
+        ...data,
+      }),
+      {
+        loading: "Adding your domain",
+        success: (res) => {
+          void identityMutate({ tokens: res.tokens }, { revalidate: false });
+          void projectsMutate();
 
-					return "Added your domain";
-				},
-				error: "Could not add domain",
-			},
-		);
-	};
+          return "Added your domain";
+        },
+        error: "Could not add domain",
+      },
+    );
+  };
 
-	const update = async (data: FromValues) => {
-		toast.promise(
-			network.fetch<
-				{
-					success: true;
-				},
-				typeof IdentitySchemas.update
-			>("PUT", "/projects/update/identity", {
-				id: activeProject.id,
-				...data,
-			}),
-			{
-				loading: "Updating your sender name",
-				success: "Updated your sender name",
-				error: "Could not update sender name",
-			},
-		);
+  const update = async (data: FromValues) => {
+    toast.promise(
+      network.fetch<
+        {
+          success: true;
+        },
+        typeof IdentitySchemas.update
+      >("PUT", "/projects/update/identity", {
+        id: activeProject.id,
+        ...data,
+      }),
+      {
+        loading: "Updating your sender name",
+        success: "Updated your sender name",
+        error: "Could not update sender name",
+      },
+    );
 
-		await identityMutate();
-		await projectsMutate();
-	};
+    await identityMutate();
+    await projectsMutate();
+  };
 
-	const unlink = async () => {
-		toast.promise(
-			network.fetch<
-				{
-					success: true;
-				},
-				typeof UtilitySchemas.id
-			>("POST", "/identities/reset", {
-				id: activeProject.id,
-			}),
-			{
-				loading: "Unlinking your domain",
-				success: "Unlinked your domain",
-				error: "Could not unlink domain",
-			},
-		);
+  const unlink = async () => {
+    toast.promise(
+      network.fetch<
+        {
+          success: true;
+        },
+        typeof UtilitySchemas.id
+      >("POST", "/identities/reset", {
+        id: activeProject.id,
+      }),
+      {
+        loading: "Unlinking your domain",
+        success: "Unlinked your domain",
+        error: "Could not unlink domain",
+      },
+    );
 
-		window.location.reload();
-	};
+    window.location.reload();
+  };
 
-	return (
-		<>
-			<Dashboard>
-				<SettingTabs />
+  const domain = activeProject.email?.split("@")[1] ?? "";
+  const subdomain = domain.split(".").length > 2 ? domain.split(".")[0] : "";
 
-				<Card
-					title={"Domain"}
-					description={"By sending emails from your own domain you build up domain authority and trust."}
-					actions={
-						activeProject.email && (
-							<>
-								<button
-									onClick={unlink}
-									className={
-										"flex items-center gap-x-2 rounded bg-red-600 px-8 py-2 text-center text-sm font-medium text-white transition ease-in-out hover:bg-red-700"
-									}
-								>
-									<Unlink strokeWidth={1.5} size={18} />
-									Unlink domain
-								</button>
-							</>
-						)
-					}
-				>
-					{activeProject.email && !activeProject.verified ? (
-						<>
-							<Alert type={"warning"} title={"Waiting for DNS verification"}>
-								Please add the following records to {activeProject.email.split("@")[1]} to verify {activeProject.email}, this
-								may take up to 15 minutes to register. <br />
-								In the meantime you can already start sending emails, we will automatically switch to your domain once it is
-								verified.
-							</Alert>
+  return (
+    <>
+      <Dashboard>
+        <SettingTabs />
 
-							<div className="mt-6">
-								<Table
-									values={[
-										{
-											Type: <Badge type={"info"}>TXT</Badge>,
-											Key: (
-												<div
-													className={"flex cursor-pointer items-center gap-3"}
-													onClick={() => {
-														void navigator.clipboard.writeText("plunk");
-														toast.success("Copied key to clipboard");
-													}}
-												>
-													<p className={"font-mono text-sm"}>plunk</p>
-													<Copy size={14} />
-												</div>
-											),
-											Value: (
-												<div
-													className={"flex cursor-pointer items-center gap-3"}
-													onClick={() => {
-														void navigator.clipboard.writeText("v=spf1 include:amazonses.com ~all");
-														toast.success("Copied value to clipboard");
-													}}
-												>
-													<p className={"font-mono text-sm"}>v=spf1 include:amazonses.com ~all</p> <Copy size={14} />
-												</div>
-											),
-										},
-										{
-											type: <Badge type={"info"}>MX</Badge>,
-											Key: (
-												<div
-													className={"flex cursor-pointer items-center gap-3"}
-													onClick={() => {
-														void navigator.clipboard.writeText("plunk");
-														toast.success("Copied key to clipboard");
-													}}
-												>
-													<p className={"font-mono text-sm"}>plunk</p>
-													<Copy size={14} />
-												</div>
-											),
-											Value: (
-												<div
-													className={"flex cursor-pointer items-center gap-3"}
-													onClick={() => {
-														void navigator.clipboard.writeText(`10 feedback-smtp.${AWS_REGION}.amazonses.com`);
-														toast.success("Copied value to clipboard");
-													}}
-												>
-													<p className={"font-mono text-sm"}>10 feedback-smtp.{AWS_REGION}.amazonses.com</p>
-													<Copy size={14} />
-												</div>
-											),
-										},
-										...identity.tokens.map((token) => {
-											return {
-												Type: <Badge type={"info"}>CNAME</Badge>,
-												Key: (
-													<div
-														className={"flex cursor-pointer items-center gap-3"}
-														onClick={() => {
-															void navigator.clipboard.writeText(`${token}._domainkey`);
-															toast.success("Copied key to clipboard");
-														}}
-													>
-														<p className={"font-mono text-sm"}>{token}._domainkey</p>
-														<Copy size={14} />
-													</div>
-												),
-												Value: (
-													<div
-														className={"flex cursor-pointer items-center gap-3"}
-														onClick={() => {
-															void navigator.clipboard.writeText(`${token}.dkim.amazonses.com`);
-															toast.success("Copied value to clipboard");
-														}}
-													>
-														<p className={"font-mono text-sm"}>{token}.dkim.amazonses.com</p>
-														<Copy size={14} />
-													</div>
-												),
-											};
-										}),
-									]}
-								/>
-							</div>
-						</>
-					) : activeProject.email && activeProject.verified ? (
-						<>
-							<Alert type={"success"} title={"Domain verified"}>
-								You have confirmed {activeProject.email} as your domain. Any emails sent by Plunk will now use this address.
-							</Alert>
-						</>
-					) : (
-						<>
-							<form onSubmit={handleSubmit(create)} className="space-y-6">
-								<Input register={register("email")} error={errors.email} placeholder={"hello@example.com"} label={"Email"} />
-								<motion.button
-									whileHover={{ scale: 1.05 }}
-									whileTap={{ scale: 0.9 }}
-									className={
-										"ml-auto flex items-center gap-x-0.5 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
-									}
-								>
-									<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-										<path
-											stroke="currentColor"
-											strokeLinecap="round"
-											strokeLinejoin="round"
-											strokeWidth="1.5"
-											d="M12 5.75V18.25"
-										/>
-										<path
-											stroke="currentColor"
-											strokeLinecap="round"
-											strokeLinejoin="round"
-											strokeWidth="1.5"
-											d="M18.25 12L5.75 12"
-										/>
-									</svg>
-									Verify domain
-								</motion.button>
-							</form>
-						</>
-					)}
-				</Card>
+        <Card
+          title={"Domain"}
+          description={"By sending emails from your own domain you build up domain authority and trust."}
+          actions={
+            activeProject.email && (
+              <>
+                <button
+                  onClick={unlink}
+                  className={
+                    "flex items-center gap-x-2 rounded bg-red-600 px-8 py-2 text-center text-sm font-medium text-white transition ease-in-out hover:bg-red-700"
+                  }
+                >
+                  <Unlink strokeWidth={1.5} size={18} />
+                  Unlink domain
+                </button>
+              </>
+            )
+          }
+        >
+          {activeProject.email && !activeProject.verified ? (
+            <>
+              <Alert type={"warning"} title={"Waiting for DNS verification"}>
+                Please add the following records to {activeProject.email.split("@")[1]} to verify {activeProject.email}, this
+                may take up to 15 minutes to register. <br />
+                In the meantime you can already start sending emails, we will automatically switch to your domain once it is
+                verified.
+              </Alert>
 
-				<Card
-					title={"Sender name"}
-					description={
-						"The name that will be used when sending emails from Plunk. Your project name will be used by default"
-					}
-				>
-					<form onSubmit={handleSubmitUpdate(update)} className="space-y-6">
-						<Input
-							register={registerUpdate("from")}
-							placeholder={activeProject.name}
-							label={"Name"}
-							error={errorsUpdate.from}
-						/>
+              <div className="mt-6">
+                <Table
+                  values={[
+                    {
+                      Type: <Badge type={"info"}>TXT</Badge>,
+                      Key: (
+                        <div
+                          className={"flex cursor-pointer items-center gap-3"}
+                          onClick={() => {
+                            void navigator.clipboard.writeText("plunk");
+                            toast.success("Copied key to clipboard");
+                          }}
+                        >
+                          <p className={"font-mono text-sm"}>plunk</p>
+                          <Copy size={14} />
+                        </div>
+                      ),
+                      Value: (
+                        <div
+                          className={"flex cursor-pointer items-center gap-3"}
+                          onClick={() => {
+                            void navigator.clipboard.writeText("v=spf1 include:amazonses.com ~all");
+                            toast.success("Copied value to clipboard");
+                          }}
+                        >
+                          <p className={"font-mono text-sm"}>v=spf1 include:amazonses.com ~all</p> <Copy size={14} />
+                        </div>
+                      ),
+                    },
+                    {
+                      type: <Badge type={"info"}>MX</Badge>,
+                      Key: (
+                        <div
+                          className={"flex cursor-pointer items-center gap-3"}
+                          onClick={() => {
+                            void navigator.clipboard.writeText("plunk");
+                            toast.success("Copied key to clipboard");
+                          }}
+                        >
+                          <p className={"font-mono text-sm"}>plunk</p>
+                          <Copy size={14} />
+                        </div>
+                      ),
+                      Value: (
+                        <div
+                          className={"flex cursor-pointer items-center gap-3"}
+                          onClick={() => {
+                            void navigator.clipboard.writeText(`10 feedback-smtp.${AWS_REGION}.amazonses.com`);
+                            toast.success("Copied value to clipboard");
+                          }}
+                        >
+                          <p className={"font-mono text-sm"}>10 feedback-smtp.{AWS_REGION}.amazonses.com</p>
+                          <Copy size={14} />
+                        </div>
+                      ),
+                    },
+                    ...identity.tokens.map((token) => {
+                      return {
+                        Type: <Badge type={"info"}>CNAME</Badge>,
+                        Key: (
+                          <div
+                            className={"flex cursor-pointer items-center gap-3"}
+                            onClick={() => {
+                              void navigator.clipboard.writeText(`${token}._domainkey${subdomain ? '.' + subdomain : ''}`);
+                              toast.success("Copied key to clipboard");
+                            }}
+                          >
+                            <p className={"font-mono text-sm"}>{token}._domainkey{subdomain ? '.' + subdomain : ''}</p>
+                            <Copy size={14} />
+                          </div>
+                        ),
+                        Value: (
+                          <div
+                            className={"flex cursor-pointer items-center gap-3"}
+                            onClick={() => {
+                              void navigator.clipboard.writeText(`${token}.dkim.amazonses.com`);
+                              toast.success("Copied value to clipboard");
+                            }}
+                          >
+                            <p className={"font-mono text-sm"}>{token}.dkim.amazonses.com</p>
+                            <Copy size={14} />
+                          </div>
+                        ),
+                      };
+                    }),
+                  ]}
+                />
+              </div>
+            </>
+          ) : activeProject.email && activeProject.verified ? (
+            <>
+              <Alert type={"success"} title={"Domain verified"}>
+                You have confirmed {activeProject.email} as your domain. Any emails sent by Plunk will now use this address.
+              </Alert>
+            </>
+          ) : (
+            <>
+              <form onSubmit={handleSubmit(create)} className="space-y-6">
+                <Input register={register("email")} error={errors.email} placeholder={"hello@example.com"} label={"Email"} />
+                <motion.button
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.9 }}
+                  className={
+                    "ml-auto flex items-center gap-x-0.5 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
+                  }
+                >
+                  <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
+                    <path
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="1.5"
+                      d="M12 5.75V18.25"
+                    />
+                    <path
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="1.5"
+                      d="M18.25 12L5.75 12"
+                    />
+                  </svg>
+                  Verify domain
+                </motion.button>
+              </form>
+            </>
+          )}
+        </Card>
 
-						<motion.button
-							whileHover={{ scale: 1.05 }}
-							whileTap={{ scale: 0.9 }}
-							className={
-								"ml-auto flex items-center gap-x-0.5 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
-							}
-						>
-							Save
-						</motion.button>
-					</form>
-				</Card>
-			</Dashboard>
-		</>
-	);
+        <Card
+          title={"Sender name"}
+          description={
+            "The name that will be used when sending emails from Plunk. Your project name will be used by default"
+          }
+        >
+          <form onSubmit={handleSubmitUpdate(update)} className="space-y-6">
+            <Input
+              register={registerUpdate("from")}
+              placeholder={activeProject.name}
+              label={"Name"}
+              error={errorsUpdate.from}
+            />
+
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.9 }}
+              className={
+                "ml-auto flex items-center gap-x-0.5 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
+              }
+            >
+              Save
+            </motion.button>
+          </form>
+        </Card>
+      </Dashboard>
+    </>
+  );
 }