Merge pull request #12 from pior-labs/chore/cleanup-sign-in-page

Make sign-in SSO-only and add a theme switcher

Author: iPior

packages/web/src/app.css

@@ -67,6 +67,10 @@
   --finlens-accent-shadow: 0 4px 14px -2px color-mix(in srgb, var(--accent) 38%, transparent);
   --finlens-focus-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
 
+  --finlens-action-hover-bg: color-mix(in srgb, var(--ink) 90%, var(--accent));
+  --finlens-action-shadow: 0 14px 36px -12px color-mix(in srgb, var(--ink) 55%, transparent), inset 0 1px 0 rgba(var(--frost-rgb),0.06);
+  --finlens-action-shadow-hover: 0 18px 42px -12px color-mix(in srgb, var(--ink) 60%, transparent), inset 0 1px 0 rgba(var(--frost-rgb),0.08);
+
   --finlens-muted-track: color-mix(in srgb, var(--ink) 6%, transparent);
   --finlens-soft-divider: color-mix(in srgb, var(--ink) 10%, transparent);
   --finlens-category-favorite-bg: color-mix(in srgb, var(--accent) 18%, rgba(var(--surface-rgb),1) 82%);

packages/web/src/components/ThemeToggle.tsx

@@ -0,0 +1,54 @@
+import { useTheme } from '@/hooks/useTheme';
+
+/**
+ * Compact theme picker for pages without an account menu. Shows the same colour
+ * swatches as ThemeSwitcher, but as a segmented pill rather than a labelled list.
+ */
+export function ThemeToggle({ className = '' }: { className?: string }) {
+  const { theme, setTheme, themes } = useTheme();
+
+  return (
+    <div
+      role="group"
+      aria-label="Theme"
+      className={`inline-flex items-center gap-1 rounded-full border border-ink/15 bg-frost/50 p-1 shadow-[inset_0_1px_0_rgba(var(--frost-rgb),0.6)] backdrop-blur-md ${className}`}
+    >
+      {themes.map((option) => {
+        const active = option.id === theme;
+        return (
+          <button
+            key={option.id}
+            type="button"
+            onClick={() => setTheme(option.id)}
+            aria-pressed={active}
+            aria-label={`${option.name} theme`}
+            title={`${option.name} — ${option.hint}`}
+            className={[
+              'flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border-0 transition-[background-color,opacity,transform] duration-200',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/45 focus-visible:ring-offset-2 focus-visible:ring-offset-cream',
+              active
+                ? 'bg-ink/10 opacity-100'
+                : 'bg-transparent opacity-55 hover:opacity-100 motion-safe:hover:scale-105',
+            ].join(' ')}
+          >
+            <span
+              aria-hidden="true"
+              className={[
+                'flex h-5 w-5 shrink-0 items-center justify-center rounded-full transition-shadow duration-200',
+                active
+                  ? 'shadow-[inset_0_0_0_1px_rgba(var(--frost-rgb),0.5),0_0_0_1.5px_var(--accent)]'
+                  : 'shadow-[inset_0_0_0_1px_rgba(var(--frost-rgb),0.5)]',
+              ].join(' ')}
+              style={{ background: option.swatch[0] }}
+            >
+              <span className="flex h-2.5 w-2.5 overflow-hidden rounded-full">
+                <span className="h-full w-1/2" style={{ background: option.swatch[1] }} />
+                <span className="h-full w-1/2" style={{ background: option.swatch[2] }} />
+              </span>
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

packages/web/src/hooks/useAuth.tsx

@@ -9,7 +9,6 @@ export interface AuthUser {
 interface AuthContextValue {
   user: AuthUser | null;
   loading: boolean;
-  login: (email: string, password: string) => Promise<void>;
   loginWithSSO: () => Promise<void>;
   logout: () => Promise<void>;
   refresh: () => Promise<void>;
@@ -78,35 +77,6 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     void refresh();
   }, []);
 
-  const login = async (email: string, password: string): Promise<void> => {
-    const response = await fetch('/api/auth/sign-in/email', {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ email, password })
-    });
-
-    if (!response.ok) {
-      const payload = await parseJson(response);
-      throw new Error(toErrorMessage(payload, `Request failed: ${response.status}`));
-    }
-
-    const payload = await parseJson<{ user?: { id: string | number; name: string; email: string } }>(response);
-
-    if (!payload.user) {
-      await refresh();
-      return;
-    }
-
-    setUser({
-      id: Number(payload.user.id),
-      name: payload.user.name,
-      email: payload.user.email
-    });
-  };
-
   const loginWithSSO = async (): Promise<void> => {
     const response = await fetch('/api/auth/sign-in/oauth2', {
       method: 'POST',
@@ -154,7 +124,6 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     () => ({
       user,
       loading,
-      login,
       loginWithSSO,
       logout,
       refresh

packages/web/src/pages/login/components/BrandPanel.tsx

@@ -1,4 +1,5 @@
 import { BrandMark } from '@/components/BrandMark';
+import { ThemeToggle } from '@/components/ThemeToggle';
 
 export function BrandPanel() {
   return (
@@ -26,6 +27,8 @@ export function BrandPanel() {
           A shared, unhurried view of your household — statements, categories, and the small
           patterns that add up over a year.
         </p>
+
+        <ThemeToggle className="mt-8" />
       </div>
 
       <div aria-hidden="true" />

packages/web/src/pages/login/components/LoginField.tsx

@@ -0,0 +1,49 @@
+import { LoginErrorMessage } from './LoginErrorMessage';
+import { SsoSignInButton } from './SsoSignInButton';
+
+type SignInPanelProps = {
+  loading: boolean;
+  error: string | null;
+  errorId: string;
+  onSsoLogin: () => void;
+};
+
+export function SignInPanel({ loading, error, errorId, onSsoLogin }: SignInPanelProps) {
+  return (
+    <section
+      aria-labelledby="login-form-heading"
+      className="theme-overlay-anim flex w-full items-center justify-center py-2 md:py-10"
+      style={{ animationDelay: '120ms' }}
+    >
+      <div className="relative w-full max-w-96">
+        <div className="theme-glass relative rounded-[28px] p-7 sm:p-9">
+          <p className="font-serif text-[11px] uppercase tracking-[0.24em] text-ink-2">
+            Single sign-on
+          </p>
+
+          <h2
+            id="login-form-heading"
+            className="mt-3 font-serif text-[26px] leading-[1.05] tracking-tight text-ink"
+          >
+            Sign <span className="italic text-accent">in</span>
+          </h2>
+
+          <div className="mt-5 flex flex-col gap-6">
+            <p className="text-[15px] leading-[1.65] text-ink-2">
+              finlens uses your Pior Labs account. You’ll sign in there, then land right back here.
+            </p>
+
+            <LoginErrorMessage id={errorId} error={error} />
+
+            <SsoSignInButton
+              loading={loading}
+              errorId={errorId}
+              hasError={Boolean(error)}
+              onClick={onSsoLogin}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}