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:
@@ -73,7 +73,7 @@ function mergeItems(groups: { recipe_title: string; recipe_id?: string; items: S
|
|||||||
|
|
||||||
export function ShoppingPage() {
|
export function ShoppingPage() {
|
||||||
const qc = useQueryClient()
|
const qc = useQueryClient()
|
||||||
const { isAuthenticated } = useAuth()
|
const { isAuthenticated, isLoading: authLoading } = useAuth()
|
||||||
const [newItem, setNewItem] = useState('')
|
const [newItem, setNewItem] = useState('')
|
||||||
const [scope, setScope] = useState<'personal' | 'household'>('personal')
|
const [scope, setScope] = useState<'personal' | 'household'>('personal')
|
||||||
const [viewMode, setViewMode] = useState<'recipe' | 'merged'>('merged')
|
const [viewMode, setViewMode] = useState<'recipe' | 'merged'>('merged')
|
||||||
@@ -100,6 +100,7 @@ export function ShoppingPage() {
|
|||||||
const { data: groups = [], isLoading, refetch } = useQuery({
|
const { data: groups = [], isLoading, refetch } = useQuery({
|
||||||
queryKey: ['shopping', activeScope],
|
queryKey: ['shopping', activeScope],
|
||||||
queryFn: () => fetchShopping(activeScope),
|
queryFn: () => fetchShopping(activeScope),
|
||||||
|
enabled: isAuthenticated,
|
||||||
})
|
})
|
||||||
|
|
||||||
const mergedItems = useMemo(() => mergeItems(groups), [groups])
|
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 (
|
return (
|
||||||
<div className="p-4 space-y-4">
|
<div className="p-4 space-y-4">
|
||||||
{[1, 2, 3].map((i) => (
|
{[1, 2, 3].map((i) => (
|
||||||
|
|||||||
Reference in New Issue
Block a user