fix: change emial need confirm password

i18n/en_US.yaml

@@ -781,6 +781,9 @@ ui:
       email:
         label: Email
         msg: Email cannot be empty.
+      pass:
+        label: Current Password
+        msg: Password cannot be empty.
       password_title: Password
       current_pass:
         label: Current Password

ui/src/components/Modal/PicAuthCodeModal.tsx

@@ -51,7 +51,7 @@ const Index: React.FC<IProps> = ({
                 type="text"
                 autoComplete="off"
                 placeholder={t('placeholder')}
-                isInvalid={captcha.isInvalid}
+                isInvalid={captcha?.isInvalid}
                 onChange={(e) => {
                   Storage.set(CAPTCHA_CODE_STORAGE_KEY, e.target.value);
                   handleCaptcha({

ui/src/pages/Users/Settings/Account/components/ModifyEmail/index.tsx

@@ -4,20 +4,37 @@ import { useTranslation } from 'react-i18next';
 
 import type * as Type from '@/common/interface';
 import { useToast } from '@/hooks';
-import { getLoggedUserInfo, changeEmail } from '@/services';
+import { getLoggedUserInfo, changeEmail, checkImgCode } from '@/services';
 import { handleFormError } from '@/utils';
+import { PicAuthCodeModal } from '@/components/Modal';
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', {
     keyPrefix: 'settings.account',
   });
   const [step, setStep] = useState(1);
+  const [showModal, setModalState] = useState(false);
+  const [imgCode, setImgCode] = useState<Type.ImgCodeRes>({
+    captcha_id: '',
+    captcha_img: '',
+    verify: false,
+  });
   const [formData, setFormData] = useState<Type.FormDataType>({
     e_mail: {
       value: '',
       isInvalid: false,
       errorMsg: '',
     },
+    pass: {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    },
+    captcha_code: {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    },
   });
   const [userInfo, setUserInfo] = useState<Type.UserInfoRes>();
   const toast = useToast();
@@ -27,13 +44,27 @@ const Index: FC = () => {
     });
   }, []);
 
+  const getImgCode = () => {
+    checkImgCode({
+      action: 'e_mail',
+    }).then((res) => {
+      setImgCode(res);
+    });
+  };
+
+  useEffect(() => {
+    if (step > 1) {
+      getImgCode();
+    }
+  }, [step]);
+
   const handleChange = (params: Type.FormDataType) => {
     setFormData({ ...formData, ...params });
   };
 
   const checkValidated = (): boolean => {
     let bol = true;
-    const { e_mail } = formData;
+    const { e_mail, pass } = formData;
 
     if (!e_mail.value) {
       bol = false;
@@ -43,41 +74,86 @@ const Index: FC = () => {
         errorMsg: t('email.msg'),
       };
     }
+
+    if (!pass.value) {
+      bol = false;
+      formData.pass = {
+        value: '',
+        isInvalid: true,
+        errorMsg: t('pass.msg'),
+      };
+    }
     setFormData({
       ...formData,
     });
     return bol;
   };
 
+  const initFormData = () => {
+    setFormData({
+      e_mail: {
+        value: '',
+        isInvalid: false,
+        errorMsg: '',
+      },
+      pass: {
+        value: '',
+        isInvalid: false,
+        errorMsg: '',
+      },
+      captcha_code: {
+        value: '',
+        isInvalid: false,
+        errorMsg: '',
+      },
+    });
+  };
+
+  const postEmail = () => {
+    const params: any = {
+      e_mail: formData.e_mail.value,
+      pass: formData.pass.value,
+    };
+
+    if (imgCode.verify) {
+      params.captcha_code = formData.captcha_code.value;
+      params.captcha_id = imgCode.captcha_id;
+    }
+    changeEmail(params)
+      .then(() => {
+        setStep(1);
+        setModalState(false);
+        toast.onShow({
+          msg: t('change_email_info'),
+          variant: 'warning',
+        });
+        initFormData();
+      })
+      .catch((err) => {
+        if (err.isError) {
+          const data = handleFormError(err, formData);
+          setFormData({ ...data });
+          if (!err.list.find((v) => v.error_field.indexOf('captcha') >= 0)) {
+            setModalState(false);
+          }
+        }
+      })
+      .finally(() => {
+        getImgCode();
+      });
+  };
+
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
     event.stopPropagation();
     if (!checkValidated()) {
       return;
     }
-    changeEmail({
-      e_mail: formData.e_mail.value,
-    })
-      .then(() => {
-        setStep(1);
-        toast.onShow({
-          msg: t('change_email_info'),
-          variant: 'warning',
-        });
-        setFormData({
-          e_mail: {
-            value: '',
-            isInvalid: false,
-            errorMsg: '',
-          },
-        });
-      })
-      .catch((err) => {
-        if (err.isError) {
-          const data = handleFormError(err, formData);
-          setFormData({ ...data });
-        }
-      });
+
+    if (imgCode.verify) {
+      setModalState(true);
+    }
+    postEmail();
   };
 
   return (
@@ -103,6 +179,29 @@ const Index: FC = () => {
       )}
       {step === 2 && (
         <Form noValidate onSubmit={handleSubmit}>
+          <Form.Group controlId="currentPass" className="mb-3">
+            <Form.Label>{t('pass.label')}</Form.Label>
+            <Form.Control
+              autoComplete="new-password"
+              required
+              type="password"
+              maxLength={32}
+              isInvalid={formData.pass.isInvalid}
+              onChange={(e) =>
+                handleChange({
+                  pass: {
+                    value: e.target.value,
+                    isInvalid: false,
+                    errorMsg: '',
+                  },
+                })
+              }
+            />
+            <Form.Control.Feedback type="invalid">
+              {formData.pass.errorMsg}
+            </Form.Control.Feedback>
+          </Form.Group>
+
           <Form.Group controlId="newEmail" className="mb-3">
             <Form.Label>{t('email.label')}</Form.Label>
             <Form.Control
@@ -126,6 +225,7 @@ const Index: FC = () => {
               {formData.e_mail.errorMsg}
             </Form.Control.Feedback>
           </Form.Group>
+
           <div>
             <Button type="submit" variant="primary" className="me-2">
               {t('save', { keyPrefix: 'btns' })}
@@ -137,6 +237,18 @@ const Index: FC = () => {
           </div>
         </Form>
       )}
+
+      <PicAuthCodeModal
+        visible={showModal}
+        data={{
+          captcha: formData.captcha_code,
+          imgCode,
+        }}
+        handleCaptcha={handleChange}
+        clickSubmit={postEmail}
+        refreshImgCode={getImgCode}
+        onClose={() => setModalState(false)}
+      />
     </div>
   );
 };

ui/src/services/common.ts

@@ -249,7 +249,7 @@ export const closeQuestion = (params: {
   return request.put('/answer/api/v1/question/status', params);
 };
 
-export const changeEmail = (params: { e_mail: string }) => {
+export const changeEmail = (params: { e_mail: string; pass?: string }) => {
   return request.post('/answer/api/v1/user/email/change/code', params);
 };