Jason Woltje
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>
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactElement } from "react";
|
|
import { Info, X } from "lucide-react";
|
|
|
|
export interface AuthErrorBannerProps {
|
|
message: string;
|
|
onDismiss?: () => void;
|
|
}
|
|
|
|
export function AuthErrorBanner({ message, onDismiss }: AuthErrorBannerProps): ReactElement {
|
|
return (
|
|
<div
|
|
role="alert"
|
|
aria-live="polite"
|
|
className="flex items-start gap-3 rounded-lg border border-[#f06a6f]/55 bg-[#fff1f2] p-4 text-[#9f1239] dark:border-[#e5484d]/55 dark:bg-[#3a111b]/70 dark:text-[#fecdd3]"
|
|
>
|
|
<Info className="h-5 w-5 flex-shrink-0 mt-0.5" aria-hidden="true" />
|
|
<span className="flex-1 text-sm">{message}</span>
|
|
{onDismiss && (
|
|
<button
|
|
type="button"
|
|
onClick={onDismiss}
|
|
className="flex-shrink-0 text-[#be123c] transition-colors hover:text-[#881337] dark:text-[#fda4af] dark:hover:text-[#ffe4e6]"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="h-4 w-4" aria-hidden="true" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|