feat: add CF Turnstile when new address (#200)

frontend/src/api/index.js

@@ -63,6 +63,7 @@ const getOpenSettings = async (message) => {
             enableUserDeleteEmail: res["enableUserDeleteEmail"] || false,
             enableAutoReply: res["enableAutoReply"] || false,
             copyright: res["copyright"] || openSettings.value.copyright,
+            cfTurnstileSiteKey: res["cfTurnstileSiteKey"] || "",
         });
         if (openSettings.value.needAuth) {
             showAuth.value = true;

frontend/src/components/Turnstile.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { ref, watch, defineModel, onMounted } from "vue";
+import { useI18n } from 'vue-i18n'
+import { useGlobalState } from '../store'
+const { localeCache, openSettings, isDark } = useGlobalState()
+
+const cfToken = defineModel('value')
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            refresh: 'Refresh'
+        },
+        zh: {
+            refresh: '刷新'
+        }
+    }
+});
+
+const cfTurnstileId = ref("")
+const turnstileLoading = ref(false)
+
+const checkCfTurnstile = async (remove) => {
+    if (!openSettings.value.cfTurnstileSiteKey) return;
+    turnstileLoading.value = true;
+    try {
+        let container = document.getElementById("cf-turnstile");
+        let count = 100;
+        while (!container && count-- > 0) {
+            container = document.getElementById("cf-turnstile");
+            await new Promise(r => setTimeout(r, 10));
+        }
+        count = 100;
+        while (!window.turnstile && count-- > 0) {
+            await new Promise(r => setTimeout(r, 10));
+        }
+        if (remove && cfTurnstileId.value) {
+            window.turnstile.remove(cfTurnstileId.value);
+        }
+        cfTurnstileId.value = window.turnstile.render(
+            "#cf-turnstile",
+            {
+                sitekey: openSettings.value.cfTurnstileSiteKey,
+                language: localeCache.value == 'zh' ? 'zh-CN' : 'en-US',
+                theme: isDark.value ? 'dark' : 'light',
+                callback: function (token) {
+                    cfToken.value = token;
+                },
+            }
+        );
+    } finally {
+        turnstileLoading.value = false;
+    }
+}
+
+watch(isDark, async (isDark) => {
+    checkCfTurnstile(true)
+}, { immediate: true })
+
+onMounted(() => {
+    cfToken.value = "";
+    checkCfTurnstile(true);
+})
+</script>
+
+<template>
+    <div v-if="openSettings.cfTurnstileSiteKey" class="center">
+        <n-spin description="loading..." :show="turnstileLoading">
+            <n-form-item-row>
+                <div id="cf-turnstile"></div>
+                <n-button text @click="checkCfTurnstile(true)">
+                    {{ t('refresh') }}
+                </n-button>
+            </n-form-item-row>
+        </n-spin>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+}
+
+.n-button {
+    margin-left: 10px;
+}
+</style>

frontend/src/store/index.js

@@ -1,6 +1,5 @@
 import { ref } from "vue";
-import { createGlobalState, useStorage } from '@vueuse/core'
-import { useDark, useToggle } from '@vueuse/core'
+import { createGlobalState, useStorage, useDark, useToggle } from '@vueuse/core'
 
 export const useGlobalState = createGlobalState(
     () => {
@@ -16,6 +15,7 @@ export const useGlobalState = createGlobalState(
             enableAutoReply: false,
             domains: [],
             copyright: 'Dream Hunter',
+            cfTurnstileSiteKey: '',
         })
         const settings = ref({
             fetched: false,

frontend/src/views/Login.vue

@@ -1,11 +1,14 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 import AdminContact from './admin/AdminContact.vue'
+import Turnstile from '../components/Turnstile.vue'
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
 const message = useMessage()
+const router = useRouter()
 
 const {
     jwt, localeCache, loading, openSettings, showPassword
@@ -15,6 +18,7 @@ const tabValue = ref('signin')
 const password = ref('')
 const emailName = ref("")
 const emailDomain = ref("")
+const cfToken = ref("")
 
 const login = async () => {
     if (!password.value) {
@@ -81,11 +85,14 @@ const generateName = async () => {
 
 const newEmail = async () => {
     try {
-        const res = await api.fetch(
-            `/api/new_address`
-            + `?name=${emailName.value || ''}`
-            + `&domain=${emailDomain.value || ''}`
-        );
+        const res = await api.fetch(`/api/new_address`, {
+            method: "POST",
+            body: JSON.stringify({
+                name: emailName.value,
+                domain: emailDomain.value,
+                cf_token: cfToken.value,
+            }),
+        });
         jwt.value = res["jwt"];
         await api.getSettings();
         showPassword.value = true;
@@ -95,7 +102,7 @@ const newEmail = async () => {
 };
 
 onMounted(async () => {
-    emailDomain.value = openSettings.value.domains ? openSettings.value.domains[0].value : "";
+    emailDomain.value = openSettings.value.domains ? openSettings.value.domains[0]?.value : "";
 });
 </script>
 
@@ -136,6 +143,7 @@ onMounted(async () => {
                             <n-select v-model:value="emailDomain" :consistent-menu-width="false"
                                 :options="openSettings.domains" />
                         </n-input-group>
+                        <Turnstile v-model:value="cfToken" />
                         <n-button type="primary" block secondary strong @click="newEmail" :loading="loading">
                             {{ t('ok') }}
                         </n-button>

frontend/src/views/admin/AccountSettings.vue

@@ -21,7 +21,7 @@ const { t } = useI18n({
         zh: {
             save: '保存',
             successTip: '保存成功',
-            address_block_list: '用户地址屏蔽关键词(管理员可跳过检查)',
+            address_block_list: '邮件地址屏蔽关键词(管理员可跳过检查)',
             address_block_list_placeholder: '请输入您想要屏蔽的关键词',
             send_address_block_list: '发送邮件地址屏蔽关键词',
         }

frontend/src/views/admin/Maintenance.vue

@@ -37,7 +37,7 @@ const { t } = useI18n({
             tip: '请输入清理天数',
             mailBoxLabel: '收件箱清理天数',
             mailUnknowLabel: "无收件人邮件清理天数",
-            addressUnActiveLabel: "未激活地址清理天数",
+            addressUnActiveLabel: "未活跃地址清理天数",
             sendBoxLabel: "发件箱清理天数",
             autoCleanup: "自动清理",
             cleanupSuccess: "清理成功",

frontend/src/views/admin/Statistics.vue

@@ -14,14 +14,14 @@ const { t } = useI18n({
     locale: localeCache.value || 'zh',
     messages: {
         en: {
-            userCount: 'User Count',
-            activeUser: '7 days Active User',
+            userCount: 'Account Count',
+            activeUser: '7 days Active Mail Account',
             mailCount: 'Mail Count',
             sendMailCount: 'Send Mail Count'
         },
         zh: {
-            userCount: '用户总数',
-            activeUser: '周活跃用户',
+            userCount: '地址总数',
+            activeUser: '周活跃邮箱地址',
             mailCount: '邮件总数',
             sendMailCount: '发送邮件总数'
         }