Fixes for avatar payloads (#5921)

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -35,23 +35,7 @@ interface ICustomUsernameProps {
   setInputUsernameValue: (value: string) => void;
   onSuccessMutation?: () => void;
   onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
-  user: Pick<
-    User,
-    | "username"
-    | "name"
-    | "email"
-    | "bio"
-    | "avatar"
-    | "timeZone"
-    | "weekStart"
-    | "hideBranding"
-    | "theme"
-    | "plan"
-    | "brandColor"
-    | "darkBrandColor"
-    | "timeFormat"
-    | "metadata"
-  >;
+  user: Pick<User, "username" | "metadata">;
   readonly?: boolean;
 }
 

apps/web/components/ui/UsernameAvailability/index.tsx

@@ -14,23 +14,7 @@ export const UsernameAvailability = IS_SELF_HOSTED ? UsernameTextfield : Premium
 interface UsernameAvailabilityFieldProps {
   onSuccessMutation?: () => void;
   onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
-  user: Pick<
-    User,
-    | "username"
-    | "name"
-    | "email"
-    | "bio"
-    | "avatar"
-    | "timeZone"
-    | "weekStart"
-    | "hideBranding"
-    | "theme"
-    | "plan"
-    | "brandColor"
-    | "darkBrandColor"
-    | "timeFormat"
-    | "metadata"
-  >;
+  user: Pick<User, "username" | "metadata">;
 }
 export const UsernameAvailabilityField = ({
   onSuccessMutation,

apps/web/pages/api/user/avatar.ts

@@ -1,86 +1,72 @@
 import crypto from "crypto";
 import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
 
-import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import prisma from "@calcom/prisma";
 
 import { defaultAvatarSrc } from "@lib/profile";
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  //   const username = req.url?.substring(1, req.url.lastIndexOf("/"));
-  const username = req.query.username as string;
-  const teamname = req.query.teamname as string;
-  let identity;
-  let linksToThisRoute = false;
+const querySchema = z
+  .object({
+    username: z.string(),
+    teamname: z.string(),
+  })
+  .partial();
+
+async function getIdentityData(req: NextApiRequest) {
+  const { username, teamname } = querySchema.parse(req.query);
+
   if (username) {
     const user = await prisma.user.findUnique({
-      where: {
-        username: username,
-      },
-      select: {
-        avatar: true,
-        email: true,
-      },
+      where: { username },
+      select: { avatar: true, email: true },
     });
-    identity = {
+    return {
       name: username,
       email: user?.email,
       avatar: user?.avatar,
     };
-    linksToThisRoute =
-      identity.avatar === `${CAL_URL}/${username}/avatar.png` ||
-      identity.avatar === `${WEBAPP_URL}/${username}/avatar.png`;
-  } else if (teamname) {
+  }
+  if (teamname) {
     const team = await prisma.team.findUnique({
-      where: {
-        slug: teamname,
-      },
-      select: {
-        logo: true,
-      },
+      where: { slug: teamname },
+      select: { logo: true },
     });
-    identity = {
+    return {
       name: teamname,
-      shouldDefaultBeNameBased: true,
-      avatar: team?.logo,
+      email: null,
+      avatar: team?.logo || getPlaceholderAvatar(null, teamname),
     };
-    linksToThisRoute =
-      identity.avatar === `${CAL_URL}/team/${teamname}/avatar.png` ||
-      identity.avatar === `${WEBAPP_URL}/team/${teamname}/avatar.png`;
   }
+}
 
-  const emailMd5 = crypto
-    .createHash("md5")
-    .update((identity?.email as string) || "[email protected]")
-    .digest("hex");
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const identity = await getIdentityData(req);
   const img = identity?.avatar;
   // If image isn't set or links to this route itself, use default avatar
-  if (!img || linksToThisRoute) {
-    let defaultSrc = defaultAvatarSrc({ md5: emailMd5 });
-    if (identity?.shouldDefaultBeNameBased) {
-      defaultSrc = getPlaceholderAvatar(null, identity.name);
-    }
+  if (!img) {
     res.writeHead(302, {
-      Location: defaultSrc,
+      Location: defaultAvatarSrc({
+        md5: crypto
+          .createHash("md5")
+          .update(identity?.email || "[email protected]")
+          .digest("hex"),
+      }),
     });
+    return res.end();
+  }
 
-    res.end();
-  } else if (!img.includes("data:image")) {
-    res.writeHead(302, {
-      Location: img,
-    });
-    res.end();
-  } else {
-    const decoded = img
-      .toString()
-      .replace("data:image/png;base64,", "")
-      .replace("data:image/jpeg;base64,", "");
-    const imageResp = Buffer.from(decoded, "base64");
-    res.writeHead(200, {
-      "Content-Type": "image/png",
-      "Content-Length": imageResp.length,
-    });
-    res.end(imageResp);
+  if (!img.includes("data:image")) {
+    res.writeHead(302, { Location: img });
+    return res.end();
   }
+
+  const decoded = img.toString().replace("data:image/png;base64,", "").replace("data:image/jpeg;base64,", "");
+  const imageResp = Buffer.from(decoded, "base64");
+  res.writeHead(200, {
+    "Content-Type": "image/png",
+    "Content-Length": imageResp.length,
+  });
+  res.end(imageResp);
 }