feat: hcaptcha

src/components/Board/BoardForm.vue

@@ -1,22 +1,32 @@
 <script setup>
 import { ref, computed } from 'vue';
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 
 const emit = defineEmits(['new-message']);
 const props = defineProps(['locked']);
 
 const text = ref('');
+const hcaptchaResponse = ref('');
 const maxLength = 200;
 
+const handleHcaptchaVerify = (token) => {
+  hcaptchaResponse.value = token;
+};
+
+const handleHcaptchaExpired = () => {
+  hcaptchaResponse.value = '';
+};
+
 const remainingCharacters = computed(() => {
   return maxLength - text.value.length;
 });
 
 function submit() {
-  if (!text.value || props.locked) {
+  if (!text.value || props.locked || !hcaptchaResponse.value) {
     return;
   }
 
-  emit('new-message', { text: text.value });
+  emit('new-message', { text: text.value, hcaptchaResponse: hcaptchaResponse.value });
   text.value = '';
 }
 </script>
@@ -39,8 +49,13 @@ function 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" type="submit" :class="{'is-disabled': text === '' || props.locked }">送出</button>
+        <button class="ts-button" type="submit" :class="{'is-disabled': text === '' || props.locked || !hcaptchaResponse.value }">送出</button>
       </div>
     </fieldset>
   </form>
@@ -56,4 +71,4 @@ function submit() {
     max-width: 100%;
   }
 }
-</style>
+</style>

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>

src/components/Profile/ProfileForm.vue

@@ -2,6 +2,7 @@
 import { ref, computed, defineProps } from 'vue';
 import { useRouter } from 'vue-router';
 import { uploadAvatar } from '../../lib/api';
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import { useAuthStore } from '../../stores/auth';
 
 const props = defineProps({
@@ -16,11 +17,20 @@ const router = useRouter();
 
 const avatarFile = ref(null);
 const avatarError = ref('');
+const hcaptchaResponse = ref('');
 
 const onFileChange = (event) => {
   avatarFile.value = event.target.files[0];
 };
 
+const handleHcaptchaVerify = (token) => {
+  hcaptchaResponse.value = token;
+};
+
+const handleHcaptchaExpired = () => {
+  hcaptchaResponse.value = '';
+};
+
 const onSubmit = async () => {
   avatarError.value = '';
 
@@ -29,6 +39,11 @@ const onSubmit = async () => {
     return;
   }
 
+  if (!hcaptchaResponse.value) {
+    avatarError.value = '請完成驗證。';
+    return;
+  }
+
   if (avatarFile.value.size > 1 * 1024 * 1024) {
     avatarError.value = '頭貼檔案需小於 1MB。';
     return;
@@ -40,7 +55,7 @@ const onSubmit = async () => {
   }
 
   try {
-    await uploadAvatar(avatarFile.value, authStore.jwt);
+    await uploadAvatar(avatarFile.value, authStore.jwt, hcaptchaResponse.value);
     alert('Avatar uploaded successfully!');
     // After successful upload, reload this page
     router.go(0);
@@ -85,8 +100,13 @@ const avatarUrl = computed(() => {
           </div>
         </div>
       </div>
+      <VueHcaptcha
+        :sitekey="$hcaptchaSitekey"
+        @verify="handleHcaptchaVerify"
+        @expired="handleHcaptchaExpired"
+      />
       <div class="ts-wrap has-top-spaced is-end-aligned">
-        <button class="ts-button" :disabled="!(avatarFile && avatarError === '')" type="submit">更新</button>
+        <button class="ts-button" :disabled="!(avatarFile && avatarError === '' && hcaptchaResponse)" type="submit">更新</button>
       </div>
     </fieldset>
   </form>

src/components/Register/RegisterForm.vue

@@ -1,14 +1,24 @@
 <script setup>
 import { ref, watch } from 'vue';
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 
 const emit = defineEmits(['new-user']);
 
 const username = ref('');
 const password = ref('');
+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 = '使用者名稱為必填。';
@@ -47,11 +57,11 @@ const submit = () => {
   validateUsername();
   validatePassword();
 
-  if (usernameError.value || passwordError.value) {
+  if (usernameError.value || passwordError.value || !hcaptchaResponse.value) {
     return;
   }
 
-  emit('new-user', { username: username.value, password: password.value });
+  emit('new-user', { username: username.value, password: password.value, hcaptchaResponse: hcaptchaResponse.value });
 }
 </script>
 
@@ -81,8 +91,13 @@ 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" type="submit" :class="{'is-disabled': username === '' || password === '' }">送出</button>
+        <button class="ts-button" type="submit" :class="{'is-disabled': username === '' || password === '' || !hcaptchaResponse }">送出</button>
       </div>
     </div>
   </form>

src/lib/api.js

@@ -2,14 +2,18 @@ import { unauthRedirectToLogin } from '../router';
 
 const API_BASE_URL = '/api';
 
+export async function register(username, password, hCaptchaResponse) {
+  const formData = new FormData();
+  const payload = { username, password };
+
+  formData.append('payload', JSON.stringify(payload));
+  if (hCaptchaResponse) {
+    formData.append('h-captcha-response', hCaptchaResponse);
+  }
 
-export async function register(username, password) {
   const response = await fetch(API_BASE_URL + "/register", {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ username, password }),
+    body: formData,
   });
 
   if (!response.ok) {
@@ -20,13 +24,18 @@ export async function register(username, password) {
   return response.json();
 }
 
-export async function login(username, password) {
+export async function login(username, password, hCaptchaResponse) {
+  const formData = new FormData();
+  const payload = { username, password };
+
+  formData.append('payload', JSON.stringify(payload));
+  if (hCaptchaResponse) {
+    formData.append('h-captcha-response', hCaptchaResponse);
+  }
+
   const response = await fetch(API_BASE_URL + "/login", {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ username, password }),
+    body: formData
   });
 
   if (!response.ok) {
@@ -37,14 +46,21 @@ export async function login(username, password) {
   return response.json();
 }
 
-export async function postMessage(message, jwt) {
+export async function postMessage(message, jwt, hCaptchaResponse) {
+  const formData = new FormData();
+  const payload = { message };
+
+  formData.append('payload', JSON.stringify(payload));
+  if (hCaptchaResponse) {
+    formData.append('h-captcha-response', hCaptchaResponse);
+  }
+
   const response = await fetch(API_BASE_URL + "/messages", {
     method: 'POST',
     headers: {
-      'Content-Type': 'application/json',
-      'Authorization': "Bearer " + jwt,
+      'Authorization': "Bearer " + jwt
     },
-    body: JSON.stringify({ message }),
+    body: formData
   });
 
   if (!response.ok) {
@@ -81,7 +97,7 @@ export async function deleteMessage(messageId, jwt) {
   return response.json();
 }
 
-export async function getMessages(jwt) {
+export async function getMessages() {
   const response = await fetch(API_BASE_URL + "/messages", {
     method: 'GET',
     headers: {
@@ -122,43 +138,20 @@ export async function getProfile(jwt) {
   return response.json();
 }
 
-export async function me(jwt) {
-  const response = await fetch(API_BASE_URL + "/me", {
-    method: 'GET',
-    headers: {
-      'Authorization': "Bearer " + jwt,
-    },
-  });
+export async function uploadAvatar(avatar, jwt, hCaptchaResponse) {
+  const formData = new FormData();
+  formData.append('avatar', avatar);
 
-  if (!response.ok) {
-    if (response.status === 401) {
-      unauthRedirectToLogin();
-      return;
-    }
-    const error = await response.json();
-    throw new Error(error.error || 'User operation failed');
+  if (hCaptchaResponse) {
+    formData.append('h-captcha-response', hCaptchaResponse);
   }
 
-  const userData = await response.json();
-  const avatarFilename = userData.avatar;
-
-  if (avatarFilename) {
-    return import.meta.env.VITE_R2_BASE_URL + "/" + avatarFilename;
-  }
-
-  return null;
-}
-
-export async function uploadAvatar(avatar, jwt) {
-  const body = new FormData();
-  body.append('avatar', avatar);
-
   const response = await fetch(API_BASE_URL + "/avatars", {
     method: 'PUT',
     headers: {
       'Authorization': "Bearer " + jwt,
     },
-    body: body,
+    body: formData,
   });
 
   if (!response.ok) {
@@ -174,12 +167,19 @@ export async function uploadAvatar(avatar, jwt) {
   return data;
 }
 
-export async function generateMotto(jwt) {
+export async function generateMotto(jwt, hCaptchaResponse) {
+  const formData = new FormData();
+  if (hCaptchaResponse) {
+    formData.append('h-captcha-response', hCaptchaResponse);
+  }
+
   try {
     const response = await fetch('/api/motto', {
+      method: 'POST',
       headers: {
         'Authorization': `Bearer ${jwt}`,
       },
+      body: formData
     });
 
     if (!response.ok) {

src/main.js

@@ -9,4 +9,7 @@ const app = createApp(App);
 
 app.use(pinia);
 app.use(router);
+
+app.config.globalProperties.$hcaptchaSitekey = import.meta.env.VITE_HCAPTCHA_SITEKEY;
+
 app.mount('#app');

src/style.css

@@ -5,4 +5,11 @@ html, body, #app {
 #app {
   display: flex;
   flex-direction: column;
+}
+
+#hcap-script {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1em 0;
 }

src/views/BoardView.vue

@@ -23,7 +23,7 @@ const onSubmit = async (message) => {
   if (!isLoggedIn) return;
 
   try {
-    await postMessage(message.text, authStore.jwt);
+    await postMessage(message.text, authStore.jwt, message.hcaptchaResponse);
 
     const response = await getMessages();
     messages.value = response.messages;

src/views/DailyMottoView.vue

@@ -2,17 +2,27 @@
 import { ref, onMounted } from 'vue';
 import { generateMotto as generateMottoApi } from '../lib/api';
 import { useAuthStore } from '../stores/auth';
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 
 const motto = ref('');
 const mottoLoading = ref(false);
+const hcaptchaResponse = ref('');
 
 const authStore = useAuthStore();
 
+const handleHcaptchaVerify = (token) => {
+  hcaptchaResponse.value = token;
+};
+
+const handleHcaptchaExpired = () => {
+  hcaptchaResponse.value = '';
+};
+
 const generateMotto = async () => {
   mottoLoading.value = true;
 
   try {
-    const generatedMotto = await generateMottoApi(authStore.jwt);
+    const generatedMotto = await generateMottoApi(authStore.jwt, hcaptchaResponse.value);
     motto.value = generatedMotto;
   } catch (error) {
     console.error(error);
@@ -28,9 +38,15 @@ const generateMotto = async () => {
     <div class="ts-box ts-content is-center-aligned">
       <div class="ts-header is-large is-center-aligned">每日金句生成器</div>
       <p class="ts-text">Powered By Cloudflare Workers AI</p>
-      <button class="ts-button" @click="generateMotto">生成</button>
+      <VueHcaptcha
+        :sitekey="$hcaptchaSitekey"
+        @verify="handleHcaptchaVerify"
+        @expired="handleHcaptchaExpired"
+      />
+      <button class="ts-button" @click="generateMotto" :disabled="!hcaptchaResponse">生成</button>
       <p class="ts-text">每日金句:</p>
+      <div class="ts-loading" v-if="mottoLoading"></div>
       <p class="ts-text">{{ motto }}</p>
     </div>
   </div>
-</template>
+</template>

src/views/LoginView.vue

@@ -7,9 +7,9 @@ import { login } from '../lib/api';
 const router = useRouter();
 const authStore = useAuthStore();
 
-const onSubmit = async ({ username, password }) => {
+const onSubmit = async ({ username, password, hcaptchaResponse }) => {
   try {
-    const response = await login(username, password);
+    const response = await login(username, password, hcaptchaResponse);
     const { jwt } = response;
     authStore.setJwt(jwt);
     alert('Login successful!');

src/views/RegisterView.vue

@@ -5,9 +5,9 @@ import { register } from '../lib/api';
 
 const router = useRouter();
 
-const handleNewUser = async ({ username, password }) => {
+const handleNewUser = async ({ username, password, hcaptchaResponse }) => {
   try {
-    const response = await register(username, password);
+    const response = await register(username, password, hcaptchaResponse);
 
     alert(response.message || 'Registration successful! Please log in.');
     // Redirect to login page