feat: add storage recaptcha key

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
-  "cSpell.words": ["kotodama"],
+  "cSpell.words": [
+    "kotodama",
+    "recaptcha"
+  ],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": "locales",
   "i18n-ally.sortKeys": true,

locales/en.yml

@@ -25,6 +25,7 @@ not-found: Not found
 
 placeholder:
   server_url: Server Url
+  recaptcha_v3_key: Recaptcha V3 Key (Client)
   nickname: Nickname
   username: Username
   password: Password

locales/zh-CN.yml

@@ -25,6 +25,7 @@ not-found: 未找到页面
 
 placeholder:
   server_url: Waline 服务端地址，如 https://waline.xx.xx
+  recaptcha_v3_key: Recaptcha V3 Key 客户端密钥
   email: 邮箱
   nickname: 昵称
   username: 用户名

src/api/auth.ts

@@ -10,7 +10,10 @@ export interface LoginParams {
    * 2FA TODO
    */
   code?: string
-  recaptchaV3Key?: string
+  /**
+   * recaptcha v3 verify response
+   */
+  recaptchaV3?: string
 }
 
 export interface TokenData {

src/composables/login.ts

@@ -7,6 +7,10 @@ import { useUserStore } from '~/stores/user'
 
 export interface LoginForm extends LoginParams {
   serverURL: string
+  /**
+   * recaptcha v3 key
+   */
+  recaptchaV3Key?: ''
 }
 
 export function useLogin(loginFormEl: Ref<HTMLFormElement>, loginForm: LoginForm) {
@@ -33,7 +37,7 @@ export function useLogin(loginFormEl: Ref<HTMLFormElement>, loginForm: LoginForm
           const res = await login({
             email: loginForm.email,
             password: loginForm.password,
-            recaptchaV3Key: loginForm.recaptchaV3Key,
+            recaptchaV3: loginForm.recaptchaV3,
           }, remember.value)
           if (res && res.data && res.data.token) {
             uStore.url = res.data.url

src/modules/nprogress.ts

@@ -3,7 +3,11 @@ import type { UserModule } from '~/types'
 
 export const install: UserModule = ({ isClient, router }) => {
   if (isClient) {
-    router.beforeEach(() => { NProgress.start() })
-    router.afterEach(() => { NProgress.done() })
+    router.beforeEach(() => {
+      NProgress.start()
+    })
+    router.afterEach(() => {
+      NProgress.done()
+    })
   }
 }

src/pages/login.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import { VueRecaptcha } from 'vue-recaptcha'
+import { getNsName } from '~/utils'
 import { validUsername } from '~/utils/validate'
 import { useUserStore } from '~/stores/user'
 import type { LoginForm } from '~/composables/login'
@@ -17,6 +18,7 @@ const loginForm = reactive<LoginForm>({
   code: '',
   email: uStore.email,
   password: '',
+  recaptchaV3: '',
   recaptchaV3Key: '',
 })
 
@@ -59,11 +61,11 @@ onMounted(() => {
 const onVerify = (res: string) => {
   if (!res)
     return
-  loginForm.recaptchaV3Key = res
+  loginForm.recaptchaV3 = res
   handleLogin()
 }
 
-const enableRecaptcha = ref(config.enableRecaptcha)
+const enableRecaptcha = useStorage(getNsName('enableRecaptcha'), config.enableRecaptcha)
 </script>
 
 <template>
@@ -122,6 +124,17 @@ const enableRecaptcha = ref(config.enableRecaptcha)
           </el-checkbox>
         </el-form-item>
 
+        <el-form-item v-if="enableRecaptcha" prop="serverURL" required>
+          <el-input
+            ref="serverURLEl"
+            v-model="loginForm.recaptchaV3Key"
+            :placeholder="t('placeholder.recaptcha_v3_key')"
+            name="serverURL"
+            type="text"
+            autocomplete="on"
+          />
+        </el-form-item>
+
         <!-- <el-form-item>
           <el-checkbox v-model="remember">{{ t("login.message") }}</el-checkbox>
         </el-form-item> -->

src/stores/user.ts

@@ -1,14 +1,16 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { namespace } from '~/utils'
+import { getNsName } from '~/utils'
 
 export const useUserStore = defineStore('user', () => {
   /**
    * waline server url
    */
-  const serverURL = useStorage(`${namespace}:serverURL`, '')
-  const token = useStorage(`${namespace}:token`, '')
-  const url = useStorage(`${namespace}:url`, '')
-  const email = useStorage(`${namespace}:email`, '')
+  const serverURL = useStorage(getNsName('serverURL'), '')
+  const token = useStorage(getNsName('token'), '')
+  const url = useStorage(getNsName('url'), '')
+  const email = useStorage(getNsName('email'), '')
+
+  const recaptchaV3Key = useStorage(getNsName('recaptchaV3Key'), '')
 
   return {
     token,
@@ -20,6 +22,7 @@ export const useUserStore = defineStore('user', () => {
     url,
 
     email,
+    recaptchaV3Key,
   }
 })
 

src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './helper'
 
 export const namespace = 'kotodama'
+export const getNsName = (name: string) => `${namespace}:${name}`