From 73d11ac72b1bfd4dcf953125bf648e028ab9e9c0 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Sat, 2 May 2026 09:27:50 +0330
Subject: [PATCH] feat(CreateAdmin): add password visibility toggle button for
 improved user experience

---
 src/components/forms/admins/CreateAdmin.tsx   | 25 ++++++++++++++++++-
 .../forms/admins/useCreateAdminPresenter.ts   |  5 ++++
 .../companies/useCreateCompanyPresenter.ts    |  4 +--
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/admins/CreateAdmin.tsx b/src/components/forms/admins/CreateAdmin.tsx
index 6ee544b..bff5d3f 100644
--- a/src/components/forms/admins/CreateAdmin.tsx
+++ b/src/components/forms/admins/CreateAdmin.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { PasswordIcon } from "@/assets/icons";
 import InputGroup from "@/components/FormElements/InputGroup";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
 import FileImageUploadCard from "@/components/ui/FileImageUploadCard";
@@ -26,6 +27,8 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
     previewUrl,
     clearSelectedProfileImage,
     profileImageRegister,
+    passwordFieldInputType,
+    setPasswordFieldInputType,
   } = useCreateAdminPresenter({
     editMode,
     defaultValues,
@@ -140,7 +143,27 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
                 autoComplete="new-password"
                 placeholder="At least 8 characters"
                 required
-                type="password"
+                icon={
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setPasswordFieldInputType(
+                        passwordFieldInputType === "password"
+                          ? "text"
+                          : "password",
+                      );
+                    }}
+                    className="absolute right-4.5 top-1/2 z-10 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded text-dark-5 transition hover:text-primary dark:text-white/75 [&>svg]:!static [&>svg]:!size-5 [&>svg]:!translate-y-0"
+                    aria-label={
+                      passwordFieldInputType === "password"
+                        ? "Show password"
+                        : "Hide password"
+                    }
+                  >
+                    <PasswordIcon className="pointer-events-none" />
+                  </button>
+                }
+                type={passwordFieldInputType}
                 {...register("password", {
                   required: {
                     value: true,
diff --git a/src/components/forms/admins/useCreateAdminPresenter.ts b/src/components/forms/admins/useCreateAdminPresenter.ts
index d5c7828..d05e834 100644
--- a/src/components/forms/admins/useCreateAdminPresenter.ts
+++ b/src/components/forms/admins/useCreateAdminPresenter.ts
@@ -22,6 +22,9 @@ const useCreateAdminPresenter = ({
   defaultValues,
   id,
 }: IProps) => {
+  const [passwordFieldInputType, setPasswordFieldInputType] = useState<
+  "password" | "text"
+>("password");
   const isMutating = useIsMutating();
   const [selectedFileName, setSelectedFileName] = useState<string>("");
   const [selectedFileSize, setSelectedFileSize] = useState<number | null>(null);
@@ -184,6 +187,8 @@ const useCreateAdminPresenter = ({
     previewUrl,
     clearSelectedProfileImage,
     profileImageRegister,
+    passwordFieldInputType,
+    setPasswordFieldInputType,
   };
 };
 
diff --git a/src/components/forms/companies/useCreateCompanyPresenter.ts b/src/components/forms/companies/useCreateCompanyPresenter.ts
index 4649e22..5de2201 100644
--- a/src/components/forms/companies/useCreateCompanyPresenter.ts
+++ b/src/components/forms/companies/useCreateCompanyPresenter.ts
@@ -39,9 +39,9 @@ const useCreateCompanyPresenter = ({ defaultValues, editMode, id }: IProps) => {
       );
       setValue("tags.categories", categories);
     }
-  }, [defaultValues,setValue]);
+  }, [defaultValues, setValue]);
   const router = useRouter();
-  const { data: companyCategories } = useCompanyCategoriesQuery();
+  const { data: companyCategories } = useCompanyCategoriesQuery({ published: true });
   const { mutate: createCompany, isPending: isCreating } = useCreateCompany();
   const { mutate: updateCompany, isPending: isUpdating } = useUpdateCompany(
     id as string,