Skip to content

feat(login): glass morphism overhaul, bookSlug fix, Cloudflare E2E tests - #1028

Merged
d-o-hub merged 5 commits into
mainfrom
feat/login-visual-overhaul
Aug 22, 2026
Merged

feat(login): glass morphism overhaul, bookSlug fix, Cloudflare E2E tests#1028
d-o-hub merged 5 commits into
mainfrom
feat/login-visual-overhaul

Conversation

@d-o-hub

@d-o-hub d-o-hub commented Aug 22, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Glass morphism UI overhaul: Reader and admin login pages now use frosted glass cards (backdrop-filter: blur(16px)), radial gradient backgrounds, Instrument Serif typography, and decorative accent bars
  • bookSlug validation fix: AccessRequestSchema and RecoveryRequestSchema now accept optional/empty bookSlug — the Zod min(1) error when navigating to /login without ?book= is resolved
  • Input component polish: Softer borders (border-border/60), muted placeholders, refined password toggle hover state
  • Cloudflare E2E tests: New cloudflare-login.spec.ts with 14 tests covering reader/admin login flows, password toggle, glass morphism rendering, hero sections, empty bookSlug handling, and Cloudflare health endpoint

Files Changed

Package Files
schema auth.ts (bookSlug optional)
shared schemas.test.ts
ui input.tsx (border, placeholder, toggle polish)
web LoginPage.tsx, LoginHero.tsx, LoginMobileInfo.tsx, LoginCardHeader.tsx, AdminLoginPage.tsx, AdminLoginHero.tsx, app-identity-parity.test.tsx
worker access.ts (bookSlug guard)
tests cloudflare-login.spec.ts (new)

Verification

  • All unit tests pass: schema (147), shared (131), UI (147), web (1307)
  • Minimal quality gate (lint + typecheck) passes
  • E2E tests can run against Cloudflare preview via CLOUDFLARE_PREVIEW_URL env var

- Fix bookSlug validation: make optional in AccessRequestSchema and
  RecoveryRequestSchema to accept empty/missing values gracefully
- Glass morphism UI: radial gradient background, glass-card class on
  login cards, Instrument Serif typography, accent bars
- Input polish: softer borders (border-border/60), muted placeholders
- Admin login parity: same glass treatment, cleaner headers
- Cloudflare E2E tests: login flow, password toggle, hero rendering,
  empty bookSlug handling, health endpoint, admin login
@d-o-hub
d-o-hub requested a review from d-oit as a code owner August 22, 2026 18:00
@repowise-bot

repowise-bot Bot commented Aug 22, 2026

Copy link
Copy Markdown

✅ Health of changed files: 4.8 (unchanged)
🚨 Change risk: high, riskier than 85% of this repo's commits.

📋 At a glance
2 files changed health · 5 hotspots touched · 3 new findings introduced · 1 co-change pair left out · 5 files with recent fix history.

Files & modules (2)
  • apps (7 files)
    • .../routes/access.ts
    • .../auth/LoginPage.tsx
    • .../i18n/it.ts
    • .../i18n/pt.ts
    • .../i18n/de.ts
    • .../i18n/fr.ts
    • .../i18n/en.ts
  • packages (1 file)
    • .../__tests__/schemas.test.ts

✅ Health gate: passed

📌 Before you merge

  • Run .../admin/AdminLoginPage.test.tsx, .../admin/AuditLogPage.test.tsx, .../__tests__/i18n-parity.test.ts, .../__tests__/i18n-rendered-text.test.ts (+6 more): they import the changed files
  • .../reader/ReaderPage.tsx changed together with .../i18n/de.ts in 14 past commits and isn't in this PR
🔎 More signals (3)

🗺️ Change map

flowchart LR
  subgraph PR ["Changed in this PR (2 modules)"]
    m_apps["apps (17 files)"]:::changed
    m_packages["packages (2 files)"]:::changed
  end
  classDef changed fill:#dbeafe,stroke:#1d4ed8,color:#1e3a5f
  classDef warn fill:#fef3c7,stroke:#b45309,color:#78350f
  classDef guard fill:#dcfce7,stroke:#15803d,color:#14532d
Loading

Solid arrows: code that imports the changed files (22 direct dependents, from the last indexed snapshot). Dashed: history/tests.

🔥 Hotspots touched (5)

  • .../routes/access.ts: 21 commits/90d, 16 dependents · primary owner: Dominik Oswald (78%)
  • .../__tests__/schemas.test.ts: 2 commits/90d, 0 dependents · primary owner: Dominik Oswald (100%)
  • .../i18n/it.ts: 18 commits/90d, 13 dependents · primary owner: d-oit (64%)
2 more
  • .../i18n/pt.ts: 18 commits/90d, 17 dependents · primary owner: d-oit (64%)
  • .../i18n/de.ts: 40 commits/90d, 21 dependents · primary owner: Dominik Oswald (93%)

🔗 Hidden coupling (3 files)

  • .../i18n/de.ts co-changes with .../reader/ReaderPage.tsx (14×, 🟡 notable), not in this PR.
  • .../i18n/fr.ts co-changes with .../reader/ReaderPage.tsx (14×, 🟡 notable), not in this PR.
  • .../i18n/en.ts co-changes with .../reader/ReaderPage.tsx (14×, 🟡 notable), not in this PR.

👀 Suggested reviewers @d-oit


📊 See the full report for this PR
Your repo map with this PR's blast radius lit up, every caller of the contracts it changes, and health before and after. No sign-in. · ⭐ Star Repowise · 📥 Install bot · Silence on a single PR with [skip repowise] in the title · Per-repo toggle on repowise.dev/settings?tab=bot · Updated 2026-08-22 19:37 UTC

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Aug 22, 2026

Copy link
Copy Markdown

Deploying do-epub-studio with  Cloudflare Pages  Cloudflare Pages

Latest commit: 946c992
Status: ✅  Deploy successful!
Preview URL: https://937e091f.do-epub-studio.pages.dev
Branch Preview URL: https://feat-login-visual-overhaul.do-epub-studio.pages.dev

View logs

@github-actions

github-actions Bot commented Aug 22, 2026

Copy link
Copy Markdown

🚀 Performance Report

🛠️ CI & Workflow

Metric Value Limit Trend Status
Total CI Duration 5.55 min 15.00 min -
Pnpm Cache Hit Hit - -

⚡ Turbo Task Performance

Task Duration (s) Cache Status Trend Status
@do-epub-studio/reader-core#build 0.00 MISS - 🔄
@do-epub-studio/schema#build 0.00 MISS - 🔄
@do-epub-studio/shared#build 0.00 MISS - 🔄
@do-epub-studio/testkit#build 0.00 MISS - 🔄
@do-epub-studio/ui#build 0.00 MISS - 🔄
@do-epub-studio/web#build 0.00 MISS - 🔄
@do-epub-studio/worker#build 0.00 MISS - 🔄

Cache Hit Ratio: 0% (0/7 tasks)

🧪 Test Stability

Metric Value Trend Status
Total Tests 0 - -
Failed Tests 0 -
Flaky Rate 0.00% -

@codacy-production

codacy-production Bot commented Aug 22, 2026

Copy link
Copy Markdown
Contributor

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 24 complexity · 10 duplication

Metric Results
Complexity 24
Duplication 10

View in Codacy

NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.

d-oit added 3 commits August 22, 2026 20:11
…n build

Lightning CSS strips the unprefixed backdrop-filter from @layer components
in globals.css. Tailwind's backdrop-blur-lg utility includes both prefixed
and unprefixed versions, ensuring the frosted glass effect works in
production builds.
… anchors

GOAP-253 / ADR-253 on top of the glass morphism overhaul:

- LoginForm: role=status notice + disabled submit when /login has no
  ?book= param (demo login unaffected); server MISSING_BOOK guard stays
  as backstop
- i18n: login.noBookContext added to all 14 locale catalogs (parity test)
- E2E: cloudflare-login.spec.ts migrated from Tailwind class selectors
  to data-testid anchors (login/admin card, hero, mobile info)
- build: restoreStandardBackdropFilter() Vite plugin — lightningcss was
  dropping standard backdrop-filter, leaving only -webkit- (invisible
  glass in Firefox); removed redundant backdrop-blur-lg utilities that
  overrode .glass-card's saturate(150%)
- tests: Button mock forwards disabled; submit-flow tests pinned to
  ?book=; three new guard tests (1310 web tests green)
@github-actions github-actions Bot added documentation Improvements or additions to documentation area:build labels Aug 22, 2026
@d-o-hub

d-o-hub commented Aug 22, 2026

Copy link
Copy Markdown
Collaborator Author

Code Review & Roast — GOAP-253 pass

Verdict: approve-after-fixes. Fixes landed in f5bdb43. Solid CI discipline and a genuinely better error code, but two real bugs shipped under the polish. Details by severity.

🔥 Must-fix (found, fixed in f5bdb43)

M1 — Production glass blur was Firefox-invisible, and the "fix" was a placebo.
ebce946 ("add backdrop-blur-lg to glass-card elements for production build") misdiagnosed the problem. Facts:

  • The Tailwind v4 lightningcss pipeline rewrites any literal backdrop-filter + -webkit-backdrop-filter pair down to the -webkit- form only (its browser data marks the standard property unsupported; verified even an unresolvable var() value gets stripped). Built CSS had 0 standard declarations, 3 webkit ones.
  • Chromium survives via alias; Firefox rendered zero glass blur in production.
  • backdrop-blur-lg was doubly useless: same 16px value as .glass-card, and where it did apply it overrode .glass-card's saturate(150%) (utilities layer > components layer) — so the PR also silently changed the intended filter value.
    Fix: restoreStandardBackdropFilter() Vite plugin re-inserts the standard declaration beside every -webkit- twin; redundant utilities removed; built CSS now carries both forms (asserted post-build). Documented in GOAP-253 §7 / ADR-253 §4.

M2 — Dead-end submit state. /login without ?book= rendered a submittable form whose only outcome was a 400. Now: localized role="status" notice + disabled submit (all 14 locales — parity is enforced repo-wide, not just en/de/fr); demo login stays available; server guard remains defense-in-depth.

✅ Should-fix (also done)

  • S1 — E2E selected structural regions by Tailwind classes (section.glass-card, section.hidden.lg\\:block). Styling refactor = silent breakage. Migrated to data-testid anchors on all six regions.
  • S2 — The schema relaxation (min(1) → optional) read as contract-weakening with no rationale in-tree. Kept — MISSING_BOOK beats leaking zod internals — but documented as a deliberate two-layer invariant in ADR-253 instead of leaving reviewers to guess.

🧹 Nit pile (not blocking)

  • .glass-card:hover { transform: translateY(-4px) }: hover-lift on a login form card is decoration on a non-interactive element; also transition: all is the heaviest possible transition. Global reduced-motion block covers it, but it earns nothing.
  • New spec's credentials default to placeholder values with no skip-if-unreachable guard — running it without CLOUDFLARE_PREVIEW_URL against an unseeded dev server produces confusing failures. Fine for now (CI path-detection skips it); consider a precondition guard later.
  • Test-selector coupling aside, the spec's coverage breadth (reader+admin+toggle geometry+health endpoint) is genuinely good.

👏 Credit where due

  • h1h2 in the card headers fixed a duplicate-h1 hierarchy bug nobody asked about.
  • Coherent test updates on both sides of the schema change; Codacy clean; bundle/Lighthouse/Chromatic/CodeQL green before review even started.

Repo context noted during review

GOAP-253 execution record: plans/253-goap-login-no-book-guard-modernization.md · Decision: plans/253-adr-login-no-book-guard-modernization.md

@d-o-hub
d-o-hub merged commit 1bb5e44 into main Aug 22, 2026
30 of 31 checks passed
@d-o-hub
d-o-hub deleted the feat/login-visual-overhaul branch August 22, 2026 19:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants