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

Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
2026-02-21 23:16:02 +00:00
parent 23d610ba5b
commit 1b66417be5
12 changed files with 416 additions and 150 deletions
--- a/apps/web/src/app/(auth)/login/page.test.tsx
+++ b/apps/web/src/app/(auth)/login/page.test.tsx
@@ -127,8 +127,8 @@ describe("LoginPage", (): void => {
      expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
    });

-    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Welcome to Mosaic Stack");
-    expect(screen.getByText(/Your personal assistant platform/i)).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Command Center");
+    expect(screen.getByText(/Sign in to your orchestration platform/i)).toBeInTheDocument();
  });

  it("has proper layout styling", async (): Promise<void> => {
@@ -186,7 +186,7 @@ describe("LoginPage", (): void => {
      expect(screen.getByRole("button", { name: /continue with authentik/i })).toBeInTheDocument();
    });

-    expect(screen.getByText(/or continue with email/i)).toBeInTheDocument();
+    expect(screen.getByText(/or continue with/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
  });
@@ -200,7 +200,11 @@ describe("LoginPage", (): void => {
      expect(screen.getByRole("button", { name: /continue with authentik/i })).toBeInTheDocument();
    });

-    expect(screen.queryByText(/or continue with email/i)).not.toBeInTheDocument();
+    // The divider element should not appear (no credentials provider)
+    const dividerTexts = screen.queryAllByText(/or continue with/i);
+    // OAuthButton text contains "Continue with" so filter for the divider specifically
+    const dividerOnly = dividerTexts.filter((el) => el.textContent === "or continue with");
+    expect(dividerOnly).toHaveLength(0);
  });

  it("shows error state with retry button on fetch failure instead of silent fallback", async (): Promise<void> => {
@@ -215,7 +219,6 @@ describe("LoginPage", (): void => {
    // Should NOT silently fall back to email form
    expect(screen.queryByLabelText(/email/i)).not.toBeInTheDocument();
    expect(screen.queryByLabelText(/password/i)).not.toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: /continue with/i })).not.toBeInTheDocument();

    // Should show the error banner with helpful message
    expect(
@@ -453,7 +456,7 @@ describe("LoginPage", (): void => {
  /* ------------------------------------------------------------------ */

  describe("responsive layout", (): void => {
-    it("applies mobile-first padding to main element", async (): Promise<void> => {
+    it("applies AuthShell layout classes to main element", async (): Promise<void> => {
      mockFetchConfig(EMAIL_ONLY_CONFIG);

      const { container } = render(<LoginPage />);
@@ -463,8 +466,7 @@ describe("LoginPage", (): void => {
      });

      const main = container.querySelector("main");
-
-      expect(main).toHaveClass("p-4", "sm:p-8");
+      expect(main).toHaveClass("min-h-screen", "items-center", "justify-center");
    });

    it("applies responsive text size to heading", async (): Promise<void> => {
@@ -477,10 +479,10 @@ describe("LoginPage", (): void => {
      });

      const heading = screen.getByRole("heading", { level: 1 });
-      expect(heading).toHaveClass("text-2xl", "sm:text-4xl");
+      expect(heading).toHaveClass("text-xl", "sm:text-2xl");
    });

-    it("applies responsive padding to card container", async (): Promise<void> => {
+    it("AuthCard applies card styling with padding", async (): Promise<void> => {
      mockFetchConfig(EMAIL_ONLY_CONFIG);

      const { container } = render(<LoginPage />);
@@ -489,12 +491,12 @@ describe("LoginPage", (): void => {
        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
      });

-      const card = container.querySelector(".bg-white");
-
-      expect(card).toHaveClass("p-4", "sm:p-8");
+      // AuthCard uses rounded-2xl and p-6 sm:p-10
+      const card = container.querySelector(".rounded-2xl");
+      expect(card).toHaveClass("p-6", "sm:p-10");
    });

-    it("card container has full width with max-width constraint", async (): Promise<void> => {
+    it("AuthShell constrains card width", async (): Promise<void> => {
      mockFetchConfig(EMAIL_ONLY_CONFIG);

      const { container } = render(<LoginPage />);
@@ -503,9 +505,9 @@ describe("LoginPage", (): void => {
        expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
      });

-      const wrapper = container.querySelector(".max-w-md");
-
-      expect(wrapper).toHaveClass("w-full", "max-w-md");
+      // AuthShell wraps children in max-w-[27rem]
+      const wrapper = container.querySelector(".max-w-\\[27rem\\]");
+      expect(wrapper).toHaveClass("w-full");
    });
  });

--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/apps/web/src/app/(auth)/login/page.tsx
@@ -5,6 +5,7 @@ import type { ReactElement } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Loader2 } from "lucide-react";
 import type { AuthConfigResponse, AuthProviderConfig } from "@mosaic/shared";
+import { AuthShell, AuthCard, AuthBrand, AuthStatusPill } from "@mosaic/ui";
 import { API_BASE_URL, IS_MOCK_AUTH_MODE } from "@/lib/config";
 import { signIn } from "@/lib/auth-client";
 import { fetchWithRetry } from "@/lib/auth/fetch-with-retry";
@@ -19,23 +20,21 @@ export default function LoginPage(): ReactElement {
  return (
    <Suspense
      fallback={
-        <main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-8 bg-gray-50">
-          <div className="w-full max-w-md space-y-8">
-            <div className="text-center">
-              <h1 className="text-2xl sm:text-4xl font-bold mb-4">Welcome to Mosaic Stack</h1>
-            </div>
-            <div className="bg-white p-4 sm:p-8 rounded-lg shadow-md">
+        <AuthShell>
+          <AuthCard>
+            <div className="flex flex-col items-center gap-6">
+              <AuthBrand />
              <div
                className="flex items-center justify-center py-8"
                role="status"
                aria-label="Loading authentication options"
              >
-                <Loader2 className="h-8 w-8 animate-spin text-blue-500" aria-hidden="true" />
+                <Loader2 className="h-8 w-8 animate-spin text-[#56a0ff]" aria-hidden="true" />
                <span className="sr-only">Loading authentication options</span>
              </div>
            </div>
-          </div>
-        </main>
+          </AuthCard>
+        </AuthShell>
      }
    >
      <LoginPageContent />
@@ -185,47 +184,51 @@ function LoginPageContent(): ReactElement {

  if (IS_MOCK_AUTH_MODE) {
    return (
-      <main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-8 bg-gray-50">
-        <div className="w-full max-w-md space-y-8">
-          <div className="text-center">
-            <h1 className="text-2xl sm:text-4xl font-bold mb-4">Welcome to Mosaic Stack</h1>
-            <p className="text-base sm:text-lg text-gray-600">
-              Local mock auth mode is active. Real sign-in is bypassed for frontend development.
-            </p>
-          </div>
-          <div className="bg-white p-4 sm:p-8 rounded-lg shadow-md space-y-4">
-            <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900">
-              Mock auth mode is local-only and blocked outside development.
+      <AuthShell>
+        <AuthCard>
+          <div className="flex flex-col items-center gap-6">
+            <AuthBrand />
+            <div className="text-center">
+              <h1 className="text-xl font-bold tracking-tight sm:text-2xl">Command Center</h1>
+              <p className="mt-1 text-sm text-[#5a6a87] dark:text-[#8f9db7]">
+                Local mock auth mode is active
+              </p>
            </div>
+          </div>
+
+          <div className="mt-6 space-y-4">
+            <AuthStatusPill label="Mock mode" tone="warning" className="w-full justify-center" />
            {error && <AuthErrorBanner message={error} />}
            <button
              type="button"
              onClick={() => {
                void handleMockLogin();
              }}
-              className="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
+              className="w-full inline-flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-semibold text-white bg-[linear-gradient(135deg,#2f80ff,#8b5cf6)] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#56a0ff]/60 hover:-translate-y-0.5 hover:shadow-[0_10px_30px_rgba(47,128,255,0.38)]"
              data-testid="mock-auth-login"
            >
              Continue with Mock Session
            </button>
          </div>
-        </div>
-      </main>
+        </AuthCard>
+      </AuthShell>
    );
  }

  return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-8 bg-gray-50">
-      <div className="w-full max-w-md space-y-8">
-        <div className="text-center">
-          <h1 className="text-2xl sm:text-4xl font-bold mb-4">Welcome to Mosaic Stack</h1>
-          <p className="text-base sm:text-lg text-gray-600">
-            Your personal assistant platform. Organize tasks, events, and projects with a
-            PDA-friendly approach.
-          </p>
+    <AuthShell>
+      <AuthCard>
+        <div className="flex flex-col items-center gap-6">
+          <AuthBrand />
+          <div className="text-center">
+            <h1 className="text-xl font-bold tracking-tight sm:text-2xl">Command Center</h1>
+            <p className="mt-1 text-sm text-[#5a6a87] dark:text-[#8f9db7]">
+              Sign in to your orchestration platform
+            </p>
+          </div>
        </div>

-        <div className="bg-white p-4 sm:p-8 rounded-lg shadow-md">
+        <div className="mt-6">
          {loadingConfig ? (
            <div
              className="flex items-center justify-center py-8"
@@ -233,7 +236,7 @@ function LoginPageContent(): ReactElement {
              role="status"
              aria-label="Loading authentication options"
            >
-              <Loader2 className="h-8 w-8 animate-spin text-blue-500" aria-hidden="true" />
+              <Loader2 className="h-8 w-8 animate-spin text-[#56a0ff]" aria-hidden="true" />
              <span className="sr-only">Loading authentication options</span>
            </div>
          ) : config === null ? (
@@ -243,47 +246,35 @@ function LoginPageContent(): ReactElement {
                <button
                  type="button"
                  onClick={handleRetry}
-                  className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold text-white bg-[linear-gradient(135deg,#2f80ff,#8b5cf6)] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#56a0ff]/60 hover:-translate-y-0.5 hover:shadow-[0_10px_30px_rgba(47,128,255,0.38)]"
                >
                  Try again
                </button>
              </div>
            </div>
          ) : (
-            <>
+            <div className="space-y-0">
              {urlError && (
-                <AuthErrorBanner
-                  message={urlError}
-                  onDismiss={(): void => {
-                    setUrlError(null);
-                  }}
-                />
+                <div className="mb-4">
+                  <AuthErrorBanner
+                    message={urlError}
+                    onDismiss={(): void => {
+                      setUrlError(null);
+                    }}
+                  />
+                </div>
              )}

              {error && !hasCredentials && (
-                <AuthErrorBanner
-                  message={error}
-                  onDismiss={(): void => {
-                    setError(null);
-                  }}
-                />
-              )}
-
-              {hasOAuth &&
-                oauthProviders.map((provider) => (
-                  <OAuthButton
-                    key={provider.id}
-                    providerName={provider.name}
-                    providerId={provider.id}
-                    onClick={(): void => {
-                      handleOAuthLogin(provider.id);
+                <div className="mb-4">
+                  <AuthErrorBanner
+                    message={error}
+                    onDismiss={(): void => {
+                      setError(null);
                    }}
-                    isLoading={oauthLoading === provider.id}
-                    disabled={oauthLoading !== null && oauthLoading !== provider.id}
                  />
-                ))}
-
-              {hasOAuth && hasCredentials && <AuthDivider />}
+                </div>
+              )}

              {hasCredentials && (
                <LoginForm
@@ -292,10 +283,33 @@ function LoginPageContent(): ReactElement {
                  error={error}
                />
              )}
-            </>
+
+              {hasOAuth && hasCredentials && <AuthDivider />}
+
+              {hasOAuth && (
+                <div className="space-y-2">
+                  {oauthProviders.map((provider) => (
+                    <OAuthButton
+                      key={provider.id}
+                      providerName={provider.name}
+                      providerId={provider.id}
+                      onClick={(): void => {
+                        handleOAuthLogin(provider.id);
+                      }}
+                      isLoading={oauthLoading === provider.id}
+                      disabled={oauthLoading !== null && oauthLoading !== provider.id}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
          )}
        </div>
-      </div>
-    </main>
+
+        <div className="mt-6 flex justify-center">
+          <AuthStatusPill label="Mosaic v0.1" tone="neutral" />
+        </div>
+      </AuthCard>
+    </AuthShell>
  );
 }
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -10,9 +10,32 @@ export const metadata: Metadata = {
  description: "Mosaic Stack Web Application",
 };

+/**
+ * Runtime env vars injected as a synchronous script so client-side modules
+ * can read them before React hydration.  This allows Docker env vars to
+ * override the build-time baked NEXT_PUBLIC_* values.
+ */
+function runtimeEnvScript(): string {
+  const env: Record<string, string> = {};
+  for (const key of [
+    "NEXT_PUBLIC_API_URL",
+    "NEXT_PUBLIC_ORCHESTRATOR_URL",
+    "NEXT_PUBLIC_AUTH_MODE",
+  ]) {
+    const value = process.env[key];
+    if (value) {
+      env[key] = value;
+    }
+  }
+  return `window.__MOSAIC_ENV__=${JSON.stringify(env)};`;
+}
+
 export default function RootLayout({ children }: { children: ReactNode }): React.JSX.Element {
  return (
    <html lang="en">
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: runtimeEnvScript() }} />
+      </head>
      <body>
        <ThemeProvider>
          <ErrorBoundary>