feat: add ReCaptchaV2 & Turnstile

src/lib/api.js

@@ -2,7 +2,7 @@ import { unauthRedirectToLogin } from '../router';
 
 const API_BASE_URL = '/api';
 
-export async function register(username, password, hCaptchaResponse) {
+export async function register(username, password, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   const payload = { username, password };
 
@@ -10,6 +10,12 @@ export async function register(username, password, hCaptchaResponse) {
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/register", {
     method: 'POST',
@@ -24,7 +30,7 @@ export async function register(username, password, hCaptchaResponse) {
   return response.json();
 }
 
-export async function login(username, password, hCaptchaResponse) {
+export async function login(username, password, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   const payload = { username, password };
 
@@ -32,6 +38,12 @@ export async function login(username, password, hCaptchaResponse) {
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/login", {
     method: 'POST',
@@ -46,7 +58,7 @@ export async function login(username, password, hCaptchaResponse) {
   return response.json();
 }
 
-export async function postMessage(message, jwt, hCaptchaResponse) {
+export async function postMessage(message, jwt, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   const payload = { message };
 
@@ -54,6 +66,12 @@ export async function postMessage(message, jwt, hCaptchaResponse) {
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/messages", {
     method: 'POST',
@@ -138,13 +156,18 @@ export async function getProfile(jwt) {
   return response.json();
 }
 
-export async function uploadAvatar(avatar, jwt, hCaptchaResponse) {
+export async function uploadAvatar(avatar, jwt, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   formData.append('avatar', avatar);
-
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/avatars", {
     method: 'PUT',
@@ -167,11 +190,17 @@ export async function uploadAvatar(avatar, jwt, hCaptchaResponse) {
   return data;
 }
 
-export async function generateMotto(jwt, hCaptchaResponse) {
+export async function generateMotto(jwt, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   try {
     const response = await fetch('/api/motto', {

src/lib/darkMode.js

@@ -0,0 +1,16 @@
+import { reactive } from 'vue';
+
+const darkModeMediaQuery = '(prefers-color-scheme: dark)';
+const matchMedia = window.matchMedia(darkModeMediaQuery);
+
+const darkMode = reactive({
+  value: matchMedia.matches,
+});
+
+matchMedia.addEventListener('change', (event) => {
+  darkMode.value = event.matches;
+});
+
+export const install = (app) => {
+ app.config.globalProperties.$darkMode = darkMode;
+}