added a beta access feature

web/src/components/BetaGate.tsx

@@ -0,0 +1,37 @@
+import { type ReactNode, useEffect, useState } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+
+const STORAGE_KEY = "skymoney_beta_access";
+
+type Props = {
+  children: ReactNode;
+};
+
+export function BetaGate({ children }: Props) {
+  const location = useLocation();
+  const [hasAccess, setHasAccess] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    setHasAccess(localStorage.getItem(STORAGE_KEY) === "true");
+  }, []);
+
+  if (location.pathname === "/beta") {
+    return <>{children}</>;
+  }
+
+  if (hasAccess === null) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center text-sm muted">
+        Checking access…
+      </div>
+    );
+  }
+
+  if (!hasAccess) {
+    return <Navigate to="/beta" replace />;
+  }
+
+  return <>{children}</>;
+}
+
+export const betaAccessStorageKey = STORAGE_KEY;

web/src/main.tsx

@@ -10,6 +10,7 @@ import {
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ToastProvider } from "./components/Toast";
 import { RequireAuth } from "./components/RequireAuth";
+import { BetaGate } from "./components/BetaGate";
 import App from "./App";
 import "./styles.css";
 
@@ -52,10 +53,20 @@ const HealthPage = lazy(() => import("./pages/HealthPage"));
 const OnboardingPage = lazy(() => import("./pages/OnboardingPage"));
 const LoginPage = lazy(() => import("./pages/LoginPage"));
 const RegisterPage = lazy(() => import("./pages/RegisterPage"));
+const BetaAccessPage = lazy(() => import("./pages/BetaAccessPage"));
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route element={<App />}>
+    <>
+      <Route path="/beta" element={<BetaAccessPage />} />
+
+      <Route
+        element={
+          <BetaGate>
+            <App />
+          </BetaGate>
+        }
+      >
         {/* Public */}
         <Route path="/login" element={<LoginPage />} />
         <Route path="/register" element={<RegisterPage />} />
@@ -163,6 +174,7 @@ const router = createBrowserRouter(
         {/* Fallback */}
         <Route path="*" element={<Navigate to="/" replace />} />
       </Route>
+    </>
   )
 );
 

web/src/pages/BetaAccessPage.tsx

@@ -0,0 +1,96 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { betaAccessStorageKey } from "../components/BetaGate";
+
+const ACCESS_CODE = "jodygavemeaccess123";
+
+export default function BetaAccessPage() {
+  const navigate = useNavigate();
+  const [code, setCode] = useState("");
+  const [touched, setTouched] = useState(false);
+
+  const isValid = useMemo(() => code.trim() === ACCESS_CODE, [code]);
+  const isUnlocked = useMemo(
+    () => localStorage.getItem(betaAccessStorageKey) === "true",
+    []
+  );
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    setTouched(true);
+    if (!isValid) return;
+    localStorage.setItem(betaAccessStorageKey, "true");
+    navigate("/login", { replace: true });
+  };
+
+  return (
+    <div className="min-h-screen bg-[--color-bg] flex items-center justify-center px-4 py-10">
+      <div className="w-full max-w-xl card p-8 sm:p-10">
+        <div className="space-y-3">
+          <div className="text-xs uppercase tracking-[0.2em] muted">
+            Private beta
+          </div>
+          <h1 className="text-3xl sm:text-4xl font-semibold">
+            Welcome to SkyMoney
+          </h1>
+          <p className="muted">
+            This build is private. If you’ve been given access, enter your code
+            below. If not, reach out to{" "}
+            <a
+              href="https://jodyholt.com"
+              target="_blank"
+              rel="noreferrer"
+              className="text-[--color-accent] font-medium hover:underline"
+            >
+              Jody
+            </a>{" "}
+            for access.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+          <label className="block text-sm font-medium">
+            Access code
+            <div className="mt-2">
+              <input
+                type="text"
+                className="input w-full"
+                value={code}
+                onChange={(event) => {
+                  setTouched(true);
+                  setCode(event.target.value);
+                }}
+                placeholder="Enter your code"
+                autoComplete="off"
+              />
+            </div>
+          </label>
+
+          {touched && code.length > 0 && !isValid && (
+            <div className="text-sm text-red-500">
+              That code doesn’t match. Please try again.
+            </div>
+          )}
+
+          <button
+            type="submit"
+            className="btn primary w-full"
+            disabled={!isValid}
+          >
+            Continue
+          </button>
+
+          {isUnlocked && (
+            <button
+              type="button"
+              className="btn w-full"
+              onClick={() => navigate("/login")}
+            >
+              I already have access
+            </button>
+          )}
+        </form>
+      </div>
+    </div>
+  );
+}