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:
45
src/client/components/AuthPromptModal.tsx
Normal file
45
src/client/components/AuthPromptModal.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user