Fix domain config

mehani03 · Oct 16, 2023 · a478af8 · a478af8
1 parent a565c2c
commit a478af8
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 72 deletions.
diff --git a/apps/web/app/[domain]/placeholder.tsx b/apps/web/app/[domain]/placeholder.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { InlineSnippet } from "@/components/app/domains/domain-configuration";
+import { InlineSnippet } from "@dub/ui";
 import { STAGGER_CHILD_VARIANTS } from "@dub/utils";
 import Spline from "@splinetool/react-spline";
 import va from "@vercel/analytics";

diff --git a/apps/web/components/app/domains/domain-configuration.tsx b/apps/web/components/app/domains/domain-configuration.tsx
@@ -2,20 +2,12 @@ import { DomainVerificationStatusProps } from "#/lib/types";
 import { getSubdomain } from "@dub/utils";
 import { useState } from "react";
 
-export const InlineSnippet = ({ children }: { children: string }) => {
-  return (
-    <span className="inline-block rounded-md bg-blue-100 px-1 py-0.5 font-mono text-blue-900">
-      {children}
-    </span>
-  );
-};
-
 export default function DomainConfiguration({
   data,
 }: {
   data: { status: DomainVerificationStatusProps; response: any };
 }) {
-  const { domainJson } = data.response;
+  const { domainJson, configJson } = data.response;
   const subdomain = getSubdomain(domainJson.name, domainJson.apexName);
   const [recordType, setRecordType] = useState(!!subdomain ? "CNAME" : "A");
 
@@ -24,38 +16,64 @@ export default function DomainConfiguration({
       (x: any) => x.type === "TXT",
     );
     return (
-      <div className="border-t border-gray-200 pt-5">
-        <p className="text-sm">
-          Please set the following TXT record on{" "}
-          <InlineSnippet>{domainJson.apexName}</InlineSnippet> to prove
-          ownership of <InlineSnippet>{domainJson.name}</InlineSnippet>:
-        </p>
-        <div className="my-5 flex items-start justify-start space-x-10 rounded-md bg-gray-50 p-2">
-          <div>
-            <p className="text-sm font-bold">Type</p>
-            <p className="mt-2 font-mono text-sm">{txtVerification.type}</p>
-          </div>
-          <div>
-            <p className="text-sm font-bold">Name</p>
-            <p className="mt-2 font-mono text-sm">
-              {txtVerification.domain.slice(
+      <div className="border-t border-gray-200">
+        <DnsRecord
+          instructions={`Please set the following TXT record on <code>${domainJson.apexName}</code> to prove ownership of <code>${domainJson.name}</code>:`}
+          records={[
+            {
+              type: txtVerification.type,
+              name: txtVerification.domain.slice(
                 0,
                 txtVerification.domain.length - domainJson.apexName.length - 1,
-              )}
-            </p>
-          </div>
-          <div>
-            <p className="text-sm font-bold">Value</p>
-            <p className="mt-2 font-mono text-sm">
-              <span className="text-ellipsis">{txtVerification.value}</span>
-            </p>
+              ),
+              value: txtVerification.value,
+            },
+          ]}
+          warning="Warning: if you are using this domain for another site, setting this TXT record will transfer domain ownership away from that site and break it. Please exercise caution when setting this record."
+        />
+      </div>
+    );
+  }
+
+  if (data.status === "Conflicting DNS Records") {
+    return (
+      <div className="border-t border-gray-200 pt-5">
+        <div className="flex justify-start space-x-4">
+          <div className="ease border-b-2 border-black pb-1 text-sm text-black transition-all duration-150">
+            {configJson?.conflicts.some((x) => x.type === "A")
+              ? "A Record (recommended)"
+              : "CNAME Record (recommended)"}
           </div>
         </div>
-        <p className="text-sm">
-          Warning: if you are using this domain for another site, setting this
-          TXT record will transfer domain ownership away from that site and
-          break it. Please exercise caution when setting this record.
-        </p>
+        <DnsRecord
+          instructions="Please remove the following conflicting DNS records from your DNS provider:"
+          records={configJson?.conflicts.map(
+            ({
+              name,
+              type,
+              value,
+            }: {
+              name: string;
+              type: string;
+              value: string;
+            }) => ({
+              name,
+              type,
+              value,
+            }),
+          )}
+        />
+        <DnsRecord
+          instructions="Afterwards, set the following record on your DNS provider to continue:"
+          records={[
+            {
+              type: recordType,
+              name: recordType === "A" ? "@" : subdomain ?? "www",
+              value: recordType === "A" ? `76.76.21.21` : `cname.dub.co`,
+              ttl: "86400",
+            },
+          ]}
+        />
       </div>
     );
   }
@@ -92,43 +110,85 @@ export default function DomainConfiguration({
           CNAME Record{subdomain && " (recommended)"}
         </button>
       </div>
-      <div className="my-3 text-left">
-        <p className="my-5 text-sm">
-          To configure your {recordType === "A" ? "apex domain" : "subdomain"} (
-          <InlineSnippet>
-            {recordType === "A" ? domainJson.apexName : domainJson.name}
-          </InlineSnippet>
-          ), set the following {recordType} record on your DNS provider to
-          continue:
-        </p>
-        <div className="flex items-center justify-start space-x-10 rounded-md bg-gray-50 p-2">
-          <div>
-            <p className="text-sm font-bold">Type</p>
-            <p className="mt-2 font-mono text-sm">{recordType}</p>
-          </div>
-          <div>
-            <p className="text-sm font-bold">Name</p>
-            <p className="mt-2 font-mono text-sm">
-              {recordType === "A" ? "@" : subdomain ?? "www"}
-            </p>
-          </div>
-          <div>
-            <p className="text-sm font-bold">Value</p>
-            <p className="mt-2 font-mono text-sm">
-              {recordType === "A" ? `76.76.21.21` : `cname.dub.co`}
-            </p>
-          </div>
+
+      <DnsRecord
+        instructions={`To configure your ${
+          recordType === "A" ? "apex domain" : "subdomain"
+        } <code>
+                ${recordType === "A" ? domainJson.apexName : domainJson.name}
+              </code>, set the following ${recordType} record on your DNS provider to
+              continue:`}
+        records={[
+          {
+            type: recordType,
+            name: recordType === "A" ? "@" : subdomain ?? "www",
+            value: recordType === "A" ? `76.76.21.21` : `cname.dub.co`,
+            ttl: "86400",
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+const MarkdownText = ({ text }: { text: string }) => {
+  return (
+    <p
+      className="prose-sm prose-code:rounded-md prose-code:bg-blue-100 prose-code:p-1 prose-code:text-[14px] prose-code:font-medium prose-code:font-mono prose-code:text-blue-900 my-5 max-w-none"
+      dangerouslySetInnerHTML={{ __html: text }}
+    />
+  );
+};
+
+const DnsRecord = ({
+  instructions,
+  records,
+  warning,
+}: {
+  instructions: string;
+  records: { type: string; name: string; value: string; ttl?: string }[];
+  warning?: string;
+}) => {
+  const hasTtl = records.some((x) => x.ttl);
+  return (
+    <div className="my-3 text-left">
+      <MarkdownText text={instructions} />
+      <div className="flex items-center justify-start space-x-10 rounded-md bg-gray-50 p-2">
+        <div>
+          <p className="text-sm font-bold">Type</p>
+          {records.map((record) => (
+            <p className="mt-2 font-mono text-sm">{record.type}</p>
+          ))}
+        </div>
+        <div>
+          <p className="text-sm font-bold">Name</p>
+          {records.map((record) => (
+            <p className="mt-2 font-mono text-sm">{record.name}</p>
+          ))}
+        </div>
+        <div>
+          <p className="text-sm font-bold">Value</p>
+          {records.map((record) => (
+            <p className="mt-2 font-mono text-sm">{record.value}</p>
+          ))}
+        </div>
+        {hasTtl && (
           <div>
             <p className="text-sm font-bold">TTL</p>
-            <p className="mt-2 font-mono text-sm">86400</p>
+            {records.map((record) => (
+              <p className="mt-2 font-mono text-sm">{record.ttl}</p>
+            ))}
           </div>
-        </div>
-        <p className="mt-5 text-sm">
-          Note: for TTL, if <InlineSnippet>86400</InlineSnippet> is not
-          available, set the highest value possible. Also, domain propagation
-          can take anywhere between 1 hour to 12 hours.
-        </p>
+        )}
       </div>
+      {(warning || hasTtl) && (
+        <MarkdownText
+          text={
+            warning ||
+            "Note: for TTL, if <code>86400</code> is not available, set the highest value possible. Also, domain propagation can take anywhere between 1 hour to 12 hours."
+          }
+        />
+      )}
     </div>
   );
-}
+};
diff --git a/apps/web/pages/api/projects/[slug]/domains/[domain]/verify.ts b/apps/web/pages/api/projects/[slug]/domains/[domain]/verify.ts
@@ -31,6 +31,20 @@ export default withProjectAuth(async (req, res) => {
         .json({ status, response: { configJson, domainJson } });
     }
 
+    /**
+     * Domain has DNS conflicts
+     */
+    if (configJson?.conflicts.length > 0) {
+      status = "Conflicting DNS Records";
+      return res.status(200).json({
+        status,
+        response: {
+          configJson,
+          domainJson,
+        },
+      });
+    }
+
     /**
      * If domain is not verified, we try to verify now
      */

diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
@@ -31,5 +31,6 @@ export * from "./content";
 // misc
 export * from "./copy-button";
 export * from "./icon-menu";
+export * from "./inline-snippet";
 export * from "./link-preview";
 export * from "./tab-select";
diff --git a/packages/ui/src/inline-snippet.tsx b/packages/ui/src/inline-snippet.tsx
@@ -0,0 +1,7 @@
+export const InlineSnippet = ({ children }: { children: string }) => {
+  return (
+    <span className="inline-block rounded-md bg-blue-100 px-1 py-0.5 font-mono text-blue-900">
+      {children}
+    </span>
+  );
+};