diff --git a/src/App.tsx b/src/App.tsx index ad094032..f5227c26 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { BrowserRouter, Routes, Route } from "react-router-dom"; import { AuthProvider } from "@/hooks/useAuth"; import { LocationAutoDetectProvider } from "@/components/providers/LocationAutoDetectProvider"; +import { AuthModalProvider } from "@/contexts/AuthModalContext"; import { Footer } from "@/components/layout/Footer"; import Index from "./pages/Index"; import Parks from "./pages/Parks"; @@ -127,7 +128,9 @@ function AppContent() { const App = () => ( - + + + {import.meta.env.DEV && ( ('signin'); const handleSignOut = async () => { setLoggingOut(true); try { @@ -52,31 +49,20 @@ export function AuthButtons() { if (!user) { return ( <> - + - ); } diff --git a/src/contexts/AuthModalContext.tsx b/src/contexts/AuthModalContext.tsx new file mode 100644 index 00000000..ef5c7e0e --- /dev/null +++ b/src/contexts/AuthModalContext.tsx @@ -0,0 +1,59 @@ +import React, { createContext, useState, ReactNode } from 'react'; +import { useAuth } from '@/hooks/useAuth'; +import { useToast } from '@/hooks/use-toast'; +import { AuthModal } from '@/components/auth/AuthModal'; + +interface AuthModalContextType { + openAuthModal: (defaultTab?: 'signin' | 'signup') => void; + requireAuth: (callback: () => void, message?: string) => void; + authModalOpen: boolean; + setAuthModalOpen: (open: boolean) => void; +} + +export const AuthModalContext = createContext(undefined); + +interface AuthModalProviderProps { + children: ReactNode; +} + +export function AuthModalProvider({ children }: AuthModalProviderProps) { + const { user } = useAuth(); + const { toast } = useToast(); + const [authModalOpen, setAuthModalOpen] = useState(false); + const [authModalTab, setAuthModalTab] = useState<'signin' | 'signup'>('signin'); + + const openAuthModal = (defaultTab: 'signin' | 'signup' = 'signin') => { + setAuthModalTab(defaultTab); + setAuthModalOpen(true); + }; + + const requireAuth = (callback: () => void, message?: string) => { + if (user) { + callback(); + } else { + toast({ + title: "Authentication Required", + description: message || "Please sign in to continue", + }); + openAuthModal('signin'); + } + }; + + return ( + + {children} + + + ); +} diff --git a/src/hooks/useAuthModal.tsx b/src/hooks/useAuthModal.tsx new file mode 100644 index 00000000..640be3bf --- /dev/null +++ b/src/hooks/useAuthModal.tsx @@ -0,0 +1,10 @@ +import { useContext } from 'react'; +import { AuthModalContext } from '@/contexts/AuthModalContext'; + +export const useAuthModal = () => { + const context = useContext(AuthModalContext); + if (!context) { + throw new Error('useAuthModal must be used within AuthModalProvider'); + } + return context; +}; diff --git a/src/pages/DesignerRides.tsx b/src/pages/DesignerRides.tsx index a5e76836..dddecfbe 100644 --- a/src/pages/DesignerRides.tsx +++ b/src/pages/DesignerRides.tsx @@ -14,11 +14,13 @@ import { RideForm } from '@/components/admin/RideForm'; import { AutocompleteSearch } from '@/components/search/AutocompleteSearch'; import { useAuth } from '@/hooks/useAuth'; import { toast } from '@/hooks/use-toast'; +import { useAuthModal } from '@/hooks/useAuthModal'; export default function DesignerRides() { const { designerSlug } = useParams<{ designerSlug: string }>(); const navigate = useNavigate(); const { user } = useAuth(); + const { requireAuth } = useAuthModal(); const [designer, setDesigner] = useState(null); const [rides, setRides] = useState([]); const [loading, setLoading] = useState(true); @@ -100,8 +102,7 @@ export default function DesignerRides() { const handleCreateSubmit = async (data: any) => { try { - if (!user) { - navigate('/auth'); + if (!user || !designer) { return; } @@ -209,12 +210,12 @@ export default function DesignerRides() {

Rides by {designer.name}

- {user && ( - - )} +

Explore all rides designed by {designer.name} diff --git a/src/pages/Designers.tsx b/src/pages/Designers.tsx index cead25e6..670b864d 100644 --- a/src/pages/Designers.tsx +++ b/src/pages/Designers.tsx @@ -15,11 +15,13 @@ import { useAuth } from '@/hooks/useAuth'; import { useUserRole } from '@/hooks/useUserRole'; import { toast } from '@/hooks/use-toast'; import { submitCompanyCreation } from '@/lib/companyHelpers'; +import { useAuthModal } from '@/hooks/useAuthModal'; export default function Designers() { const navigate = useNavigate(); const { user } = useAuth(); const { isModerator } = useUserRole(); + const { requireAuth } = useAuthModal(); const [companies, setCompanies] = useState([]); const [loading, setLoading] = useState(true); const [searchQuery, setSearchQuery] = useState(''); @@ -28,10 +30,7 @@ export default function Designers() { const handleCreateSubmit = async (data: any) => { try { - if (!user) { - navigate('/auth'); - return; - } + if (!user) return; await submitCompanyCreation(data, 'designer', user.id); toast({ title: "Designer Submitted", @@ -122,13 +121,7 @@ export default function Designers() {

- {user && ( - - )} +

Explore all ride models manufactured by {manufacturer.name} diff --git a/src/pages/ManufacturerRides.tsx b/src/pages/ManufacturerRides.tsx index a1253f50..96608f31 100644 --- a/src/pages/ManufacturerRides.tsx +++ b/src/pages/ManufacturerRides.tsx @@ -14,11 +14,13 @@ import { RideForm } from '@/components/admin/RideForm'; import { AutocompleteSearch } from '@/components/search/AutocompleteSearch'; import { useAuth } from '@/hooks/useAuth'; import { toast } from '@/hooks/use-toast'; +import { useAuthModal } from '@/hooks/useAuthModal'; export default function ManufacturerRides() { const { manufacturerSlug } = useParams<{ manufacturerSlug: string }>(); const navigate = useNavigate(); const { user } = useAuth(); + const { requireAuth } = useAuthModal(); const [manufacturer, setManufacturer] = useState(null); const [rides, setRides] = useState([]); const [loading, setLoading] = useState(true); @@ -100,8 +102,7 @@ export default function ManufacturerRides() { const handleCreateSubmit = async (data: any) => { try { - if (!user) { - navigate('/auth'); + if (!user || !manufacturer) { return; } @@ -209,12 +210,12 @@ export default function ManufacturerRides() {

Rides by {manufacturer.name}

- {user && ( - - )} +

Explore all rides manufactured by {manufacturer.name} diff --git a/src/pages/Manufacturers.tsx b/src/pages/Manufacturers.tsx index a9462553..e74a920a 100644 --- a/src/pages/Manufacturers.tsx +++ b/src/pages/Manufacturers.tsx @@ -15,11 +15,13 @@ import { useAuth } from '@/hooks/useAuth'; import { useUserRole } from '@/hooks/useUserRole'; import { toast } from '@/hooks/use-toast'; import { submitCompanyCreation } from '@/lib/companyHelpers'; +import { useAuthModal } from '@/hooks/useAuthModal'; export default function Manufacturers() { const navigate = useNavigate(); const { user } = useAuth(); const { isModerator } = useUserRole(); + const { requireAuth } = useAuthModal(); const [companies, setCompanies] = useState([]); const [loading, setLoading] = useState(true); const [searchQuery, setSearchQuery] = useState(''); @@ -66,10 +68,7 @@ export default function Manufacturers() { const handleCreateSubmit = async (data: any) => { try { - if (!user) { - navigate('/auth'); - return; - } + if (!user) return; await submitCompanyCreation( data, @@ -136,13 +135,7 @@ export default function Manufacturers() {