update

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

@@ -1,7 +1,6 @@
 import { useState, useContext, useCallback, MouseEvent } from 'react';
 import { AccountUserProfileContext } from '../hooks';
 import { toast } from 'sonner';
-import { getAuth,useAuthContext } from '@/auth';
 import { KeenIcon } from '@/components';
 
 type PasswordType = 'current' | 'new' | 'retype';
@@ -12,7 +11,7 @@ const PinCode = () => {
   const [currentPincode, setCurrentPincode] = useState('');
   const [newPincode, setNewPincode] = useState('');
   const [retypePincode, setRetypePincode] = useState('');
-  const [errorRetype, setErrorRetype] = useState(''); 
+  const [errorRetype, setErrorRetype] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPassword, setShowPassword] = useState({
     current: false,
@@ -20,6 +19,11 @@ const PinCode = () => {
     retype: false,
   });
 
+  // Fungsi hanya angka, maksimal 6 digit
+  const handleNumericInput = (value: string) => {
+    return value.replace(/\D/g, '').slice(0, 100);
+  };
+
   const handleResetPassword = useCallback(async () => {
     if (newPincode !== retypePincode) {
       toast.error('New Pin Code and Retype Pin Code do not match.');
@@ -39,7 +43,7 @@ const PinCode = () => {
       setCurrentPincode('');
       setNewPincode('');
       setRetypePincode('');
-      setErrorRetype(''); // Clear error after success
+      setErrorRetype('');
     } catch (error: any) {
       const errorMessage =
         error?.response?.data?.message ||
@@ -62,8 +66,9 @@ const PinCode = () => {
   );
 
   const handleRetypeChange = (value: string) => {
-    setRetypePincode(value);
-    if (newPincode && value && newPincode !== value) {
+    const numericValue = handleNumericInput(value);
+    setRetypePincode(numericValue);
+    if (newPincode && numericValue && newPincode !== numericValue) {
       setErrorRetype('New Pin Code and Retype Pin Code do not match.');
     } else {
       setErrorRetype('');
@@ -84,7 +89,7 @@ const PinCode = () => {
               className="form-control pr-10"
               placeholder="Current Pin Code"
               value={currentPincode}
-              onChange={(e) => setCurrentPincode(e.target.value)}
+              onChange={(e) => setCurrentPincode(handleNumericInput(e.target.value))}
               disabled={isSubmitting}
               type={showPassword.current ? 'text' : 'password'}
             />
@@ -110,14 +115,10 @@ const PinCode = () => {
               placeholder="New Pin Code"
               value={newPincode}
               onChange={(e) => {
-                setNewPincode(e.target.value);
-                // Kalau retype sudah diisi, cek lagi error
+                const value = handleNumericInput(e.target.value);
+                setNewPincode(value);
                 if (retypePincode) {
-                  if (e.target.value !== retypePincode) {
-                    setErrorRetype('New Pin Code and Retype Pin Code do not match.');
-                  } else {
-                    setErrorRetype('');
-                  }
+                  setErrorRetype(value !== retypePincode ? 'New Pin Code and Retype Pin Code do not match.' : '');
                 }
               }}
               disabled={isSubmitting}