mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix(web): restore login page design and add runtime config injection #435

Merged
jason.woltje merged 1 commits from fix/login-page-design into main 2026-02-21 23:16:02 +00:00
Conversation 0 Commits 1 Files Changed 12 +416 -150
jason.woltje commented 2026-02-21 23:13:06 +00:00
Owner
Copy Link

Summary

  • Restored Round 5 login page design: The redesigned auth UI components (AuthShell, AuthCard, AuthBrand, AuthStatusPill, AuthDivider) were on a feature branch but never merged to main. This adds them to the UI package and rewrites the login page to use them, matching the design reference with animated gradient background, card chrome, dark-mode support, and "Command Center" branding.

  • Fixed runtime API URL injection: NEXT_PUBLIC_API_URL was hardcoded at build time via CI build-arg, making it impossible to override in Docker/Portainer env vars. The root layout now injects runtime env vars into window.MOSAIC_ENV via a synchronous script tag, and config.ts reads those values first. This lets deployed containers use their own API URL without rebuilding the image.

  • Updated all auth component tests: Tests updated to match new component structure, CSS classes, and content ("Command Center" heading, AuthShell layout classes, AuthDivider default text).

Files Changed

Area Files
UI library AuthSurface.tsx (new), packages/ui/src/index.ts
Login page page.tsx, page.test.tsx
Auth components AuthDivider, AuthErrorBanner, LoginForm, OAuthButton + tests
Runtime config config.ts, layout.tsx

Test plan

  • All 56 unit tests pass (config, AuthDivider, AuthErrorBanner, login page, mock mode)
  • Pre-commit hooks pass (prettier, lint, typecheck)
  • CI pipeline green
  • Playwright e2e verification after deployment
## Summary - **Restored Round 5 login page design**: The redesigned auth UI components (AuthShell, AuthCard, AuthBrand, AuthStatusPill, AuthDivider) were on a feature branch but never merged to main. This adds them to the UI package and rewrites the login page to use them, matching the design reference with animated gradient background, card chrome, dark-mode support, and "Command Center" branding. - **Fixed runtime API URL injection**: NEXT_PUBLIC_API_URL was hardcoded at build time via CI build-arg, making it impossible to override in Docker/Portainer env vars. The root layout now injects runtime env vars into window.__MOSAIC_ENV__ via a synchronous script tag, and config.ts reads those values first. This lets deployed containers use their own API URL without rebuilding the image. - **Updated all auth component tests**: Tests updated to match new component structure, CSS classes, and content ("Command Center" heading, AuthShell layout classes, AuthDivider default text). ## Files Changed | Area | Files | |------|-------| | UI library | AuthSurface.tsx (new), packages/ui/src/index.ts | | Login page | page.tsx, page.test.tsx | | Auth components | AuthDivider, AuthErrorBanner, LoginForm, OAuthButton + tests | | Runtime config | config.ts, layout.tsx | ## Test plan - [x] All 56 unit tests pass (config, AuthDivider, AuthErrorBanner, login page, mock mode) - [x] Pre-commit hooks pass (prettier, lint, typecheck) - [ ] CI pipeline green - [ ] Playwright e2e verification after deployment
jason.woltje added 1 commit 2026-02-21 23:13:07 +00:00
fix(web): restore login page design and add runtime config injection
All checks were successful
ci/woodpecker/push/orchestrator Pipeline was successful
Details
ci/woodpecker/push/api Pipeline was successful
Details
ci/woodpecker/push/web Pipeline was successful
Details
0f58599d77 
Login page was deployed with the old unstyled version on main — the
Round 5 design system components (AuthShell, AuthCard, AuthBrand) had
never been merged. This commit restores the designed login experience
with animated gradient background, card chrome, and proper dark-mode
support matching the design reference.

Additionally, NEXT_PUBLIC_API_URL was hardcoded at build time via the
CI --build-arg, making it impossible to override in container env vars.
The root layout now injects runtime env vars into window.__MOSAIC_ENV__
via a synchronous script tag, and config.ts reads those values first.
This lets deployed containers use their own API URL without rebuilding.

Changes:
- Add AuthSurface.tsx to @mosaic/ui (AuthShell, AuthCard, AuthBrand,
  AuthStatusPill, AuthDivider)
- Rewrite login page to use design system components with "Command
  Center" heading matching the design reference
- Update config.ts with getEnv() helper that reads window.__MOSAIC_ENV__
- Add runtime env injection script to root layout.tsx
- Update all tests to match new component structure and content

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
jason.woltje merged commit 1b66417be5 into main 2026-02-21 23:16:02 +00:00
jason.woltje deleted branch fix/login-page-design 2026-02-21 23:16:03 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
ai
AI/LLM integration
 api
Backend/API work
 api
auth
Authentication
 database
database
Database/schema work
 devops
Docker/deployment
 docs
Documentation
 frontend
graph
knowledge-module
migration
Data migration
 orchestrator
Orchestrator service (apps/orchestrator/)
 p0
Critical priority
 p1
High priority
 p2
Medium priority
 p3
Low priority
 performance
Performance work
 phase-1
phase-2
phase-3
phase-4
phase-5
plugin
MoltBot plugin work
 search
security
Security-related
 setup
Initial setup
 testing
Testing/QA
 web
Frontend work
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
jason.woltje
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mosaic/stack#435
Delete Branch "fix/login-page-design"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?