feat: add analytics consent page and auth flow integration

apps/web/src/App.tsx

@@ -22,6 +22,9 @@ const LoginPage = lazy(() => import("./pages/login-page").then((m) => ({ default
 const PrivacyPolicyPage = lazy(() =>
   import("./pages/privacy-policy-page").then((m) => ({ default: m.PrivacyPolicyPage })),
 );
+const AnalyticsConsentPage = lazy(() =>
+  import("./pages/analytics-consent-page").then((m) => ({ default: m.AnalyticsConsentPage })),
+);
 const ToolPage = lazy(() => import("./pages/tool-page").then((m) => ({ default: m.ToolPage })));
 
 class ErrorBoundary extends Component<
@@ -69,14 +72,22 @@ class ErrorBoundary extends Component<
 }
 
 function AuthGuard({ children }: { children: React.ReactNode }) {
-  const { loading, authEnabled, isAuthenticated, mustChangePassword } = useAuth();
+  const {
+    loading,
+    authEnabled,
+    isAuthenticated,
+    mustChangePassword,
+    analyticsEnabled,
+    analyticsConsentShownAt,
+  } = useAuth();
   const location = useLocation();
 
   // Don't guard the login or change-password pages
   if (
     location.pathname === "/login" ||
     location.pathname === "/change-password" ||
-    location.pathname === "/privacy"
+    location.pathname === "/privacy" ||
+    location.pathname === "/analytics-consent"
   ) {
     return <>{children}</>;
   }
@@ -101,6 +112,10 @@ function AuthGuard({ children }: { children: React.ReactNode }) {
     return <Navigate to="/change-password" replace />;
   }
 
+  if (authEnabled && analyticsEnabled === null && analyticsConsentShownAt === null) {
+    return <Navigate to="/analytics-consent" replace />;
+  }
+
   return <>{children}</>;
 }
 
@@ -137,6 +152,7 @@ export function App() {
                 <Route path="/saturation" element={<Navigate to="/adjust-colors" replace />} />
                 <Route path="/color-channels" element={<Navigate to="/adjust-colors" replace />} />
                 <Route path="/color-effects" element={<Navigate to="/adjust-colors" replace />} />
+                <Route path="/analytics-consent" element={<AnalyticsConsentPage />} />
                 <Route path="/:toolId" element={<ToolPage />} />
                 <Route path="/" element={<HomePage />} />
               </Routes>

apps/web/src/hooks/use-auth.ts

@@ -9,6 +9,9 @@ interface AuthState {
   mustChangePassword: boolean;
   role: string | null;
   permissions: string[];
+  analyticsEnabled: boolean | null;
+  analyticsConsentShownAt: number | null;
+  analyticsConsentRemindAt: number | null;
 }
 
 const USER_PERMISSIONS = [
@@ -27,6 +30,9 @@ export function useAuth() {
     mustChangePassword: false,
     role: null,
     permissions: [],
+    analyticsEnabled: null,
+    analyticsConsentShownAt: null,
+    analyticsConsentRemindAt: null,
   });
 
   useEffect(() => {
@@ -46,6 +52,9 @@ export function useAuth() {
               mustChangePassword: false,
               role: "user",
               permissions: USER_PERMISSIONS,
+              analyticsEnabled: null,
+              analyticsConsentShownAt: null,
+              analyticsConsentRemindAt: null,
             });
           return;
         }
@@ -60,6 +69,9 @@ export function useAuth() {
               mustChangePassword: false,
               role: null,
               permissions: [],
+              analyticsEnabled: null,
+              analyticsConsentShownAt: null,
+              analyticsConsentRemindAt: null,
             });
           return;
         }
@@ -79,6 +91,9 @@ export function useAuth() {
               mustChangePassword: mustChange,
               role: session.user?.role ?? null,
               permissions: session.user?.permissions ?? [],
+              analyticsEnabled: session.user?.analyticsEnabled ?? null,
+              analyticsConsentShownAt: session.user?.analyticsConsentShownAt ?? null,
+              analyticsConsentRemindAt: session.user?.analyticsConsentRemindAt ?? null,
             });
         } else {
           localStorage.removeItem("ashim-token");
@@ -90,6 +105,9 @@ export function useAuth() {
               mustChangePassword: false,
               role: null,
               permissions: [],
+              analyticsEnabled: null,
+              analyticsConsentShownAt: null,
+              analyticsConsentRemindAt: null,
             });
         }
       } catch {

apps/web/src/pages/analytics-consent-page.tsx

@@ -0,0 +1,107 @@
+import { en } from "@ashim/shared";
+import { Shield } from "lucide-react";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAnalyticsStore } from "@/stores/analytics-store";
+
+const t = en.analytics;
+
+export function AnalyticsConsentPage() {
+  const navigate = useNavigate();
+  const { config, configLoaded, fetchConfig, acceptAnalytics, remindLater } = useAnalyticsStore();
+
+  useEffect(() => {
+    fetchConfig();
+  }, [fetchConfig]);
+
+  useEffect(() => {
+    if (configLoaded && !config?.enabled) {
+      navigate("/", { replace: true });
+    }
+  }, [configLoaded, config, navigate]);
+
+  if (!configLoaded) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background">
+        <div className="h-8 w-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  const handleAccept = async () => {
+    await acceptAnalytics();
+    navigate("/", { replace: true });
+  };
+
+  const handleDecline = async () => {
+    await remindLater();
+    navigate("/", { replace: true });
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-6">
+      <div className="w-full max-w-lg space-y-6 rounded-2xl border border-border bg-card p-8 shadow-lg">
+        <div className="flex justify-center">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+            <Shield className="h-6 w-6 text-primary" />
+          </div>
+        </div>
+
+        <div className="space-y-2 text-center">
+          <h1 className="text-xl font-semibold text-foreground">{t.consentTitle}</h1>
+          <p className="text-sm text-muted-foreground">{t.consentDescription}</p>
+        </div>
+
+        <p className="text-center text-sm font-medium text-foreground">{t.consentPrivacy}</p>
+
+        <div className="grid grid-cols-2 gap-6 text-sm">
+          <div>
+            <p className="mb-2 font-medium text-foreground">{t.whatShared}</p>
+            <ul className="space-y-1 text-muted-foreground">
+              {t.whatSharedItems.map((item) => (
+                <li key={item} className="flex items-start gap-1.5">
+                  <span className="mt-1 text-xs">·</span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <p className="mb-2 font-medium text-foreground">{t.whatNever}</p>
+            <ul className="space-y-1 text-muted-foreground">
+              {t.whatNeverItems.map((item) => (
+                <li key={item} className="flex items-start gap-1.5">
+                  <span className="mt-1 text-xs">·</span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <p className="text-center text-xs text-muted-foreground">
+          {t.consentProviders}
+          <br />
+          {t.consentChangeable}
+        </p>
+
+        <div className="flex gap-3">
+          <button
+            type="button"
+            onClick={handleAccept}
+            className="flex-1 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          >
+            {t.acceptButton}
+          </button>
+          <button
+            type="button"
+            onClick={handleDecline}
+            className="flex-1 rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-muted"
+          >
+            {t.declineButton}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}