perf: 登录失败时清除验证码状态

packages/ui/certd-client/src/components/captcha/captcha-input.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="captchaComponent" v-if="settingStore.inited" ref="captchaRef" class="captcha_input" :captcha-get="getCaptcha" @change="onChange" />
+  <component :is="captchaComponent" v-if="settingStore.inited" ref="captchaRef" :model-value="modelValue" class="captcha_input" :captcha-get="getCaptcha" @change="onChange" />
 </template>
 <script setup lang="ts">
 import { ref, computed, defineAsyncComponent } from "vue";
@@ -7,6 +7,12 @@ import { useSettingStore } from "/@/store/settings";
 import { nanoid } from "nanoid";
 import { request } from "/@/api/service";
 
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({}),
+  },
+});
 const captchaRef = ref(null);
 const settingStore = useSettingStore();
 
@@ -17,7 +23,7 @@ const captchaAddonId = computed(() => {
   return settingStore.sysPublic.captchaAddonId ?? 0;
 });
 const captchaComponent = computed(() => {
-  let type = "image";
+  let type: any = "image";
   if (settingStore.sysPublic.captchaAddonId && settingStore.sysPublic.captchaType) {
     type = settingStore.sysPublic.captchaType;
   }
@@ -36,7 +42,7 @@ async function getCaptcha(): Promise<any> {
   });
 }
 
-function onChange(data) {
+function onChange(data: any) {
   emits("update:modelValue", data);
   emits("change", data);
 }
@@ -44,7 +50,11 @@ function onChange(data) {
 async function getCaptchaForm() {
   return await captchaRef.value.getCaptchaForm();
 }
+async function reset() {
+  await captchaRef.value.reset();
+}
 defineExpose({
   getCaptchaForm,
+  reset,
 });
 </script>

packages/ui/certd-client/src/components/captcha/captchas/geetest_captcha.vue

@@ -2,7 +2,7 @@
   <div ref="captchaRef" class="geetest_captcha_wrapper"></div>
 </template>
 <script setup lang="ts">
-import { onMounted, defineProps, defineEmits, ref, onUnmounted } from "vue";
+import { onMounted, defineProps, defineEmits, ref, onUnmounted, Ref, watch } from "vue";
 import { useSettingStore } from "/@/store/settings";
 import { request } from "/src/api/service";
 import { notification } from "ant-design-vue";
@@ -12,13 +12,14 @@ defineOptions({
 });
 const emit = defineEmits(["update:modelValue", "change"]);
 const props = defineProps<{
+  modelValue: any;
   captchaGet: () => Promise<any>;
 }>();
 const captchaRef = ref(null);
 // const addonApi = createAddonApi();
 const settingStore = useSettingStore();
 
-const captchaInstanceRef = ref({});
+const captchaInstanceRef: Ref = ref({});
 async function init() {
   // if (!initGeetest4) {
   //   await import("https://static.geetest.com/v4/gt4.js");
@@ -35,6 +36,13 @@ async function init() {
       captcha.appendTo(captchaRef.value); // 调用appendTo将验证码插入到页的某一个元素中，这个元素用户可以自定义
       captchaInstanceRef.value.instance = captcha;
       captchaInstanceRef.value.captchaId = captchaId;
+
+      captcha.onSuccess(function () {
+        const form = getCaptchaForm();
+        if (form) {
+          emitChange(form);
+        }
+      });
     }
   );
 }
@@ -58,29 +66,51 @@ function getCaptchaForm() {
   return result;
 }
 
-const valueRef = ref(null);
-const timeoutId = setInterval(() => {
-  const form = getCaptchaForm();
-  if (form && valueRef.value != form) {
-    console.log("form", form);
-    valueRef.value = form;
-    emitChange(form);
-  }
-}, 1000);
+// const valueRef = ref(null);
+// const timeoutId = setInterval(() => {
+//   const form = getCaptchaForm();
+//   if (form && valueRef.value != form) {
+//     console.log("form", form);
+//     valueRef.value = form;
+//     emitChange(form);
+//   }
+// }, 1000);
 
-onUnmounted(() => {
-  clearTimeout(timeoutId);
-});
+// onUnmounted(() => {
+//   clearTimeout(timeoutId);
+// });
 
 function emitChange(value: string) {
   emit("update:modelValue", value);
   emit("change", value);
 }
+function reset() {
+  captchaInstanceRef.value.instance.reset();
+}
+
+watch(
+  () => {
+    return props.modelValue;
+  },
+  value => {
+    if (value == null) {
+      reset();
+    }
+  }
+);
 
 defineExpose({
   getCaptchaForm,
+  reset,
 });
 
+watch(
+  () => [props.captchaGet],
+  async () => {
+    await init();
+  }
+);
+
 onMounted(async () => {
   await init();
 });

packages/ui/certd-client/src/components/captcha/captchas/image_captcha.vue

@@ -11,10 +11,11 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineEmits, defineExpose, defineProps, ref } from "vue";
+import { defineEmits, defineExpose, defineProps, ref, watch } from "vue";
 import { nanoid } from "nanoid";
 
 const props = defineProps<{
+  modelValue: any;
   captchaGet?: () => Promise<any>;
 }>();
 defineOptions({
@@ -42,6 +43,7 @@ function getCaptchaForm() {
 defineExpose({
   resetImageCode,
   getCaptchaForm,
+  reset: resetImageCode,
 });
 
 resetImageCode();
@@ -52,7 +54,18 @@ function onChange(value: string) {
   emitChange(form);
 }
 
-function emitChange(value) {
+watch(
+  () => {
+    return props.modelValue;
+  },
+  value => {
+    if (value == null) {
+      reset();
+    }
+  }
+);
+
+function emitChange(value: any) {
   emit("update:modelValue", value);
   emit("change", value);
 }

packages/ui/certd-client/src/views/framework/forgot-password/index.vue

@@ -21,10 +21,17 @@
             </a-input>
           </a-form-item>
           <a-form-item has-feedback name="captchaForEmail" label="验证码">
-            <CaptchaInput v-model:model-value="formState.captchaForEmail"></CaptchaInput>
+            <CaptchaInput ref="captchaForEmailRef" v-model:model-value="formState.captchaForEmail"></CaptchaInput>
           </a-form-item>
           <a-form-item has-feedback name="validateCode" label="邮件验证码">
-            <email-code v-model:value="formState.validateCode" :captcha="formState.captchaForEmail" :email="formState.input" :random-str="formState.randomStr" verification-type="forgotPassword" />
+            <email-code
+              v-model:value="formState.validateCode"
+              :captcha="formState.captchaForEmail"
+              :email="formState.input"
+              :random-str="formState.randomStr"
+              verification-type="forgotPassword"
+              @error="formState.captchaForEmail = null"
+            />
           </a-form-item>
         </a-tab-pane>
         <a-tab-pane key="mobile" tab="手机号找回">
@@ -36,10 +43,17 @@
             </a-input>
           </a-form-item>
           <a-form-item has-feedback name="captchaForSms" label="验证码">
-            <CaptchaInput v-model:model-value="formState.captchaForSms"></CaptchaInput>
+            <CaptchaInput ref="captchaForSmsRef" v-model:model-value="formState.captchaForSms"></CaptchaInput>
           </a-form-item>
           <a-form-item name="validateCode" label="手机验证码">
-            <sms-code v-model:value="formState.validateCode" :captcha="formState.captchaForSms" :mobile="formState.input" :phone-code="formState.phoneCode" verification-type="forgotPassword" />
+            <sms-code
+              v-model:value="formState.validateCode"
+              :captcha="formState.captchaForSms"
+              :mobile="formState.input"
+              :phone-code="formState.phoneCode"
+              verification-type="forgotPassword"
+              @error="formState.captchaForSms = null"
+            />
           </a-form-item>
         </a-tab-pane>
       </a-tabs>
@@ -141,15 +155,20 @@ watch(forgotPasswordType, () => {
 });
 
 const handleFinish = async (values: any) => {
-  await userStore.forgotPassword(
-    toRaw({
-      type: forgotPasswordType.value,
-      input: formState.input,
-      validateCode: formState.validateCode,
-      password: formState.password,
-      confirmPassword: formState.confirmPassword,
-    }) as any
-  );
+  try {
+    await userStore.forgotPassword(
+      toRaw({
+        type: forgotPasswordType.value,
+        input: formState.input,
+        validateCode: formState.validateCode,
+        password: formState.password,
+        confirmPassword: formState.confirmPassword,
+      }) as any
+    );
+  } finally {
+    formState.captchaForSms = null;
+    formState.captchaForEmail = null;
+  }
 };
 
 const handleFinishFailed = (errors: any) => {

packages/ui/certd-client/src/views/framework/login/index.vue

@@ -41,7 +41,7 @@
             </a-form-item>
 
             <a-form-item name="smsCode" :rules="rules.smsCode">
-              <sms-code v-model:value="formState.smsCode" :captcha="formState.smsCaptcha" :mobile="formState.mobile" :phone-code="formState.phoneCode" />
+              <sms-code v-model:value="formState.smsCode" :captcha="formState.smsCaptcha" :mobile="formState.mobile" :phone-code="formState.phoneCode" @error="formState.smsCaptcha = null" />
             </a-form-item>
           </template>
         </a-tab-pane>
@@ -188,6 +188,8 @@ export default defineComponent({
         }
       } finally {
         loading.value = false;
+        formState.captcha = null;
+        formState.smsCaptcha = null;
       }
     };
 
@@ -209,18 +211,6 @@ export default defineComponent({
 
     const captchaInputRef = ref();
     const captchaInputForSmsCode = ref();
-    async function doCaptchaValidate() {
-      if (!sysPublicSettings.captchaEnabled) {
-        return {};
-      }
-      const res = await captchaInputRef.value.getValidatedForm();
-      if (!res) {
-        return false;
-      }
-      return {
-        ...res,
-      };
-    }
 
     return {
       t,

packages/ui/certd-client/src/views/framework/login/sms-code.vue

@@ -24,7 +24,7 @@ const props = defineProps<{
   captcha?: any;
   verificationType?: string;
 }>();
-const emit = defineEmits(["update:value", "change"]);
+const emit = defineEmits(["update:value", "change", "error"]);
 
 function onChange(value: string) {
   emit("update:value", value);
@@ -59,6 +59,9 @@ async function sendSmsCode() {
       captcha: props.captcha,
       verificationType: props.verificationType,
     });
+  } catch (e) {
+    emit("error", e);
+    throw e;
   } finally {
     loading.value = false;
   }

packages/ui/certd-client/src/views/framework/register/email-code.vue

@@ -23,7 +23,7 @@ const props = defineProps<{
   captcha?: any;
   verificationType?: string;
 }>();
-const emit = defineEmits(["update:value", "change"]);
+const emit = defineEmits(["update:value", "change", "error"]);
 
 function onChange(value: string) {
   emit("update:value", value);
@@ -54,6 +54,9 @@ async function sendSmsCode() {
       captcha: props.captcha,
       verificationType: props.verificationType,
     });
+  } catch (e) {
+    emit("error", e);
+    throw e;
   } finally {
     loading.value = false;
   }

packages/ui/certd-client/src/views/framework/register/index.vue

@@ -66,7 +66,7 @@
             </a-form-item>
 
             <a-form-item has-feedback name="validateCode" :rules="rules.validateCode" label="邮件验证码">
-              <email-code v-model:value="formState.validateCode" :captcha="formState.captchaForEmail" :email="formState.email" />
+              <email-code v-model:value="formState.validateCode" :captcha="formState.captchaForEmail" :email="formState.email" @error="formState.captchaForEmail = null" />
             </a-form-item>
           </template>
         </a-tab-pane>
@@ -182,16 +182,20 @@ export default defineComponent({
     };
 
     const handleFinish = async (values: any) => {
-      await userStore.register(
-        toRaw({
-          type: registerType.value,
-          password: formState.password,
-          username: formState.username,
-          email: formState.email,
-          captcha: formState.captcha,
-          validateCode: formState.validateCode,
-        }) as any
-      );
+      try {
+        await userStore.register(
+          toRaw({
+            type: registerType.value,
+            password: formState.password,
+            username: formState.username,
+            email: formState.email,
+            captcha: formState.captcha,
+            validateCode: formState.validateCode,
+          }) as any
+        );
+      } finally {
+        formState.captcha = null;
+      }
     };
 
     const handleFinishFailed = (errors: any) => {