fixed type errors

src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -1,9 +1,12 @@
 import { Field, useFormikContext } from "formik";
 import FormGroup from "../components/FormGroup";
+import { useState } from "react";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const ChannelFields = () => {
   useFormikContext();
-
+  const [showPwd, setShowPwd] = useState(false);
   return (
     <div className="flex flex-col space-y-2">
       <FormGroup>
@@ -32,11 +35,17 @@ const ChannelFields = () => {
         <label htmlFor="password">Password</label>
         <Field
           name={"password"}
-          type="password"
+          type={showPwd ? "text" : "password"}
           id="password"
           placeholder="Back office password"
           className="p-1.5 border border-gray-400 rounded-lg"
         />
+        <FontAwesomeIcon
+          type="button"
+          className="absolute right-5 end-0"
+          onClick={() => setShowPwd((s) => !s)}
+          icon={showPwd ? faEyeSlash : faEye}
+        />
       </FormGroup>
       <FormGroup>
         <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>