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

@@ -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">;

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">;

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";

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;

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,
+    },
+  };
+};