[6944] Pinia Task 15 - teardown

frontend/src/App.vue

@@ -146,7 +146,7 @@ export default {
         }
     },
     mounted () {
-        this.$store.dispatch('account/checkState')
+        useAccountAuthStore().checkState()
         useProductBrokersStore().checkFlags()
     },
     methods: {

frontend/src/api/client.js

@@ -12,24 +12,21 @@ const client = axios.create({
 // Common error handler
 client.interceptors.response.use(function (response) {
     return response
-}, function (error) {
+}, async function (error) {
     if (/^http/.test(error.config.url)) {
         // This request is to an external URL. Allow this error to pass back to the caller
         return Promise.reject(error)
     }
 
-    // This is an error response from our own API (or failure to reach it)
-    // Lazy require to avoid circular dependency:
-    // api/client.js → stores/account-auth.js → api/user.js → api/client.js
-    const { useAccountAuthStore } = require('../stores/account-auth.js')
-    const { useUxLoadingStore } = require('../stores/ux-loading.js')
-    const store = require('../store/index.js').default
+    // Dynamic import breaks the circular dep: client.js → account-auth.js → api/* → client.js
+    const { useAccountAuthStore } = await import('../stores/account-auth.js')
+    const { useUxLoadingStore } = await import('../stores/ux-loading.js')
     if (error.code === 'ERR_NETWORK') {
         // Backend failed to respond
         useUxLoadingStore().setOffline(true)
     } else if (error.response && error.response.status === 401 && !useUxLoadingStore().appLoader && !useAccountAuthStore().loginInflight) {
         // 401 when !pending && !loginInflight means the session has expired
-        store.dispatch('account/logout')
+        useAccountAuthStore().logout()
     } else if (error.response && error.response.status === 500) {
         // show toast notification
         Alerts.emit(error.response.data.error + ': ' + error.response.data.message, 'warning', 7500)

frontend/src/components/Offline.vue

@@ -10,11 +10,13 @@
     </div>
 </template>
 <script>
+import { useAccountAuthStore } from '@/stores/account-auth.js'
+
 export default {
     name: 'OfflineMessage',
     methods: {
         reload () {
-            this.$store.dispatch('account/checkState')
+            useAccountAuthStore().checkState()
         }
     }
 }

frontend/src/components/auth/UpdateExpiredPassword.vue

@@ -43,7 +43,6 @@
 import { mapState } from 'pinia'
 
 import userApi from '../../api/user.js'
-import store from '../../store/index.js'
 import FormRow from '../FormRow.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
@@ -89,7 +88,7 @@ export default {
                 return false
             }
             userApi.changePassword(this.input.old_password, this.input.password).then(() => {
-                this.$store.dispatch('account/checkState')
+                useAccountAuthStore().checkState()
                 this.$router.go()
             }).catch(e => {
                 this.errors.password_change = 'Password change failed'
@@ -106,7 +105,7 @@ export default {
             this.$refs['row-confirm'].focus()
         },
         logout () {
-            store.dispatch('account/logout')
+            useAccountAuthStore().logout()
         }
     },
     mounted () {

frontend/src/main.js

@@ -20,23 +20,19 @@ import router from './routes.js'
 import Alerts from './services/alerts.js'
 import { setupSentry } from './services/error-tracking.js'
 import { getServiceFactory } from './services/service.factory.js'
-import store from './store/index.js'
 import { skipResetPlugin } from './stores/plugins/skip-reset.plugin.js'
 
 import './index.css'
 
 import ForgeUIComponents from './ui-components/index.js'
 
-store.commit('initializeStore')
-
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 pinia.use(skipResetPlugin)
 
 const app = createApp(App)
     .use(ForgeUIComponents)
     .use(pinia)
-    .use(store)
     .use(router)
     .use(VueShepherdPlugin)
 
@@ -46,7 +42,7 @@ const serviceFactory = getServiceFactory()
 setupSentry(app, router)
 
 // Boot all services before mounting
-serviceFactory.bootAllServices(app, store, router)
+serviceFactory.bootAllServices(app, router)
     .then((services) => services.bootstrap.init())
     .catch((error) => {
         console.error('Bootstrap initialization failed:', error)

frontend/src/pages/Login.vue

@@ -220,15 +220,15 @@ export default {
             }
             if (valid) {
                 this.loggingIn = true
-                this.$store.dispatch('account/login', {
+                useAccountAuthStore().loginWithCredentials({
                     username: this.input.username,
                     password: this.input.password
                 })
             }
         },
         submitMFAToken () {
             this.loggingIn = true
-            this.$store.dispatch('account/login', {
+            useAccountAuthStore().loginWithCredentials({
                 token: this.input.token
             })
         },

frontend/src/pages/TermsAndConditions.vue

@@ -21,7 +21,6 @@ import { mapState } from 'pinia'
 
 import userApi from '../api/user.js'
 import FFLayoutBox from '../layouts/Box.vue'
-import store from '../store/index.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
@@ -43,15 +42,15 @@ export default {
     },
     methods: {
         logout () {
-            store.dispatch('account/logout')
+            useAccountAuthStore().logout()
         },
         async acceptAction () {
             const options = {}
             try {
                 options.tcs_accepted = this.accept
                 this.loading = true
                 await userApi.updateUser(options)
-                this.$store.dispatch('account/checkState')
+                useAccountAuthStore().checkState()
             } catch (error) {
                 console.warn(error)
             } finally {

frontend/src/pages/UnverifiedEmail.vue

@@ -32,7 +32,6 @@ import { mapActions, mapState } from 'pinia'
 
 import userApi from '../api/user.js'
 import FFLayoutBox from '../layouts/Box.vue'
-import store from '../store/index.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
@@ -89,7 +88,7 @@ export default {
             tick()
         },
         logout () {
-            store.dispatch('account/logout')
+            useAccountAuthStore().logout()
         }
     }
 }

frontend/src/pages/account/Settings.vue

@@ -276,7 +276,7 @@ export default {
                         if (this.settings['user:offboarding-required']) {
                             window.location.href = this.settings['user:offboarding-url']
                         } else {
-                            this.$store.dispatch('account/checkState')
+                            useAccountAuthStore().checkState()
                         }
                     })
                     .catch(error => {

frontend/src/pages/account/VerifyPendingEmailChange.vue

@@ -1,5 +1,5 @@
 <template>
-    <form v-if="!pending" class="px-4 sm:px-6 lg:px-8 mt-8 space-y-6">
+    <form v-if="!appLoader" class="px-4 sm:px-6 lg:px-8 mt-8 space-y-6">
         <div>
             <ff-button class="m-auto" @click="verify()">Click here to verify your change of email address</ff-button>
         </div>
@@ -8,18 +8,20 @@
 
 <script>
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import userApi from '../../api/user.js'
 import alerts from '../../services/alerts.js'
 
+import { useUxLoadingStore } from '@/stores/ux-loading.js'
+
 export default {
     name: 'VerifyPendingEmailChange',
     props: {
         token: { type: String, required: true }
     },
     computed: {
-        ...mapState(['pending'])
+        ...mapState(useUxLoadingStore, ['appLoader'])
     },
     methods: {
         async verify () {

frontend/src/pages/account/routes.js

@@ -1,7 +1,5 @@
 import { CogIcon } from '@heroicons/vue/outline'
 
-import store from '../../store/index.js'
-
 import AccessRequest from './AccessRequest.vue'
 import AccessRequestEditor from './AccessRequestEditor.vue'
 import AccountCreate from './Create.vue'
@@ -20,6 +18,8 @@ import VerifyPendingEmailChange from './VerifyPendingEmailChange.vue'
 
 import Account from './index.vue'
 
+import { useAccountAuthStore } from '@/stores/account-auth.js'
+
 export default [
     {
         // This is the editor being authenticated. This component bounces the user
@@ -114,7 +114,7 @@ export default [
         path: '/account/logout',
         name: 'Sign out',
         redirect: function () {
-            store.dispatch('account/logout')
+            useAccountAuthStore().logout()
             return { path: '/' }
         }
     },

frontend/src/pages/team/Settings/Danger.vue

@@ -105,7 +105,7 @@ export default {
         deleteTeam () {
             teamApi.deleteTeam(this.team.id).then(() => {
                 alerts.emit('Team successfully deleted', 'confirmation')
-                this.$store.dispatch('account/checkState', '/')
+                useAccountAuthStore().checkState('/')
             }).catch(err => {
                 alerts.emit('Problem deleting team', 'warning')
                 console.warn(err)

frontend/src/services/bootstrap.service.js

@@ -1,5 +1,9 @@
 import { nextTick } from 'vue'
 
+import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
+import { useAccountTeamStore } from '@/stores/account-team.js'
+
 /**
  * Bootstrap Service - Handles application lifecycle and readiness detection
  * @class
@@ -10,11 +14,6 @@ class BootstrapService {
      */
     $app
 
-    /**
-     * @type {import('vuex').Store} - Vuex store instance
-     */
-    $store
-
     /**
      * @type {import('vue-router').Router} - Vue router instance
      */
@@ -26,16 +25,14 @@ class BootstrapService {
     $services
 
     /**
-     * @param {{app: import('vue').App, store: import('vuex').Store, router: import('vue-router').Router, services?: Object}} options - Constructor options
+     * @param {{app: import('vue').App, router: import('vue-router').Router, services?: Object}} options - Constructor options
      */
     constructor ({
         app,
-        store,
         router,
         services = {}
     }) {
         this.$app = app
-        this.$store = store
         this.$router = router
         this.$services = services
 
@@ -57,7 +54,12 @@ class BootstrapService {
      */
     async init () {
         return this.waitForAppMount()
-            .then(() => this.waitForStoreHydration())
+            .then(() => {
+                // Eagerly create account stores — restores persisted state from localStorage instantly
+                useAccountAuthStore()
+                useAccountTeamStore()
+                useAccountSettingsStore()
+            })
             .then(() => this.checkUser())
             .then(() => this.mountApp())
             .then(() => this.waitForRouterReady())
@@ -76,31 +78,13 @@ class BootstrapService {
         })
     }
 
-    async waitForStoreHydration () {
-        if (this.$store.state.initialized || this.$store.state._hydrated) {
-            return Promise.resolve()
-        }
-
-        // Wait for store hydration
-        return new Promise((resolve) => {
-            const unsubscribe = this.$store.subscribe((mutation) => {
-                if (mutation.type === 'initializeStore' ||
-                    mutation.type === 'HYDRATE_COMPLETE' ||
-                    this.$store.state._hydrated) {
-                    unsubscribe()
-                    resolve()
-                }
-            })
-        })
-    }
-
     async waitForRouterReady () {
         await this.$router.isReady()
     }
 
     async checkUser () {
         if (window.opener) {
-            return this.$store.dispatch('account/checkIfAuthenticated').catch(e => e)
+            return useAccountAuthStore().checkIfAuthenticated().catch(e => e)
         }
 
         return Promise.resolve()
@@ -133,19 +117,17 @@ class BootstrapService {
 let BootstrapServiceInstance = null
 
 /**
- * @param {{app: import('vue').App, store: import('vuex').Store, router: import('vue-router').Router, services?: Object}} options - Constructor options
+ * @param {{app: import('vue').App, router: import('vue-router').Router, services?: Object}} options - Constructor options
  * @returns {BootstrapService}
  */
 export function createBootstrapService ({
     app,
-    store,
     router,
     services = {}
 } = {}) {
     if (!BootstrapServiceInstance) {
         BootstrapServiceInstance = new BootstrapService({
             app,
-            store,
             router,
             services
         })