From a4c4b07df9dfe261f757f93b983c460b8afb9cec Mon Sep 17 00:00:00 2001
From: addshore <git@addshore.com>
Date: Sat, 26 Sep 2026 15:27:03 +0100
Subject: [PATCH 1/2] dev: skip reCAPTCHA in local Compose

Make reCAPTCHA opt-in for local Compose while retaining it by default in other builds.
See also https://github.com/wbstack/api/pull/1278
---
 README.md                              |  4 ++++
 docker-compose.yml                     |  2 ++
 src/backend/index.js                   |  2 ++
 src/backend/recaptcha.js               |  9 +++++++++
 src/components/Cards/CreateAccount.vue |  4 ++--
 src/components/Pages/Complaint.vue     |  4 +++-
 src/components/Pages/Contact.vue       |  4 +++-
 src/config.js                          |  1 +
 src/config.template.js                 |  1 +
 src/main.js                            | 10 ++++++----
 tests/unit/recaptcha.spec.js           | 26 ++++++++++++++++++++++++++
 11 files changed, 59 insertions(+), 8 deletions(-)
 create mode 100644 src/backend/recaptcha.js
 create mode 100644 tests/unit/recaptcha.spec.js

diff --git a/README.md b/README.md
index 4e28865c..5c676461 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,10 @@ docker compose run ui npm install
 docker compose up -d
 ```
 
+reCAPTCHA is disabled in the UI's Docker Compose development server by default;
+set `VUE_APP_RECAPTCHA_ENABLED=1` and configure the API's
+`RECAPTCHA_ENABLED=true` to test with real reCAPTCHA keys.
+
 #### Running scripts
 
 ```
diff --git a/docker-compose.yml b/docker-compose.yml
index c1ade265..ec274496 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,6 +3,8 @@ services:
   ui:
     env_file:
       - .env
+    environment:
+      VUE_APP_RECAPTCHA_ENABLED: ${VUE_APP_RECAPTCHA_ENABLED:-0}
     image: node:22
     user: "node"
     working_dir: /home/node/app
diff --git a/src/backend/index.js b/src/backend/index.js
index dca47ecb..2a7aff1e 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -1,7 +1,9 @@
 import * as api from './api'
 import axios from './axios'
+import { getRecaptchaToken } from './recaptcha'
 
 export {
   api,
   axios,
+  getRecaptchaToken,
 }
diff --git a/src/backend/recaptcha.js b/src/backend/recaptcha.js
new file mode 100644
index 00000000..c3530b7d
--- /dev/null
+++ b/src/backend/recaptcha.js
@@ -0,0 +1,9 @@
+import config from '../config'
+
+export const getRecaptchaToken = (app, action) => {
+  if (!config.RECAPTCHA_ENABLED) {
+    return Promise.resolve('local-development')
+  }
+
+  return app.$recaptcha(action)
+}
diff --git a/src/components/Cards/CreateAccount.vue b/src/components/Cards/CreateAccount.vue
index 0af48906..2853125f 100644
--- a/src/components/Cards/CreateAccount.vue
+++ b/src/components/Cards/CreateAccount.vue
@@ -98,6 +98,7 @@
 
 <script>
 import PolicyList from '../Components/PolicyList'
+import { getRecaptchaToken } from '~/backend'
 
 export default {
   name: 'CreateAccountCard',
@@ -192,9 +193,8 @@ export default {
 
       // TODO once emailing is setup add emailVerificationRequired option to user model in model-config.json
 
-      // TODO recaptcha check should be optional for development (env var switch?)
       // Recaptcha check
-      this.$recaptcha('login').then((token) => {
+      getRecaptchaToken(this, 'login').then((token) => {
         this.$api.register(
           {
             email: this.email,
diff --git a/src/components/Pages/Complaint.vue b/src/components/Pages/Complaint.vue
index d605a7a4..2f6ab9f4 100644
--- a/src/components/Pages/Complaint.vue
+++ b/src/components/Pages/Complaint.vue
@@ -94,6 +94,8 @@
 </template>
 
 <script>
+import { getRecaptchaToken } from '~/backend'
+
 export default {
   data: () => ({
     contenturl: '',
@@ -116,7 +118,7 @@ export default {
       const name = this.name
       const email = this.email
       if (this.$refs.form.validate() === true) {
-        this.$recaptcha('complaint').then((recaptcha) => {
+        getRecaptchaToken(this, 'complaint').then((recaptcha) => {
           this.$api.complaint(
             {
               name,
diff --git a/src/components/Pages/Contact.vue b/src/components/Pages/Contact.vue
index fba7146e..33c521c3 100644
--- a/src/components/Pages/Contact.vue
+++ b/src/components/Pages/Contact.vue
@@ -72,6 +72,8 @@
 </template>
 
 <script>
+import { getRecaptchaToken } from '~/backend'
+
 export default {
   data: () => ({
     items: [
@@ -99,7 +101,7 @@ export default {
       const message = this.message
       const contactDetails = this.contactDetails
       // Recaptcha check
-      this.$recaptcha('contact').then((recaptcha) => {
+      getRecaptchaToken(this, 'contact').then((recaptcha) => {
         this.$api.contact(
           {
             name,
diff --git a/src/config.js b/src/config.js
index 23567d80..0e541248 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,6 +1,7 @@
 // keep in sync with src/config.template.js
 export default {
   RECAPTCHA_SITE_KEY: process.env.VUE_APP_RECAPTCHA_SITE_KEY,
+  RECAPTCHA_ENABLED: process.env.VUE_APP_RECAPTCHA_ENABLED !== '0',
   SUBDOMAIN_SUFFIX: process.env.VUE_APP_SUBDOMAIN_SUFFIX,
   CNAME_RECORD: process.env.VUE_APP_CNAME_RECORD,
   API_MOCK: process.env.VUE_APP_API_MOCK,
diff --git a/src/config.template.js b/src/config.template.js
index 0936ac1d..061d647a 100644
--- a/src/config.template.js
+++ b/src/config.template.js
@@ -3,6 +3,7 @@
 // keep in sync with src/config.js
 window.config = {
   RECAPTCHA_SITE_KEY: '${RECAPTCHA_SITE_KEY}',
+  RECAPTCHA_ENABLED: '${RECAPTCHA_ENABLED}' !== '0',
   SUBDOMAIN_SUFFIX: '${SUBDOMAIN_SUFFIX}',
   CNAME_RECORD: '${CNAME_RECORD}',
   API_MOCK: '${API_MOCK}',
diff --git a/src/main.js b/src/main.js
index 09f46070..ea92dd7a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,10 +28,12 @@ enableMocking().then(() => {
 
   Vue.use(Vuetify)
 
-  Vue.use(VueReCaptcha, {
-    siteKey: config.RECAPTCHA_SITE_KEY,
-    loaderOptions: { useRecaptchaNet: true },
-  })
+  if (config.RECAPTCHA_ENABLED) {
+    Vue.use(VueReCaptcha, {
+      siteKey: config.RECAPTCHA_SITE_KEY,
+      loaderOptions: { useRecaptchaNet: true },
+    })
+  }
 
   // allow components to access api without importing it
   Vue.prototype.$api = api
diff --git a/tests/unit/recaptcha.spec.js b/tests/unit/recaptcha.spec.js
new file mode 100644
index 00000000..753c97d6
--- /dev/null
+++ b/tests/unit/recaptcha.spec.js
@@ -0,0 +1,26 @@
+import config from '../../src/config'
+import { getRecaptchaToken } from '../../src/backend/recaptcha'
+
+describe('getRecaptchaToken', () => {
+  const recaptchaEnabled = config.RECAPTCHA_ENABLED
+
+  afterEach(() => {
+    config.RECAPTCHA_ENABLED = recaptchaEnabled
+  })
+
+  it('returns a local token without contacting reCAPTCHA when disabled', async () => {
+    config.RECAPTCHA_ENABLED = false
+    const app = { $recaptcha: jest.fn() }
+
+    await expect(getRecaptchaToken(app, 'login')).resolves.toBe('local-development')
+    expect(app.$recaptcha).not.toHaveBeenCalled()
+  })
+
+  it('requests a reCAPTCHA token when enabled', async () => {
+    config.RECAPTCHA_ENABLED = true
+    const app = { $recaptcha: jest.fn().mockResolvedValue('captcha-token') }
+
+    await expect(getRecaptchaToken(app, 'login')).resolves.toBe('captcha-token')
+    expect(app.$recaptcha).toHaveBeenCalledWith('login')
+  })
+})

From 3e5f693546ec36957f99db991482c8fe48907362 Mon Sep 17 00:00:00 2001
From: addshore <git@addshore.com>
Date: Sat, 26 Sep 2026 16:48:09 +0100
Subject: [PATCH 2/2] ui: hide reCAPTCHA notice when disabled

The signup notice says the site is protected by
reCAPTCHA and links to Google's terms.

When local development disables reCAPTCHA,
signup uses a local-development token instead,
so showing that notice is inaccurate.
Render it only when reCAPTCHA is enabled.
---
 src/components/Cards/CreateAccount.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Cards/CreateAccount.vue b/src/components/Cards/CreateAccount.vue
index 2853125f..9239167c 100644
--- a/src/components/Cards/CreateAccount.vue
+++ b/src/components/Cards/CreateAccount.vue
@@ -76,7 +76,7 @@
               </template>
             </v-checkbox>
           </v-skeleton-loader>
-        <p>
+        <p v-if="recaptchaEnabled">
           This site is protected by reCAPTCHA. Wikibase Cloud
           <a target="_blank" href="https://www.wikibase.cloud/privacy-policy">Privacy Policy</a> and Google
           <a target="_blank" href="https://policies.google.com/terms">Terms of Service</a> apply.
@@ -97,6 +97,7 @@
 </template>
 
 <script>
+import config from '~/config'
 import PolicyList from '../Components/PolicyList'
 import { getRecaptchaToken } from '~/backend'
 
@@ -113,6 +114,9 @@ export default {
     isLoggedIn: function () {
       return this.$store.getters.isLoggedIn
     },
+    recaptchaEnabled: function () {
+      return config.RECAPTCHA_ENABLED
+    },
   },
   data () {
     return {