improve admin

Author: steven-tey

apps/web/app/admin.dub.co/(dashboard)/components/user-info.tsx

@@ -15,41 +15,25 @@ export interface UserInfoProps {
     domains: number;
     links: number;
   }[];
-  impersonateUrl: string;
+  impersonateUrl: {
+    app: string;
+    partners: string;
+  };
 }
 
 export default function UserInfo({ data }: { data: UserInfoProps }) {
-  const [copied, copyToClipboard] = useCopyToClipboard();
-
   return (
-    <>
-      <div className="flex w-full items-center space-x-3">
-        <input
-          type="email"
-          name="email"
-          id="email"
-          value={data.email}
-          readOnly
-          className="w-full rounded-md border-gray-300 text-sm text-gray-900 placeholder-gray-400 focus:border-gray-500 focus:outline-none focus:ring-gray-500"
-        />
-        <button
-          type="button"
-          onClick={() =>
-            toast.promise(copyToClipboard(data.impersonateUrl), {
-              success: "Copied to clipboard",
-            })
-          }
-          className="rounded-md border border-gray-300 p-2"
-        >
-          {copied ? (
-            <Tick className="h-5 w-5 text-gray-500" />
-          ) : (
-            <Copy className="h-5 w-5 text-gray-500" />
-          )}
-        </button>
-      </div>
+    <div className="grid gap-2">
+      <LoginLinkCopyButton
+        text="app.dub.co login link"
+        url={data.impersonateUrl.app}
+      />
+      <LoginLinkCopyButton
+        text="partners.dub.co login link"
+        url={data.impersonateUrl.partners}
+      />
       {Object.keys(data.defaultDomainLinks).length > 0 && (
-        <div className="mt-2 grid divide-y divide-gray-200">
+        <div className="grid divide-y divide-gray-200">
           {Object.entries(data.defaultDomainLinks).map(([domain, count]) => (
             <div key={domain} className="flex justify-between py-2">
               <div className="flex items-center space-x-2">
@@ -61,7 +45,7 @@ export default function UserInfo({ data }: { data: UserInfoProps }) {
           ))}
         </div>
       )}
-      <div className="mt-2 grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-2 gap-4">
         {data.workspaces.map((workspace) => (
           <div
             key={workspace.slug}
@@ -100,6 +84,33 @@ export default function UserInfo({ data }: { data: UserInfoProps }) {
           </div>
         ))}
       </div>
-    </>
+    </div>
   );
 }
+
+const LoginLinkCopyButton = ({ text, url }: { text: string; url: string }) => {
+  const [copied, copyToClipboard] = useCopyToClipboard();
+
+  return (
+    <div className="flex w-full items-center space-x-3">
+      <div className="w-full rounded-md border border-gray-300 px-4 py-2 text-sm text-gray-900">
+        {text}
+      </div>
+      <button
+        type="button"
+        onClick={() =>
+          toast.promise(copyToClipboard(url), {
+            success: "Copied to clipboard",
+          })
+        }
+        className="rounded-md border border-gray-300 p-2"
+      >
+        {copied ? (
+          <Tick className="h-5 w-5 text-gray-500" />
+        ) : (
+          <Copy className="h-5 w-5 text-gray-500" />
+        )}
+      </button>
+    </div>
+  );
+};

apps/web/app/api/admin/impersonate/route.ts

@@ -1,6 +1,6 @@
 import { hashToken, withAdmin } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
-import { DUB_DOMAINS_ARRAY } from "@dub/utils";
+import { APP_DOMAIN, DUB_DOMAINS_ARRAY, PARTNERS_DOMAIN } from "@dub/utils";
 import { randomBytes } from "crypto";
 import { NextResponse } from "next/server";
 
@@ -97,11 +97,18 @@ async function getImpersonateUrl(email: string) {
     },
   });
 
-  const params = new URLSearchParams({
-    callbackUrl: process.env.NEXTAUTH_URL as string,
-    email,
-    token,
-  });
-
-  return `${process.env.NEXTAUTH_URL}/api/auth/callback/email?${params}`;
+  return {
+    app: `${APP_DOMAIN}/api/auth/callback/email?${new URLSearchParams({
+      callbackUrl: APP_DOMAIN,
+      email,
+      token,
+    })}`,
+    partners: `${PARTNERS_DOMAIN}/api/auth/callback/email?${new URLSearchParams(
+      {
+        callbackUrl: PARTNERS_DOMAIN,
+        email,
+        token,
+      },
+    )}`,
+  };
 }

packages/utils/src/constants/main.ts

@@ -45,6 +45,13 @@ export const ADMIN_HOSTNAMES = new Set([
   "admin.localhost:8888",
 ]);
 
+export const PARTNERS_DOMAIN =
+  process.env.NEXT_PUBLIC_VERCEL_ENV === "production"
+    ? `https://partners.${process.env.NEXT_PUBLIC_APP_DOMAIN}`
+    : process.env.NEXT_PUBLIC_VERCEL_ENV === "preview"
+      ? `https://partners-staging.${process.env.NEXT_PUBLIC_APP_DOMAIN}`
+      : "http://partners.localhost:8888";
+
 export const PARTNERS_HOSTNAMES = new Set([
   `partners.${process.env.NEXT_PUBLIC_APP_DOMAIN}`,
   `partners-staging.${process.env.NEXT_PUBLIC_APP_DOMAIN}`,