feat: update push notification subscription flow and remove deprecated opt-in component

.github/specs/feat-parent-chore-notifications.md

@@ -181,8 +181,8 @@ email_digest_enabled: boolean;
    - `title`, `body`, and a `data` object containing `child_id`, `entity_id`, `entity_type`, `approve_token`, and `deny_token`
    - An `actions` array: `[{ action: 'approve', title: 'Approve' }, { action: 'deny', title: 'Deny' }]`
    - Note: the `actions` field is silently ignored by browsers that do not support it (e.g. iOS Safari); the notification body tap still works normally.
-3. On parent mount (e.g., `ParentLayout.vue` or `App.vue`), request notification permission and, if granted, retrieve the `PushSubscription` from the browser and `POST` it to `/api/push-subscription`, including the user's IANA timezone string: `Intl.DateTimeFormat().resolvedOptions().timeZone`.
-4. Clean up: if permission is denied or revoked, call `DELETE /api/push-subscription` with `{ endpoint }` in the body to remove that specific subscription.
+3. In `LoginButton.vue` (`submit()`), after a successful PIN authentication, call `subscribeToPushWithResult()` (fire-and-forget, not awaited) — the PIN submit button click satisfies the browser's user-gesture requirement. If the parent has already granted permission, the browser returns the existing subscription silently and the call is idempotent. No floating opt-in banner is displayed anywhere in the app.
+4. Clean up: The **Push Notifications** toggle in `UserProfile.vue` handles explicit unsubscription — toggling off calls `unsubscribeFromPush()` which sends `DELETE /api/push-subscription` with `{ endpoint }` in the body, removing that specific subscription for the current user.
 5. The Service Worker's `notificationclick` handler must:
    - Close the notification with `event.notification.close()`
    - If `event.action === 'approve'`: `fetch('/api/digest-action/<approve_token>')` (GET, no credentials needed — the signed token IS the credential).
@@ -210,7 +210,7 @@ email_digest_enabled: boolean;
 - [ ] Tapping the reward notification body opens the app, scrolls to the pending reward within the rewards section of `ParentView`
 - [ ] If the app is already open in another tab, tapping the notification body focuses that tab and navigates it (no duplicate window opened)
 - [ ] No browser notification is shown for a reward request the child cannot afford
-- [x] Notification permission is requested on parent login/mount
+- [x] Notification permission is requested on parent PIN entry (LoginButton.vue submit)
 - [x] If permission is denied, no subscription is posted to the backend
 - [x] Push subscription `POST` body includes the browser's IANA timezone string
 - [x] User Profile page shows an "Email Digest" toggle
@@ -286,8 +286,8 @@ The plan covers 9 scenario groups (41 automated test cases + 1 manual QA checkli
 
 - [x] PWA manifest (`public/manifest.json`) is present and linked in `index.html`
 - [x] Service Worker is registered and handles `push` and `notificationclick` events
-- [x] Parent is prompted for notification permission on mount
-- [x] Subscription is posted to the backend on permission grant and removed on revoke/deny
+- [x] Parent is prompted for notification permission on PIN entry (LoginButton.vue)
+- [x] Subscription is posted to the backend on PIN entry when permission is granted; removed on explicit toggle-off in UserProfile
 - [ ] Native notification appears when a chore is completed with the tab backgrounded, with "Approve" and "Deny" action buttons
 - [ ] Native notification appears when a child requests an affordable reward with the tab backgrounded, with "Approve" and "Deny" action buttons
 - [ ] No native notification appears for a reward request the child cannot afford

frontend/vue-app/e2e/plans/parent-notifications.plan.md

@@ -60,11 +60,13 @@ This endpoint creates a valid `DigestActionToken` (with correct HMAC-SHA256 sign
 
 **Seed:** No child/task setup required. Tests use `page.context().grantPermissions(['notifications'])` as needed. No `afterAll` cleanup.
 
-#### 1.1. Subscription POST is sent on parent mount when permission is pre-granted
+> **Note on trigger**: Push subscription is now initiated by the Push Notifications toggle in `/parent/profile` (which calls `subscribeToPushWithResult()` directly). For these tests, triggering is done via the profile toggle rather than navigating to `/parent/tasks/chores`. PIN entry also triggers subscription in production but pre-authenticated E2E sessions bypass the PIN flow.
+
+#### 1.1. Subscription POST is sent when Push Notifications toggle is enabled and permission is pre-granted
 
 - Call `page.context().grantPermissions(['notifications'])`
 - Intercept `POST /api/push-subscription` with `page.route()` to capture request body
-- Navigate to `/parent/tasks/chores` (triggers ParentLayout mount → SW registration → subscribe → POST)
+- Navigate to `/parent/profile` and click the Push Notifications toggle to enable it
 - expect: Intercepted request body contains a non-empty `endpoint` string
 - expect: Intercepted request body contains non-empty `keys.p256dh` and `keys.auth` strings
 - expect: Intercepted request body contains a non-empty `timezone` string
@@ -72,7 +74,7 @@ This endpoint creates a valid `DigestActionToken` (with correct HMAC-SHA256 sign
 #### 1.2. Subscription POST body includes the browser's IANA timezone string
 
 - Grant notifications permission, intercept `POST /api/push-subscription`
-- Navigate to `/parent/tasks/chores`
+- Navigate to `/parent/profile` and click the Push Notifications toggle to enable it
 - Obtain browser timezone via `page.evaluate(() => Intl.DateTimeFormat().resolvedOptions().timeZone)`
 - expect: The `timezone` field in the intercepted POST body equals the value from `page.evaluate()`
 
@@ -80,7 +82,7 @@ This endpoint creates a valid `DigestActionToken` (with correct HMAC-SHA256 sign
 
 - Do NOT grant notification permission (leave default)
 - Track calls to `POST /api/push-subscription` via `page.route()`
-- Navigate to `/parent/tasks/chores`, wait for page to settle
+- Navigate to `/parent/profile` and attempt to click the Push Notifications toggle
 - expect: No POST to `/api/push-subscription` was captured
 
 #### 1.4. Backend rejects unauthenticated subscription POST (401)
@@ -590,8 +592,8 @@ This allows a spec to simulate notification action clicks without OS interaction
 
 - Call `page.context().grantPermissions(['notifications'])` before navigation
 - Intercept `POST /api/push-subscription` and respond `200 OK` (to avoid real push registration)
-- Navigate to `/parent/tasks/chores` first (triggers `ParentLayout` subscription POST)
-- Then navigate to `/parent/profile`
+- Navigate to `/parent/profile` and click the Push Notifications toggle to enable it (triggers `subscribeToPushWithResult()` POST)
+- Reload or re-navigate to `/parent/profile`
 - expect: The Push Notifications toggle is checked/on
 
 #### 10.8. Push Notifications toggle is disabled when browser permission is denied

frontend/vue-app/src/components/notification/PushOptIn.vue

@@ -1,91 +0,0 @@
-<template>
-  <div v-if="showBanner" class="push-opt-in-banner" role="status" aria-live="polite">
-    <template v-if="permissionState === 'default'">
-      <span class="push-opt-in-text"
-        >Enable notifications to stay updated on chores and rewards.</span
-      >
-      <button class="btn btn-primary push-opt-in-btn" @click="onEnable">Enable</button>
-      <button class="push-opt-in-dismiss" @click="dismiss" aria-label="Dismiss">✕</button>
-    </template>
-    <template v-else-if="permissionState === 'denied'">
-      <span class="push-opt-in-text"
-        >Notifications are blocked. Enable them in your browser settings to receive alerts.</span
-      >
-      <button class="push-opt-in-dismiss" @click="dismiss" aria-label="Dismiss">✕</button>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { subscribeToPushWithResult } from '@/services/pushSubscription'
-
-const permissionState = ref<NotificationPermission | 'unsupported'>('default')
-const dismissed = ref(false)
-
-const showBanner = ref(false)
-
-onMounted(async () => {
-  if (!('Notification' in window)) {
-    return
-  }
-  permissionState.value = Notification.permission
-  if (permissionState.value === 'granted') {
-    // Already granted — ensure subscription is registered silently
-    subscribeToPushWithResult()
-    return
-  }
-  showBanner.value = true
-})
-
-async function onEnable() {
-  const result = await subscribeToPushWithResult()
-  if (result.ok) {
-    permissionState.value = 'granted'
-    showBanner.value = false
-  } else {
-    permissionState.value = Notification.permission as NotificationPermission
-  }
-}
-
-function dismiss() {
-  dismissed.value = true
-  showBanner.value = false
-}
-</script>
-
-<style scoped>
-.push-opt-in-banner {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  background: var(--list-item-bg, #f0f4ff);
-  border: 1px solid var(--btn-primary, #4a90e2);
-  border-radius: 8px;
-  padding: 0.6rem 1rem;
-  margin: 0.5rem 0;
-  font-size: 0.88rem;
-  flex-wrap: wrap;
-}
-
-.push-opt-in-text {
-  flex: 1;
-  min-width: 0;
-}
-
-.push-opt-in-btn {
-  font-size: 0.85rem;
-  padding: 0.35rem 0.9rem;
-  white-space: nowrap;
-}
-
-.push-opt-in-dismiss {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--text-muted, #888);
-  font-size: 1rem;
-  padding: 0 0.25rem;
-  line-height: 1;
-}
-</style>

frontend/vue-app/src/components/notification/__tests__/PushOptIn.spec.ts

@@ -1,133 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { mount, flushPromises } from '@vue/test-utils'
-import PushOptIn from '../PushOptIn.vue'
-
-const mockSubscribeToPush = vi.fn()
-const mockGetPushPermissionState = vi.fn()
-
-vi.mock('@/services/pushSubscription', () => ({
-  subscribeToPushWithResult: () => mockSubscribeToPush(),
-  getPushPermissionState: () => mockGetPushPermissionState(),
-}))
-
-function setupNotificationMock(permission: NotificationPermission) {
-  Object.defineProperty(window, 'Notification', {
-    writable: true,
-    value: { permission },
-  })
-}
-
-describe('PushOptIn', () => {
-  afterEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('permission already granted on mount', () => {
-    beforeEach(() => {
-      setupNotificationMock('granted')
-      mockSubscribeToPush.mockResolvedValue({ ok: true })
-    })
-
-    it('silently calls subscribeToPush without showing the banner', async () => {
-      const wrapper = mount(PushOptIn)
-      await flushPromises()
-
-      expect(mockSubscribeToPush).toHaveBeenCalledOnce()
-      expect(wrapper.find('.push-opt-in-banner').exists()).toBe(false)
-    })
-  })
-
-  describe('permission default (not yet asked)', () => {
-    beforeEach(() => {
-      setupNotificationMock('default')
-    })
-
-    it('shows the opt-in banner with Enable button', async () => {
-      const wrapper = mount(PushOptIn)
-      await flushPromises()
-
-      expect(wrapper.find('.push-opt-in-banner').exists()).toBe(true)
-      expect(wrapper.find('.push-opt-in-btn').text()).toBe('Enable')
-    })
-
-    it('does NOT call subscribeToPush on mount', async () => {
-      mount(PushOptIn)
-      await flushPromises()
-
-      expect(mockSubscribeToPush).not.toHaveBeenCalled()
-    })
-
-    it('calls subscribeToPush when Enable button is clicked', async () => {
-      mockSubscribeToPush.mockResolvedValue({ ok: true })
-      const wrapper = mount(PushOptIn)
-      await flushPromises()
-
-      await wrapper.find('.push-opt-in-btn').trigger('click')
-      await flushPromises()
-
-      expect(mockSubscribeToPush).toHaveBeenCalledOnce()
-    })
-
-    it('hides banner after Enable is clicked and subscription succeeds', async () => {
-      mockSubscribeToPush.mockResolvedValue({ ok: true })
-      const wrapper = mount(PushOptIn)
-      await flushPromises()
-
-      await wrapper.find('.push-opt-in-btn').trigger('click')
-      await flushPromises()
-
-      expect(wrapper.find('.push-opt-in-banner').exists()).toBe(false)
-    })
-
-    it('does NOT post subscription to backend when subscribeToPush returns false', async () => {
-      mockSubscribeToPush.mockResolvedValue({ ok: false, reason: 'permission_denied' })
-      const wrapper = mount(PushOptIn)
-      await flushPromises()
-
-      await wrapper.find('.push-opt-in-btn').trigger('click')
-      await flushPromises()
-
-      // Banner should still be visible (permission was denied)
-      expect(wrapper.find('.push-opt-in-banner').exists()).toBe(true)
-    })
-
-    it('hides banner on dismiss without calling subscribeToPush', async () => {
-      const wrapper = mount(PushOptIn)
-      await flushPromises()
-
-      await wrapper.find('.push-opt-in-dismiss').trigger('click')
-      await flushPromises()
-
-      expect(mockSubscribeToPush).not.toHaveBeenCalled()
-      expect(wrapper.find('.push-opt-in-banner').exists()).toBe(false)
-    })
-  })
-
-  describe('permission denied', () => {
-    beforeEach(() => {
-      setupNotificationMock('denied')
-    })
-
-    it('shows the blocked message banner', async () => {
-      const wrapper = mount(PushOptIn)
-      await flushPromises()
-
-      expect(wrapper.find('.push-opt-in-banner').exists()).toBe(true)
-      expect(wrapper.find('.push-opt-in-banner').text()).toContain('blocked')
-    })
-
-    it('does NOT show the Enable button when permission is denied', async () => {
-      const wrapper = mount(PushOptIn)
-      await flushPromises()
-
-      expect(wrapper.find('.push-opt-in-btn').exists()).toBe(false)
-    })
-
-    it('does NOT call subscribeToPush on mount when already denied', async () => {
-      mount(PushOptIn)
-      await flushPromises()
-
-      expect(mockSubscribeToPush).not.toHaveBeenCalled()
-    })
-  })
-})

frontend/vue-app/src/components/shared/LoginButton.vue

@@ -15,6 +15,7 @@ import {
 import { getCachedImageUrl, getCachedImageBlob } from '@/common/imageCache'
 import '@/assets/styles.css'
 import ModalDialog from './ModalDialog.vue'
+import { subscribeToPushWithResult } from '@/services/pushSubscription'
 
 const router = useRouter()
 const show = ref(false)
@@ -139,6 +140,7 @@ const submit = async () => {
     }
     // Authenticate parent and navigate
     authenticateParent(stayInParentMode.value)
+    subscribeToPushWithResult() // fire-and-forget — browser gesture is satisfied by the PIN button click
     close()
     const returnUrl = consumePendingReturnUrl()
     router.push(returnUrl || '/parent')

frontend/vue-app/src/layout/ParentLayout.vue

@@ -2,8 +2,6 @@
 import { useRouter, useRoute } from 'vue-router'
 import { computed, ref, onMounted, onUnmounted } from 'vue'
 import LoginButton from '../components/shared/LoginButton.vue'
-import PushOptIn from '../components/notification/PushOptIn.vue'
-import { subscribeToPush } from '@/services/pushSubscription'
 import { eventBus } from '@/common/eventBus'
 import type {
   Event,
@@ -70,17 +68,10 @@ function handleChoreConfirmationBadge(event: Event) {
 // Version fetching
 const appVersion = ref('')
 
-function onVisibilityChange() {
-  if (document.visibilityState === 'visible') {
-    subscribeToPush()
-  }
-}
-
 onMounted(async () => {
   await fetchNotificationCount()
   eventBus.on('child_reward_request', handleRewardRequestBadge)
   eventBus.on('child_chore_confirmation', handleChoreConfirmationBadge)
-  document.addEventListener('visibilitychange', onVisibilityChange)
 
   try {
     const resp = await fetch('/api/version')
@@ -96,7 +87,6 @@ onMounted(async () => {
 onUnmounted(() => {
   eventBus.off('child_reward_request', handleRewardRequestBadge)
   eventBus.off('child_chore_confirmation', handleChoreConfirmationBadge)
-  document.removeEventListener('visibilitychange', onVisibilityChange)
 })
 </script>
 
@@ -176,7 +166,6 @@ onUnmounted(() => {
     </header>
 
     <main class="main-content">
-      <PushOptIn />
       <router-view :key="$route.fullPath" />
     </main>