Merge pull request #6987 from FlowFuse/6944-pinia-task-15-teardown

[6944] Pinia Task 15 - teardown

Author: cstns

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

@@ -2,6 +2,9 @@ import axios from 'axios'
 
 import Alerts from '../services/alerts.js'
 
+import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useUxLoadingStore } from '@/stores/ux-loading.js'
+
 const client = axios.create({
     headers: {
         'Content-Type': 'application/json'
@@ -12,24 +15,18 @@ 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
     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,24 +20,20 @@ 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 'highlight.js/styles/github.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)
 
@@ -47,7 +43,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

@@ -277,7 +277,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 () {