Merge pull request #359 from answerdev/feat/1.1.0/ui

fix: change password add verification code verification

i18n/en_US.yaml

@@ -1150,8 +1150,15 @@ ui:
     accepted: Accepted
     answered: answered
     asked: asked
-    upvote: upvote
-    downvote: downvote
+    rank_type:
+      upvote: upvote
+      upvoted: upvoted
+      downvote: downvote
+      downvoted: downvoted
+      edit: edit
+      accept: accept
+      accepted: accepted
+    downvoted: downvoted
     mod_short: Mod
     mod_long: Moderators
     x_reputation: reputation

ui/src/common/interface.ts

@@ -161,7 +161,7 @@ export interface PasswordResetReq extends ImgCodeReq {
 }
 
 export interface CheckImgReq {
-  action: 'login' | 'e_mail' | 'find_pass';
+  action: 'login' | 'e_mail' | 'find_pass' | 'modify_pass';
 }
 
 export interface SetNoticeReq {

ui/src/pages/Users/Personal/components/Reputation/index.tsx

@@ -48,7 +48,9 @@ const Index: FC<Props> = ({ visible, data }) => {
                 {item.title}
               </a>
               <div className="d-flex align-items-center fs-14 text-secondary">
-                <span>{item.reputation > 0 ? t('upvote') : t('downvote')}</span>
+                <span>
+                  {t(item.rank_type, { keyPrefix: 'personal.rank_type' })}
+                </span>
                 <span className="split-dot" />
                 <FormatTime time={item.created_at} className="me-4" />
               </div>

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

@@ -6,7 +6,7 @@ import type * as Type from '@/common/interface';
 import { useToast } from '@/hooks';
 import { getLoggedUserInfo, changeEmail, checkImgCode } from '@/services';
 import { handleFormError } from '@/utils';
-import { PicAuthCodeModal } from '@/components/Modal';
+import { PicAuthCodeModal } from '@/components';
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', {
@@ -149,6 +149,7 @@ const Index: FC = () => {
 
     if (imgCode.verify) {
       setModalState(true);
+      return;
     }
     postEmail();
   };

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

@@ -5,10 +5,11 @@ import { useTranslation } from 'react-i18next';
 import classname from 'classnames';
 
 import { useToast } from '@/hooks';
-import type { FormDataType } from '@/common/interface';
-import { modifyPassword } from '@/services';
+import type { FormDataType, ImgCodeRes } from '@/common/interface';
+import { modifyPassword, checkImgCode } from '@/services';
 import { handleFormError } from '@/utils';
 import { loggedUserInfoStore } from '@/stores';
+import { PicAuthCodeModal } from '@/components';
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', {
@@ -34,6 +35,20 @@ const Index: FC = () => {
       errorMsg: '',
     },
   });
+  const [showModal, setModalState] = useState(false);
+  const [imgCode, setImgCode] = useState<ImgCodeRes>({
+    captcha_id: '',
+    captcha_img: '',
+    verify: false,
+  });
+
+  const getImgCode = () => {
+    checkImgCode({
+      action: 'modify_pass',
+    }).then((res) => {
+      setImgCode(res);
+    });
+  };
 
   const handleFormState = () => {
     setFormState((pre) => !pre);
@@ -104,17 +119,22 @@ const Index: FC = () => {
     return bol;
   };
 
-  const handleSubmit = (event: FormEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!checkValidated()) {
-      return;
+  const postModifyPass = (event?: any) => {
+    if (event) {
+      event.preventDefault();
     }
-    modifyPassword({
+    const params: any = {
       old_pass: formData.old_pass.value,
       pass: formData.pass.value,
-    })
+    };
+
+    if (imgCode.verify) {
+      params.captcha_code = formData.captcha_code.value;
+      params.captcha_id = imgCode.captcha_id;
+    }
+    modifyPassword(params)
       .then(() => {
+        setModalState(false);
         toast.onShow({
           msg: t('update_password', { keyPrefix: 'toast' }),
           variant: 'success',
@@ -124,11 +144,31 @@ const Index: FC = () => {
       .catch((err) => {
         if (err.isError) {
           const data = handleFormError(err, formData);
+          if (!err.list.find((v) => v.error_field.indexOf('captcha') >= 0)) {
+            setModalState(false);
+          }
           setFormData({ ...data });
         }
+      })
+      .finally(() => {
+        getImgCode();
       });
   };
 
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!checkValidated()) {
+      return;
+    }
+
+    if (imgCode.verify) {
+      setModalState(true);
+      return;
+    }
+    postModifyPass();
+  };
+
   return (
     <div className="mt-5">
       {showForm ? (
@@ -220,11 +260,26 @@ const Index: FC = () => {
           <Button
             variant="outline-secondary"
             type="submit"
-            onClick={handleFormState}>
+            onClick={() => {
+              handleFormState();
+              getImgCode();
+            }}>
             {t('change_pass_btn')}
           </Button>
         </>
       )}
+
+      <PicAuthCodeModal
+        visible={showModal}
+        data={{
+          captcha: formData.captcha_code,
+          imgCode,
+        }}
+        handleCaptcha={handleChange}
+        clickSubmit={postModifyPass}
+        refreshImgCode={getImgCode}
+        onClose={() => setModalState(false)}
+      />
     </div>
   );
 };