From b268540d35998bb614125a69416e406419f652bc Mon Sep 17 00:00:00 2001
From: Sasha <reactionnnnn@gmail.com>
Date: Fri, 19 Jan 2024 21:02:50 +0200
Subject: [PATCH] chore: [app-router-migration 33] migrate the "verify email"
 pages (#13198)

## What does this PR do?

- This PR migrates the `/auth/verify` and `/auth/verify-email` pages to the app directory (which runs under the App Router).
- The migrated pages exist under `/future/auth/verify` and `/future/auth/verify-email` and are accessible at all times.

## Requirement/Documentation

- If there is a requirement document, please, share it here.
- If there is ab UI/UX design document, please, share it here.

## Type of change

- [x] Chore (refactoring code, technical debt, workflow improvements)
- [x] New feature (non-breaking change which adds functionality)

## How should this be tested?

There should be no changes between the old verify and new verify routes in terms of content and no downgrading in terms of performance.
The pages were not tested due to being unable to reproduce the flow locally.

## Mandatory Tasks

- [x] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.
---
 apps/web/app/future/auth/verify-email/page.tsx | 15 +++++++++++++++
 apps/web/app/future/auth/verify/page.tsx       | 11 +++++++++++
 apps/web/pages/auth/verify-email.tsx           |  2 ++
 apps/web/pages/auth/verify.tsx                 | 18 +++++++-----------
 .../lib/auth/verify/getServerSideProps.tsx     | 11 +++++++++++
 5 files changed, 46 insertions(+), 11 deletions(-)
 create mode 100644 apps/web/app/future/auth/verify-email/page.tsx
 create mode 100644 apps/web/app/future/auth/verify/page.tsx
 create mode 100644 apps/web/server/lib/auth/verify/getServerSideProps.tsx

diff --git a/apps/web/app/future/auth/verify-email/page.tsx b/apps/web/app/future/auth/verify-email/page.tsx
new file mode 100644
index 0000000000..a3f88601b0
--- /dev/null
+++ b/apps/web/app/future/auth/verify-email/page.tsx
@@ -0,0 +1,15 @@
+import VerifyEmailPage from "@pages/auth/verify-email";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => t("check_your_email"),
+    (t) => t("check_your_email")
+  );
+};
+
+export default WithLayout({
+  getLayout: null,
+  Page: VerifyEmailPage,
+})<"P">;
diff --git a/apps/web/app/future/auth/verify/page.tsx b/apps/web/app/future/auth/verify/page.tsx
new file mode 100644
index 0000000000..2fd6168250
--- /dev/null
+++ b/apps/web/app/future/auth/verify/page.tsx
@@ -0,0 +1,11 @@
+import VerifyPage from "@pages/auth/verify";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { WithLayout } from "app/layoutHOC";
+
+import { getServerSideProps } from "@server/lib/auth/verify/getServerSideProps";
+
+export default WithLayout({
+  getLayout: null,
+  Page: VerifyPage,
+  getData: withAppDirSsr(getServerSideProps),
+})<"P">;
diff --git a/apps/web/pages/auth/verify-email.tsx b/apps/web/pages/auth/verify-email.tsx
index d0a048ca4b..2750dfaccd 100644
--- a/apps/web/pages/auth/verify-email.tsx
+++ b/apps/web/pages/auth/verify-email.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { MailOpenIcon } from "lucide-react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
diff --git a/apps/web/pages/auth/verify.tsx b/apps/web/pages/auth/verify.tsx
index 384efcdac6..ae1100409e 100644
--- a/apps/web/pages/auth/verify.tsx
+++ b/apps/web/pages/auth/verify.tsx
@@ -1,5 +1,6 @@
+"use client";
+
 import { motion } from "framer-motion";
-import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { signIn } from "next-auth/react";
 import Head from "next/head";
 import { usePathname, useRouter } from "next/navigation";
@@ -11,12 +12,15 @@ import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
+import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { Button, showToast } from "@calcom/ui";
 import { AlertTriangle, ExternalLink, MailOpen } from "@calcom/ui/components/icon";
 
 import Loader from "@components/Loader";
 import PageWrapper from "@components/PageWrapper";
 
+import { getServerSideProps } from "@server/lib/auth/verify/getServerSideProps";
+
 async function sendVerificationLogin(email: string, username: string) {
   await signIn("email", {
     email: email.toLowerCase(),
@@ -112,7 +116,7 @@ const MailOpenIcon = () => (
   </div>
 );
 
-export default function Verify(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function Verify(props: inferSSRProps<typeof getServerSideProps>) {
   const searchParams = useCompatSearchParams();
   const pathname = usePathname();
   const router = useRouter();
@@ -242,13 +246,5 @@ export default function Verify(props: InferGetServerSidePropsType<typeof getServ
   );
 }
 
-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const EMAIL_FROM = process.env.EMAIL_FROM;
-
-  return {
-    props: {
-      EMAIL_FROM,
-    },
-  };
-};
+export { getServerSideProps };
 Verify.PageWrapper = PageWrapper;
diff --git a/apps/web/server/lib/auth/verify/getServerSideProps.tsx b/apps/web/server/lib/auth/verify/getServerSideProps.tsx
new file mode 100644
index 0000000000..f665d9da52
--- /dev/null
+++ b/apps/web/server/lib/auth/verify/getServerSideProps.tsx
@@ -0,0 +1,11 @@
+import type { GetServerSidePropsContext } from "next";
+
+export const getServerSideProps = async (_context: GetServerSidePropsContext) => {
+  const EMAIL_FROM = process.env.EMAIL_FROM;
+
+  return {
+    props: {
+      EMAIL_FROM,
+    },
+  };
+};