feat(setup): noon-daily default + force-refresh hint + inline remove confirm
CI / test (push) Has been cancelled
CI / test (push) Has been cancelled
Three coordinated UX changes touching defaults and the settings sheet.
1. Server defaults: DeviceService::linkToUser now sets timezone =
user.timezone and wakeTimes = [12*60] (noon-daily) when creating a
new Device row OR transferring ownership on takeover. Replaces the
prior "1440-min interval anchored to last-seen-time" default that
could land a recipient's first photo at 3 am.
2. PWA propagation note: now mentions "briefly disconnect and reconnect
the frame's power" as the immediate-refresh gesture. Pairs with the
existing X-Boot-Reason: cold force-resync — the firmware already
honors a power-cycle as a deliberate refresh request, but users had
no way to discover that.
3. Remove-this-frame: replaced the native window.confirm() with an
in-sheet confirmation panel showing the explanatory text. Inline
keeps the gesture inside the existing sheet flow and gives the
destructive button a fixed location, instead of a floating native
dialog that varies per browser. The confirm body explicitly says
"this can't be undone" to match the irreversibility.
Tests:
- DeviceServiceTest: new-device default, takeover-resets-with-default,
UTC fallback when user has empty timezone.
- SetupControllerTest: claim-takes-over-defaults updated to assert
[12*60] wakeTimes.
- HomeView.test: 4 cases covering open-confirm, yes-confirm, cancel,
propagation-note text.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -188,7 +188,9 @@
|
||||
|
||||
<p class="home-view__next-update" aria-live="polite">{{ nextUpdatePreview }}</p>
|
||||
<p class="home-view__propagation-note">
|
||||
Changes will only take effect at the next device update.
|
||||
Changes will only take effect at the next device update. To force
|
||||
an immediate refresh, briefly disconnect and reconnect the frame’s
|
||||
power.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -224,19 +226,38 @@
|
||||
{{ saving ? 'Saving…' : 'Save' }}
|
||||
</BaseButton>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="home-view__remove"
|
||||
:disabled="removing"
|
||||
@click="confirmAndRemove"
|
||||
>
|
||||
{{ removing ? 'Removing…' : 'Remove this frame' }}
|
||||
</button>
|
||||
<p class="home-view__remove-hint">
|
||||
Use this if you’re selling or giving away the frame. It deletes
|
||||
this frame from your account and unlinks it from your photos so the
|
||||
next owner can claim it fresh.
|
||||
</p>
|
||||
<template v-if="!removeConfirmOpen">
|
||||
<button
|
||||
type="button"
|
||||
class="home-view__remove"
|
||||
@click="removeConfirmOpen = true"
|
||||
>Remove this frame</button>
|
||||
</template>
|
||||
|
||||
<div v-else class="home-view__remove-confirm" role="alertdialog" aria-labelledby="remove-confirm-title">
|
||||
<p class="home-view__remove-confirm-title" id="remove-confirm-title">
|
||||
Remove this frame?
|
||||
</p>
|
||||
<p class="home-view__remove-confirm-body">
|
||||
Use this if you’re selling or giving away the frame. It deletes
|
||||
this frame from your account and unlinks it from your photos so the
|
||||
next owner can claim it fresh. This can’t be undone.
|
||||
</p>
|
||||
<div class="home-view__remove-confirm-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="home-view__remove-cancel"
|
||||
:disabled="removing"
|
||||
@click="removeConfirmOpen = false"
|
||||
>Cancel</button>
|
||||
<button
|
||||
type="button"
|
||||
class="home-view__remove-confirm-btn"
|
||||
:disabled="removing"
|
||||
@click="performRemove"
|
||||
>{{ removing ? 'Removing…' : 'Yes, remove' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</BaseBottomSheet>
|
||||
</template>
|
||||
|
||||
@@ -496,6 +517,7 @@ const TIMEZONE_GROUPS = [
|
||||
const sheetOpen = ref(false)
|
||||
const saving = ref(false)
|
||||
const removing = ref(false)
|
||||
const removeConfirmOpen = ref(false)
|
||||
const editingDevice = ref<Device | null>(null)
|
||||
const editName = ref('')
|
||||
const editOrientation = ref<Device['orientation']>('landscape')
|
||||
@@ -649,25 +671,17 @@ function onEdit(deviceId: number) {
|
||||
editFrequencyMode.value = device.wakeTimes.length > 0 ? 'times' : 'interval'
|
||||
editRotationMode.value = device.rotationMode
|
||||
editPrioritizeNeverShown.value = device.prioritizeNeverShown
|
||||
removeConfirmOpen.value = false
|
||||
sheetOpen.value = true
|
||||
}
|
||||
|
||||
async function confirmAndRemove() {
|
||||
async function performRemove() {
|
||||
if (!editingDevice.value) return
|
||||
const name = editingDevice.value.name || 'this frame'
|
||||
// Native confirm — destructive, irreversible, single-user action. A
|
||||
// bespoke modal would be polish; native is honest about the weight.
|
||||
const ok = window.confirm(
|
||||
`Remove "${name}" from your account?\n\n` +
|
||||
`This deletes the frame's history and unlinks all photos you'd ` +
|
||||
`approved for it. Use this when selling or giving the frame away.`,
|
||||
)
|
||||
if (!ok) return
|
||||
|
||||
removing.value = true
|
||||
try {
|
||||
await devicesStore.removeDevice(editingDevice.value.id)
|
||||
sheetOpen.value = false
|
||||
removeConfirmOpen.value = false
|
||||
} finally {
|
||||
removing.value = false
|
||||
}
|
||||
@@ -1034,12 +1048,53 @@ async function saveSettings() {
|
||||
}
|
||||
}
|
||||
|
||||
&__remove-hint {
|
||||
margin-top: var(--space-1);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
&__remove-confirm {
|
||||
margin-top: var(--space-5);
|
||||
padding: var(--space-3);
|
||||
border: 1.5px solid var(--color-danger, #c0392b);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
&__remove-confirm-title {
|
||||
font-size: var(--text-md);
|
||||
font-weight: 700;
|
||||
color: var(--color-danger, #c0392b);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
&__remove-confirm-body {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
&__remove-confirm-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
&__remove-cancel,
|
||||
&__remove-confirm-btn {
|
||||
flex: 1 1 0;
|
||||
min-height: var(--touch-min);
|
||||
padding: 0 var(--space-3);
|
||||
border: 1.5px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
}
|
||||
|
||||
&__remove-confirm-btn {
|
||||
background: var(--color-danger, #c0392b);
|
||||
border-color: var(--color-danger, #c0392b);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user