import { zodResolver } from "@hookform/resolvers/zod"; import { IdentityProvider } from "@prisma/client"; import { signOut } from "next-auth/react"; import type { BaseSyntheticEvent } from "react"; import { 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 { useLocale } from "@calcom/lib/hooks/useLocale"; import { md } from "@calcom/lib/markdownIt"; import turndown from "@calcom/lib/turndownService"; import type { TRPCClientErrorLike } from "@calcom/trpc/client"; import { trpc } from "@calcom/trpc/react"; import type { AppRouter } from "@calcom/trpc/server/routers/_app"; import { Alert, Avatar, Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogTrigger, Form, ImageUploader, Label, Meta, PasswordField, showToast, SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText, TextField, Editor, } from "@calcom/ui"; import { FiAlertTriangle, FiTrash2 } from "@calcom/ui/components/icon"; import TwoFactor from "@components/auth/TwoFactor"; import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability"; const SkeletonLoader = ({ title, description }: { title: string; description: string }) => { return (
); }; interface DeleteAccountValues { totpCode: string; } type FormValues = { username: string; avatar: string; name: string; email: string; bio: string; }; const ProfileView = () => { const { t } = useLocale(); const utils = trpc.useContext(); const { data: user, isLoading } = trpc.viewer.me.useQuery(); const { data: avatar, isLoading: isLoadingAvatar } = trpc.viewer.avatar.useQuery(); const mutation = trpc.viewer.updateProfile.useMutation({ onSuccess: () => { showToast(t("settings_updated_successfully"), "success"); utils.viewer.me.invalidate(); utils.viewer.avatar.invalidate(); setTempFormValues(null); }, onError: () => { showToast(t("error_updating_settings"), "error"); }, }); const [confirmPasswordOpen, setConfirmPasswordOpen] = useState(false); const [tempFormValues, setTempFormValues] = useState(null); const [confirmPasswordErrorMessage, setConfirmPasswordDeleteErrorMessage] = useState(""); const [deleteAccountOpen, setDeleteAccountOpen] = useState(false); const [hasDeleteErrors, setHasDeleteErrors] = useState(false); const [deleteErrorMessage, setDeleteErrorMessage] = useState(""); const form = useForm(); const onDeleteMeSuccessMutation = async () => { await utils.viewer.me.invalidate(); showToast(t("Your account was deleted"), "success"); setHasDeleteErrors(false); // dismiss any open errors if (process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.com") { signOut({ callbackUrl: "/auth/logout?survey=true" }); } else { signOut({ callbackUrl: "/auth/logout" }); } }; const confirmPasswordMutation = trpc.viewer.auth.verifyPassword.useMutation({ onSuccess() { if (tempFormValues) mutation.mutate(tempFormValues); setConfirmPasswordOpen(false); }, onError() { setConfirmPasswordDeleteErrorMessage(t("incorrect_password")); }, }); const onDeleteMeErrorMutation = (error: TRPCClientErrorLike) => { setHasDeleteErrors(true); setDeleteErrorMessage(errorMessages[error.message]); }; const deleteMeMutation = trpc.viewer.deleteMe.useMutation({ onSuccess: onDeleteMeSuccessMutation, onError: onDeleteMeErrorMutation, async onSettled() { await utils.viewer.me.invalidate(); }, }); const deleteMeWithoutPasswordMutation = trpc.viewer.deleteMeWithoutPassword.useMutation({ onSuccess: onDeleteMeSuccessMutation, onError: onDeleteMeErrorMutation, async onSettled() { await utils.viewer.me.invalidate(); }, }); const isCALIdentityProviver = user?.identityProvider === IdentityProvider.CAL; const onConfirmPassword = (e: Event | React.MouseEvent) => { e.preventDefault(); const password = passwordRef.current.value; confirmPasswordMutation.mutate({ passwordInput: password }); }; const onConfirmButton = (e: Event | React.MouseEvent) => { e.preventDefault(); if (isCALIdentityProviver) { const totpCode = form.getValues("totpCode"); const password = passwordRef.current.value; deleteMeMutation.mutate({ password, totpCode }); } else { deleteMeWithoutPasswordMutation.mutate(); } }; const onConfirm = ({ totpCode }: DeleteAccountValues, e: BaseSyntheticEvent | undefined) => { e?.preventDefault(); if (isCALIdentityProviver) { const password = passwordRef.current.value; deleteMeMutation.mutate({ password, totpCode }); } else { deleteMeWithoutPasswordMutation.mutate(); } }; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const passwordRef = useRef(null!); const errorMessages: { [key: string]: string } = { [ErrorCode.SecondFactorRequired]: t("2fa_enabled_instructions"), [ErrorCode.IncorrectPassword]: `${t("incorrect_password")} ${t("please_try_again")}`, [ErrorCode.UserNotFound]: t("no_account_exists"), [ErrorCode.IncorrectTwoFactorCode]: `${t("incorrect_2fa_code")} ${t("please_try_again")}`, [ErrorCode.InternalServerError]: `${t("something_went_wrong")} ${t("please_try_again_and_contact_us")}`, [ErrorCode.ThirdPartyIdentityProviderEnabled]: t("account_created_with_identity_provider"), }; if (isLoading || !user || isLoadingAvatar || !avatar) return ( ); const defaultValues = { username: user.username || "", avatar: avatar.avatar || "", name: user.name || "", email: user.email || "", bio: user.bio || "", }; return ( <> { if (values.email !== user.email && isCALIdentityProviver) { setTempFormValues(values); setConfirmPasswordOpen(true); } else { mutation.mutate(values); } }} extraField={
{ showToast(t("settings_updated_successfully"), "success"); await utils.viewer.me.invalidate(); }} onErrorMutation={() => { showToast(t("error_updating_settings"), "error"); }} />
} />
{/* Delete account Dialog */} <>

{t("delete_account_confirmation_message", { appName: APP_NAME })}

{isCALIdentityProviver && ( )} {user?.twoFactorEnabled && isCALIdentityProviver && (
)} {hasDeleteErrors && }
{/* If changing email, confirm password */} <> {confirmPasswordErrorMessage && } ); }; const ProfileForm = ({ defaultValues, onSubmit, extraField, }: { defaultValues: FormValues; onSubmit: (values: FormValues) => void; extraField?: React.ReactNode; }) => { const { t } = useLocale(); const profileFormSchema = z.object({ username: z.string(), avatar: z.string(), name: z .string() .min(1) .max(FULL_NAME_LENGTH_MAX_LIMIT, { message: t("max_limit_allowed_hint", { limit: FULL_NAME_LENGTH_MAX_LIMIT }), }), email: z.string().email(), bio: z.string(), }); const formMethods = useForm({ defaultValues, resolver: zodResolver(profileFormSchema), }); const { formState: { isSubmitting, isDirty }, } = formMethods; const isDisabled = isSubmitting || !isDirty; return (
( <>
{ formMethods.setValue("avatar", newAvatar, { shouldDirty: true }); }} imageSrc={value || undefined} />
)} />
{extraField}
md.render(formMethods.getValues("bio") || "")} setText={(value: string) => { formMethods.setValue("bio", turndown(value), { shouldDirty: true }); }} excludedToolbarItems={["blockType"]} disableLists />
); }; ProfileView.getLayout = getLayout; export default ProfileView;