fix(site-builder): make Reset Entire Site's guard load-bearing in the handler

Two Important review findings on the previous commit (1a01834):

1. handleResetSite ran unconditionally -- the confirm button's `disabled`
   attribute was the only thing standing between a mismatched/empty typed
   value and a full site wipe. Extracted the match check into a single
   exported pure predicate, siteResetConfirmMatches(typed, domain), used
   for the button's disabled/cursor/opacity (previously three duplicated
   inline comparisons) AND as the first line of handleResetSite itself,
   which now returns early if it doesn't hold. An empty domain is rejected
   outright (`!!domain &&` short-circuits) so the guard holds even if the
   handler were ever reached with no configured domain, independent of the
   entry point being hidden.

2. The dialog said "design tokens" but resetToDefaults() also wipes
   headCode (analytics/search-console/third-party scripts) and favicon --
   neither is one of the 17 documented design properties, so a user had no
   reason to read them as included. Copy now names both explicitly.
   Re-verified every remaining claim in the paragraph against what the
   handler actually does (page/header/footer replacement, no undo, no
   publish call, images untouched, 30000ms auto-save) -- all still hold.

Verified load-bearing by temporarily reverting each guard in place (no git
stash -- shared across worktrees/sessions per review feedback) and
confirming the corresponding test fails: dropping the !!domain check broke
the empty-domain unit test; removing the handleResetSite check broke a new
test that invokes the confirm button's React onClick directly (bypassing
both the disabled attribute and react-dom's own disabled-click suppression,
which independent investigation confirmed blocks a plain DOM `.disabled =
false; .click()`/dispatchEvent bypass -- pulling onClick off the element's
stashed __reactProps$ key was the only way to actually exercise the
handler's own guard).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-09 10:30:20 -07:00
co-authored by Claude Opus 5
parent 1a01834068
commit aba0d187d7
2 changed files with 113 additions and 6 deletions
+37 -5
View File
@@ -193,6 +193,31 @@ const BLANK_FOOTER_TREE: SerializedTreeNode = {
nodes: [],
};
/**
* Single source of truth for "has the user typed enough to arm the confirm
* button" -- used for the `disabled` attribute/cursor/opacity AND, more
* importantly, inside `handleResetSite` itself. `disabled` is a UI
* affordance, not a safety mechanism (it only stops a plain mouse click);
* for the one action in this app that irreversibly wipes a user's whole
* site draft, the real guard has to live in the handler, checked against
* this exact same predicate rather than a second hand-rolled comparison
* that could drift out of sync with it.
*
* An empty/falsy `domain` always returns `false`, even if `typed` is also
* empty -- `''.trim() === ''.trim()` would otherwise "match" trivially.
* Standalone mode (no `WHP_CONFIG`) has `siteDomain === ''`, and while the
* entry point that would let a user reach this code is hidden in that case
* (see the `siteDomain &&` guard around the whole danger zone below), this
* function must not depend on that -- it has to fail safe on its own if
* ever reached with no configured domain.
*
* Exported so it's directly unit-testable without needing a way to render
* the (deliberately unreachable-when-`siteDomain`-is-empty) confirm UI.
*/
export function siteResetConfirmMatches(typed: string, domain: string): boolean {
return !!domain && typed.trim() === domain.trim();
}
/* ---------- Main SiteDesignPanel ---------- */
export const SiteDesignPanel: React.FC = () => {
@@ -209,6 +234,12 @@ export const SiteDesignPanel: React.FC = () => {
const [tab, setTab] = useState<DesignTab>('basic');
const handleResetSite = (): void => {
// Load-bearing guard -- see `siteResetConfirmMatches`'s docstring. Not
// just a UI nicety: this must hold even if the confirm button's
// `disabled` attribute were ever bypassed (a synthetic click, or a
// future refactor that drops it).
if (!siteResetConfirmMatches(siteResetTyped, siteDomain)) return;
replaceAllPages([{ name: 'Home', tree: BLANK_PAGE_TREE }]);
setHeader(BLANK_HEADER_TREE);
setFooter(BLANK_FOOTER_TREE);
@@ -457,8 +488,9 @@ export const SiteDesignPanel: React.FC = () => {
) : (
<>
<p style={{ fontSize: 11, color: 'var(--color-text-muted)', lineHeight: 1.5, margin: '0 0 8px' }}>
This blanks <strong>every page</strong>, the header, the footer and all
design tokens, leaving one empty Home page. Uploaded images are kept.
This blanks <strong>every page</strong>, the header, the footer, all
design tokens (colors, fonts, radii), and your custom head code and
favicon, leaving one empty Home page. Uploaded images are kept.
<strong> This cannot be undone.</strong> Your published site stays as it
is until you publish again — but the editor auto-saves roughly every 30
seconds, so the blank version becomes your saved draft shortly after.
@@ -476,14 +508,14 @@ export const SiteDesignPanel: React.FC = () => {
<div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
<button
data-action="confirm-site-reset"
disabled={siteResetTyped.trim() !== siteDomain}
disabled={!siteResetConfirmMatches(siteResetTyped, siteDomain)}
onClick={handleResetSite}
style={{
flex: 1, padding: '7px 10px', fontSize: 11, fontWeight: 600,
color: '#fff', background: '#ef4444', border: 'none',
borderRadius: 'var(--radius-sm)',
cursor: siteResetTyped.trim() === siteDomain ? 'pointer' : 'not-allowed',
opacity: siteResetTyped.trim() === siteDomain ? 1 : 0.5,
cursor: siteResetConfirmMatches(siteResetTyped, siteDomain) ? 'pointer' : 'not-allowed',
opacity: siteResetConfirmMatches(siteResetTyped, siteDomain) ? 1 : 0.5,
}}
>
Reset everything