added nped list functionality

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -5,22 +5,30 @@ import { useNPEDAuth } from "../../../hooks/useNPEDAuth";
 import { toast } from "sonner";
 
 const NPEDFields = () => {
-  const { signIn } = useNPEDAuth();
+  const { signIn, user, signOut } = useNPEDAuth();
 
-  const initialValues = {
-    username: "",
-    password: "",
-    clientId: "",
-    frontId: "NPEDFront",
-    rearId: "NPEDRear",
-  };
+  const initialValues = user
+    ? {
+        username: user.propUsername.value,
+        password: "",
+        clientId: user.propClientID.value,
+        frontId: "NPED",
+        rearId: "NPED",
+      }
+    : {
+        username: "",
+        password: "",
+        clientId: "",
+        frontId: "NPED",
+        rearId: "NPED",
+      };
 
   const handleSubmit = (values: NPEDFieldType) => {
     const valuesToSend = {
       ...values,
     };
     signIn(valuesToSend);
-    toast("Signed in successfully");
+    toast.success("Signed in successfully");
   };
 
   const validateValues = (values: NPEDFieldType) => {
@@ -31,6 +39,10 @@ const NPEDFields = () => {
     return errors;
   };
 
+  const handleLogoutClick = () => {
+    signOut();
+  };
+
   return (
     <Formik
       initialValues={initialValues}
@@ -84,12 +96,22 @@ const NPEDFields = () => {
               className="p-1.5 border border-gray-400 rounded-lg"
             />
           </FormGroup>
-          <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"
-          >
-            Login
-          </button>
+          {!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>