avoid double click to forgot page

src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js

@@ -33,6 +33,8 @@ import {FormattedMessage, useIntl} from "react-intl";
 
 const ForgotPasswordApplyForm = () => {
     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const submittingRef = React.useRef(false);
     // const [warningText, setWarningText] = React.useState("");s
     // const [attachment, setAttachment] = React.useState({});
     const intl = useIntl();
@@ -59,6 +61,9 @@ const ForgotPasswordApplyForm = () => {
             username: yup.string().required(intl.formatMessage({id: 'requireUsername'})),
         }),
         onSubmit: values => {
+            if (submittingRef.current) return;
+            submittingRef.current = true;
+            setIsSubmitting(true);
             // console.log(values)
             HttpUtils.post({
                 url: UrlUtils.POST_FORGOT_PASSWORD_EMAIL,
@@ -67,11 +72,15 @@ const ForgotPasswordApplyForm = () => {
                 },
                 // files: [attachment],
                 onSuccess: function () {
+                    submittingRef.current = false;
+                    setIsSubmitting(false);
                     // notifyActionSuccess(intl.formatMessage({id: 'submissionSuccess'}) + '!')
                     navigate('/forgot/password/sent');
                     // location.reload(); 
                 },
                 onError:function () {
+                    submittingRef.current = false;
+                    setIsSubmitting(false);
                     navigate('/forgot/password/sent');
                 }
             });
@@ -175,8 +184,9 @@ const ForgotPasswordApplyForm = () => {
                                         aria-label={intl.formatMessage({id: 'continue'})}
                                         variant="contained"
                                         type="submit"
+                                        disabled={isSubmitting}
                                     >
-                                        <FormattedMessage id="continue"/>
+                                        {isSubmitting ? <FormattedMessage id="loading"/> : <FormattedMessage id="continue"/>}
                                     </Button>
                                 </ThemeProvider>
                             </Grid>

src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js

@@ -33,6 +33,8 @@ import {FormattedMessage, useIntl} from "react-intl";
 
 const ForgotUsernameApplyForm = () => {
     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const submittingRef = React.useRef(false);
     // const [warningText, setWarningText] = React.useState("");s
     // const [attachment, setAttachment] = React.useState({});
     const intl = useIntl();
@@ -61,6 +63,9 @@ const ForgotUsernameApplyForm = () => {
             emailAddress: yup.string().email(intl.formatMessage({id: 'validEmailFormat'})).max(255).required(intl.formatMessage({id: 'requireEmail'})),
         }),
         onSubmit: values => {
+            if (submittingRef.current) return;
+            submittingRef.current = true;
+            setIsSubmitting(true);
             // console.log(values)
             HttpUtils.post({
                 url: UrlUtils.POST_FORGOT_USERNAME_EMAIL,
@@ -69,11 +74,15 @@ const ForgotUsernameApplyForm = () => {
                 },
                 // files: [attachment],
                 onSuccess: function () {
+                    submittingRef.current = false;
+                    setIsSubmitting(false);
                     // notifyActionSuccess(intl.formatMessage({id: 'submissionSuccess'}) + '!')
                     navigate('/forgot/username/sent');
                     // location.reload(); 
                 },
                 onError:function () {
+                    submittingRef.current = false;
+                    setIsSubmitting(false);
                     navigate('/forgot/username/sent');
                 }
             });
@@ -174,8 +183,9 @@ const ForgotUsernameApplyForm = () => {
                                         aria-label={intl.formatMessage({id: 'continue'})}
                                         variant="contained"
                                         type="submit"
+                                        disabled={isSubmitting}
                                     >
-                                        <FormattedMessage id="continue"/>
+                                        {isSubmitting ? <FormattedMessage id="loading"/> : <FormattedMessage id="continue"/>}
                                     </Button>
                                 </ThemeProvider>
                             </Grid>