[7356] Add cookie consent on login page

.eslintrc

@@ -82,7 +82,10 @@
             },
             "parserOptions": {
                 "ecmaVersion": 2022,
-                "sourceType": "module"
+                "sourceType": "module",
+                "parser": {
+                    "ts": "@typescript-eslint/parser"
+                }
             },
             "rules": {
                 // plugin:vue

forge/routes/ui/index.js

@@ -41,7 +41,8 @@ module.exports = async function (app) {
                 const apihost = telemetry.frontend.posthog.apiurl || 'https://app.posthog.com'
                 const apikey = telemetry.frontend.posthog.apikey
                 const options = {
-                    api_host: apihost
+                    api_host: apihost,
+                    cookieless_mode: 'on_reject'
                 }
                 if ('capture_pageview' in telemetry.frontend.posthog) {
                     options.capture_pageview = telemetry.frontend.posthog.capture_pageview
@@ -55,16 +56,34 @@ module.exports = async function (app) {
 
             if (telemetry.frontend.google?.tag) {
                 const tag = telemetry.frontend.google.tag
-                injection += `<script async src="https://www.googletagmanager.com/gtag/js?id=${tag}"></script>`
-                injection += `<script> window.dataLayer = window.dataLayer || []; let gtag = window.gtag = function (){dataLayer.push(arguments);}; gtag('js', new Date()); gtag('config', '${tag}'); </script>`
+                // Deferred until consent is given - the cookie-consent store calls this on accept.
+                injection += `<script>
+                window._ffLoadGoogleAnalytics = function () {
+                    if (window._ffGoogleAnalyticsLoaded) { return }
+                    window._ffGoogleAnalyticsLoaded = true
+                    var s = document.createElement('script'); s.async = true
+                    s.src = 'https://www.googletagmanager.com/gtag/js?id=${tag}'
+                    document.head.appendChild(s)
+                    window.dataLayer = window.dataLayer || []
+                    window.gtag = function () { dataLayer.push(arguments) }
+                    gtag('js', new Date()); gtag('config', '${tag}')
+                }
+            </script>`
             }
 
             if (support?.enabled && support.frontend?.hubspot?.trackingcode) {
                 const trackingCode = support.frontend.hubspot.trackingcode
-                injection += `<!-- Start of HubSpot Embed Code -->
-                <script type="text/javascript">window._ffhstc = "${trackingCode}"</script>
-                <script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/${trackingCode}.js"></script>
-              <!-- End of HubSpot Embed Code -->`
+                // Deferred until consent is given - the cookie-consent store calls this on accept.
+                injection += `<script type="text/javascript">
+                window._ffhstc = "${trackingCode}"
+                window._ffLoadHubSpot = function () {
+                    if (document.getElementById('hs-script-loader')) { return }
+                    var s = document.createElement('script')
+                    s.type = 'text/javascript'; s.id = 'hs-script-loader'; s.async = true; s.defer = true
+                    s.src = '//js-eu1.hs-scripts.com/${trackingCode}.js'
+                    document.head.appendChild(s)
+                }
+            </script>`
             }
 
             if (telemetry.frontend?.sentry?.dsn) {

frontend/src/App.vue

@@ -58,12 +58,14 @@
         <template v-else>
             <Login />
         </template>
+        <CookieConsent />
     </div>
 </template>
 
 <script>
 import { mapActions, mapState } from 'pinia'
 
+import CookieConsent from './components/CookieConsent.vue'
 import Loading from './components/Loading.vue'
 import Offline from './components/Offline.vue'
 import LicenseBanner from './components/banners/LicenseBanner.vue'
@@ -80,13 +82,15 @@ import UnverifiedEmail from './pages/UnverifiedEmail.vue'
 import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
+import { useCookieConsentStore } from '@/stores/cookie-consent'
 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',
     components: {
+        CookieConsent,
         EducationModal,
         Login,
         PasswordExpired,
@@ -146,6 +150,7 @@ export default {
         }
     },
     mounted () {
+        useCookieConsentStore().applyDecision()
         useAccountAuthStore().checkState()
         useProductBrokersStore().checkFlags()
         useAccountSettingsStore().loadPosthogFlags()

frontend/src/components/CookieConsent.vue

@@ -0,0 +1,72 @@
+<template>
+    <div
+        v-if="consent.shouldShowBanner"
+        class="ff-cookie-consent"
+        data-el="cookie-consent-banner"
+        role="region"
+        aria-label="Cookie consent"
+    >
+        <h2 class="ff-cookie-consent--title">This site uses cookies</h2>
+        <p class="ff-cookie-consent--text">
+            We use cookies to keep FlowFuse working and, with your permission, to understand
+            how you use the platform and improve your experience.
+            <a href="https://flowfuse.com/privacy-policy/" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
+        </p>
+        <div class="ff-cookie-consent--actions">
+            <ff-button kind="secondary" size="small" data-action="reject-cookies" @click="consent.reject()">
+                Reject all
+            </ff-button>
+            <ff-button kind="primary" size="small" data-action="accept-cookies" @click="consent.accept()">
+                Accept all
+            </ff-button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useCookieConsentStore } from '../stores/cookie-consent'
+
+const consent = useCookieConsentStore()
+</script>
+
+<style lang="scss">
+.ff-cookie-consent {
+    position: fixed;
+    bottom: 1rem;
+    left: 1rem;
+    z-index: 1000;
+    max-width: 28rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    background-color: $ff-white;
+    color: $ff-grey-800;
+    border: 1px solid $ff-color--border;
+    border-radius: 6px;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
+
+    &--title {
+        font-size: 1rem;
+        font-weight: 600;
+        margin: 0;
+    }
+
+    &--text {
+        font-size: 0.875rem;
+        line-height: 1.4;
+        margin: 0;
+
+        a {
+            color: $ff-blue-600;
+            text-decoration: underline;
+        }
+    }
+
+    &--actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.5rem;
+    }
+}
+</style>

frontend/src/stores/account-auth.js

@@ -8,6 +8,7 @@ import userApi from '../api/user.js'
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
+import { useCookieConsentStore } from '@/stores/cookie-consent'
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useProductExpertInsightsAgentStore } from '@/stores/product-expert-insights-agent.js'
@@ -204,6 +205,7 @@ export const useAccountAuthStore = defineStore('account-auth', {
                     useUxDrawersStore().$reset()
                     useUxStore().$reset()
                     useContextStore().$reset()
+                    useCookieConsentStore().reset()
                     useProductTablesStore().$reset()
                     useProductBrokersStore().$reset()
                     useProductAssistantStore().$reset()

frontend/src/stores/cookie-consent.ts

@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+type ConsentDecision = 'accepted' | 'rejected' | null
+
+export const useCookieConsentStore = defineStore('cookie-consent', () => {
+    const decision = ref<ConsentDecision>(null)
+
+    const analyticsEnabled = computed(() => {
+        return !!(window.posthog || window._ffLoadHubSpot || window._ffLoadGoogleAnalytics)
+    })
+    const shouldShowBanner = computed(() => decision.value === null && analyticsEnabled.value)
+
+    function applyDecision () {
+        if (decision.value === 'accepted') {
+            try {
+                window.posthog?.opt_in_capturing()
+            } catch (err) {
+                console.error('posthog error opting in', err)
+            }
+            window._ffLoadHubSpot?.()
+            window._ffLoadGoogleAnalytics?.()
+        } else if (decision.value === 'rejected') {
+            try {
+                window.posthog?.opt_out_capturing()
+            } catch (err) {
+                console.error('posthog error opting out', err)
+            }
+        }
+    }
+
+    function accept () {
+        decision.value = 'accepted'
+        applyDecision()
+    }
+
+    function reject () {
+        decision.value = 'rejected'
+        applyDecision()
+    }
+
+    function reset () {
+        decision.value = null
+    }
+
+    return { decision, analyticsEnabled, shouldShowBanner, accept, reject, applyDecision, reset }
+}, {
+    persist: {
+        pick: ['decision'],
+        storage: localStorage
+    }
+})

frontend/src/types/window.d.ts

@@ -0,0 +1,11 @@
+export {}
+
+declare global {
+    interface Window {
+        posthog?: any
+        _hsq?: unknown[]
+        _ffhstc?: string
+        _ffLoadHubSpot?: () => void
+        _ffLoadGoogleAnalytics?: () => void
+    }
+}

test/unit/frontend/stores/cookie-consent.spec.js

@@ -0,0 +1,96 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useCookieConsentStore } from '@/stores/cookie-consent'
+
+describe('cookie-consent store', () => {
+    beforeEach(() => {
+        setActivePinia(createPinia())
+        window.posthog = { opt_in_capturing: vi.fn(), opt_out_capturing: vi.fn() }
+        window._ffLoadHubSpot = vi.fn()
+        window._ffLoadGoogleAnalytics = vi.fn()
+    })
+
+    afterEach(() => {
+        delete window.posthog
+        delete window._ffLoadHubSpot
+        delete window._ffLoadGoogleAnalytics
+    })
+
+    describe('shouldShowBanner', () => {
+        it('is true before a decision when analytics are enabled', () => {
+            const store = useCookieConsentStore()
+            expect(store.shouldShowBanner).toBe(true)
+        })
+
+        it('is false once a decision has been made', () => {
+            const store = useCookieConsentStore()
+            store.decision = 'rejected'
+            expect(store.shouldShowBanner).toBe(false)
+        })
+
+        it('is false when no analytics tools are configured (self-hosted)', () => {
+            delete window.posthog
+            delete window._ffLoadHubSpot
+            delete window._ffLoadGoogleAnalytics
+            const store = useCookieConsentStore()
+            expect(store.analyticsEnabled).toBe(false)
+            expect(store.shouldShowBanner).toBe(false)
+        })
+    })
+
+    describe('accept', () => {
+        it('opts into PostHog and loads HubSpot + Google Analytics', () => {
+            const store = useCookieConsentStore()
+            store.accept()
+            expect(store.decision).toBe('accepted')
+            expect(window.posthog.opt_in_capturing).toHaveBeenCalled()
+            expect(window._ffLoadHubSpot).toHaveBeenCalled()
+            expect(window._ffLoadGoogleAnalytics).toHaveBeenCalled()
+        })
+    })
+
+    describe('reject', () => {
+        it('opts out of PostHog and does not load HubSpot or Google Analytics', () => {
+            const store = useCookieConsentStore()
+            store.reject()
+            expect(store.decision).toBe('rejected')
+            expect(window.posthog.opt_out_capturing).toHaveBeenCalled()
+            expect(window._ffLoadHubSpot).not.toHaveBeenCalled()
+            expect(window._ffLoadGoogleAnalytics).not.toHaveBeenCalled()
+        })
+    })
+
+    describe('applyDecision', () => {
+        it('re-applies an accepted decision', () => {
+            const store = useCookieConsentStore()
+            store.decision = 'accepted'
+            store.applyDecision()
+            expect(window.posthog.opt_in_capturing).toHaveBeenCalled()
+            expect(window._ffLoadHubSpot).toHaveBeenCalled()
+        })
+
+        it('re-applies a rejected decision', () => {
+            const store = useCookieConsentStore()
+            store.decision = 'rejected'
+            store.applyDecision()
+            expect(window.posthog.opt_out_capturing).toHaveBeenCalled()
+        })
+
+        it('does nothing when no decision has been stored', () => {
+            const store = useCookieConsentStore()
+            store.applyDecision()
+            expect(window.posthog.opt_in_capturing).not.toHaveBeenCalled()
+            expect(window.posthog.opt_out_capturing).not.toHaveBeenCalled()
+        })
+    })
+
+    describe('reset', () => {
+        it('clears the decision so the banner shows again', () => {
+            const store = useCookieConsentStore()
+            store.decision = 'accepted'
+            store.reset()
+            expect(store.decision).toBeNull()
+        })
+    })
+})