From b36955bcaf934dd9a43f4d21609414c19fb8b06f Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Wed, 29 Jul 2026 11:50:52 +0000
Subject: [PATCH] Add flow for existing users to accept new policies

---
 src/App.vue                                   |  35 ++++--
 src/backend/api.js                            |   9 ++
 src/components/Cards/CreateAccount.vue        |  45 ++------
 src/components/Components/ErrorSnackBar.vue   |  46 ++++++++
 src/components/Components/PolicyList.vue      |  63 +++++++++++
 .../Modals/PolicyAcceptanceModal.vue          | 100 ++++++++++++++++++
 src/router/index.js                           |  11 +-
 src/store/error.js                            |  41 +++++++
 src/store/index.js                            |   4 +
 src/store/policies.js                         |  57 ++++++++++
 10 files changed, 365 insertions(+), 46 deletions(-)
 create mode 100644 src/components/Components/ErrorSnackBar.vue
 create mode 100644 src/components/Components/PolicyList.vue
 create mode 100644 src/components/Modals/PolicyAcceptanceModal.vue
 create mode 100644 src/store/error.js
 create mode 100644 src/store/policies.js

diff --git a/src/App.vue b/src/App.vue
index 10c8317b..34cc0024 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,14 @@
 <template>
   <v-app id="app">
+      <ErrorSnackBar/>
       <Navbar></Navbar>
-      <router-view v-if="customLayout"/>
-      <v-container v-else class="full-height-content">
-        <router-view></router-view>
-      </v-container>
+      <div v-if="!failedToGetMissingPolicies" class="content">
+        <PolicyAcceptanceModal v-if="hasMissingPolicies"/>
+        <router-view v-if="customLayout"/>
+        <v-container v-else class="full-height-content">
+          <router-view></router-view>
+        </v-container>
+      </div>
       <Foot :class="['padding-footer', { 'tall-footer': customLayout }]"></Foot>
       <Interval
         v-if="this.$store.getters.isLoggedIn && !this.$store.getters.currentUser.verified"
@@ -18,6 +22,8 @@
 import Navbar from '@/components/Layout/Navbar'
 import Foot from '@/components/Layout/Foot'
 import Interval from '@/components/Util/Interval'
+import PolicyAcceptanceModal from '@/components/Modals/PolicyAcceptanceModal'
+import ErrorSnackBar from '@/components/Components/ErrorSnackBar'
 
 export default {
   name: 'App',
@@ -25,11 +31,21 @@ export default {
     Navbar,
     Foot,
     Interval,
+    PolicyAcceptanceModal,
+    ErrorSnackBar,
   },
   computed: {
     customLayout: function () {
       return this.$route.meta.customLayout
     },
+    hasMissingPolicies: function () {
+      return this.$route.meta.requiresAuth &&
+        !this.$route.meta.requiresAuth.excludeFromPolicyChecks &&
+        this.$store.getters.missingPolicies?.length
+    },
+    failedToGetMissingPolicies: function () {
+      return this.$store.getters.failedToGetMissingPolicies
+    },
   },
   methods: {
     checkVerified () {
@@ -48,10 +64,15 @@ export default {
 .full-height-content {
   height: 100%
 }
-.padding-footer.footer {
-  margin-top: 56px;
-}
 .tall-footer.footer {
   height: 100%;
 }
 </style>
+
+<style scoped>
+.content {
+  position: relative;
+  height: 100%;
+  padding-bottom: 56px;
+}
+</style>
diff --git a/src/backend/api.js b/src/backend/api.js
index b74b0264..2c8b1cc6 100644
--- a/src/backend/api.js
+++ b/src/backend/api.js
@@ -57,6 +57,15 @@ export const getCurrentPolicies = async () => {
   const { data } = await axios.get('/v1/policies/current')
   return data.items
 }
+export const getMissingPolicies = async () => {
+  const { data } = await axios.get('/v1/policies/missing')
+  return data.items
+}
+export const acceptPolicies = async (policyIds) => {
+  await axios.put('/v1/policy_acceptances', {
+    policy_ids: policyIds,
+  })
+}
 
 /* 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 893eb301..0af48906 100644
--- a/src/components/Cards/CreateAccount.vue
+++ b/src/components/Cards/CreateAccount.vue
@@ -54,22 +54,8 @@
               <template v-slot:label v-if="policies.length">
                 <div>
                   I agree to the
-                  <template v-for="(policy, idx) in policies">
-                    <div :key="policy.metadata.policy_id" style="display: contents">
-                      <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>
-                    </div>
-                  </template>
+                  <PolicyList :policies="policies"/>
+                  <span>.</span>
                 </div>
               </template>
               <template v-slot:label v-else>
@@ -111,13 +97,17 @@
 </template>
 
 <script>
+import PolicyList from '../Components/PolicyList'
+
 export default {
   name: 'CreateAccountCard',
   props: [
     'title',
     'buttonText',
   ],
-  components: {},
+  components: {
+    PolicyList,
+  },
   computed: {
     isLoggedIn: function () {
       return this.$store.getters.isLoggedIn
@@ -140,14 +130,7 @@ export default {
     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}`,
-          }),
-        )
+      this.policies = await this.$api.getCurrentPolicies()
     } catch (err) {
       console.error(err)
       // The policies array remains empty, so we fall back to the default terms of use
@@ -161,18 +144,6 @@ export default {
     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 = []
diff --git a/src/components/Components/ErrorSnackBar.vue b/src/components/Components/ErrorSnackBar.vue
new file mode 100644
index 00000000..89d59fb0
--- /dev/null
+++ b/src/components/Components/ErrorSnackBar.vue
@@ -0,0 +1,46 @@
+<template>
+  <v-snackbar
+    :value="show"
+    color="error"
+    :timeout="timeout"
+    @input="hide"
+  >
+    {{ message }}
+    <template
+      v-if="dismissible"
+      v-slot:action="{ attrs }"
+    >
+      <v-btn
+        icon
+        v-bind="attrs"
+        @click="hide"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+export default {
+  computed: {
+    show: function () {
+      return this.$store.getters.hasLatestError
+    },
+    dismissible: function () {
+      return this.$store.getters.latestErrorDismissible
+    },
+    timeout: function () {
+      return this.dismissible ? 5000 : -1
+    },
+    message: function () {
+      return this.$store.getters.latestErrorMessage
+    },
+  },
+  methods: {
+    hide () {
+      this.$store.dispatch('clearLatestError')
+    },
+  },
+}
+</script>
diff --git a/src/components/Components/PolicyList.vue b/src/components/Components/PolicyList.vue
new file mode 100644
index 00000000..7929a403
--- /dev/null
+++ b/src/components/Components/PolicyList.vue
@@ -0,0 +1,63 @@
+<template>
+  <div style="display: contents">
+    <div
+      v-for="(policy, idx) in policies"
+      :key="policy.metadata.policy_id"
+      style="display: contents"
+    >
+      <span>{{ getPolicySeparator(idx) }}</span>
+      <v-tooltip v-if="clickable" bottom>
+        <template v-slot:activator="{ on }">
+          <a
+            target="_blank"
+            :href="getPolicyUrl(policy)"
+            @click.stop
+            v-on="on"
+          >{{ getPolicyName(policy) }}</a>
+        </template>
+        Opens in new window
+      </v-tooltip>
+      <span v-else>
+        {{ getPolicyName(policy) }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    policies: {
+      type: Array,
+    },
+    article: {
+      type: String,
+      default: 'the ',
+    },
+    clickable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  methods: {
+    getPolicyName (policy) {
+      return policy.metadata.type.replaceAll('-', ' ')
+    },
+    getPolicyUrl (policy) {
+      return `/${policy.metadata.type}/${policy.metadata.active_from}`
+    },
+    getPolicySeparator (idx) {
+      const count = this.policies.length
+      if (idx === 0) {
+        return ' '
+      } else if (count === 2) {
+        return ` and ${this.article}`
+      } else if (idx === count - 1) {
+        return `, and ${this.article}`
+      } else {
+        return `, ${this.article}`
+      }
+    },
+  },
+}
+</script>
diff --git a/src/components/Modals/PolicyAcceptanceModal.vue b/src/components/Modals/PolicyAcceptanceModal.vue
new file mode 100644
index 00000000..5b1f4cb7
--- /dev/null
+++ b/src/components/Modals/PolicyAcceptanceModal.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="overlay">
+    <v-card max-width="580">
+      <v-card-title>
+        Updated policies
+      </v-card-title>
+      <v-card-text>
+        <p class="text-body-1">
+          Please accept the updated
+          <PolicyList
+            :policies="policies"
+            article=""
+            :clickable="false"
+          />
+          to continue using Wikibase Cloud.
+          If you prefer not to keep your account, you can contact us to delete it.
+        </p>
+        <v-checkbox
+          v-model="accepted"
+          hide-details
+          class="mt-2"
+          :disabled="inFlight"
+        >
+          <template v-slot:label>
+            <div class="text-body-1">
+              I agree to the
+              <PolicyList :policies="policies"/>
+              <span>.</span>
+            </div>
+          </template>
+        </v-checkbox>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          text
+          color="primary"
+          @click="onContactForm"
+          :disabled="inFlight"
+        >
+          Contact Form
+        </v-btn>
+        <v-btn
+          color="primary"
+          :disabled="!accepted || inFlight"
+          @click="onAccept"
+        >
+          Continue
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import PolicyList from '../Components/PolicyList'
+
+export default {
+  components: {
+    PolicyList,
+  },
+  data () {
+    return {
+      accepted: false,
+      inFlight: false,
+    }
+  },
+  computed: {
+    policies () {
+      return this.$store.getters.missingPolicies
+    },
+  },
+  methods: {
+    onContactForm () {
+      this.$router.push('/contact')
+    },
+    async onAccept () {
+      this.inFlight = true
+      const policyIds = Array.from(
+        this.policies,
+        policy => policy.metadata.policy_id,
+      )
+      await this.$store.dispatch('acceptPolicies', policyIds)
+      this.inFlight = false
+    },
+  },
+}
+</script>
+
+<style scoped>
+.overlay {
+  background: rgba(0, 0, 0, 0.25);
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  z-index: 10;
+  overflow: auto;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 9c7f89ab..2cf11680 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -115,7 +115,9 @@ const router = new Router({
       name: 'Logout',
       component: Logout,
       meta: {
-        requiresAuth: true,
+        requiresAuth: {
+          excludeFromPolicyChecks: true,
+        },
       },
     },
     {
@@ -123,7 +125,9 @@ const router = new Router({
       name: 'EmailVerification',
       component: EmailVerification,
       meta: {
-        requiresAuth: true,
+        requiresAuth: {
+          excludeFromPolicyChecks: true,
+        },
       },
     },
     {
@@ -188,6 +192,9 @@ router.beforeEach(async (to, from, next) => {
   if (to.matched.some(record => record.meta.requiresAuth)) {
     await Store.getters.initialized
     if (Store.getters.isLoggedIn) {
+      if (!to.meta.requiresAuth.excludeFromPolicyChecks) {
+        await Store.dispatch('missingPolicies')
+      }
       next()
       return
     }
diff --git a/src/store/error.js b/src/store/error.js
new file mode 100644
index 00000000..58e3801d
--- /dev/null
+++ b/src/store/error.js
@@ -0,0 +1,41 @@
+const getDefaultState = () => {
+  return {
+    latestError: null,
+    latestErrorMessage: null,
+    latestErrorDismissible: true,
+  }
+}
+
+const state = getDefaultState()
+
+const getters = {
+  hasLatestError: state => !!state.latestError,
+  latestError: state => state.latestError,
+  latestErrorMessage: state => state.latestErrorMessage,
+  latestErrorDismissible: state => state.latestErrorDismissible,
+}
+
+const mutations = {
+  setLatestError (state, { error = null, message = null, dismissible = true }) {
+    state.latestError = error
+    state.latestErrorMessage = message
+    state.latestErrorDismissible = dismissible
+  },
+}
+
+const actions = {
+  latestError ({ commit }, { error, message, dismissible = true }) {
+    console.error(error)
+    commit('setLatestError', { error, message, dismissible })
+  },
+  clearLatestError ({ commit }) {
+    commit('setLatestError', {})
+  },
+}
+
+export default {
+  state,
+  mutations,
+  getters,
+  actions,
+}
diff --git a/src/store/index.js b/src/store/index.js
index 4a86ebc0..250c9fc2 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,6 +2,8 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import auth from './auth'
+import error from './error'
+import policies from './policies'
 import user from './user'
 import wikis from './wikis'
 
@@ -10,6 +12,8 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   modules: {
     auth,
+    error,
+    policies,
     user,
     wikis,
   },
diff --git a/src/store/policies.js b/src/store/policies.js
new file mode 100644
index 00000000..e37afa94
--- /dev/null
+++ b/src/store/policies.js
@@ -0,0 +1,57 @@
+import { api } from './../backend'
+
+const getDefaultState = () => {
+  return {
+    missingPolicies: null,
+    failedToGetMissingPolicies: false,
+  }
+}
+
+const state = getDefaultState()
+
+const getters = {
+  missingPolicies: state => state.missingPolicies,
+  failedToGetMissingPolicies: state => state.failedToGetMissingPolicies,
+}
+
+const mutations = {
+  setMissingPolicies (state, policies) {
+    state.missingPolicies = policies
+  },
+  failedToGetMissingPolicies (state, failed) {
+    state.failedToGetMissingPolicies = failed
+  },
+}
+
+const actions = {
+  async missingPolicies ({ dispatch, commit }) {
+    try {
+      commit('setMissingPolicies', await api.getMissingPolicies())
+    } catch (error) {
+      commit('failedToGetMissingPolicies', true)
+      dispatch('latestError', {
+        error: error,
+        message: 'Failed to get policies. Please try reloading the page.',
+        dismissible: false,
+      })
+    }
+  },
+  async acceptPolicies ({ dispatch }, policyIds) {
+    try {
+      await api.acceptPolicies(policyIds)
+      await dispatch('missingPolicies')
+    } catch (error) {
+      dispatch('latestError', {
+        error: error,
+        message: 'Failed to save policy acceptances. Please try again.',
+      })
+    }
+  },
+}
+
+export default {
+  state,
+  mutations,
+  getters,
+  actions,
+}