feat: shopping list requires login

- Unauthenticated users see login prompt instead of shared list
- Prevents Tante Ursula from seeing Luna's Torten-Zutaten
- Shopping query only runs when authenticated
- Friendly CTA: 'Melde dich an um deine eigene Einkaufsliste zu nutzen'
This commit is contained in:
clawd
2026-02-18 18:14:59 +00:00
parent c5774e8c8d
commit ec02ffddae

View File

@@ -73,7 +73,7 @@ function mergeItems(groups: { recipe_title: string; recipe_id?: string; items: S
export function ShoppingPage() {
const qc = useQueryClient()
const { isAuthenticated } = useAuth()
const { isAuthenticated, isLoading: authLoading } = useAuth()
const [newItem, setNewItem] = useState('')
const [scope, setScope] = useState<'personal' | 'household'>('personal')
const [viewMode, setViewMode] = useState<'recipe' | 'merged'>('merged')
@@ -100,6 +100,7 @@ export function ShoppingPage() {
const { data: groups = [], isLoading, refetch } = useQuery({
queryKey: ['shopping', activeScope],
queryFn: () => fetchShopping(activeScope),
enabled: isAuthenticated,
})
const mergedItems = useMemo(() => mergeItems(groups), [groups])
@@ -193,7 +194,29 @@ export function ShoppingPage() {
}
}
if (isLoading) {
if (!authLoading && !isAuthenticated) {
return (
<div className="min-h-screen flex flex-col items-center justify-center px-4">
<div className="text-center">
<div className="text-6xl mb-4">🛒</div>
<h2 className="font-display text-2xl text-espresso mb-2">Einkaufsliste</h2>
<p className="text-warm-grey mb-6">
Melde dich an, um deine eigene Einkaufsliste zu nutzen und sie mit deinem Haushalt zu teilen.
</p>
<div className="space-y-3 w-full max-w-sm mx-auto">
<a href="/login" className="block w-full bg-primary text-white rounded-xl py-3 font-medium min-h-[44px] text-center">
Anmelden
</a>
<a href="/register" className="block w-full border border-sand text-espresso rounded-xl py-3 font-medium min-h-[44px] text-center">
Registrieren
</a>
</div>
</div>
</div>
)
}
if (isLoading || authLoading) {
return (
<div className="p-4 space-y-4">
{[1, 2, 3].map((i) => (