feat: show dialog when changing email after using Google Login

apps/web/pages/api/auth/forgot-password.ts

@@ -1,13 +1,9 @@
-import type { ResetPasswordRequest } from "@prisma/client";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { z } from "zod";
 
-import dayjs from "@calcom/dayjs";
-import { sendPasswordResetEmail } from "@calcom/emails";
-import { PASSWORD_RESET_EXPIRY_HOURS } from "@calcom/emails/templates/forgot-password-email";
+import { passwordResetRequest } from "@calcom/features/auth/lib/passwordResetRequest";
 import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
 import { defaultHandler } from "@calcom/lib/server";
-import { getTranslation } from "@calcom/lib/server/i18n";
 import prisma from "@calcom/prisma";
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -37,63 +33,16 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
   });
 
   try {
-    const maybeUser = await prisma.user.findUnique({
-      where: {
-        email: email.data,
-      },
-      select: {
-        name: true,
-        identityProvider: true,
-        email: true,
-        locale: true,
-      },
+    const user = await prisma.user.findUnique({
+      where: { email: email.data },
+      select: { name: true, email: true, locale: true },
     });
-
-    if (!maybeUser) {
-      // Don't leak information about whether an email is registered or not
-      return res
-        .status(200)
-        .json({ message: "If this email exists in our system, you should receive a Reset email." });
-    }
-
-    const t = await getTranslation(maybeUser.locale ?? "en", "common");
-
-    const maybePreviousRequest = await prisma.resetPasswordRequest.findMany({
-      where: {
-        email: maybeUser.email,
-        expires: {
-          gt: new Date(),
-        },
-      },
-    });
-
-    let passwordRequest: ResetPasswordRequest;
-
-    if (maybePreviousRequest && maybePreviousRequest?.length >= 1) {
-      passwordRequest = maybePreviousRequest[0];
-    } else {
-      const expiry = dayjs().add(PASSWORD_RESET_EXPIRY_HOURS, "hours").toDate();
-      const createdResetPasswordRequest = await prisma.resetPasswordRequest.create({
-        data: {
-          email: maybeUser.email,
-          expires: expiry,
-        },
-      });
-      passwordRequest = createdResetPasswordRequest;
-    }
-
-    const resetLink = `${process.env.NEXT_PUBLIC_WEBAPP_URL}/auth/forgot-password/${passwordRequest.id}`;
-    await sendPasswordResetEmail({
-      language: t,
-      user: maybeUser,
-      resetLink,
-    });
-
-    return res
-      .status(201)
-      .json({ message: "If this email exists in our system, you should receive a Reset email." });
+    // Don't leak info about whether the user exists
+    if (!user) return res.status(201).json({ message: "password_reset_email_sent" });
+    await passwordResetRequest(user);
+    return res.status(201).json({ message: "password_reset_email_sent" });
   } catch (reason) {
-    // console.error(reason);
+    console.error(reason);
     return res.status(500).json({ message: "Unable to create password reset request" });
   }
 }

apps/web/pages/auth/forgot-password/index.tsx

@@ -3,7 +3,6 @@ import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import type { CSSProperties, SyntheticEvent } from "react";
 import React from "react";
 
@@ -20,7 +19,6 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
   const [error, setError] = React.useState<{ message: string } | null>(null);
   const [success, setSuccess] = React.useState(false);
   const [email, setEmail] = React.useState("");
-  const router = useRouter();
 
   const handleChange = (e: SyntheticEvent) => {
     const target = e.target as typeof e.target & { value: string };
@@ -40,8 +38,6 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
       const json = await res.json();
       if (!res.ok) {
         setError(json);
-      } else if ("resetLink" in json) {
-        router.push(json.resetLink);
       } else {
         setSuccess(true);
       }

apps/web/pages/auth/logout.tsx

@@ -29,6 +29,12 @@ export function Logout(props: Props) {
   }, [props.query?.survey]);
   const { t } = useLocale();
 
+  const message = () => {
+    if (props.query?.passReset === "true") return "reset_your_password";
+    if (props.query?.emailChange === "true") return "email_change";
+    return "hope_to_see_you_soon";
+  };
+
   return (
     <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
       <div className="mb-4">
@@ -40,7 +46,7 @@ export function Logout(props: Props) {
             {t("youve_been_logged_out")}
           </h3>
           <div className="mt-2">
-            <p className="text-subtle text-sm">{t("hope_to_see_you_soon")}</p>
+            <p className="text-subtle text-sm">{t(message())}</p>
           </div>
         </div>
       </div>

apps/web/pages/settings/my-account/profile.tsx

@@ -1,15 +1,13 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { signOut } from "next-auth/react";
-import { useSession } from "next-auth/react";
+import { signOut, useSession } from "next-auth/react";
 import type { BaseSyntheticEvent } from "react";
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
-import { APP_NAME } from "@calcom/lib/constants";
+import { APP_NAME, FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
 import turndown from "@calcom/lib/turndownService";
@@ -26,6 +24,7 @@
   DialogContent,
   DialogFooter,
   DialogTrigger,
+  Editor,
   Form,
   ImageUploader,
   Label,
@@ -37,7 +36,6 @@
   SkeletonContainer,
   SkeletonText,
   TextField,
-  Editor,
 } from "@calcom/ui";
 import { AlertTriangle, Trash2 } from "@calcom/ui/components/icon";
 
@@ -79,16 +77,27 @@
 const ProfileView = () => {
   const { t } = useLocale();
   const utils = trpc.useContext();
   const { data: session, update } = useSession();
 
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
   const { data: avatar, isLoading: isLoadingAvatar } = trpc.viewer.avatar.useQuery();
-  const mutation = trpc.viewer.updateProfile.useMutation({
-    onSuccess: (values) => {
+  const updateProfileMutation = trpc.viewer.updateProfile.useMutation({
+    onSuccess: async (res) => {
       showToast(t("settings_updated_successfully"), "success");
+      if (res.signOutUser && tempFormValues) {
+        if (res.passwordReset) {
+          showToast(t("password_reset_email", { email: tempFormValues.email }), "success");
+          // sign out the user to avoid unauthorized access error
+          await signOut({ callbackUrl: "/auth/logout?passReset=true" });
+        } else {
+          // sign out the user to avoid unauthorized access error
+          await signOut({ callbackUrl: "/auth/logout?emailChange=true" });
+        }
+      }
       utils.viewer.me.invalidate();
       utils.viewer.avatar.invalidate();
-      update(values);
+      setConfirmAuthEmailChangeWarningDialogOpen(false);
+      update(res);
       setTempFormValues(null);
     },
     onError: () => {
@@ -99,6 +108,8 @@
   const [confirmPasswordOpen, setConfirmPasswordOpen] = useState(false);
   const [tempFormValues, setTempFormValues] = useState<FormValues | null>(null);
   const [confirmPasswordErrorMessage, setConfirmPasswordDeleteErrorMessage] = useState("");
+  const [confirmAuthEmailChangeWarningDialogOpen, setConfirmAuthEmailChangeWarningDialogOpen] =
+    useState(false);
 
   const [deleteAccountOpen, setDeleteAccountOpen] = useState(false);
   const [hasDeleteErrors, setHasDeleteErrors] = useState(false);
@@ -119,9 +130,7 @@
 
   const confirmPasswordMutation = trpc.viewer.auth.verifyPassword.useMutation({
     onSuccess() {
-      if (tempFormValues) {
-        mutation.mutate(tempFormValues);
-      }
+      if (tempFormValues) updateProfileMutation.mutate(tempFormValues);
       setConfirmPasswordOpen(false);
     },
     onError() {
@@ -148,7 +157,7 @@
     },
   });
 
-  const isCALIdentityProviver = user?.identityProvider === IdentityProvider.CAL;
+  const isCALIdentityProvider = user?.identityProvider === IdentityProvider.CAL;
 
   const onConfirmPassword = (e: Event | React.MouseEvent<HTMLElement, MouseEvent>) => {
     e.preventDefault();
@@ -157,9 +166,15 @@
     confirmPasswordMutation.mutate({ passwordInput: password });
   };
 
+  const onConfirmAuthEmailChange = (e: Event | React.MouseEvent<HTMLElement, MouseEvent>) => {
+    e.preventDefault();
+
+    if (tempFormValues) updateProfileMutation.mutate(tempFormValues);
+  };
+
   const onConfirmButton = (e: Event | React.MouseEvent<HTMLElement, MouseEvent>) => {
     e.preventDefault();
-    if (isCALIdentityProviver) {
+    if (isCALIdentityProvider) {
       const totpCode = form.getValues("totpCode");
       const password = passwordRef.current.value;
       deleteMeMutation.mutate({ password, totpCode });
@@ -170,7 +185,7 @@
 
   const onConfirm = ({ totpCode }: DeleteAccountValues, e: BaseSyntheticEvent | undefined) => {
     e?.preventDefault();
-    if (isCALIdentityProviver) {
+    if (isCALIdentityProvider) {
       const password = passwordRef.current.value;
       deleteMeMutation.mutate({ password, totpCode });
     } else {
@@ -209,13 +224,17 @@
       <ProfileForm
         key={JSON.stringify(defaultValues)}
         defaultValues={defaultValues}
-        isLoading={mutation.isLoading}
+        isLoading={updateProfileMutation.isLoading}
         onSubmit={(values) => {
-          if (values.email !== user.email && isCALIdentityProviver) {
+          if (values.email !== user.email && isCALIdentityProvider) {
             setTempFormValues(values);
             setConfirmPasswordOpen(true);
+          } else if (values.email !== user.email && !isCALIdentityProvider) {
+            setTempFormValues(values);
+            // Opens a dialog warning the change
+            setConfirmAuthEmailChangeWarningDialogOpen(true);
           } else {
-            mutation.mutate(values);
+            updateProfileMutation.mutate(values);
           }
         }}
         extraField={
@@ -253,7 +272,7 @@
               <p className="text-default mb-4">
                 {t("delete_account_confirmation_message", { appName: APP_NAME })}
               </p>
-              {isCALIdentityProviver && (
+              {isCALIdentityProvider && (
                 <PasswordField
                   data-testid="password"
                   name="password"
@@ -265,7 +284,7 @@
                 />
               )}
 
-              {user?.twoFactorEnabled && isCALIdentityProviver && (
+              {user?.twoFactorEnabled && isCALIdentityProvider && (
                 <Form handleSubmit={onConfirm} className="pb-4" form={form}>
                   <TwoFactor center={false} />
                 </Form>
@@ -314,6 +333,27 @@
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* If changing email from !CAL Login */}
+      <Dialog
+        open={confirmAuthEmailChangeWarningDialogOpen}
+        onOpenChange={setConfirmAuthEmailChangeWarningDialogOpen}>
+        <DialogContent
+          title={t("confirm_auth_change")}
+          description={t("confirm_auth_email_change")}
+          type="creation"
+          Icon={AlertTriangle}>
+          <DialogFooter>
+            <Button
+              color="primary"
+              disabled={updateProfileMutation.isLoading}
+              onClick={(e) => onConfirmAuthEmailChange(e)}>
+              {t("confirm")}
+            </Button>
+            <DialogClose />
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 };

apps/web/public/static/locales/en/common.json

@@ -84,6 +84,7 @@
   "event_awaiting_approval_recurring": "A recurring event is waiting for your approval",
   "someone_requested_an_event": "Someone has requested to schedule an event on your calendar.",
   "someone_requested_password_reset": "Someone has requested a link to change your password.",
+  "password_reset_email_sent": "If this email exists in our system, you should receive a reset email.",
   "password_reset_instructions": "If you didn't request this, you can safely ignore this email and your password will not be changed.",
   "event_awaiting_approval_subject": "Awaiting Approval: {{title}} at {{date}}",
   "event_still_awaiting_approval": "An event is still waiting for your approval",
@@ -223,6 +224,10 @@
   "already_have_an_account": "Already have an account?",
   "create_account": "Create Account",
   "confirm_password": "Confirm password",
+  "confirm_auth_change": "This will change the way you log in",
+  "confirm_auth_email_change": "Changing the email address will disconnect your current authentication method to log in to Cal.com. We will ask you to verify your new email address. Moving forward, you will be logged out and use your new email address to log in instead of your current authentication method after setting your password by following the instructions that will be sent to your mail.",
+  "reset_your_password": "Set your new password with the instructions sent to your email address.",
+  "email_change": "Log back in with your new email address and password.",
   "create_your_account": "Create your account",
   "sign_up": "Sign up",
   "youve_been_logged_out": "You've been logged out",

packages/emails/templates/forgot-password-email.ts

@@ -1,4 +1,4 @@
-import { TFunction } from "next-i18next";
+import type { TFunction } from "next-i18next";
 
 import { APP_NAME } from "@calcom/lib/constants";
 
@@ -14,8 +14,6 @@ export type PasswordReset = {
   resetLink: string;
 };
 
-export const PASSWORD_RESET_EXPIRY_HOURS = 6;
-
 export default class ForgotPasswordEmail extends BaseEmail {
   passwordEvent: PasswordReset;