Revert "fix: sanitize username input to prevent hyperlinks (#24210)" (#24916)

This reverts commit 7d16da5c98.

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"
           />

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<React.Component
 
   const updateUsernameMutation = trpc.viewer.me.updateProfile.useMutation({
     onSuccess: async () => {
-      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<React.Component
   };
 
   const updateUsername = async () => {
-    const sanitizedUsername = slugify(inputUsernameValue || "");
     updateUsernameMutation.mutate({
-      username: sanitizedUsername,
+      username: inputUsernameValue,
     });
   };
 
@@ -137,8 +134,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
             )}
             onChange={(event) => {
               event.preventDefault();
-              const sanitized = slugify(event.target.value, true);
-              setInputUsernameValue(sanitized);
+              setInputUsernameValue(event.target.value);
             }}
             data-testid="username-input"
             {...rest}

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}