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

import { Field, Form, Formik } 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 = () => {
  const [showPwd, setShowPwd] = useState(false);
  const initialValues = {
    backOfficeURL: "",
    username: "",
    password: "",
    connectTimeoutSeconds: 0,
    readTimeoutSeconds: 0,
  };

  const handleSubmit = (values) => {
    console.log(values);
  };

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
      <Form>
        <div className="flex flex-col space-y-2 px-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>
      </Form>
    </Formik>
  );
};

export default ChannelFields;