update change pincode

src/pages/account/home/user-profile/blocks/PinCode.tsx

@@ -1,34 +1,45 @@
 import { useState, useContext, useCallback, MouseEvent } from 'react';
 import { AccountUserProfileContext } from '../hooks';
 import { toast } from 'sonner';
-import { useAuthContext } from '@/auth';
+import { getAuth,useAuthContext } from '@/auth';
 import { KeenIcon } from '@/components';
-import clsx from 'clsx';
 
-type PasswordType = 'password';
+type PasswordType = 'current' | 'new' | 'retype';
 
 const PinCode = () => {
   const { setPincode } = useContext(AccountUserProfileContext);
-  const { getUser } = useAuthContext();
 
+  const [currentPincode, setCurrentPincode] = useState('');
   const [newPincode, setNewPincode] = useState('');
+  const [retypePincode, setRetypePincode] = useState('');
+  const [errorRetype, setErrorRetype] = useState(''); 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPassword, setShowPassword] = useState({
-    password: false,
+    current: false,
+    new: false,
+    retype: false,
   });
 
   const handleResetPassword = useCallback(async () => {
-    const user: any = await getUser();
+    if (newPincode !== retypePincode) {
+      toast.error('New Pin Code and Retype Pin Code do not match.');
+      setErrorRetype('New Pin Code and Retype Pin Code do not match.');
+      return;
+    }
 
     setIsSubmitting(true);
 
     try {
       await setPincode({
+        currentpincode: currentPincode,
         newpincode: newPincode,
+        retypepincode: retypePincode,
       });
 
+      setCurrentPincode('');
       setNewPincode('');
-      toast.success('Pin code updated successfully');
+      setRetypePincode('');
+      setErrorRetype(''); // Clear error after success
     } catch (error: any) {
       const errorMessage =
         error?.response?.data?.message ||
@@ -38,14 +49,26 @@ const PinCode = () => {
     } finally {
       setIsSubmitting(false);
     }
-  }, [newPincode, setPincode, getUser]);
+  }, [currentPincode, newPincode, retypePincode, setPincode]);
 
-  const isButtonDisabled = isSubmitting || !newPincode;
+  const isButtonDisabled = isSubmitting || !currentPincode || !newPincode || !retypePincode;
 
-  const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: PasswordType) => {
-    event.preventDefault();
-    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
-  }, []);
+  const togglePassword = useCallback(
+    (event: MouseEvent<HTMLButtonElement>, key: PasswordType) => {
+      event.preventDefault();
+      setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+    },
+    []
+  );
+
+  const handleRetypeChange = (value: string) => {
+    setRetypePincode(value);
+    if (newPincode && value && newPincode !== value) {
+      setErrorRetype('New Pin Code and Retype Pin Code do not match.');
+    } else {
+      setErrorRetype('');
+    }
+  };
 
   return (
     <div className="card pb-2.5">
@@ -53,30 +76,97 @@ const PinCode = () => {
         <h3 className="card-title">Pin Code</h3>
       </div>
       <div className="card-body grid gap-5">
+        {/* Current Pin Code */}
         <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">New Pin Code</label>
+          <label className="form-label max-w-56">Current Pin Code</label>
           <div className="input relative">
             <input
-              className="form-control pr-10" // untuk kasih jarak buat tombol mata
-              placeholder="New Pin Code"
-              value={newPincode}
-              onChange={(e) => setNewPincode(e.target.value)} // ✅ fix
+              className="form-control pr-10"
+              placeholder="Current Pin Code"
+              value={currentPincode}
+              onChange={(e) => setCurrentPincode(e.target.value)}
               disabled={isSubmitting}
-              type={showPassword.password ? 'text' : 'password'}
+              type={showPassword.current ? 'text' : 'password'}
             />
             <button
               className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
-              onClick={(e) => togglePassword(e, 'password')}
+              onClick={(e) => togglePassword(e, 'current')}
               type="button"
             >
               <KeenIcon
-                icon={showPassword.password ? 'eye-slash' : 'eye'}
+                icon={showPassword.current ? 'eye-slash' : 'eye'}
                 className="text-gray-500"
               />
             </button>
           </div>
         </div>
 
+        {/* New Pin Code */}
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">New Pin Code</label>
+          <div className="input relative">
+            <input
+              className="form-control pr-10"
+              placeholder="New Pin Code"
+              value={newPincode}
+              onChange={(e) => {
+                setNewPincode(e.target.value);
+                // Kalau retype sudah diisi, cek lagi error
+                if (retypePincode) {
+                  if (e.target.value !== retypePincode) {
+                    setErrorRetype('New Pin Code and Retype Pin Code do not match.');
+                  } else {
+                    setErrorRetype('');
+                  }
+                }
+              }}
+              disabled={isSubmitting}
+              type={showPassword.new ? 'text' : 'password'}
+            />
+            <button
+              className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
+              onClick={(e) => togglePassword(e, 'new')}
+              type="button"
+            >
+              <KeenIcon
+                icon={showPassword.new ? 'eye-slash' : 'eye'}
+                className="text-gray-500"
+              />
+            </button>
+          </div>
+        </div>
+
+        {/* Retype Pin Code */}
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">Retype Pin Code</label>
+          <div className="input relative w-full">
+            <input
+              className={`form-control pr-10 ${errorRetype ? 'border-red-500' : ''}`}
+              placeholder="Retype Pin Code"
+              value={retypePincode}
+              onChange={(e) => handleRetypeChange(e.target.value)}
+              disabled={isSubmitting}
+              type={showPassword.retype ? 'text' : 'password'}
+            />
+            <button
+              className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
+              onClick={(e) => togglePassword(e, 'retype')}
+              type="button"
+            >
+              <KeenIcon
+                icon={showPassword.retype ? 'eye-slash' : 'eye'}
+                className="text-gray-500"
+              />
+            </button>
+          </div>
+        </div>
+
+        {/* Error message under Retype */}
+        {errorRetype && (
+          <div className="text-red-500 text-sm -mt-4 ml-[calc(14rem+10px)]">{errorRetype}</div>
+        )}
+
+        {/* Submit button */}
         <div className="flex justify-end">
           <button
             className="btn btn-primary"