From 09597009cfea9c68afd7b15a15d7fa28f402e8c5 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Wed, 22 Jul 2026 11:26:50 +0000
Subject: [PATCH 1/2] Display policies from API during user registration

---
 src/backend/api.js                     |   4 +
 src/components/Cards/CreateAccount.vue | 112 +++++++++++++++++++------
 2 files changed, 91 insertions(+), 25 deletions(-)

diff --git a/src/backend/api.js b/src/backend/api.js
index c51845ed..8c5bc704 100644
--- a/src/backend/api.js
+++ b/src/backend/api.js
@@ -53,6 +53,10 @@ export const checkVerified = async () => {
   const { data } = await axios.get('/auth/login')
   return data.verified
 }
+export const getCurrentPolicies = async () => {
+  const { data } = await axios.get('/v1/policies/current')
+  return data.items
+}
 
 /* Wiki endpoints */
 export const countWikis = async () => (await axios.get('/wiki/count')).data.data // TODO This doesn't seem to exist and not used?
diff --git a/src/components/Cards/CreateAccount.vue b/src/components/Cards/CreateAccount.vue
index 3e19ab3b..237d88d2 100644
--- a/src/components/Cards/CreateAccount.vue
+++ b/src/components/Cards/CreateAccount.vue
@@ -39,31 +39,55 @@
             :disabled="inFlight"
             :error-messages="error['inputPasswordConfirmation']"
           />
-          <v-checkbox
-            required
-            v-model="terms"
-            :disabled="inFlight"
-            :error-messages="error['terms']"
+          <v-skeleton-loader
+            type="image"
+            :loading="loadingPolicies"
+            height="50px"
+            class="mt-4"
           >
-            <template v-slot:label>
-              <div>
-                I agree to the
-                <v-tooltip bottom>
-                  <template v-slot:activator="{ on }">
-                    <a
-                      target="_blank"
-                      href="/terms-of-use"
-                      @click.stop
-                      v-on="on"
-                    >
-                      Terms of Use.
-                    </a>
+            <v-checkbox
+              required
+              v-model="terms"
+              :disabled="inFlight"
+              :error-messages="error['terms']"
+            >
+              <template v-slot:label v-if="policies.length">
+                <div>
+                  I agree to the
+                  <template v-for="(policy, idx) in policies">
+                    <span>{{ getPolicySeparator(idx) }}</span>
+                    <v-tooltip bottom>
+                      <template v-slot:activator="{ on }">
+                        <a
+                          target="_blank"
+                          :href="policy.url"
+                          @click.stop
+                          v-on="on"
+                        >{{ policy.name }}</a>
+                      </template>
+                      Opens in new window
+                    </v-tooltip><span v-if="idx === policies.length - 1">.</span>
                   </template>
-                  Opens in new window
-                </v-tooltip>
-              </div>
-            </template>
-          </v-checkbox>
+                </div>
+              </template>
+              <template v-slot:label v-else>
+                <div>
+                  I agree to the
+                  <v-tooltip bottom>
+                    <template v-slot:activator="{ on }">
+                      <a
+                        target="_blank"
+                        href="/terms-of-use"
+                        @click.stop
+                        v-on="on"
+                      >terms of use</a>
+                    </template>
+                    Opens in new window
+                  </v-tooltip>.
+                </div>
+              </template>
+            </v-checkbox>
+          </v-skeleton-loader
         <p>
           This site is protected by reCAPTCHA. Wikibase Cloud
           <a target="_blank" href="https://www.wikibase.cloud/privacy-policy">Privacy Policy</a> and Google
@@ -106,15 +130,47 @@ export default {
       hasError: false,
       error: [],
       inFlight: false,
+      policies: [],
+      loadingPolicies: true,
     }
   },
-  created () {
+  async created () {
     this.checkCurrentLogin()
+
+    try {
+      this.policies = (await this.$api.getCurrentPolicies())
+        .map(
+          policy => ({
+            ...policy,
+            name: policy.metadata.type.replaceAll('-', ' '),
+            url: `/${policy.metadata.type}/${policy.metadata.active_from}`
+          })
+        )
+    } catch (err) {
+      console.error(err)
+      // The policies array remains empty, so we fall back to the default terms of use
+      // message. After sign up, the user will be prompted to accept any policies they
+      // missed. (See T401223)
+    } finally {
+      this.loadingPolicies = false
+    }
   },
   updated () {
     this.checkCurrentLogin()
   },
   methods: {
+    getPolicySeparator (idx) {
+      const count = this.policies.length
+      if (idx === 0) {
+        return ' '
+      } else if (count === 2) {
+        return ' and the '
+      } else if (idx === count - 1) {
+        return ', and the '
+      } else {
+        return ', the '
+      }
+    },
     resetErrorState () {
       this.hasError = false
       this.error = []
@@ -140,9 +196,14 @@ export default {
       // Check for the terms
       if (this.terms === false) {
         this.hasError = true
-        this.error.terms = 'You must accept the Terms of Service.'
+        this.error.terms = 'You must accept the policies.'
       }
 
+      const acceptedPolicies = Array.from(
+        this.policies,
+        policy => policy.metadata.policy_id
+      )
+
       // Check for matching confirmed password
       if (this.password !== this.passwordConfirmation) {
         this.hasError = true
@@ -166,6 +227,7 @@ export default {
             email: this.email,
             password: this.password,
             recaptcha: token,
+            accepted_policies: acceptedPolicies,
           })
           .then(success => this.createSuccessful(success))
           .catch(errors => {

From ac2855666ce9db8972650afc9a58eb38fd688f53 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Wed, 22 Jul 2026 11:57:25 +0000
Subject: [PATCH 2/2] Fix linting

---
 src/components/Cards/CreateAccount.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Cards/CreateAccount.vue b/src/components/Cards/CreateAccount.vue
index 237d88d2..b2b2f32b 100644
--- a/src/components/Cards/CreateAccount.vue
+++ b/src/components/Cards/CreateAccount.vue
@@ -55,8 +55,8 @@
                 <div>
                   I agree to the
                   <template v-for="(policy, idx) in policies">
-                    <span>{{ getPolicySeparator(idx) }}</span>
-                    <v-tooltip bottom>
+                    <span :key="idx">{{ getPolicySeparator(idx) }}</span>
+                    <v-tooltip bottom :key="idx">
                       <template v-slot:activator="{ on }">
                         <a
                           target="_blank"
@@ -66,7 +66,7 @@
                         >{{ policy.name }}</a>
                       </template>
                       Opens in new window
-                    </v-tooltip><span v-if="idx === policies.length - 1">.</span>
+                    </v-tooltip><span v-if="idx === policies.length - 1" :key="idx">.</span>
                   </template>
                 </div>
               </template>
@@ -87,7 +87,7 @@
                 </div>
               </template>
             </v-checkbox>
-          </v-skeleton-loader
+          </v-skeleton-loader>
         <p>
           This site is protected by reCAPTCHA. Wikibase Cloud
           <a target="_blank" href="https://www.wikibase.cloud/privacy-policy">Privacy Policy</a> and Google
@@ -143,8 +143,8 @@ export default {
           policy => ({
             ...policy,
             name: policy.metadata.type.replaceAll('-', ' '),
-            url: `/${policy.metadata.type}/${policy.metadata.active_from}`
-          })
+            url: `/${policy.metadata.type}/${policy.metadata.active_from}`,
+          }),
         )
     } catch (err) {
       console.error(err)
@@ -201,7 +201,7 @@ export default {
 
       const acceptedPolicies = Array.from(
         this.policies,
-        policy => policy.metadata.policy_id
+        policy => policy.metadata.policy_id,
       )
 
       // Check for matching confirmed password