fix: Add loading and countdown status to the verification code sending button (#384)

Add loading and countdown status to the verification code sending button

Revert "Add bcrypt encrypted password type"

This reverts commit ae995b5805de2caa02edd92cfb48bbcfb4dfb166.

fix:indentation

web/src/component/CountDownInput.js

@@ -30,14 +30,21 @@ export const CountDownInput = (props) => {
   const [captchaImg, setCaptchaImg] = React.useState("");
   const [checkType, setCheckType] = React.useState("");
   const [checkId, setCheckId] = React.useState("");
-  const [buttonDisabled, setButtonDisabled] = React.useState(false);
+  const [buttonLeftTime, setButtonLeftTime] = React.useState(0);
+  const [buttonLoading, setButtonLoading] = React.useState(false);
 
-  const countDown = (leftTime) => {
-    if (leftTime === 0) {
-      setButtonDisabled(false);
-      return;
+  const handleCountDown = (leftTime = 60) => {
+    let leftTimeSecond = leftTime
+    setButtonLeftTime(leftTimeSecond)
+    const countDown = () => {
+      leftTimeSecond--;
+      setButtonLeftTime(leftTimeSecond)
+      if (leftTimeSecond === 0) {
+        return;
+      }
+      setTimeout(countDown, 1000);
     }
-    setTimeout(() => countDown(leftTime - 1), 1000);
+    setTimeout(countDown, 1000);
   }
 
   const handleOk = () => {
@@ -50,11 +57,12 @@ export const CountDownInput = (props) => {
         Util.showMessage("error", i18next.t("login:Invalid Email or phone"))
         return;
     }
+    setButtonLoading(true)
     UserBackend.sendCode(checkType, checkId, key, ...onButtonClickArgs).then(res => {
       setKey("");
+      setButtonLoading(false)
       if (res) {
-        setButtonDisabled(true)
-        countDown(60);
+        handleCountDown(60);
       }
     })
   }
@@ -94,7 +102,7 @@ export const CountDownInput = (props) => {
           }}
         />
         <Row>
-          <Input autoFocus value={key} prefix={<SafetyOutlined />} placeholder={i18next.t("general:Captcha")} onPressEnter={handleOk} onChange={e => setKey(e.target.value)} />
+          <Input autoFocus value={key} prefix={<SafetyOutlined/>} placeholder={i18next.t("general:Captcha")} onPressEnter={handleOk} onChange={e => setKey(e.target.value)}/>
         </Row>
       </Col>
     )
@@ -110,14 +118,12 @@ export const CountDownInput = (props) => {
       <Search
         addonBefore={textBefore}
         disabled={disabled}
-        prefix={<SafetyOutlined />}
+        prefix={<SafetyOutlined/>}
         placeholder={i18next.t("code:Enter your code")}
         onChange={e => onChange(e.target.value)}
         enterButton={
-          <Button type={"primary"} disabled={disabled || buttonDisabled}>
-            <div style={{fontSize: 14}}>
-              {i18next.t("code:Send Code")}
-            </div>
+          <Button style={{fontSize: 14}} type={"primary"} disabled={disabled || buttonLeftTime > 0} loading={buttonLoading}>
+            {buttonLeftTime > 0 ? `${buttonLeftTime} s` : buttonLoading ? i18next.t("code:Sending Code") : i18next.t("code:Send Code")}
           </Button>
         }
         onSearch={loadHumanCheck}

web/src/locales/en/data.json

@@ -40,7 +40,8 @@
     "Please input your phone verification code!": "Please input your phone verification code!",
     "Please input your verification code!": "Please input your verification code!",
     "Send Code": "Send Code",
-    "Submit and complete": "Submit and complete"
+    "Submit and complete": "Submit and complete",
+    "Sending Code": "Sending"
   },
   "forget": {
     "Account": "Account",

web/src/locales/zh/data.json

@@ -40,7 +40,8 @@
     "Please input your phone verification code!": "请输入您的手机验证码！",
     "Please input your verification code!": "请输入您的验证码！",
     "Send Code": "发送验证码",
-    "Submit and complete": "完成提交"
+    "Submit and complete": "完成提交",
+    "Sending Code": "发送中"
   },
   "forget": {
     "Account": "账号",