feat: proper routing - landing at /, app at /app
This commit is contained in:
parent
15123e8aa8
commit
a10e9c9c6a
2 changed files with 101 additions and 13 deletions
|
|
@ -1,33 +1,105 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||||
import { AuthProvider, useAuth } from './contexts/AuthContext';
|
import { AuthProvider, useAuth } from './contexts/AuthContext';
|
||||||
import { MessagingProvider } from './contexts/MessagingContext';
|
import { MessagingProvider } from './contexts/MessagingContext';
|
||||||
import MainLayout from './mockup/MainLayout';
|
import MainLayout from './mockup/MainLayout';
|
||||||
|
import LandingPage from './mockup/pages/LandingPage';
|
||||||
|
import LoginPage from './mockup/pages/LoginPage';
|
||||||
|
import RegisterPage from './mockup/pages/RegisterPage';
|
||||||
|
import AboutPage from './mockup/pages/AboutPage';
|
||||||
|
import FeaturesPage from './mockup/pages/FeaturesPage';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
import './mockup/mockup.css';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Main application component
|
* Protected route - requires authentication
|
||||||
* AeThex Connect - Discord-style communication platform
|
|
||||||
*/
|
*/
|
||||||
function AppContent() {
|
function ProtectedRoute({ children }) {
|
||||||
const { user, loading } = useAuth();
|
const { isAuthenticated, loading } = useAuth();
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center h-screen bg-zinc-900">
|
<div className="loading-screen">
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-purple-500"></div>
|
<div className="loading-spinner"></div>
|
||||||
|
<span>Loading...</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return isAuthenticated ? children : <Navigate to="/login" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
return <MainLayout />;
|
/**
|
||||||
|
* Public route - redirects to app if logged in
|
||||||
|
*/
|
||||||
|
function PublicRoute({ children }) {
|
||||||
|
const { isAuthenticated, loading } = useAuth();
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="loading-screen">
|
||||||
|
<div className="loading-spinner"></div>
|
||||||
|
<span>Loading...</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return !isAuthenticated ? children : <Navigate to="/app" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Main app with routing
|
||||||
|
*/
|
||||||
|
function AppRoutes() {
|
||||||
|
const { login, register, logout } = useAuth();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Routes>
|
||||||
|
{/* Marketing pages - public */}
|
||||||
|
<Route path="/" element={<LandingPage />} />
|
||||||
|
<Route path="/features" element={<FeaturesPage />} />
|
||||||
|
<Route path="/about" element={<AboutPage />} />
|
||||||
|
|
||||||
|
{/* Auth pages */}
|
||||||
|
<Route path="/login" element={
|
||||||
|
<PublicRoute>
|
||||||
|
<LoginPage onLogin={login} />
|
||||||
|
</PublicRoute>
|
||||||
|
} />
|
||||||
|
<Route path="/register" element={
|
||||||
|
<PublicRoute>
|
||||||
|
<RegisterPage onRegister={register} />
|
||||||
|
</PublicRoute>
|
||||||
|
} />
|
||||||
|
|
||||||
|
{/* Connect App - protected */}
|
||||||
|
<Route path="/app" element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<MessagingProvider>
|
||||||
|
<MainLayout onLogout={logout} />
|
||||||
|
</MessagingProvider>
|
||||||
|
</ProtectedRoute>
|
||||||
|
} />
|
||||||
|
<Route path="/app/*" element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<MessagingProvider>
|
||||||
|
<MainLayout onLogout={logout} />
|
||||||
|
</MessagingProvider>
|
||||||
|
</ProtectedRoute>
|
||||||
|
} />
|
||||||
|
|
||||||
|
{/* Catch all - redirect to home */}
|
||||||
|
<Route path="*" element={<Navigate to="/" replace />} />
|
||||||
|
</Routes>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<AuthProvider>
|
<BrowserRouter>
|
||||||
<MessagingProvider>
|
<AuthProvider>
|
||||||
<AppContent />
|
<AppRoutes />
|
||||||
</MessagingProvider>
|
</AuthProvider>
|
||||||
</AuthProvider>
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -49,6 +49,21 @@ export function AuthProvider({ children }) {
|
||||||
return { success: true };
|
return { success: true };
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const register = async (email, password, metadata = {}) => {
|
||||||
|
const { data, error } = await supabase.auth.signUp({
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
options: {
|
||||||
|
data: metadata
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (error) {
|
||||||
|
return { success: false, error: error.message };
|
||||||
|
}
|
||||||
|
setUser(data.user);
|
||||||
|
return { success: true };
|
||||||
|
};
|
||||||
|
|
||||||
const logout = async () => {
|
const logout = async () => {
|
||||||
await supabase.auth.signOut();
|
await supabase.auth.signOut();
|
||||||
setUser(null);
|
setUser(null);
|
||||||
|
|
@ -62,6 +77,7 @@ export function AuthProvider({ children }) {
|
||||||
user,
|
user,
|
||||||
loading,
|
loading,
|
||||||
login,
|
login,
|
||||||
|
register,
|
||||||
logout,
|
logout,
|
||||||
updateUser,
|
updateUser,
|
||||||
isAuthenticated: !!user
|
isAuthenticated: !!user
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue