From 40dd3d56ec3eb388336d7159c8772a2dcfd7427c Mon Sep 17 00:00:00 2001
From: Jason Chuang <jchuang@2fi-solutions.com.hk>
Date: Sun, 12 Apr 2026 23:44:17 +0800
Subject: [PATCH] avoid double click from changing password form

---
 src/pages/User/ChangePasswordPage/index.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/pages/User/ChangePasswordPage/index.js b/src/pages/User/ChangePasswordPage/index.js
index 38b465b..6def5f5 100644
--- a/src/pages/User/ChangePasswordPage/index.js
+++ b/src/pages/User/ChangePasswordPage/index.js
@@ -51,6 +51,8 @@ const Index = () => {
     const [expiryErr, setExpiryErr] = React.useState(false);
     const [expiryErrText, setExpiryErrText] = React.useState("");
     const [changePasswordValues, setChangePasswordValues] = React.useState();
+    const [isChangingPassword, setIsChangingPassword] = React.useState(false);
+    const changePwdInFlightRef = React.useRef(false);
 
     const intl = useIntl();
     
@@ -59,8 +61,12 @@ const Index = () => {
     }, []);
 
     const goLogin = (values) =>{
-        // console.log(values)
-        setComfirmChangeMessage(false)
+        if (changePwdInFlightRef.current) {
+            return;
+        }
+        changePwdInFlightRef.current = true;
+        setIsChangingPassword(true);
+        setComfirmChangeMessage(false);
         HttpUtils.post({
             url: UrlUtils.PATCH_CHANGE_PASSWORD,
             params:{
@@ -69,11 +75,15 @@ const Index = () => {
             },
             onSuccess: function (){
                 setIsChanged(true);
+                changePwdInFlightRef.current = false;
+                setIsChangingPassword(false);
             },
             onError:function (error) {
                 // console.log(error.response.data);
                 setExpiryErrText(intl.formatMessage({ id: error.response.data.error }))
                 setExpiryErr(true)
+                changePwdInFlightRef.current = false;
+                setIsChangingPassword(false);
                 // window.location.assign("/iamsmart/loginFail");
             }
         });
@@ -395,6 +405,7 @@ const Index = () => {
                                                 aria-label={intl.formatMessage({id: 'confirm'})}
                                                 variant="contained"
                                                 type="submit"
+                                                disabled={isChangingPassword}
                                                 // onClick={()=>goLogin()}
                                             >
                                                 <FormattedMessage id="confirm"/>
@@ -423,12 +434,12 @@ const Index = () => {
                                             </Stack>
                                         </DialogContent>
                                         <DialogActions>
-                                            <Button onClick={() => setComfirmChangeMessage(false)}>
+                                            <Button disabled={isChangingPassword} onClick={() => setComfirmChangeMessage(false)}>
                                                 <Typography variant="h5">
                                                     <FormattedMessage id="close"/>
                                                 </Typography>
                                             </Button>
-                                            <Button onClick={() => goLogin(changePasswordValues)}>
+                                            <Button disabled={isChangingPassword} onClick={() => goLogin(changePasswordValues)}>
                                                 <Typography variant="h5">
                                                     <FormattedMessage id="confirm"/>
                                                 </Typography>