feat: add ReCaptchaV2 & Turnstile

src/components/Login/LoginForm.vue

@@ -1,26 +1,20 @@
 <script setup>
-import { ref, watch } from 'vue';
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import { ref, watch, computed } from 'vue';
+import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['login-submit']);
 
 const username = ref('');
 const password = ref('');
-const hcaptchaResponse = ref('');
+const captchaResponse = ref(null);
 
-const hcaptchaRef = ref(null);
+const captchaVerified = computed(() => {
+  return captchaResponse.value !== null;
+});
 
 const usernameError = ref('');
 const passwordError = ref('');
 
-const handleHcaptchaVerify = (token) => {
-  hcaptchaResponse.value = token;
-};
-
-const handleHcaptchaExpired = () => {
-  hcaptchaResponse.value = '';
-};
-
 function validateUsername() {
   if (!username.value) {
     usernameError.value = '使用者名稱為必填。';
@@ -55,16 +49,19 @@ watch(
   }
 );
 
+const handleCaptchaVerified = (response) => {
+  captchaResponse.value = response;
+};
+
 const submit = () => {
   validateUsername();
   validatePassword();
 
-  if (usernameError.value || passwordError.value || !hcaptchaResponse.value) {
+  if (usernameError.value || passwordError.value || !captchaVerified) {
     return;
   }
 
-  emit('login-submit', { username: username.value, password: password.value, hcaptchaResponse: hcaptchaResponse.value });
-  hcaptchaRef.value.reset();
+  emit('login-submit', { username: username.value, password: password.value, captchaResponse: captchaResponse.value });
 }
 </script>
 
@@ -92,16 +89,15 @@ const submit = () => {
           </div>
         </div>
       </div>
-      <VueHcaptcha
-        ref="hcaptchaRef"
-        :sitekey="$hcaptchaSitekey"
-        @verify="handleHcaptchaVerify"
-        @expired="handleHcaptchaExpired"
-        @reset="handleHcaptchaExpired"
+      <CAPTCHA
+        :hcaptchaSitekey="$hcaptchaSitekey"
+        :recaptchaSitekey="$recaptchaSitekey"
+        :turnstileSitekey="$turnstileSitekey"
+        @captchaVerified="handleCaptchaVerified"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
         <button class="ts-button is-fluid" type="submit" :class="{
-          'is-disabled': username === '' || password === '' || usernameError !== '' || passwordError !== '' || !hcaptchaResponse
+          'is-disabled': username === '' || password === '' || usernameError !== '' || passwordError !== '' || !captchaVerified
         }">登入</button>
       </div>
     </div>