Merge branch 'main' into news

dubinc · Oct 20, 2024 · 76d4a80 · 76d4a80
2 parents da953c7 + 484b09b
commit 76d4a80
Show file tree

Hide file tree

Showing 18 changed files with 156 additions and 96 deletions.
diff --git a/apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx b/apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx
@@ -1,5 +1,6 @@
 import { prisma } from "@/lib/prisma";
-import { Wordmark } from "@dub/ui";
+import EmptyState from "@/ui/shared/empty-state";
+import { InputPassword } from "@dub/ui";
 import { ResetPasswordForm } from "./form";
 
 export const runtime = "nodejs";
@@ -13,28 +14,27 @@ interface Props {
 export default async function ResetPasswordPage({ params: { token } }: Props) {
   const validToken = await isValidToken(token);
 
+  if (!validToken) {
+    return (
+      <EmptyState
+        icon={InputPassword}
+        title="Invalid Reset Token"
+        description="The password reset token is invalid or expired. Please request a new one."
+      />
+    );
+  }
+
   return (
     <div className="relative z-10 my-10 flex min-h-full w-full items-center justify-center">
-      <div className="flex w-full max-w-md flex-col items-center">
-        <Wordmark className="mb-8 h-12" />
-        <div className="w-full overflow-hidden border-y border-gray-200 sm:rounded-2xl sm:border sm:shadow-xl">
-          <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-6 pt-8 text-center sm:px-16">
-            <h3 className="text-xl font-semibold">Reset your password</h3>
-            <p className="text-sm text-gray-500">
-              {validToken
-                ? "Enter new password for your account."
-                : "The request is invalid or expired."}
-            </p>
-          </div>
-          <div className="flex flex-col space-y-3 bg-gray-50 px-4 py-8 sm:px-16">
-            {validToken ? (
-              <ResetPasswordForm />
-            ) : (
-              <div className="text-center">
-                That request is expired or invalid. Please request a new one.
-              </div>
-            )}
-          </div>
+      <div className="w-full overflow-hidden border-y border-gray-200 sm:rounded-2xl sm:border sm:shadow-xl">
+        <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-6 pt-8 text-center sm:px-16">
+          <h3 className="text-xl font-semibold">Reset your password</h3>
+          <p className="text-sm text-gray-500">
+            Enter new password for your account.
+          </p>
+        </div>
+        <div className="flex flex-col space-y-3 bg-gray-50 px-4 py-8 sm:px-16">
+          <ResetPasswordForm />
         </div>
       </div>
     </div>

diff --git a/apps/web/app/app.dub.co/(auth)/auth/saml/page.tsx b/apps/web/app/app.dub.co/(auth)/auth/saml/page.tsx
@@ -1,22 +1,20 @@
+import EmptyState from "@/ui/shared/empty-state";
 import { LoadingSpinner } from "@dub/ui";
 import { APP_NAME } from "@dub/utils";
 import { Suspense } from "react";
 import SAMLIDPForm from "./form";
 
 export default function SAMLPage() {
   return (
-    <div>
+    <>
+      <EmptyState
+        icon={LoadingSpinner}
+        title="SAML Authentication"
+        description={`${APP_NAME} is verifying your identity via SAML. This might take a few seconds...`}
+      />
       <Suspense>
         <SAMLIDPForm />
       </Suspense>
-      <div className="flex h-screen flex-col items-center justify-center space-y-6 text-center">
-        <h1 className="font-display text-4xl font-bold">Authenticating</h1>
-        <p className="text-lg text-gray-600">
-          {APP_NAME} is verifying your identity.
-          <br /> Please wait...
-        </p>
-        <LoadingSpinner className="h-7 w-7" />
-      </div>
-    </div>
+    </>
   );
 }
diff --git a/apps/web/app/app.dub.co/(auth)/invites/[code]/page.tsx b/apps/web/app/app.dub.co/(auth)/invites/[code]/page.tsx
@@ -1,40 +1,30 @@
 import { getSession } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
-import { LoadingSpinner, Logo } from "@dub/ui";
+import EmptyState from "@/ui/shared/empty-state";
+import { LoadingSpinner } from "@dub/ui";
+import { LinkBroken, Users6 } from "@dub/ui/src/icons";
 import { APP_NAME } from "@dub/utils";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
 
 export const runtime = "nodejs";
 
-const PageCopy = ({ title, message }: { title: string; message: string }) => {
-  return (
-    <>
-      <h1 className="font-display text-3xl font-bold sm:text-4xl">{title}</h1>
-      <p className="max-w-lg text-pretty text-gray-600 sm:text-lg">{message}</p>
-    </>
-  );
-};
-
-export default function InvitesPage({
+export default function InitesPage({
   params,
 }: {
   params: {
     code: string;
   };
 }) {
   return (
-    <div className="flex h-screen flex-col items-center justify-center space-y-6 text-center">
-      <Logo className="h-12 w-12" />
+    <div className="flex flex-col items-center justify-center gap-6 text-center">
       <Suspense
         fallback={
-          <>
-            <PageCopy
-              title="Verifying Invite"
-              message={`${APP_NAME} is verifying your invite link...`}
-            />
-            <LoadingSpinner className="h-7 w-7" />
-          </>
+          <EmptyState
+            icon={LoadingSpinner}
+            title="Verifying Invite"
+            description={`${APP_NAME} is verifying your invite link. This might take a few seconds...`}
+          />
         }
       >
         <VerifyInvite code={params.code} />
@@ -82,12 +72,11 @@ async function VerifyInvite({ code }: { code: string }) {
 
   if (!workspace) {
     return (
-      <>
-        <PageCopy
-          title="Invalid Invite"
-          message="The invite link you are trying to use is invalid. Please contact the workspace owner for a new invite."
-        />
-      </>
+      <EmptyState
+        icon={LinkBroken}
+        title="Invalid Invite Link"
+        description="The invite link you are trying to use is invalid. Please contact the workspace owner for more information."
+      />
     );
   }
 
@@ -98,9 +87,10 @@ async function VerifyInvite({ code }: { code: string }) {
 
   if (workspace._count.users >= workspace.usersLimit) {
     return (
-      <PageCopy
+      <EmptyState
+        icon={Users6}
         title="User Limit Reached"
-        message="The workspace you are trying to join is currently full. Please contact the workspace owner for more information."
+        description="The workspace you are trying to join is currently full. Please contact the workspace owner for more information."
       />
     );
   }

diff --git a/apps/web/app/app.dub.co/(auth)/layout.tsx b/apps/web/app/app.dub.co/(auth)/layout.tsx
@@ -1,14 +1,19 @@
 import Toolbar from "@/ui/layout/toolbar/toolbar";
-import { Background } from "@dub/ui";
+import { NewBackground } from "@/ui/shared/new-background";
+import { Wordmark } from "@dub/ui";
 import Providers from "app/providers";
+import Link from "next/link";
 import { ReactNode } from "react";
 
 export default function AuthLayout({ children }: { children: ReactNode }) {
   return (
     <Providers>
       <Toolbar />
-      <Background />
-      <div className="relative z-10 flex min-h-screen w-full justify-center">
+      <NewBackground />
+      <div className="relative flex min-h-screen w-full justify-center">
+        <Link href="/" className="absolute left-4 top-3 z-10">
+          <Wordmark className="h-6" />
+        </Link>
         {children}
       </div>
     </Providers>

diff --git a/apps/web/app/app.dub.co/(auth)/oauth/authorize/page.tsx b/apps/web/app/app.dub.co/(auth)/oauth/authorize/page.tsx
@@ -4,7 +4,7 @@ import z from "@/lib/zod";
 import { authorizeRequestSchema } from "@/lib/zod/schemas/oauth";
 import EmptyState from "@/ui/shared/empty-state";
 import { BlurImage, Logo } from "@dub/ui";
-import { CircleWarning } from "@dub/ui/src/icons";
+import { CircleWarning, CubeSettings } from "@dub/ui/src/icons";
 import { HOME_DOMAIN, constructMetadata } from "@dub/utils";
 import { ArrowLeftRight } from "lucide-react";
 import { redirect } from "next/navigation";
@@ -36,9 +36,11 @@ export default async function Authorize({
 
   if (error || !integration) {
     return (
-      <div className="relative z-10 mt-[calc(30vh)] h-fit w-full max-w-md overflow-hidden sm:rounded-2xl">
-        <EmptyState icon={Logo} title={error} />
-      </div>
+      <EmptyState
+        icon={CubeSettings}
+        title="Invalid OAuth Request"
+        description={error}
+      />
     );
   }
 

diff --git a/apps/web/app/app.dub.co/(auth)/welcome/page.tsx b/apps/web/app/app.dub.co/(auth)/welcome/page.tsx
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx
@@ -277,7 +277,7 @@ function UsageTabCard({
           <span className="text-xs leading-none text-neutral-600">
             {unlimited
               ? "Unlimited"
-              : `${prefix}${nFormatter(remaining, { full: remaining < 10000 })} remaining of ${prefix}${nFormatter(limit, { full: limit < 10000 })}`}
+              : `${prefix}${nFormatter(remaining, { full: true })} remaining of ${prefix}${nFormatter(limit, { full: limit < 1000000 })}`}
           </span>
         ) : (
           <div className="h-4 w-20 animate-pulse rounded-md bg-gray-200" />

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx
@@ -1,5 +1,5 @@
+import SettingsLayout from "@/ui/layout/settings-layout";
 import { ReactNode } from "react";
-import SettingsLayout from "../../../../../ui/layout/settings-layout";
 
 export default function WorkspaceSettingsLayout({
   children,

diff --git a/apps/web/app/app.dub.co/(onboarding)/layout.tsx b/apps/web/app/app.dub.co/(onboarding)/layout.tsx
@@ -1,12 +1,12 @@
 import Toolbar from "@/ui/layout/toolbar/toolbar";
+import { NewBackground } from "@/ui/shared/new-background";
 import Providers from "app/providers";
 import { PropsWithChildren } from "react";
-import { Background } from "./background";
 
 export default function Layout({ children }: PropsWithChildren) {
   return (
     <Providers>
-      <Background />
+      <NewBackground />
       {children}
       <Toolbar show={["help"]} />
     </Providers>

diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
@@ -1,6 +1,6 @@
+import { NewBackground } from "@/ui/shared/new-background";
 import { Wordmark } from "@dub/ui/src/wordmark";
 import Link from "next/link";
-import { Background } from "./app.dub.co/(onboarding)/background";
 
 export default function NotFound() {
   return (
@@ -19,7 +19,7 @@ export default function NotFound() {
           Go back home
         </Link>
       </div>
-      <Background showAnimation />
+      <NewBackground showAnimation />
     </>
   );
 }
diff --git a/apps/web/lib/api/oauth/actions.ts b/apps/web/lib/api/oauth/actions.ts
@@ -37,15 +37,17 @@ export const vaidateAuthorizeRequest = async (params: any) => {
 
   if (!oAuthApp || !oAuthApp.integration) {
     return {
-      error: "Could not find OAuth application.",
+      error:
+        "Could not find OAuth application. Make sure you have the correct client_id.",
     };
   }
 
   const redirectUris = (oAuthApp.redirectUris || []) as string[];
 
   if (!redirectUris.includes(redirectUri)) {
     return {
-      error: "Invalid redirect_uri parameter for the application.",
+      error:
+        "Invalid redirect_uri parameter detected. Make sure you have allowlisted the redirect_uri in your OAuth app settings.",
     };
   }
 

diff --git a/apps/web/lib/middleware/utils/app-redirect.ts b/apps/web/lib/middleware/utils/app-redirect.ts
@@ -1,5 +1,6 @@
 const APP_REDIRECTS = {
   "/account": "/account/settings",
+  "/welcome": "/onboarding",
 };
 
 export const appRedirect = (path: string) => {

diff --git a/apps/web/ui/domains/register-domain-form.tsx b/apps/web/ui/domains/register-domain-form.tsx
@@ -106,17 +106,13 @@ export function RegisterDomainForm({
     } else {
       toast.success("Domain registered successfully!");
 
-      // Mutate workspace, domains links
+      // Mutate workspace, domains, and links
       await Promise.all([
         mutate(`/api/workspaces/${workspace.slug}`),
         mutate(
           (key) =>
             typeof key === "string" &&
-            (key.startsWith(`/api/domains?workspaceId=${workspace.id}`) ||
-              key.startsWith(`/api/domains/count?workspaceId=${workspace.id}`)),
-        ),
-        mutate(
-          (key) => typeof key === "string" && key.startsWith("/api/links"),
+            (key.startsWith("/api/domains") || key.startsWith("/api/links")),
           undefined,
           { revalidate: true },
         ),

diff --git a/apps/web/ui/layout/auth-layout.tsx b/apps/web/ui/layout/auth-layout.tsx
@@ -1,4 +1,4 @@
-import { BlurImage, ClientOnly, Wordmark } from "@dub/ui";
+import { BlurImage, ClientOnly } from "@dub/ui";
 import { Suspense } from "react";
 
 const logos = [
@@ -26,7 +26,6 @@ export const AuthLayout = ({ children }: AuthLayoutProps) => {
       <div className="col-span-1 flex min-h-screen flex-col items-center justify-between border-r border-gray-200 bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur sm:col-span-3">
         <div className="flex h-full w-full flex-col items-center justify-center">
           <ClientOnly className="relative flex w-full flex-col items-center justify-center">
-            <Wordmark className="mb-8 h-12" />
             <Suspense>{children}</Suspense>
           </ClientOnly>
         </div>
@@ -55,13 +54,13 @@ export const AuthLayout = ({ children }: AuthLayoutProps) => {
       </div>
 
       <div className="hidden h-full flex-col justify-center space-y-12 overflow-hidden md:col-span-2 md:flex">
-        <div className="ml-12 h-1/2 w-[112%] rounded-xl border border-gray-200 p-2 shadow-xl">
+        <div className="ml-12 h-1/2 w-[140%] rounded-xl border border-gray-200 p-2 shadow-xl">
           <BlurImage
             alt="Dub.co Analytics"
-            src="https://assets.dub.co/compare/dub-analytics.png"
-            width={3236}
-            height={1618}
-            className="h-full rounded-lg border border-gray-200 object-cover"
+            src="https://assets.dub.co/changelog/new-dashboard.jpg"
+            width={2400}
+            height={1260}
+            className="aspect-[2400/1260] h-full rounded-lg border border-gray-200"
           />
         </div>
         <a

diff --git a/apps/web/ui/modals/delete-domain-modal.tsx b/apps/web/ui/modals/delete-domain-modal.tsx
@@ -61,8 +61,9 @@ function DeleteDomainModal({
             if (res.status === 200) {
               await mutate(
                 (key) =>
-                  typeof key === "string" &&
-                  key.startsWith(`/api/domains?workspaceId=${id}`),
+                  typeof key === "string" && key.startsWith("/api/domains"),
+                undefined,
+                { revalidate: true },
               );
               setShowDeleteDomainModal(false);
               toast.success("Successfully deleted domain!");

diff --git a/apps/web/ui/shared/empty-state.tsx b/apps/web/ui/shared/empty-state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { EmptyState as EmptyStateBlock } from "@dub/blocks";
 import { buttonVariants } from "@dub/ui";
 import { cn } from "@dub/utils";