gsadmin/ActiveDirectoryManager
1
0
Fork 0
mirror of https://github.com/freedbygrace/ActiveDirectoryManager.git synced 2026-07-26 11:59:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
alphaeusmote
2025-04-09 02:37:34 +00:00
parent b39ef9c5f6
commit efde82d7b6
4 changed files with 72 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.tsx
+53 -2
View File
@@ -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
+1 -1
View File
@@ -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 -88
View File
@@ -1,93 +1,6 @@
import { createRoot } from "react-dom/client";
import { QueryClientProvider } from "@tanstack/react-query";
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 App from "./App";
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
+17 -30
View File
@@ -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();
// Redirect if user is already logged in
useEffect(() => {
if (user) {
navigate('/');
}
}, [user, navigate]);
// If still checking authentication status, show nothing
if (isLoading) {
return null;
}
const auth = useAuth();
// 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>