feat(24-02): add auth prompt state, modal, usePublicSetup hook, guard onboarding

- Extend uiStore with showAuthPrompt/openAuthPrompt/closeAuthPrompt state
- Create AuthPromptModal component with sign in/sign up CTAs pointing to /login
- Add usePublicSetup hook to useSetups for anonymous setup viewing via public API
- Rework useOnboardingComplete to accept enabled param (guards auth-gated call)
This commit is contained in:
2026-04-10 10:06:59 +02:00
parent afab8175f9
commit cd85715d05
4 changed files with 81 additions and 2 deletions

View File

@@ -0,0 +1,45 @@
import { Link } from "@tanstack/react-router";
import { useUIStore } from "../stores/uiStore";
export function AuthPromptModal() {
const showAuthPrompt = useUIStore((s) => s.showAuthPrompt);
const closeAuthPrompt = useUIStore((s) => s.closeAuthPrompt);
if (!showAuthPrompt) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div
className="absolute inset-0 bg-black/30"
onClick={closeAuthPrompt}
onKeyDown={(e) => {
if (e.key === "Escape") closeAuthPrompt();
}}
/>
<div className="relative bg-white rounded-xl shadow-lg p-6 max-w-sm mx-4 w-full">
<h3 className="text-lg font-semibold text-gray-900 mb-2">
Join GearBox
</h3>
<p className="text-sm text-gray-600 mb-6">
To manage your own collection, sign in or sign up.
</p>
<div className="flex flex-col gap-3">
<Link
to="/login"
className="w-full text-center px-4 py-2.5 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
onClick={closeAuthPrompt}
>
Sign in
</Link>
<Link
to="/login"
className="w-full text-center px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
onClick={closeAuthPrompt}
>
Create account
</Link>
</div>
</div>
</div>
);
}