added new license required /signup page (#4966)

apps/web/next.config.js

@@ -154,6 +154,11 @@ const nextConfig = {
         destination: "/app-store/:path*",
         permanent: true,
       },
+      {
+        source: "/auth/signup",
+        destination: "/signup",
+        permanent: true,
+      },
       {
         source: "/settings",
         destination: "/settings/my-account/profile",

apps/web/pages/auth/signup.tsx

@@ -1,201 +0,0 @@
-import { GetServerSidePropsContext } from "next";
-import { signIn } from "next-auth/react";
-import { useRouter } from "next/router";
-import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
-
-import prisma from "@calcom/prisma";
-import { Alert } from "@calcom/ui/Alert";
-import Button from "@calcom/ui/Button";
-import { EmailField, PasswordField, TextField } from "@calcom/ui/form/fields";
-
-import { asStringOrNull } from "@lib/asStringOrNull";
-import { NEXT_PUBLIC_BASE_URL } from "@lib/config/constants";
-import { useLocale } from "@lib/hooks/useLocale";
-import { isSAMLLoginEnabled } from "@lib/saml";
-import { inferSSRProps } from "@lib/types/inferSSRProps";
-
-import { HeadSeo } from "@components/seo/head-seo";
-
-import { IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants";
-import { ssrInit } from "@server/lib/ssr";
-
-type Props = inferSSRProps<typeof getServerSideProps>;
-
-type FormValues = {
-  username: string;
-  email: string;
-  password: string;
-  passwordcheck: string;
-  apiError: string;
-};
-
-export default function Signup({ email }: Props) {
-  const { t } = useLocale();
-  const router = useRouter();
-  const methods = useForm<FormValues>();
-  const {
-    register,
-    formState: { errors, isSubmitting },
-  } = methods;
-
-  methods.setValue("email", email);
-
-  const handleErrors = async (resp: Response) => {
-    if (!resp.ok) {
-      const err = await resp.json();
-      throw new Error(err.message);
-    }
-  };
-
-  const signUp: SubmitHandler<FormValues> = async (data) => {
-    await fetch("/api/auth/signup", {
-      body: JSON.stringify({
-        ...data,
-      }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-      method: "POST",
-    })
-      .then(handleErrors)
-      .then(
-        async () =>
-          await signIn("Cal.com", {
-            callbackUrl: (`${NEXT_PUBLIC_BASE_URL}/${router.query.callbackUrl}` || "") as string,
-          })
-      )
-      .catch((err) => {
-        methods.setError("apiError", { message: err.message });
-      });
-  };
-
-  return (
-    <div
-      className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8"
-      aria-labelledby="modal-title"
-      role="dialog"
-      aria-modal="true">
-      <HeadSeo title={t("sign_up")} description={t("sign_up")} />
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <h2 className="font-cal text-center text-3xl font-extrabold text-gray-900">
-          {t("create_your_account")}
-        </h2>
-      </div>
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="mx-2 bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
-          {/* TODO: Refactor as soon as /availability is live */}
-          <FormProvider {...methods}>
-            <form onSubmit={methods.handleSubmit(signUp)} className="space-y-6 bg-white">
-              {errors.apiError && <Alert severity="error" message={errors.apiError?.message} />}
-              <div className="space-y-2">
-                <TextField
-                  addOnLeading={
-                    <span className="inline-flex items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500">
-                      {process.env.NEXT_PUBLIC_WEBSITE_URL}/
-                    </span>
-                  }
-                  labelProps={{ className: "block text-sm font-medium text-gray-700" }}
-                  className="block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 text-sm lowercase focus:border-black focus:ring-black"
-                  {...register("username")}
-                  required
-                />
-                <EmailField
-                  {...register("email")}
-                  className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
-                />
-                <PasswordField
-                  labelProps={{
-                    className: "block text-sm font-medium text-gray-700",
-                  }}
-                  {...register("password")}
-                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
-                />
-                <PasswordField
-                  label={t("confirm_password")}
-                  labelProps={{
-                    className: "block text-sm font-medium text-gray-700",
-                  }}
-                  {...register("passwordcheck", {
-                    validate: (value) =>
-                      value === methods.watch("password") || (t("error_password_mismatch") as string),
-                  })}
-                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
-                />
-              </div>
-              <div className="flex space-x-2 rtl:space-x-reverse">
-                <Button loading={isSubmitting} className="w-7/12 justify-center">
-                  {t("create_account")}
-                </Button>
-                <Button
-                  color="secondary"
-                  className="w-5/12 justify-center"
-                  onClick={() =>
-                    signIn("Cal.com", {
-                      callbackUrl: (`${NEXT_PUBLIC_BASE_URL}/${router.query.callbackUrl}` || "") as string,
-                    })
-                  }>
-                  {t("login_instead")}
-                </Button>
-              </div>
-            </form>
-          </FormProvider>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
-  const ssr = await ssrInit(ctx);
-  const token = asStringOrNull(ctx.query.token);
-  if (!token) {
-    return {
-      notFound: true,
-    };
-  }
-  const verificationToken = await prisma.verificationToken.findUnique({
-    where: {
-      token,
-    },
-  });
-
-  // for now, disable if no verificationToken given or token expired
-  if (!verificationToken || verificationToken.expires < new Date()) {
-    return {
-      notFound: true,
-    };
-  }
-
-  const existingUser = await prisma.user.findFirst({
-    where: {
-      AND: [
-        {
-          email: verificationToken.identifier,
-        },
-        {
-          emailVerified: {
-            not: null,
-          },
-        },
-      ],
-    },
-  });
-
-  if (existingUser) {
-    return {
-      redirect: {
-        permanent: false,
-        destination: "/auth/login?callbackUrl=" + `${NEXT_PUBLIC_BASE_URL}/${ctx.query.callbackUrl}`,
-      },
-    };
-  }
-
-  return {
-    props: {
-      isGoogleLoginEnabled: IS_GOOGLE_LOGIN_ENABLED,
-      isSAMLLoginEnabled,
-      email: verificationToken.identifier,
-      trpcState: ssr.dehydrate(),
-    },
-  };
-};

apps/web/pages/signup.tsx

@@ -0,0 +1,194 @@
+import type { GetServerSidePropsContext } from "next";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/router";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
+
+import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { inferSSRProps } from "@calcom/types/inferSSRProps";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/v2/core/Button";
+import { EmailField, PasswordField, TextField } from "@calcom/ui/v2/core/form/fields";
+import { HeadSeo } from "@calcom/web/components/seo/head-seo";
+import { asStringOrNull } from "@calcom/web/lib/asStringOrNull";
+import { WEBAPP_URL } from "@calcom/web/lib/config/constants";
+import prisma from "@calcom/web/lib/prisma";
+import { isSAMLLoginEnabled } from "@calcom/web/lib/saml";
+import { IS_GOOGLE_LOGIN_ENABLED } from "@calcom/web/server/lib/constants";
+import { ssrInit } from "@calcom/web/server/lib/ssr";
+
+type FormValues = {
+  username: string;
+  email: string;
+  password: string;
+  passwordcheck: string;
+  apiError: string;
+};
+
+export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof getServerSideProps>) {
+  const { t } = useLocale();
+  const router = useRouter();
+  const methods = useForm<FormValues>({
+    defaultValues: prepopulateFormValues,
+  });
+  const {
+    register,
+    formState: { errors, isSubmitting },
+  } = methods;
+
+  const handleErrors = async (resp: Response) => {
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.message);
+    }
+  };
+
+  const signUp: SubmitHandler<FormValues> = async (data) => {
+    await fetch("/api/auth/signup", {
+      body: JSON.stringify({
+        ...data,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    })
+      .then(handleErrors)
+      .then(
+        async () =>
+          await signIn("Cal.com", {
+            callbackUrl: (`${WEBAPP_URL}/${router.query.callbackUrl}` || "") as string,
+          })
+      )
+      .catch((err) => {
+        methods.setError("apiError", { message: err.message });
+      });
+  };
+
+  return (
+    <LicenseRequired>
+      <div
+        className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8"
+        aria-labelledby="modal-title"
+        role="dialog"
+        aria-modal="true">
+        <HeadSeo title={t("sign_up")} description={t("sign_up")} />
+        <div className="sm:mx-auto sm:w-full sm:max-w-md">
+          <h2 className="font-cal text-center text-3xl font-extrabold text-gray-900">
+            {t("create_your_account")}
+          </h2>
+        </div>
+        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+          <div className="mx-2 bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
+            <FormProvider {...methods}>
+              <form onSubmit={methods.handleSubmit(signUp)} className="space-y-6 bg-white">
+                {errors.apiError && <Alert severity="error" message={errors.apiError?.message} />}
+                <div className="space-y-2">
+                  <TextField
+                    addOnLeading={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/`}
+                    {...register("username")}
+                    required
+                  />
+                  <EmailField {...register("email")} />
+                  <PasswordField
+                    labelProps={{
+                      className: "block text-sm font-medium text-gray-700",
+                    }}
+                    {...register("password")}
+                    className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                  />
+                  <PasswordField
+                    label={t("confirm_password")}
+                    {...register("passwordcheck", {
+                      validate: (value) =>
+                        value === methods.watch("password") || (t("error_password_mismatch") as string),
+                    })}
+                  />
+                </div>
+                <div className="flex space-x-2 rtl:space-x-reverse">
+                  <Button type="submit" loading={isSubmitting} className="w-7/12 justify-center">
+                    {t("create_account")}
+                  </Button>
+                  <Button
+                    color="secondary"
+                    className="w-5/12 justify-center"
+                    onClick={() =>
+                      signIn("Cal.com", {
+                        callbackUrl: (`${WEBAPP_URL}/${router.query.callbackUrl}` || "") as string,
+                      })
+                    }>
+                    {t("login_instead")}
+                  </Button>
+                </div>
+              </form>
+            </FormProvider>
+          </div>
+        </div>
+      </div>
+    </LicenseRequired>
+  );
+}
+
+export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(ctx);
+  const token = asStringOrNull(ctx.query.token);
+
+  const props = {
+    isGoogleLoginEnabled: IS_GOOGLE_LOGIN_ENABLED,
+    isSAMLLoginEnabled,
+    trpcState: ssr.dehydrate(),
+    prepopulateFormValues: undefined,
+  };
+
+  // no token given, treat as a normal signup without verification token
+  if (!token) {
+    return {
+      props,
+    };
+  }
+
+  const verificationToken = await prisma.verificationToken.findUnique({
+    where: {
+      token,
+    },
+  });
+
+  if (!verificationToken || verificationToken.expires < new Date()) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const existingUser = await prisma.user.findFirst({
+    where: {
+      AND: [
+        {
+          email: verificationToken?.identifier,
+        },
+        {
+          emailVerified: {
+            not: null,
+          },
+        },
+      ],
+    },
+  });
+
+  if (existingUser) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: "/auth/login?callbackUrl=" + `${WEBAPP_URL}/${ctx.query.callbackUrl}`,
+      },
+    };
+  }
+
+  return {
+    props: {
+      ...props,
+      prepopulateFormValues: {
+        email: verificationToken.identifier,
+      },
+    },
+  };
+};

packages/trpc/server/routers/viewer/teams.tsx

@@ -302,7 +302,7 @@ export const viewerTeamsRouter = createProtectedRouter()
             from: ctx.user.name,
             to: input.usernameOrEmail,
             teamName: team.name,
-            joinLink: `${WEBAPP_URL}/auth/signup?token=${token}&callbackUrl=/settings/teams`,
+            joinLink: `${WEBAPP_URL}/signup?token=${token}&callbackUrl=/settings/teams`,
           });
         }
       } else {