ryan/chore
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 5 Releases Wiki Activity

feat: update push notification subscription flow and remove deprecated opt-in component
All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 2m43s
Details

Browse Source
This commit is contained in:
Ryan Kegel
2026-04-19 22:16:38 -04:00
parent d7b1962903
commit fd28c89cbf
6 changed files with 15 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/vue-app/src/components/notification/PushOptIn.vue
View File

@@ -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>

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

@@ -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()
})
})
})

2
frontend/vue-app/src/components/shared/LoginButton.vue
View File

@@ -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')

11
frontend/vue-app/src/layout/ParentLayout.vue
View File

@@ -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>