diff --git a/backend/__tests__/integration/productUsagePg.test.js b/backend/__tests__/integration/productUsagePg.test.js index 08306b90..75967d76 100644 --- a/backend/__tests__/integration/productUsagePg.test.js +++ b/backend/__tests__/integration/productUsagePg.test.js @@ -54,6 +54,7 @@ maybe('product usage on Postgres', () => { await require('../../migrations/core/204_product_usage_privacy_receipts').up(db); await require('../../migrations/core/205_product_usage_consent_version').up(db); await require('../../migrations/core/206_product_usage_delivery_backoff').up(db); + await require('../../migrations/core/211_product_usage_prompt_shown').up(db); await db.schema.createTable('app_settings', (t) => { t.string('setting_key').primary(); t.text('setting_value'); t.string('setting_type'); diff --git a/backend/__tests__/services/usageEnableDisableRace.test.js b/backend/__tests__/services/usageEnableDisableRace.test.js index b7d24ff8..edfd7690 100644 --- a/backend/__tests__/services/usageEnableDisableRace.test.js +++ b/backend/__tests__/services/usageEnableDisableRace.test.js @@ -42,6 +42,7 @@ async function bootDb() { t.string('status', 30).notNullable().defaultTo('disabled'); t.string('consent_version', 40).notNullable().defaultTo('usage-consent.v1'); t.boolean('notice_dismissed').notNullable().defaultTo(false); + t.boolean('prompt_shown').notNullable().defaultTo(false); t.string('installation_id', 64); t.string('public_key', 59); t.text('private_key_encrypted'); diff --git a/backend/__tests__/services/usageExportReceipt.test.js b/backend/__tests__/services/usageExportReceipt.test.js index 1dd4b5f0..16a7c61d 100644 --- a/backend/__tests__/services/usageExportReceipt.test.js +++ b/backend/__tests__/services/usageExportReceipt.test.js @@ -32,6 +32,7 @@ async function bootDb() { t.string('status', 30).notNullable().defaultTo('disabled'); t.string('consent_version', 40).notNullable().defaultTo('usage-consent.v2'); t.boolean('notice_dismissed').notNullable().defaultTo(false); + t.boolean('prompt_shown').notNullable().defaultTo(false); t.string('installation_id', 64); t.string('public_key', 59); t.text('private_key_encrypted'); diff --git a/backend/__tests__/services/usageServiceKeyRotation.test.js b/backend/__tests__/services/usageServiceKeyRotation.test.js index 18485d2f..f4d7ec7c 100644 --- a/backend/__tests__/services/usageServiceKeyRotation.test.js +++ b/backend/__tests__/services/usageServiceKeyRotation.test.js @@ -26,6 +26,7 @@ async function bootDb() { t.string('status', 30).notNullable().defaultTo('disabled'); t.string('consent_version', 40).notNullable().defaultTo('usage-consent.v1'); t.boolean('notice_dismissed').notNullable().defaultTo(false); + t.boolean('prompt_shown').notNullable().defaultTo(false); t.string('installation_id', 64); t.string('public_key', 59); t.text('private_key_encrypted'); diff --git a/backend/__tests__/services/usageSnapshotSignals.test.js b/backend/__tests__/services/usageSnapshotSignals.test.js index ad4d3403..c1379126 100644 --- a/backend/__tests__/services/usageSnapshotSignals.test.js +++ b/backend/__tests__/services/usageSnapshotSignals.test.js @@ -25,6 +25,7 @@ async function bootDb() { t.string('status', 30).notNullable().defaultTo('disabled'); t.string('consent_version', 40).notNullable().defaultTo('usage-consent.v1'); t.boolean('notice_dismissed').notNullable().defaultTo(false); + t.boolean('prompt_shown').notNullable().defaultTo(false); t.string('installation_id', 64); t.string('public_key', 59); t.text('private_key_encrypted'); diff --git a/backend/migrations/core/211_product_usage_prompt_shown.js b/backend/migrations/core/211_product_usage_prompt_shown.js new file mode 100644 index 00000000..584bb031 --- /dev/null +++ b/backend/migrations/core/211_product_usage_prompt_shown.js @@ -0,0 +1,25 @@ +// Tracks whether this installation has ever been offered the one-time +// usage-reporting opt-in prompt shown to an existing admin on their first +// login after an update (see UsageService.markPromptShown()). A fresh +// install that went through the setup wizard's own opt-in step sets this +// too, so upgraded and brand-new installs share one "already asked" marker +// and neither gets asked twice. Separate from `notice_dismissed`, which +// governs the persistent, re-visitable dashboard banner instead. +exports.up = async function (knex) { + if ( + (await knex.schema.hasTable('product_usage_state')) && + !(await knex.schema.hasColumn('product_usage_state', 'prompt_shown')) + ) { + await knex.schema.alterTable('product_usage_state', (t) => { + t.boolean('prompt_shown').notNullable().defaultTo(false); + }); + } +}; +exports.down = async function (knex) { + if ( + (await knex.schema.hasTable('product_usage_state')) && + (await knex.schema.hasColumn('product_usage_state', 'prompt_shown')) + ) { + await knex.schema.alterTable('product_usage_state', (t) => t.dropColumn('prompt_shown')); + } +}; diff --git a/backend/src/routes/adminUsage.js b/backend/src/routes/adminUsage.js index 159cc5ca..9511ed43 100644 --- a/backend/src/routes/adminUsage.js +++ b/backend/src/routes/adminUsage.js @@ -73,6 +73,13 @@ router.post( '/dismiss', wrap(async (_req, res) => res.json(await service.dismiss())) ); +// Acknowledges the one-time opt-in prompt (setup wizard or the post-update +// modal) regardless of whether the admin enabled or declined — either way it +// must not ask this installation again. +router.post( + '/prompt-seen', + wrap(async (_req, res) => res.json(await service.markPromptShown())) +); router.post( '/enable', wrap(async (req, res) => diff --git a/backend/src/usage/UsageService.js b/backend/src/usage/UsageService.js index d9a7e647..aa1f8be7 100644 --- a/backend/src/usage/UsageService.js +++ b/backend/src/usage/UsageService.js @@ -263,6 +263,7 @@ class UsageService { return { status: state.status, notice_dismissed: Boolean(state.notice_dismissed), + prompt_shown: Boolean(state.prompt_shown), installation_id: state.installation_id, collector_url: collectorUrl, collector_error: collectorError, @@ -343,6 +344,18 @@ class UsageService { .update({ notice_dismissed: formatBoolean(true) }); return this.status(); } + // The one-time opt-in prompt (setup wizard for a new install, a modal shown + // once to an existing admin after an update) calls this on either outcome — + // enable or decline — so it never asks the same installation twice. Kept + // separate from `notice_dismissed`: that one only silences the persistent, + // re-visitable dashboard banner and is unrelated to whether this one-time + // prompt has already been shown. + async markPromptShown() { + await this.db('product_usage_state') + .where({ id: 1 }) + .update({ prompt_shown: formatBoolean(true) }); + return this.status(); + } async enable(consent) { if (!Object.values(CONSENT_VERSIONS).includes(consent)) throw new ValidationError('Explicit usage consent is required'); @@ -382,6 +395,7 @@ class UsageService { status: 'activation_pending', consent_version: consent, notice_dismissed: formatBoolean(true), + prompt_shown: formatBoolean(true), installation_id: identity.installation_id, public_key: identity.public_key, private_key_encrypted: this.encrypt(identity.private_key), diff --git a/frontend/src/components/admin/AdminLayout.tsx b/frontend/src/components/admin/AdminLayout.tsx index 34804422..bc40f3ce 100644 --- a/frontend/src/components/admin/AdminLayout.tsx +++ b/frontend/src/components/admin/AdminLayout.tsx @@ -12,6 +12,7 @@ import { MandatoryPasswordChangeModal } from './MandatoryPasswordChangeModal'; const SIDEBAR_COLLAPSED_KEY = 'admin-sidebar-collapsed'; const ProductUsageNotice = lazy(() => import('./ProductUsageNotice')); +const UsageReportingPrompt = lazy(() => import('./UsageReportingPrompt')); export const AdminLayout: React.FC = () => { const { isAuthenticated, isLoading, mustChangePassword } = useAdminAuth(); @@ -127,6 +128,7 @@ const AdminLayoutInner: React.FC = ({ sidebarOpen, setSid docker-compose.yml. See #669. */} {!mustChangePassword && } + {!mustChangePassword && } {/* Page content - disabled when password change required. overflow moved up to the column so the scrollbar gutter is diff --git a/frontend/src/components/admin/UsageReportingPitch.tsx b/frontend/src/components/admin/UsageReportingPitch.tsx new file mode 100644 index 00000000..59ce7c3e --- /dev/null +++ b/frontend/src/components/admin/UsageReportingPitch.tsx @@ -0,0 +1,36 @@ +import type { LucideIcon } from 'lucide-react'; +import { ShieldOff, Users, MessageSquare } from 'lucide-react'; +import { useTranslation } from 'react-i18next'; + +// Shared between the setup wizard's opt-in step and the one-time post-update +// prompt (#1360) so the two surfaces never drift apart. Kept deliberately +// short — most people reflexively decline "send us data" prompts, so this +// leads with what makes PicPeak's reporting different from typical analytics +// rather than repeating the full disclosure the Settings → Product usage tab +// already shows in detail. +export const USAGE_REPORTING_POINTS: { key: string; icon: LucideIcon }[] = [ + { key: 'oneWay', icon: ShieldOff }, + { key: 'mutual', icon: Users }, + { key: 'feedback', icon: MessageSquare }, +]; + +export const UsageReportingPoints: React.FC = () => { + const { t } = useTranslation(); + return ( +
+ {USAGE_REPORTING_POINTS.map(({ key, icon: Icon }) => ( +
+ + + + {t(`setup.usageReporting.${key}Title`)} + + + {t(`setup.usageReporting.${key}Desc`)} + + +
+ ))} +
+ ); +}; diff --git a/frontend/src/components/admin/UsageReportingPrompt.tsx b/frontend/src/components/admin/UsageReportingPrompt.tsx new file mode 100644 index 00000000..3af07d68 --- /dev/null +++ b/frontend/src/components/admin/UsageReportingPrompt.tsx @@ -0,0 +1,107 @@ +import React, { useState } from 'react'; +import { useQuery, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { toast } from 'react-toastify'; +import { usePermissions } from '../../contexts/PermissionsContext'; +import { productUsageService } from '../../services/productUsage.service'; +import { Button, Card } from '../common'; +import { UsageReportingPoints } from './UsageReportingPitch'; + +/** + * One-time opt-in prompt for an admin who already had PicPeak installed + * before this feature existed (#1360). A brand-new install gets the same + * choice inside the setup wizard instead — both paths call + * POST /admin/usage/prompt-seen on either outcome, so whichever one an + * installation went through, this never shows a second time and never shows + * once participation is already active. + */ +export default function UsageReportingPrompt() { + const { t } = useTranslation(); + const { hasPermission } = usePermissions(); + const queryClient = useQueryClient(); + const [hidden, setHidden] = useState(false); + const [consent, setConsent] = useState(false); + const [isEnabling, setIsEnabling] = useState(false); + + const { data } = useQuery({ + queryKey: ['productUsage'], + queryFn: productUsageService.status, + enabled: hasPermission('settings.edit'), + }); + + const dismiss = async () => { + setHidden(true); + try { + queryClient.setQueryData(['productUsage'], await productUsageService.promptSeen()); + } catch { + /* Worst case the query refetches stale data and this shows once more. */ + } + }; + + const enable = async () => { + setIsEnabling(true); + try { + queryClient.setQueryData(['productUsage'], await productUsageService.enable()); + toast.success(t('setup.usageReporting.enabled')); + setHidden(true); + } catch { + toast.warn(t('setup.usageReporting.enableFailed')); + } finally { + setIsEnabling(false); + } + }; + + if (!hasPermission('settings.edit') || !data || hidden) return null; + if (data.status !== 'disabled' || data.prompt_shown) return null; + + return ( +
+ +
+
+

+ {t('productUsagePrompt.title')} +

+

{t('productUsagePrompt.intro')}

+
+ + + + + +
+ + +
+
+ +
+ ); +} diff --git a/frontend/src/i18n/locales/de.json b/frontend/src/i18n/locales/de.json index 551fc184..6c7426a2 100644 --- a/frontend/src/i18n/locales/de.json +++ b/frontend/src/i18n/locales/de.json @@ -1,4 +1,8 @@ { + "productUsagePrompt": { + "title": "PicPeak mitgestalten?", + "intro": "Diese Installation wurde noch nie nach der anonymen Nutzungsstatistik gefragt. Sie ist freiwillig — und funktioniert anders als das Tracking, das Sie sonst gewohnt sind abzulehnen." + }, "productUsage": { "fields": "usage.v5-Berichte enthalten einen Installationsfingerabdruck, die PicPeak-Version, UTC-Berichtsdatum und Erstellungszeit, Schema- und Signaturmetadaten, die Galerie-Layouts aus einer festen Liste, 87 Funktionssignale (64 Paare aus Konfiguriert und Genutzt, 23 reine Konfigurationswerte) sowie zwei Gesamtzahlen der Installation: gespeicherte Galerien und Fotoeinträge ohne Videos. Entwürfe, archivierte Galerien und deren erhaltene Fotoeinträge zählen mit. Der Katalog unten erklärt jedes Feld. Keine Aktionszähler, keine Beobachtung von Besuchern.", "catalogTitle": "Vollständiger Katalog: 87 Funktionssignale und 2 Bestandszahlen (usage.v5)", diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json index 8f4b087d..90bf3a41 100644 --- a/frontend/src/i18n/locales/en.json +++ b/frontend/src/i18n/locales/en.json @@ -1,4 +1,8 @@ { + "productUsagePrompt": { + "title": "Help shape PicPeak?", + "intro": "This installation has never been asked about anonymous usage reporting. It's optional, and works differently from the analytics you're used to declining." + }, "productUsage": { "fields": "usage.v5 reports contain an installation fingerprint, PicPeak version, UTC report date and generation time, schema/signing metadata, controlled gallery layouts, 87 fixed capability signals (64 configured/used pairs and 23 configuration-only booleans), and two installation totals: stored galleries and photo records excluding videos. Drafts and archived galleries and their retained photo records are included. The catalog below defines every field. There are no action counts or visitor observations.", "catalogTitle": "Full catalog: 87 capability signals and 2 inventory totals (usage.v5)", diff --git a/frontend/src/pages/SetupPage.tsx b/frontend/src/pages/SetupPage.tsx index 8d186d00..0f3cf203 100644 --- a/frontend/src/pages/SetupPage.tsx +++ b/frontend/src/pages/SetupPage.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Navigate, useNavigate } from 'react-router-dom'; import { useQuery } from '@tanstack/react-query'; -import { Key, Mail, Lock, Eye, EyeOff, AlertCircle, ArrowLeft, ArrowRight, Copy, Check, ExternalLink, Bug, Lightbulb, Star, Coffee, ShieldOff, Users, MessageSquare } from 'lucide-react'; +import { Key, Mail, Lock, Eye, EyeOff, AlertCircle, ArrowLeft, ArrowRight, Copy, Check, ExternalLink, Bug, Lightbulb, Star, Coffee } from 'lucide-react'; import type { LucideIcon } from 'lucide-react'; import { toast } from 'react-toastify'; import { useTranslation } from 'react-i18next'; @@ -15,6 +15,7 @@ import { productUsageService } from '../services/productUsage.service'; import { PicpeakRestoreCard } from '../components/admin/PicpeakBackupCard'; import { SetupConfigStep } from '../components/admin/SetupConfigStep'; import { SetupEventTypesStep } from '../components/admin/SetupEventTypesStep'; +import { UsageReportingPoints } from '../components/admin/UsageReportingPitch'; import { resolveLoginLogoClasses } from '../utils/loginLogoSize'; import type { AdminUser } from '../types'; @@ -37,17 +38,6 @@ const COMMUNITY_LINKS: { { key: 'support', href: 'https://www.buymeacoffee.com/theluap', icon: Coffee }, ]; -// Anonymous usage-reporting opt-in, one step before the final thank-you -// screen. Kept deliberately short — most people reflexively decline "send us -// data" prompts, so this leads with what makes PicPeak's reporting different -// from typical analytics rather than repeating the full disclosure the -// Settings → Product usage tab already shows in detail. -const USAGE_REPORTING_POINTS: { key: string; icon: LucideIcon }[] = [ - { key: 'oneWay', icon: ShieldOff }, - { key: 'mutual', icon: Users }, - { key: 'feedback', icon: MessageSquare }, -]; - // "How will you use PicPeak?" — the opt-in feature groups shown after the admin // account is created. galleries/analytics/userManagement are always on and not // listed. Labels/descriptions reuse the existing Settings→Features i18n keys @@ -305,6 +295,16 @@ export const SetupPage: React.FC = () => { } }; + // Declining here still counts as having been asked (#1360): without this, + // the one-time post-update prompt would immediately re-ask the same admin + // the same question seconds later on their first dashboard visit. + const skipUsageReporting = async () => { + try { + await productUsageService.promptSeen(); + } catch (_) { /* best-effort — worst case the dashboard asks once more */ } + setStep('community'); + }; + const stepNumber = step === 'token' ? 1 : step === 'account' ? 2 : 3; return ( @@ -575,21 +575,7 @@ export const SetupPage: React.FC = () => {

{t('setup.usageReporting.intro')}

-
- {USAGE_REPORTING_POINTS.map(({ key, icon: Icon }) => ( -
- - - - {t(`setup.usageReporting.${key}Title`)} - - - {t(`setup.usageReporting.${key}Desc`)} - - -
- ))} -
+