Merge pull request #6945 from FlowFuse/6829-pinia-task-12-account-auth

[6829] Pinia Task 12 - account-auth

Author: n-lark

frontend/src/App.vue

@@ -7,7 +7,7 @@
                 </div>
             </main>
         </template>
-        <template v-else-if="pending">
+        <template v-else-if="appLoader">
             <main class="ff-bg-dark flex-grow flex flex-col">
                 <div class="w-full mx-auto flex-grow flex flex-col">
                     <Loading color="white" />
@@ -78,9 +78,11 @@ import PasswordExpired from './pages/PasswordExpired.vue'
 import TermsAndConditions from './pages/TermsAndConditions.vue'
 import UnverifiedEmail from './pages/UnverifiedEmail.vue'
 
+import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useContextStore } from '@/stores/context.js'
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+import { useUxLoadingStore } from '@/stores/ux-loading.js'
 
 export default {
     name: 'App',
@@ -100,7 +102,9 @@ export default {
     },
     computed: {
         ...mapState(useUxDrawersStore, ['hiddenLeftDrawer']),
-        ...mapVuexState('account', ['pending', 'user', 'team', 'offline', 'settings']),
+        ...mapState(useAccountAuthStore, ['user']),
+        ...mapState(useUxLoadingStore, ['appLoader', 'offline']),
+        ...mapVuexState('account', ['team', 'settings']),
         loginRequired () {
             return this.$route.meta.requiresLogin !== false
         },

frontend/src/api/client.js

@@ -20,13 +20,14 @@ client.interceptors.response.use(function (response) {
 
     // This is an error response from our own API (or failure to reach it)
     // Lazy require to avoid circular dependency:
-    // api/client.js → store/index.js → account/index.js → routes.js → page components → api modules → api/client.js
-    // TODO: remove once the `account` Vuex module is migrated to Pinia — replace with a direct import of the Pinia account store.
+    // 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
-        store.dispatch('account/setOffline', true)
-    } else if (error.response && error.response.status === 401 && !store.state.account.pending && !store.state.account.loginInflight) {
+        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')
     } else if (error.response && error.response.status === 500) {

frontend/src/components/PageHeader.vue

@@ -119,6 +119,7 @@ import NotificationsButton from './NotificationsButton.vue'
 import TeamSelection from './TeamSelection.vue'
 import GlobalSearch from './global-search/GlobalSearch.vue'
 
+import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 
@@ -130,7 +131,8 @@ export default {
             return Roles
         },
         ...mapState(useUxDrawersStore, ['leftDrawer', 'hiddenLeftDrawer']),
-        ...mapVuexState('account', ['user', 'team', 'teams']),
+        ...mapState(useAccountAuthStore, ['user']),
+        ...mapVuexState('account', ['team', 'teams']),
         ...mapGetters('account', ['notifications', 'hasAvailableTeams', 'defaultUserTeam', 'canCreateTeam', 'isTrialAccount', 'featuresCheck']),
         navigationOptions () {
             return [

frontend/src/components/TeamTypeSelection.vue

@@ -19,7 +19,8 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
+
+import { mapGetters } from 'vuex'
 
 import teamTypesApi from '../api/teamTypes.js'
 
@@ -38,7 +39,6 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['user']),
         ...mapGetters('account', ['isBillingEnabled'])
     },
     async created () {

frontend/src/components/TeamTypeTile.vue

@@ -30,10 +30,13 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import { useHubspotHelper } from '../composables/Hubspot.js'
 
+import { useAccountAuthStore } from '@/stores/account-auth.js'
+
 export default {
     name: 'TeamTypeTile',
     props: {
@@ -56,7 +59,8 @@ export default {
         return { talkToSalesCalendarModal }
     },
     computed: {
-        ...mapState('account', ['user', 'teams']),
+        ...mapVuexState('account', ['teams']),
+        ...mapState(useAccountAuthStore, ['user']),
         pricing: function () {
             const billingDescriptionKey = this.billingInterval === 'year' ? 'yrDescription' : 'description'
             const billing = this.teamType.properties?.billing?.[billingDescriptionKey]?.split('/')

frontend/src/components/auth/UpdateExpiredPassword.vue

@@ -40,15 +40,19 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+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'
+
 export default {
     name: 'UpdateExpiredPassword',
-    computed: mapState('account', ['loginError']),
+    computed: {
+        ...mapState(useAccountAuthStore, ['loginError'])
+    },
     data () {
         return {
             input: {

frontend/src/components/banners/LicenseBanner.vue

@@ -17,7 +17,10 @@
 <script>
 import { ChevronRightIcon, ExclamationCircleIcon } from '@heroicons/vue/outline'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
+
+import { useAccountAuthStore } from '@/stores/account-auth.js'
 
 export default {
     name: 'LicenseBanner',
@@ -26,7 +29,8 @@ export default {
         ChevronRightIcon
     },
     computed: {
-        ...mapState('account', ['settings', 'user']),
+        ...mapVuexState('account', ['settings']),
+        ...mapState(useAccountAuthStore, ['user']),
         license () {
             return this.settings.license || {}
         },

frontend/src/components/drawers/navigation/MainNav.vue

@@ -43,7 +43,7 @@ export default {
     emits: ['option-selected'],
     computed: {
         ...mapState(useUxNavigationStore, ['mainNav', 'mainNavContext']),
-        ...mapVuexState('account', ['user', 'team', 'features', 'notifications']),
+        ...mapVuexState('account', ['team', 'features', 'notifications']),
         ...mapGetters('account', ['requiresBilling']),
         nearestMetaMenu () {
             if (this.$route?.meta?.menu) {

frontend/src/pages/Home.vue

@@ -1,6 +1,6 @@
 <template>
     <main class="min-h-full">
-        <template v-if="pending">
+        <template v-if="appLoader">
             <div class="flex-grow flex flex-col items-center justify-center mx-auto text-gray-600 opacity-50">
                 <FlowFuseLogo class="max-w-xs mx-auto w-full" />
             </div>
@@ -37,14 +37,18 @@
 
 <script>
 
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import EmptyState from '../components/EmptyState.vue'
 
 import FlowFuseLogo from '../components/Logo.vue'
 
 import TeamTypeSelection from '../components/TeamTypeSelection.vue'
 
+import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useUxLoadingStore } from '@/stores/ux-loading.js'
+
 export default {
     name: 'HomePage',
     components: {
@@ -58,8 +62,10 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['pending', 'user', 'team', 'teams', 'redirectUrlAfterLogin', 'settings']),
+        ...mapVuexState('account', ['team', 'teams', 'settings']),
         ...mapGetters('account', ['defaultUserTeam']),
+        ...mapState(useAccountAuthStore, ['user', 'redirectUrlAfterLogin']),
+        ...mapState(useUxLoadingStore, ['appLoader']),
         canCreateTeam () {
             if (this.user.admin) return true
             return Object.prototype.hasOwnProperty.call(this.settings, 'team:create') && this.settings['team:create'] === true

frontend/src/pages/Login.vue

@@ -1,6 +1,6 @@
 <template>
     <ff-layout-box class="ff-login">
-        <div v-if="!pending" data-form="login">
+        <div v-if="!appLoader" data-form="login">
             <ff-loading v-if="loggingIn" message="Logging in..." color="white" />
             <template v-else-if="!mfaRequired">
                 <label>Username / E-Mail</label>
@@ -86,16 +86,20 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { GoogleLogin } from 'vue3-google-login'
 
-import { mapState } from 'vuex'
+import { mapState as mapVuexState } from 'vuex'
 
 import SSOApi from '../api/sso.js'
 import Logo from '../components/Logo.vue'
 import SpinnerIcon from '../components/icons/Spinner.js'
 
 import FFLayoutBox from '../layouts/Box.vue'
 
+import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useUxLoadingStore } from '@/stores/ux-loading.js'
+
 export default {
     name: 'LoginPage',
     components: {
@@ -124,7 +128,9 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['settings', 'pending', 'loginError', 'redirectUrlAfterLogin']),
+        ...mapVuexState('account', ['settings']),
+        ...mapState(useAccountAuthStore, ['loginError', 'redirectUrlAfterLogin']),
+        ...mapState(useUxLoadingStore, ['appLoader']),
         tokenInvalid () {
             return this.mfaRequired && !/^\d{6}$/.test(this.input.token)
         },