import crypto from "crypto"; import { GetServerSidePropsContext } from "next"; import { signOut } from "next-auth/react"; import { Trans } from "next-i18next"; import { useRef, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import prisma from "@calcom/prisma"; import { trpc } from "@calcom/trpc/react"; import { Icon } from "@calcom/ui"; 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 } 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 { getSession } from "@lib/auth"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import ImageUploader from "@components/v2/settings/ImageUploader"; const ProfileView = (props: inferSSRProps) => { const { t } = useLocale(); 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 deleteAccount = async () => { await fetch("/api/user/me", { method: "DELETE", headers: { "Content-Type": "application/json", }, }).catch((e) => { console.error(`Error Removing user: ${user?.id}, email: ${user?.email} :`, e); }); if (process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.com") { signOut({ callbackUrl: "/auth/logout?survey=true" }); } else { signOut({ callbackUrl: "/auth/logout" }); } }; const formMethods = useForm({ defaultValues: { avatar: user.avatar || "", username: user?.username || "", name: user?.name || "", bio: user?.bio || "", }, }); const avatarRef = useRef(null!); 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 */} deleteAccount()}> {/* Use trans component for translation */}

Anyone who you have shared your account link with will no longer be able to book using it and any preferences you have saved will be lost

); }; 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, }, }); 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"), }, }, }; };