Refactor: Improve application structure and routing by reorganizing client-side code

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/90f95cc6-6d9a-47fe-b1c1-0b0806153542.jpg

client/src/App.tsx

@@ -1,4 +1,55 @@
-// This file is a placeholder - all the app logic is now in main.tsx
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Toaster } from "@/components/ui/toaster";
+import { Switch, Route, Redirect } from "wouter";
+import { AuthProvider } from "./hooks/use-auth";
+import { ThemeProvider } from "./hooks/use-theme";
+import { queryClient } from "./lib/queryClient";
+import ProtectedRoute from "./lib/protected-route";
+import NotFound from "@/pages/not-found";
+import AuthPage from "@/pages/auth-page";
+import DashboardPage from "@/pages/dashboard-page";
+import UsersPage from "@/pages/users-page";
+import GroupsPage from "@/pages/groups-page";
+import OUsPage from "@/pages/ous-page";
+import ComputersPage from "@/pages/computers-page";
+import DomainsPage from "@/pages/domains-page";
+import ApiTokensPage from "@/pages/api-tokens-page";
+import LdapConnectionsPage from "@/pages/ldap-connections-page";
+import LdapQueryBuilderPage from "@/pages/ldap-query-builder-page";
+import SettingsPage from "@/pages/settings-page";
+import UserManagementPage from "@/pages/user-management-page";
+import AuditLogsPage from "@/pages/audit-logs-page";
+
 export default function App() {
-  return null;
+  return (
+    <>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider defaultTheme="system" storageKey="ad-management-theme">
+          <AuthProvider>
+            <Switch>
+              <Route path="/auth">
+                <AuthPage />
+              </Route>
+              <ProtectedRoute path="/" component={DashboardPage} />
+              <ProtectedRoute path="/users" component={UsersPage} />
+              <ProtectedRoute path="/groups" component={GroupsPage} />
+              <ProtectedRoute path="/organizational-units" component={OUsPage} />
+              <ProtectedRoute path="/computers" component={ComputersPage} />
+              <ProtectedRoute path="/domains" component={DomainsPage} />
+              <ProtectedRoute path="/api-tokens" component={ApiTokensPage} />
+              <ProtectedRoute path="/ldap-connections" component={LdapConnectionsPage} />
+              <ProtectedRoute path="/ldap-query-builder" component={LdapQueryBuilderPage} />
+              <ProtectedRoute path="/audit-logs" component={AuditLogsPage} />
+              <ProtectedRoute path="/settings" component={SettingsPage} />
+              <ProtectedRoute path="/user-management" component={UserManagementPage} />
+              <Route>
+                <NotFound />
+              </Route>
+            </Switch>
+          </AuthProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+      <Toaster />
+    </>
+  );
 }

client/src/lib/protected-route.tsx

@@ -2,7 +2,7 @@ import { Redirect, Route } from "wouter";
 import { useAuth } from "@/hooks/use-auth";
 import { Loader2 } from "lucide-react";
 
-export function ProtectedRoute({
+export default function ProtectedRoute({
   path,
   component: Component,
 }: {

client/src/main.tsx

@@ -1,93 +1,6 @@
 import { createRoot } from "react-dom/client";
-import { QueryClientProvider } from "@tanstack/react-query";
+import App from "./App";
-import { Toaster } from "@/components/ui/toaster";
-import { Switch, Route, Redirect } from "wouter";
-import { Loader2 } from "lucide-react";
-import NotFound from "@/pages/not-found";
-import AuthPage from "@/pages/auth-page";
-import DashboardPage from "@/pages/dashboard-page";
-import UsersPage from "@/pages/users-page";
-import GroupsPage from "@/pages/groups-page";
-import OUsPage from "@/pages/ous-page";
-import ComputersPage from "@/pages/computers-page";
-import DomainsPage from "@/pages/domains-page";
-import ApiTokensPage from "@/pages/api-tokens-page";
-import LdapConnectionsPage from "@/pages/ldap-connections-page";
-import LdapQueryBuilderPage from "@/pages/ldap-query-builder-page";
-import SettingsPage from "@/pages/settings-page";
-import UserManagementPage from "@/pages/user-management-page";
-import AuditLogsPage from "@/pages/audit-logs-page";
 import "./index.css";
-import { AuthProvider, useAuth } from "./hooks/use-auth";
-import { ThemeProvider } from "./hooks/use-theme";
-import { queryClient } from "./lib/queryClient";
-
-// Create the App and use context appropriately
-function App() {
-  return (
-    <>
-      <QueryClientProvider client={queryClient}>
-        <ThemeProvider defaultTheme="system" storageKey="ad-management-theme">
-          <AuthProvider>
-            <AppContent />
-          </AuthProvider>
-        </ThemeProvider>
-      </QueryClientProvider>
-      <Toaster />
-    </>
-  );
-}
-
-// Protected route component that uses the useAuth hook
-function ProtectedRoute({ 
-  path, 
-  component: Component 
-}: { 
-  path: string; 
-  component: () => React.JSX.Element; 
-}) {
-  const { user } = useAuth();
-  
-  return (
-    <Route path={path}>
-      {user ? <Component /> : <Redirect to="/auth" />}
-    </Route>
-  );
-}
-
-// App content with routes that can safely use the useAuth hook
-function AppContent() {
-  const { isLoading } = useAuth();
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-      </div>
-    );
-  }
-
-  return (
-    <Switch>
-      <Route path="/auth">
-        <AuthPage />
-      </Route>
-      <ProtectedRoute path="/" component={DashboardPage} />
-      <ProtectedRoute path="/users" component={UsersPage} />
-      <ProtectedRoute path="/groups" component={GroupsPage} />
-      <ProtectedRoute path="/organizational-units" component={OUsPage} />
-      <ProtectedRoute path="/computers" component={ComputersPage} />
-      <ProtectedRoute path="/domains" component={DomainsPage} />
-      <ProtectedRoute path="/api-tokens" component={ApiTokensPage} />
-      <ProtectedRoute path="/ldap-connections" component={LdapConnectionsPage} />
-      <ProtectedRoute path="/ldap-query-builder" component={LdapQueryBuilderPage} />
-      <ProtectedRoute path="/audit-logs" component={AuditLogsPage} />
-      <ProtectedRoute path="/settings" component={SettingsPage} />
-      <ProtectedRoute path="/user-management" component={UserManagementPage} />
-      <Route component={NotFound} />
-    </Switch>
-  );
-}
 
 // Render the app
 createRoot(document.getElementById("root")!).render(<App />);

client/src/pages/auth-page.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { useLocation } from "wouter";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
@@ -53,19 +52,7 @@ type RegisterFormValues = z.infer<typeof registerSchema>;
 export default function AuthPage() {
   const [location, navigate] = useLocation();
   const { toast } = useToast();
-  const { user, isLoading, loginMutation, registerMutation } = useAuth();
+  const auth = useAuth();
-  
-  // Redirect if user is already logged in
-  useEffect(() => {
-    if (user) {
-      navigate('/');
-    }
-  }, [user, navigate]);
-
-  // If still checking authentication status, show nothing
-  if (isLoading) {
-    return null;
-  }
 
   // Login form
   const loginForm = useForm<LoginFormValues>({
@@ -94,14 +81,14 @@ export default function AuthPage() {
   // Handle login form submission
   const onLoginSubmit = (data: LoginFormValues) => {
     const { username, password } = data;
-    loginMutation.mutate({ username, password });
+    auth.loginMutation.mutate({ username, password });
   };
 
   // Handle register form submission
   const onRegisterSubmit = (data: RegisterFormValues) => {
     // Remove confirmPassword and acceptTerms which aren't part of the API request
     const { confirmPassword, acceptTerms, ...registerData } = data;
-    registerMutation.mutate(registerData);
+    auth.registerMutation.mutate(registerData);
   };
 
   return (
@@ -142,7 +129,7 @@ export default function AuthPage() {
                               <Input 
                                 placeholder="Enter your username" 
                                 {...field} 
-                                disabled={loginMutation.isPending}
+                                disabled={auth.loginMutation.isPending}
                               />
                             </FormControl>
                             <FormMessage />
@@ -161,7 +148,7 @@ export default function AuthPage() {
                                 type="password" 
                                 placeholder="Enter your password" 
                                 {...field} 
-                                disabled={loginMutation.isPending}
+                                disabled={auth.loginMutation.isPending}
                               />
                             </FormControl>
                             <FormMessage />
@@ -179,7 +166,7 @@ export default function AuthPage() {
                                 <Checkbox 
                                   checked={field.value} 
                                   onCheckedChange={field.onChange}
-                                  disabled={loginMutation.isPending}  
+                                  disabled={auth.loginMutation.isPending}  
                                 />
                               </FormControl>
                               <FormLabel className="text-sm font-normal">
@@ -189,7 +176,7 @@ export default function AuthPage() {
                           )}
                         />
 
-                        <Button variant="link" className="text-sm p-0 h-auto" disabled={loginMutation.isPending}>
+                        <Button variant="link" className="text-sm p-0 h-auto" disabled={auth.loginMutation.isPending}>
                           Forgot password?
                         </Button>
                       </div>
@@ -197,9 +184,9 @@ export default function AuthPage() {
                       <Button 
                         type="submit" 
                         className="w-full" 
-                        disabled={loginMutation.isPending}
+                        disabled={auth.loginMutation.isPending}
                       >
-                        {loginMutation.isPending ? "Logging in..." : "Log in"}
+                        {auth.loginMutation.isPending ? "Logging in..." : "Log in"}
                       </Button>
                     </form>
                   </Form>
@@ -228,7 +215,7 @@ export default function AuthPage() {
                               <Input 
                                 placeholder="Choose a username" 
                                 {...field} 
-                                disabled={registerMutation.isPending}
+                                disabled={auth.registerMutation.isPending}
                               />
                             </FormControl>
                             <FormMessage />
@@ -247,7 +234,7 @@ export default function AuthPage() {
                                 placeholder="Enter your full name" 
                                 {...field} 
                                 value={field.value || ""}
-                                disabled={registerMutation.isPending}
+                                disabled={auth.registerMutation.isPending}
                               />
                             </FormControl>
                             <FormMessage />
@@ -267,7 +254,7 @@ export default function AuthPage() {
                                 placeholder="Enter your email" 
                                 {...field} 
                                 value={field.value || ""}
-                                disabled={registerMutation.isPending}
+                                disabled={auth.registerMutation.isPending}
                               />
                             </FormControl>
                             <FormMessage />
@@ -286,7 +273,7 @@ export default function AuthPage() {
                                 type="password" 
                                 placeholder="Create a password" 
                                 {...field} 
-                                disabled={registerMutation.isPending}
+                                disabled={auth.registerMutation.isPending}
                               />
                             </FormControl>
                             <FormMessage />
@@ -305,7 +292,7 @@ export default function AuthPage() {
                                 type="password" 
                                 placeholder="Confirm your password" 
                                 {...field} 
-                                disabled={registerMutation.isPending}
+                                disabled={auth.registerMutation.isPending}
                               />
                             </FormControl>
                             <FormMessage />
@@ -322,7 +309,7 @@ export default function AuthPage() {
                               <Checkbox 
                                 checked={field.value} 
                                 onCheckedChange={field.onChange} 
-                                disabled={registerMutation.isPending}
+                                disabled={auth.registerMutation.isPending}
                               />
                             </FormControl>
                             <div className="space-y-1 leading-none">
@@ -338,9 +325,9 @@ export default function AuthPage() {
                       <Button 
                         type="submit" 
                         className="w-full" 
-                        disabled={registerMutation.isPending}
+                        disabled={auth.registerMutation.isPending}
                       >
-                        {registerMutation.isPending ? "Creating account..." : "Create account"}
+                        {auth.registerMutation.isPending ? "Creating account..." : "Create account"}
                       </Button>
                     </form>
                   </Form>