Merge branch 'main' into 7001-tab-title

Author: n-lark

docs/install/docker/README.md

@@ -129,7 +129,7 @@ Download the latest version of the FlowFuse Docker Compose file and example `.en
 
 ```bash
 curl -L -o docker-compose.yml https://github.com/FlowFuse/docker-compose/releases/latest/download/docker-compose.yml
-curl -o .env https://raw.githubusercontent.com/FlowFuse/docker-compose/refs/heads/main/.env.example
+curl -L -o .env https://raw.githubusercontent.com/FlowFuse/docker-compose/refs/heads/main/.env.example
 ```
 
 ### Configure

docs/quick-start/README.md

@@ -17,9 +17,9 @@ meta:
 
 # Quick Start Guide
 
-This guide provides a streamlined process for setting up and running the FlowFuse platform using Docker and docker-compose. 
+This guide provides a streamlined process for setting up and running the FlowFuse platform using [Docker](https://docs.docker.com/get-started/) and [Docker Compose](https://docs.docker.com/compose/). 
 
-The provided docker-compose file facilitates the deployment of the following services:
+The Docker Compose file deploys the following services:
 * **FlowFuse Platform**: Includes the core application, MQTT broker, and file server for storage
 * **Database:** A pre-configured database for storing platform data
 * **Proxy Server:** A pre-configured proxy server for managing HTTP traffic
@@ -28,51 +28,55 @@ For a full installation guide, including how to setup FlowFuse in a production e
 
 ## Prerequisites
 
-Before you begin, ensure you have [Docker](https://docs.docker.com/engine/install/) and [Docker Compose](https://docs.docker.com/compose/install/) (in `2.23.1` version or higher) installed on your system (either as a standalone binary or as docker plugin)
+Before you begin, ensure you have [Docker](https://docs.docker.com/engine/install/) and [Docker Compose](https://docs.docker.com/compose/install/) (in `2.23.1` version or higher) installed on your system (either as a standalone binary or as a Docker plugin).
 
-## Step 1: Configure Domain
+## Step 1: Prepare your domain
 
-### No DNS Server
+FlowFuse requires a domain name to work properly — it uses subdomains to run each Node-RED instance separately, so `localhost` won't work here.
 
-If you're just looking to test FlowFuse locally, and do not have a local DNS server, then we recommend [setting up an alternative to DNS](../install/dns-setup.md#no-local-dns-server). 
+If you own a domain (e.g., `example.com` or `flowfuse.example.com`), create an **A record** pointing to your server's IP address, and another **A record** for the wildcard subdomain (e.g., `*.example.com` or `*.flowfuse.example.com`) pointing to the same address. That's all the setup needed.
 
-### DNS Server
+If you don't have a domain yet and just want to try FlowFuse locally, see [setting up an alternative to DNS](../install/dns-setup.md#no-local-dns-server).
 
-Otherwise, before running FlowFuse, you need to configure your fully qualified domain name settings, and will need a domain name that you own and can configure DNS settings for:
+## Step 2: Download files
 
-1. Set up an A record for your domain (e.g., `example.com`) to your server's IP address (this works with subdomain as well e.g. `flowfuse.example.com`). FlowFuse will run here.
-2. In the same manner, set up a wildcard DNS record (e.g., `*.example.com`, `*.flowfuse.example.com`) to point to your server's IP address. Any Node-RED instances setup by FlowFuse will run here.
+```bash
+curl -L -o docker-compose.yml https://github.com/FlowFuse/docker-compose/releases/latest/download/docker-compose.yml
+curl -L -o .env https://raw.githubusercontent.com/FlowFuse/docker-compose/refs/heads/main/.env.example
+```
+
+## Step 3: Provide domain name
 
-This step is crucial for the proper functioning of the application. FlowFuse will not run properly on `localhost` domain.
+Edit the downloaded `.env` file with the editor of your choice and update the `DOMAIN` variable with your domain.
 
-## Step 2: Download Compose file
+You can use `sed` to update the `DOMAIN` variable in the `.env` file:
 
 ```bash
-curl -L -o docker-compose.yml https://github.com/FlowFuse/docker-compose/releases/latest/download/docker-compose-quick-start.yml
+sed -i.bak 's/^DOMAIN=.*/DOMAIN=example.com/' .env
 ```
 
-## Step 3: Start the Application
+## Step 4: Start the Application
 
-Run the following command to deploy FlowFuse. Replace the  `yourdomain.com` with your domain name configured in step 1.:
+Run the following command to deploy FlowFuse:
 
 ```bash
-DOMAIN=example.com docker compose up -d
+docker compose up -d
 ```
 
-This command will download the necessary Docker images, run initial setup and start all the required services in detached mode.
+This downloads the necessary Docker images, runs initial setup, and starts all services in detached mode.
 
-## Step 4: Complete the application Setup
+## Step 5: Complete the application Setup
 
-Open your web browser and navigate to `http://forge.example.com/setup` . You will be redirected to the setup page where you can create your admin account and set up your instance.
-For detailed information about first setup and configuration, please follow [this guide](../install/first-run.md).
+Open your web browser and navigate to `http://forge.<your-domain>/setup` (e.g., `http://forge.example.com/setup`). You will be redirected to the setup page where you can create your admin account and set up your instance.
+For detailed information about first setup and configuration, follow [this guide](../install/first-run.md).
 
 
 ## Cleanup
 
-To stop and remove the FlowFuse application, run the following command. Replace `yourdomain.com` with your domain name:
+To stop and remove the FlowFuse application, run the following command:
 
 ```bash
-DOMAIN=example.com docker compose down -v
+docker compose down -v
 ```
 
 ## Troubleshooting

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) {