Add input field validation to rename product, team and name

Add input field validation to rename product, team and name

apps/web/app/(app)/environments/[environmentId]/settings/members/EditTeamName.tsx

@@ -5,18 +5,27 @@ import { useTeamMutation } from "@/lib/teams/mutateTeams";
 import { useTeam } from "@/lib/teams/teams";
 import { Button, ErrorComponent, Input, Label } from "@formbricks/ui";
 import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import toast from "react-hot-toast";
 
 export default function EditTeamName({ environmentId }) {
   const { team, isLoadingTeam, isErrorTeam, mutateTeam } = useTeam(environmentId);
-  const { register, handleSubmit } = useForm();
+  const { register, control, handleSubmit, setValue } = useForm();
   const [teamId, setTeamId] = useState("");
 
+  const teamName = useWatch({
+    control,
+    name: "name",
+  });
+  const isTeamNameInputEmpty = !teamName?.trim();
+  const currentTeamName = teamName?.trim().toLowerCase() ?? "";
+  const previousTeamName = team?.name?.trim().toLowerCase() ?? "";
+
   useEffect(() => {
     if (team && team.id !== "") {
       setTeamId(team.id);
     }
+    setValue("name", team?.name ?? "");
   }, [team]);
 
   const { isMutatingTeam, triggerTeamMutate } = useTeamMutation(teamId);
@@ -42,9 +51,20 @@ export default function EditTeamName({ environmentId }) {
           });
       })}>
       <Label htmlFor="teamname">Team Name</Label>
-      <Input type="text" id="teamname" defaultValue={team.name} {...register("name")} />
+      <Input
+        type="text"
+        id="teamname"
+        defaultValue={team?.name ?? ""}
+        {...register("name")}
+        className={isTeamNameInputEmpty ? "border-red-300 focus:border-red-300" : ""}
+      />
 
-      <Button type="submit" className="mt-4" variant="darkCTA" loading={isMutatingTeam}>
+      <Button
+        type="submit"
+        className="mt-4"
+        variant="darkCTA"
+        loading={isMutatingTeam}
+        disabled={isTeamNameInputEmpty || currentTeamName === previousTeamName}>
         Update
       </Button>
     </form>

apps/web/app/(app)/environments/[environmentId]/settings/product/editProduct.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState } from "react";
-import { useForm } from "react-hook-form";
+import { useEffect, useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
 import toast from "react-hot-toast";
 import { useRouter } from "next/navigation";
 
@@ -22,7 +22,19 @@ export function EditProductName({ environmentId }) {
   const { isMutatingProduct, triggerProductMutate } = useProductMutation(environmentId);
   const { mutateEnvironment } = useEnvironment(environmentId);
 
-  const { register, handleSubmit } = useForm();
+  const { register, handleSubmit, control, setValue } = useForm();
+
+  const productName = useWatch({
+    control,
+    name: "name",
+  });
+  const isProductNameInputEmpty = !productName?.trim();
+  const currentProductName = productName?.trim().toLowerCase() ?? "";
+  const previousProductName = product?.name?.trim().toLowerCase() ?? "";
+
+  useEffect(() => {
+    setValue("name", product?.name ?? "");
+  }, [product?.name]);
 
   if (isLoadingProduct) {
     return <LoadingSpinner />;
@@ -45,9 +57,20 @@ export function EditProductName({ environmentId }) {
           });
       })}>
       <Label htmlFor="fullname">What&apos;s your product called?</Label>
-      <Input type="text" id="fullname" defaultValue={product.name} {...register("name")} />
+      <Input
+        type="text"
+        id="fullname"
+        defaultValue={product.name}
+        {...register("name")}
+        className={isProductNameInputEmpty ? "border-red-300 focus:border-red-300" : ""}
+      />
 
-      <Button type="submit" variant="darkCTA" className="mt-4" loading={isMutatingProduct}>
+      <Button
+        type="submit"
+        variant="darkCTA"
+        className="mt-4"
+        loading={isMutatingProduct}
+        disabled={isProductNameInputEmpty || currentProductName === previousProductName}>
         Update
       </Button>
     </form>

apps/web/app/(app)/environments/[environmentId]/settings/profile/editProfile.tsx

@@ -11,16 +11,28 @@ import { Button, ErrorComponent, Input, Label, ProfileAvatar } from "@formbricks
 import { Session } from "next-auth";
 import { signOut } from "next-auth/react";
 import Image from "next/image";
-import { Dispatch, SetStateAction, useState } from "react";
-import { useForm } from "react-hook-form";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
 import toast from "react-hot-toast";
 
 export function EditName() {
-  const { register, handleSubmit } = useForm();
+  const { register, handleSubmit, control, setValue } = useForm();
   const { profile, isLoadingProfile, isErrorProfile } = useProfile();
 
   const { triggerProfileMutate, isMutatingProfile } = useProfileMutation();
 
+  const profileName = useWatch({
+    control,
+    name: "name",
+  });
+  const isProfileNameInputEmpty = !profileName?.trim();
+  const currentProfileName = profileName?.trim().toLowerCase() ?? "";
+  const previousProfileName = profile?.name?.trim().toLowerCase() ?? "";
+
+  useEffect(() => {
+    setValue("name", profile?.name ?? "");
+  }, [profile?.name]);
+
   if (isLoadingProfile) {
     return <LoadingSpinner />;
   }
@@ -41,13 +53,24 @@ export function EditName() {
           });
       })}>
       <Label htmlFor="fullname">Full Name</Label>
-      <Input type="text" id="fullname" defaultValue={profile.name} {...register("name")} />
+      <Input
+        type="text"
+        id="fullname"
+        defaultValue={profile.name}
+        {...register("name")}
+        className={isProfileNameInputEmpty ? "border-red-300 focus:border-red-300" : ""}
+      />
 
       <div className="mt-4">
         <Label htmlFor="email">Email</Label>
         <Input type="email" id="fullname" defaultValue={profile.email} disabled />
       </div>
-      <Button type="submit" variant="darkCTA" className="mt-4" loading={isMutatingProfile}>
+      <Button
+        type="submit"
+        variant="darkCTA"
+        className="mt-4"
+        loading={isMutatingProfile}
+        disabled={isProfileNameInputEmpty || currentProfileName === previousProfileName}>
         Update
       </Button>
     </form>

apps/web/components/shared/AlertDialog.tsx

@@ -25,7 +25,7 @@ export default function AlertDialog({
   return (
     <Modal open={open} setOpen={setOpen} title={`Confirm ${confirmWhat}`}>
       <p>{text || "Are you sure? This action cannot be undone."}</p>
-      <div className="my-4 space-x-2 text-right">
+      <div className="space-x-2 text-right">
         <Button variant="warn" onClick={onDiscard}>
           Discard
         </Button>

apps/web/components/shared/DeleteDialog.tsx

@@ -32,7 +32,7 @@ export default function DeleteDialog({
     <Modal open={open} setOpen={setOpen} title={`Delete ${deleteWhat}`}>
       <p>{text || "Are you sure? This action cannot be undone."}</p>
       <div>{children}</div>
-      <div className="my-4 space-x-2 text-right">
+      <div className="space-x-2 text-right">
         <Button
           variant="secondary"
           onClick={() => {