chore: migrate /auth/error (#18730)

* migrate auth/error

* fix

* fix type check

.env.example

@@ -369,7 +369,6 @@ APP_ROUTER_AUTH_LOGIN_ENABLED=0
 APP_ROUTER_AUTH_LOGOUT_ENABLED=0
 APP_ROUTER_AUTH_NEW_ENABLED=0
 APP_ROUTER_AUTH_SAML_ENABLED=0
-APP_ROUTER_AUTH_ERROR_ENABLED=0
 APP_ROUTER_AUTH_PLATFORM_ENABLED=0
 APP_ROUTER_AUTH_OAUTH2_ENABLED=0
 

apps/web/abTest/middlewareFactory.ts

@@ -15,7 +15,6 @@ const ROUTES: [URLPattern, boolean][] = [
   ["/auth/logout", process.env.APP_ROUTER_AUTH_LOGOUT_ENABLED === "1"] as const,
   ["/auth/new", process.env.APP_ROUTER_AUTH_NEW_ENABLED === "1"] as const,
   ["/auth/saml-idp", process.env.APP_ROUTER_AUTH_SAML_ENABLED === "1"] as const,
-  ["/auth/error", process.env.APP_ROUTER_AUTH_ERROR_ENABLED === "1"] as const,
   ["/auth/platform/:path*", process.env.APP_ROUTER_AUTH_PLATFORM_ENABLED === "1"] as const,
   ["/auth/oauth2/:path*", process.env.APP_ROUTER_AUTH_OAUTH2_ENABLED === "1"] as const,
   ["/team", process.env.APP_ROUTER_TEAM_ENABLED === "1"] as const,

apps/web/app/auth/error/page.tsx

@@ -0,0 +1,47 @@
+import type { PageProps } from "app/_types";
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import Link from "next/link";
+import { z } from "zod";
+
+import { Button, Icon } from "@calcom/ui";
+
+import AuthContainer from "@components/ui/AuthContainer";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => t("error"),
+    () => ""
+  );
+};
+
+const querySchema = z.object({
+  error: z.string().optional(),
+});
+
+const ServerPage = async ({ searchParams }: PageProps) => {
+  const t = await getTranslate();
+  const { error } = querySchema.parse({ error: searchParams?.error || undefined });
+  const errorMsg = error || t("error_during_login");
+  return (
+    <AuthContainer title="" description="" isAppDir={true}>
+      <div>
+        <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+          <Icon name="x" className="h-6 w-6 text-red-600" />
+        </div>
+        <div className="mt-3 text-center sm:mt-5">
+          <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
+            {errorMsg}
+          </h3>
+        </div>
+      </div>
+      <div className="mt-5 sm:mt-6">
+        <Link href="/auth/login">
+          <Button className="flex w-full justify-center">{t("go_back_login")}</Button>
+        </Link>
+      </div>
+    </AuthContainer>
+  );
+};
+
+export default WithLayout({ ServerPage })<"P">;

apps/web/app/future/auth/error/page.tsx

@@ -1,19 +0,0 @@
-import { withAppDirSsg } from "app/WithAppDirSsg";
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import { getStaticProps } from "@server/lib/auth/error/getStaticProps";
-
-import Page from "~/auth/error/error-view";
-
-export const generateMetadata = async () => {
-  return await _generateMetadata(
-    () => "Error",
-    () => ""
-  );
-};
-
-const getData = withAppDirSsg(getStaticProps, "future/auth/error");
-
-export default WithLayout({ getData, Page, getLayout: null })<"P">;
-export const dynamic = "force-static";

apps/web/components/ui/AuthContainer.tsx

@@ -11,12 +11,13 @@ interface Props {
   showLogo?: boolean;
   heading?: string;
   loading?: boolean;
+  isAppDir?: boolean;
 }
 
 export default function AuthContainer(props: React.PropsWithChildren<Props>) {
   return (
     <div className="bg-subtle dark:bg-darkgray-50 flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <HeadSeo title={props.title} description={props.description} />
+      {!props.isAppDir ? <HeadSeo title={props.title} description={props.description} /> : null}
       {props.showLogo && <Logo small inline={false} className="mx-auto mb-auto" />}
 
       <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>

apps/web/middleware.ts

@@ -167,7 +167,7 @@ export const config = {
     "/api/trpc/:path*",
     "/login",
     "/auth/login",
-    "/future/auth/login",
+    "/auth/error",
     /**
      * Paths required by routingForms.handle
      */

apps/web/modules/auth/error/error-view.tsx

@@ -9,13 +9,11 @@ import { Button, Icon } from "@calcom/ui";
 
 import AuthContainer from "@components/ui/AuthContainer";
 
-import type { PageProps } from "@server/lib/auth/error/getStaticProps";
-
 const querySchema = z.object({
   error: z.string().optional(),
 });
 
-export default function Error(props: PageProps) {
+export default function Error() {
   const { t } = useLocale();
   const searchParams = useSearchParams();
   const { error } = querySchema.parse({ error: searchParams?.get("error") || undefined });

apps/web/pages/auth/error.tsx

@@ -1,11 +0,0 @@
-import PageWrapper from "@components/PageWrapper";
-
-import type { PageProps } from "@server/lib/auth/error/getStaticProps";
-import { getStaticProps } from "@server/lib/auth/error/getStaticProps";
-
-import Error from "~/auth/error/error-view";
-
-const Page = (props: PageProps) => <Error {...props} />;
-Page.PageWrapper = PageWrapper;
-export default Page;
-export { getStaticProps };

apps/web/scripts/vercel-app-router-deploy.sh

@@ -16,7 +16,6 @@ checkRoute "$APP_ROUTER_AUTH_LOGIN_ENABLED" app/future/auth/login
 checkRoute "$APP_ROUTER_AUTH_LOGOUT_ENABLED" app/future/auth/logout
 checkRoute "$APP_ROUTER_AUTH_NEW_ENABLED" app/future/auth/new
 checkRoute "$APP_ROUTER_AUTH_SAML_ENABLED" app/future/auth/saml-idp
-checkRoute "$APP_ROUTER_AUTH_ERROR_ENABLED" app/future/auth/error
 checkRoute "$APP_ROUTER_AUTH_PLATFORM_ENABLED" app/future/auth/platform
 checkRoute "$APP_ROUTER_AUTH_OAUTH2_ENABLED" app/future/auth/oauth2
 checkRoute "$APP_ROUTER_TEAM_ENABLED" app/future/team

apps/web/server/lib/auth/error/getStaticProps.ts

@@ -1,14 +0,0 @@
-import type { GetStaticPropsContext, InferGetStaticPropsType } from "next";
-
-import { getTranslations } from "@server/lib/getTranslations";
-
-export type PageProps = InferGetStaticPropsType<typeof getStaticProps>;
-export const getStaticProps = async (context: GetStaticPropsContext) => {
-  const i18n = await getTranslations(context);
-
-  return {
-    props: {
-      i18n,
-    },
-  };
-};

turbo.json

@@ -248,7 +248,6 @@
     "APP_ROUTER_AUTH_LOGOUT_ENABLED",
     "APP_ROUTER_AUTH_NEW_ENABLED",
     "APP_ROUTER_AUTH_SAML_ENABLED",
-    "APP_ROUTER_AUTH_ERROR_ENABLED",
     "APP_ROUTER_AUTH_PLATFORM_ENABLED",
     "APP_ROUTER_AUTH_OAUTH2_ENABLED",
     "APP_ROUTER_TEAM_ENABLED",