Mav-Mobile-UI/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

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>
        <label htmlFor="backoffice" className="m-0">
          Back Office URL
        </label>
        <Field
          name={"backOfficeURL"}
          type="text"
          id="backoffice"
          placeholder="https://www.backoffice.com"
          className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
        />
      </FormGroup>
      <FormGroup>
        <label htmlFor="username">Username</label>
        <Field
          name={"username"}
          type="text"
          id="username"
          placeholder="Back office username"
          className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
        />
      </FormGroup>
      <FormGroup>
        <label htmlFor="password">Password</label>
        <Field
          name={"password"}
          type={showPwd ? "text" : "password"}
          id="password"
          placeholder="Back office password"
          className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
        />
        <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>
        <Field
          name={"connectTimeoutSeconds"}
          type="number"
          id="connectTimeoutSeconds"
          className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
        />
      </FormGroup>
      <FormGroup>
        <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
        <Field
          name={"readTimeoutSeconds"}
          type="number"
          id="readTimeoutSeconds"
          placeholder="https://example.com"
          className="p-1.5 border border-gray-400 rounded-lg w-full md:w-60"
        />
      </FormGroup>
    </div>
  );
};

export default ChannelFields;