From 5417012cec5d57eda1b636df5867e0eec4d79453 Mon Sep 17 00:00:00 2001 From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com> Date: Tue, 4 Nov 2025 22:31:05 +0530 Subject: [PATCH] Revert "fix: sanitize username input to prevent hyperlinks (#24210)" (#24916) This reverts commit 7d16da5c98cbf499e26650a7d333d642335c113c. --- .../ui/UsernameAvailability/PremiumTextfield.tsx | 14 +++++--------- .../ui/UsernameAvailability/UsernameTextfield.tsx | 12 ++++-------- .../components/ui/UsernameAvailability/index.tsx | 9 ++------- 3 files changed, 11 insertions(+), 24 deletions(-) diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx index 7b8639ec29..f61d1e5d71 100644 --- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx +++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx @@ -13,7 +13,6 @@ import { fetchUsername } from "@calcom/lib/fetchUsername"; import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata"; import { useDebounce } from "@calcom/lib/hooks/useDebounce"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import slugify from "@calcom/lib/slugify"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import type { AppRouter } from "@calcom/trpc/types/server/routers/_app"; @@ -82,7 +81,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => { useEffect(() => { // Use the current username or if it's not set, use the one available from stripe - setInputUsernameValue(slugify(currentUsername || stripeCustomer?.username || "", true)); + setInputUsernameValue(currentUsername || stripeCustomer?.username || ""); }, [setInputUsernameValue, currentUsername, stripeCustomer?.username]); useEffect(() => { @@ -106,8 +105,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => { const updateUsername = trpc.viewer.me.updateProfile.useMutation({ onSuccess: async () => { onSuccessMutation && (await onSuccessMutation()); - const sanitizedUsername = slugify(inputUsernameValue || ""); - await update({ username: sanitizedUsername }); + await update({ username: inputUsernameValue }); setOpenDialogSaveUsername(false); }, onError: (error) => { @@ -173,12 +171,11 @@ const PremiumTextfield = (props: ICustomUsernameProps) => { }; const saveUsername = () => { - const sanitizedUsername = slugify(inputUsernameValue || ""); if (usernameChangeCondition !== UsernameChangeStatusEnum.UPGRADE) { updateUsername.mutate({ - username: sanitizedUsername, + username: inputUsernameValue, }); - setCurrentUsername(sanitizedUsername); + setCurrentUsername(inputUsernameValue); } }; @@ -237,8 +234,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => { if (searchParams?.toString() !== _searchParams.toString()) { router.replace(`${pathname}?${_searchParams.toString()}`); } - const sanitized = slugify(event.target.value, true); - setInputUsernameValue(sanitized); + setInputUsernameValue(event.target.value); }} data-testid="username-input" /> diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx index 654d551f15..d680a0afc0 100644 --- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx +++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx @@ -16,7 +16,6 @@ import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/ import { TextField } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; import { Tooltip } from "@calcom/ui/components/tooltip"; -import slugify from "@calcom/lib/slugify"; import type { TRPCClientErrorLike } from "@trpc/client"; @@ -73,11 +72,10 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial { - const sanitizedUsername = slugify(inputUsernameValue || ""); onSuccessMutation && (await onSuccessMutation()); setOpenDialogSaveUsername(false); - setCurrentUsername(sanitizedUsername); - await update({ username: sanitizedUsername }); + setCurrentUsername(inputUsernameValue); + await update({ username: inputUsernameValue }); }, onError: (error) => { onErrorMutation && onErrorMutation(error); @@ -110,9 +108,8 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial { - const sanitizedUsername = slugify(inputUsernameValue || ""); updateUsernameMutation.mutate({ - username: sanitizedUsername, + username: inputUsernameValue, }); }; @@ -137,8 +134,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial { event.preventDefault(); - const sanitized = slugify(event.target.value, true); - setInputUsernameValue(sanitized); + setInputUsernameValue(event.target.value); }} data-testid="username-input" {...rest} diff --git a/apps/web/components/ui/UsernameAvailability/index.tsx b/apps/web/components/ui/UsernameAvailability/index.tsx index eeb1346412..e8d67a18ef 100644 --- a/apps/web/components/ui/UsernameAvailability/index.tsx +++ b/apps/web/components/ui/UsernameAvailability/index.tsx @@ -6,7 +6,6 @@ import { Controller, useForm } from "react-hook-form"; import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider"; import { WEBSITE_URL, IS_SELF_HOSTED } from "@calcom/lib/constants"; -import slugify from "@calcom/lib/slugify"; import { trpc } from "@calcom/trpc/react"; import type { AppRouter } from "@calcom/trpc/types/server/routers/_app"; @@ -57,7 +56,7 @@ export const UsernameAvailabilityField = ({ : { username: currentUsernameState || "", setQuery: setCurrentUsernameState }; const formMethods = useForm({ defaultValues: { - username: slugify(currentUsername || user.username || ""), + username: currentUsername, }, }); @@ -79,11 +78,7 @@ export const UsernameAvailabilityField = ({ setCurrentUsername={setCurrentUsername} inputUsernameValue={value} usernameRef={ref} - setInputUsernameValue={(val) => { - const displayValue = slugify(val, true); - formMethods.setValue("username", displayValue); - onChange?.(displayValue); - }} + setInputUsernameValue={onChange} onSuccessMutation={onSuccessMutation} onErrorMutation={onErrorMutation} disabled={!!user.organization?.id}