diff --git a/src/components/forms/customers/CreateCustomer.tsx b/src/components/forms/customers/CreateCustomer.tsx index 0c18c67..e2ebb6b 100644 --- a/src/components/forms/customers/CreateCustomer.tsx +++ b/src/components/forms/customers/CreateCustomer.tsx @@ -1,6 +1,6 @@ "use client"; -import { GlobeIcon } from "@/assets/icons"; +import { EyeIcon, GlobeIcon } from "@/assets/icons"; import InputGroup from "@/components/FormElements/InputGroup"; import MultiSelect from "@/components/FormElements/MultiSelect"; import { Select } from "@/components/FormElements/select"; @@ -20,8 +20,16 @@ interface IProps { } const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => { - const { errors, handleSubmit, register, watch, onSubmit, companies, router } = - useCreateCustomerPresenter({ defaultValues, editMode, id }); + const { + errors, + handleSubmit, + register, + watch, + onSubmit, + companies, + showPassword, + setShowPassword, + } = useCreateCustomerPresenter({ defaultValues, editMode, id }); return (
@@ -120,8 +128,19 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => { })} disabled={editMode} name="password" + icon={ + { + setShowPassword(!showPassword); + }} + > + + + } + iconPosition="right" label="Password" - type="password" + type={showPassword ? "text" : "password"} placeholder="Enter password" required={!editMode} /> diff --git a/src/components/forms/customers/useCreateCustomerPresenter.ts b/src/components/forms/customers/useCreateCustomerPresenter.ts index ca0e27d..eff5df8 100644 --- a/src/components/forms/customers/useCreateCustomerPresenter.ts +++ b/src/components/forms/customers/useCreateCustomerPresenter.ts @@ -7,7 +7,7 @@ import { } from "@/hooks/queries"; import { CreateCustomerCredentials } from "@/lib/api"; import { useRouter } from "next/navigation"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { SubmitHandler, useForm } from "react-hook-form"; interface IProps { @@ -33,6 +33,7 @@ const useCreateCustomerPresenter = ({ }); const router = useRouter(); + const [showPassword, setShowPassword] = useState(false); const { mutate: createCustomer, isPending: isCreating } = useCreateCustomer(); const { mutate: updateCustomer, isPending: isUpdating } = useUpdateCustomer( id as string, @@ -69,6 +70,8 @@ const useCreateCustomerPresenter = ({ onSubmit, companies: companies?.data.companies, router, + showPassword, + setShowPassword, }; };