feat: hcaptcha

src/components/Login/LoginForm.vue

@@ -1,16 +1,24 @@
 <script setup>
 import { ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 
 const emit = defineEmits(['login-submit']);
 
 const username = ref('');
 const password = ref('');
-const router = useRouter();
+const hcaptchaResponse = ref('');
 
 const usernameError = ref('');
 const passwordError = ref('');
 
+const handleHcaptchaVerify = (token) => {
+  hcaptchaResponse.value = token;
+};
+
+const handleHcaptchaExpired = () => {
+  hcaptchaResponse.value = '';
+};
+
 function validateUsername() {
   if (!username.value) {
     usernameError.value = '使用者名稱為必填。';
@@ -49,11 +57,11 @@ const submit = () => {
   validateUsername();
   validatePassword();
 
-  if (usernameError.value || passwordError.value) {
+  if (usernameError.value || passwordError.value || !hcaptchaResponse.value) {
     return;
   }
 
-  emit('login-submit', { username: username.value, password: password.value });
+  emit('login-submit', { username: username.value, password: password.value, hcaptchaResponse: hcaptchaResponse.value });
 }
 </script>
 
@@ -81,9 +89,14 @@ const submit = () => {
           </div>
         </div>
       </div>
+      <VueHcaptcha
+        :sitekey="$hcaptchaSitekey"
+        @verify="handleHcaptchaVerify"
+        @expired="handleHcaptchaExpired"
+      />
       <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 !== ''
+          'is-disabled': username === '' || password === '' || usernameError !== '' || passwordError !== '' || !hcaptchaResponse
         }">登入</button>
       </div>
     </div>