import crypto from "crypto"; import { GetServerSidePropsContext } from "next"; import { signOut } from "next-auth/react"; import { useRef, useState, BaseSyntheticEvent } from "react"; import { Controller, useForm } from "react-hook-form"; import { ErrorCode, getSession } from "@calcom/lib/auth"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import prisma from "@calcom/prisma"; import { TRPCClientErrorLike } from "@calcom/trpc/client"; import { trpc } from "@calcom/trpc/react"; import { AppRouter } from "@calcom/trpc/server/routers/_app"; import { Icon } from "@calcom/ui"; import { Alert } from "@calcom/ui/Alert"; import Avatar from "@calcom/ui/v2/core/Avatar"; import { Button } from "@calcom/ui/v2/core/Button"; import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/v2/core/Dialog"; import Meta from "@calcom/ui/v2/core/Meta"; import { Form, Label, TextField, PasswordField } from "@calcom/ui/v2/core/form/fields"; import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout"; import showToast from "@calcom/ui/v2/core/notifications"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import TwoFactor from "@components/auth/TwoFactor"; import ImageUploader from "@components/v2/settings/ImageUploader"; interface DeleteAccountValues { totpCode: string; } const ProfileView = (props: inferSSRProps) => { const { t } = useLocale(); const utils = trpc.useContext(); const { user } = props; // const { data: user, isLoading } = trpc.useQuery(["viewer.me"]); const mutation = trpc.useMutation("viewer.updateProfile", { onSuccess: () => { showToast(t("settings_updated_successfully"), "success"); }, onError: () => { showToast(t("error_updating_settings"), "error"); }, }); const [deleteAccountOpen, setDeleteAccountOpen] = useState(false); const [hasDeleteErrors, setHasDeleteErrors] = useState(false); const [deleteErrorMessage, setDeleteErrorMessage] = useState(""); const form = useForm(); const onDeleteMeSuccessMutation = async () => { await utils.invalidateQueries(["viewer.me"]); 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 onDeleteMeErrorMutation = (error: TRPCClientErrorLike) => { setHasDeleteErrors(true); setDeleteErrorMessage(errorMessages[error.message]); }; const deleteMeMutation = trpc.useMutation("viewer.deleteMe", { onSuccess: onDeleteMeSuccessMutation, onError: onDeleteMeErrorMutation, async onSettled() { await utils.invalidateQueries(["viewer.me"]); }, }); const onConfirmButton = (e: Event | React.MouseEvent) => { e.preventDefault(); const totpCode = form.getValues("totpCode"); const password = passwordRef.current.value; deleteMeMutation.mutate({ password, totpCode }); }; const onConfirm = ({ totpCode }: DeleteAccountValues, e: BaseSyntheticEvent | undefined) => { e?.preventDefault(); const password = passwordRef.current.value; deleteMeMutation.mutate({ password, totpCode }); }; const formMethods = useForm({ defaultValues: { avatar: user.avatar || "", username: user?.username || "", name: user?.name || "", bio: user?.bio || "", }, }); 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"), }; return ( <>
{ mutation.mutate(values); }}>
{/* TODO upload new avatar */} ( <>
{ formMethods.setValue("avatar", newAvatar); }} imageSrc={value} />
)} />
(
{ formMethods.setValue("username", e?.target.value); }} />
)} /> (
{ formMethods.setValue("name", e?.target.value); }} />
)} /> (
{ formMethods.setValue("bio", e?.target.value); }} />
)} />
{/* Delete account Dialog */} e && onConfirmButton(e)}> <>

{t("delete_account_confirmation_message")}

{user.twoFactorEnabled && ( )} {hasDeleteErrors && }
); }; ProfileView.getLayout = getLayout; export default ProfileView; export const getServerSideProps = async (context: GetServerSidePropsContext) => { const session = await getSession(context); if (!session?.user?.id) { return { redirect: { permanent: false, destination: "/auth/login" } }; } const user = await prisma.user.findUnique({ where: { id: session.user.id, }, select: { id: true, username: true, email: true, name: true, bio: true, avatar: true, twoFactorEnabled: true, }, }); if (!user) { throw new Error("User seems logged in but cannot be found in the db"); } return { props: { user: { ...user, emailMd5: crypto.createHash("md5").update(user.email).digest("hex"), }, }, }; };