Mav-Mobile-UI/src/components/SettingForms/NPED/NPEDFields.tsx

import { Form, Formik, Field } from "formik";
import FormGroup from "../components/FormGroup";
import type { NPEDErrorValues, NPEDFieldType } from "../../../types/types";
import { useNPEDAuth } from "../../../hooks/useNPEDAuth";
import { toast } from "sonner";
import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";

const NPEDFields = () => {
  const [showPwd, setShowPwd] = useState(false);
  const { signIn, user, signOut } = useNPEDAuth();

  const initialValues = user
    ? {
        username: user?.propUsername?.value,
        password: user?.propPassword?.value,
        clientId: user?.propClientID?.value,
        frontId: "NPED",
        rearId: "NPED",
      }
    : {
        username: "",
        password: "",
        clientId: "",
        frontId: "NPED",
        rearId: "NPED",
      };

  const handleSubmit = (values: NPEDFieldType) => {
    const valuesToSend = {
      ...values,
    };
    signIn(valuesToSend);
  };

  const validateValues = (values: NPEDFieldType) => {
    const errors: NPEDErrorValues = {};
    if (!values.username) errors.username = "Required";
    if (!values.password) errors.password = "Required";
    if (!values.clientId) errors.clientId = "Required";
    return errors;
  };

  const handleLogoutClick = () => {
    signOut();
    toast.warning("logged out of NPED");
  };

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validate={validateValues}
      enableReinitialize
    >
      {({ errors, touched }) => (
        <Form className="flex flex-col space-y-5 px-2">
          <FormGroup>
            <label htmlFor="username">Username</label>
            {touched.username && errors.username && (
              <small className="absolute right-0 -top-5 text-red-500">
                {errors.username}
              </small>
            )}
            <Field
              name="username"
              type="text"
              id="username"
              placeholder="NPED username"
              className="p-1.5 border border-gray-400 rounded-lg"
            />
          </FormGroup>
          <FormGroup>
            <label htmlFor="password">Password</label>
            {touched.password && errors.password && (
              <small className="absolute right-0 -top-5 text-red-500">
                {errors.password}
              </small>
            )}
            <Field
              name="password"
              type={showPwd ? "text" : "password"}
              id="password"
              placeholder="NPED 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="clientId">Client ID</label>
            {touched.clientId && errors.clientId && (
              <small className="absolute right-0 -top-5 text-red-500">
                {errors.clientId}
              </small>
            )}
            <Field
              name="clientId"
              type="text"
              id="clientId"
              placeholder="NPED client ID"
              className="p-1.5 border border-gray-400 rounded-lg"
            />
          </FormGroup>
          {!user?.propClientID?.value ? (
            <button
              type="submit"
              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
            >
              Login
            </button>
          ) : (
            <button
              type="button"
              className="w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
              onClick={handleLogoutClick}
            >
              Logout
            </button>
          )}
        </Form>
      )}
    </Formik>
  );
};

export default NPEDFields;