diff --git a/client/src/App.tsx b/client/src/App.tsx index 164f567..f162980 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -13,6 +13,7 @@ import ApiTokensPage from "@/pages/api-tokens"; import UsersRolesPage from "@/pages/users-roles"; import ProvidersPage from "@/pages/providers"; import SettingsPage from "@/pages/settings"; +import OrganizationsPage from "@/pages/organizations"; import { AuthProvider } from "@/hooks/use-auth"; import { ProtectedRoute } from "@/lib/protected-route"; import { ThemeProvider } from "@/hooks/use-theme"; @@ -23,6 +24,7 @@ function Router() { + diff --git a/client/src/components/shared/public-ip-card.tsx b/client/src/components/shared/public-ip-card.tsx index 77018f0..21273fa 100644 --- a/client/src/components/shared/public-ip-card.tsx +++ b/client/src/components/shared/public-ip-card.tsx @@ -12,6 +12,16 @@ export function PublicIpCard() { const [loading, setLoading] = useState(true); const [error, setError] = useState(false); + // Function to validate if a string is a valid IPv6 address + const isValidIPv6 = (ip: string | null): boolean => { + if (!ip) return false; + + // Basic IPv6 format check using regex + const ipv6Regex = /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/; + + return ipv6Regex.test(ip); + }; + useEffect(() => { const fetchPublicIp = async () => { try { @@ -28,7 +38,15 @@ export function PublicIpCard() { .catch(() => ({ ip: null })); setIpv4(ipv4Response.ip); - setIpv6(ipv6Response.ip); + + // Validate that the IPv6 response is actually an IPv6 address + const ipv6Address = ipv6Response.ip; + if (isValidIPv6(ipv6Address)) { + setIpv6(ipv6Address); + } else { + setIpv6(null); // Not a valid IPv6 address + } + setError(false); } catch (err) { console.error('Error fetching public IP:', err); @@ -91,7 +109,7 @@ export function PublicIpCard() { )}
- {loading ? 'Loading...' : error ? 'Error fetching IP' : ipv4 || 'N/A'} + {loading ? 'Loading...' : error ? 'Error fetching IP' : ipv4 || 'Not Available'}
@@ -112,7 +130,7 @@ export function PublicIpCard() { )}
- {loading ? 'Loading...' : error ? 'Error fetching IP' : ipv6 || 'N/A'} + {loading ? 'Loading...' : error ? 'Error fetching IP' : ipv6 || 'Not Available'}
diff --git a/client/src/pages/organizations.tsx b/client/src/pages/organizations.tsx new file mode 100644 index 0000000..b5f0605 --- /dev/null +++ b/client/src/pages/organizations.tsx @@ -0,0 +1,220 @@ +import { useState } from 'react'; +import { useQuery } from '@tanstack/react-query'; +import { MainLayout } from '@/components/layouts/main-layout'; +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Label } from '@/components/ui/label'; +import { Input } from '@/components/ui/input'; +import { Checkbox } from '@/components/ui/checkbox'; +import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; +import { Organization } from '@shared/schema'; +import { useOrganization } from '@/context/organization-context'; +import { useToast } from '@/hooks/use-toast'; +import { useAuth } from '@/hooks/use-auth'; +import { Users, Plus, Edit, Trash2, Building } from 'lucide-react'; +import { apiRequest, queryClient } from '@/lib/queryClient'; +import { cn } from '@/lib/utils'; + +export default function OrganizationsPage() { + const { user } = useAuth(); + const { organizations, currentOrganization, setCurrentOrganization, createOrganizationMutation } = useOrganization(); + const { toast } = useToast(); + const [newOrgName, setNewOrgName] = useState(''); + const [newOrgActive, setNewOrgActive] = useState(true); + const [isDialogOpen, setIsDialogOpen] = useState(false); + + const isAdmin = user?.role === 'admin'; + + const handleCreateOrganization = async (e: React.FormEvent) => { + e.preventDefault(); + if (!newOrgName.trim()) { + toast({ + title: 'Error', + description: 'Organization name cannot be empty', + variant: 'destructive', + }); + return; + } + + try { + await createOrganizationMutation.mutateAsync({ + name: newOrgName, + isActive: newOrgActive, + }); + + setNewOrgName(''); + setNewOrgActive(true); + setIsDialogOpen(false); + + toast({ + title: 'Success', + description: 'Organization created successfully', + }); + } catch (error) { + console.error('Error creating organization:', error); + toast({ + title: 'Error', + description: 'Failed to create organization', + variant: 'destructive', + }); + } + }; + + return ( + +
+

Organizations

+ {isAdmin && ( + + + + + + + Create New Organization + + Add a new organization to your account. + + +
+
+
+ + setNewOrgName(e.target.value)} + placeholder="Enter organization name" + required + /> +
+
+ setNewOrgActive(checked as boolean)} + /> + +
+
+ + + +
+
+
+ )} +
+ +
+ {organizations.map((org) => ( + setCurrentOrganization(org)} + > + +
+
+
+ +
+
+ {org.name} + + {org.isActive ? 'Active' : 'Inactive'} + +
+
+ {currentOrganization?.id === org.id && ( +
+ +
+ )} +
+
+ +

+ Created on {new Date(org.createdAt).toLocaleDateString()} +

+
+ + + + {isAdmin && ( +
+ + +
+ )} +
+
+ ))} +
+ + {organizations.length === 0 && ( + +
+ +
+

No Organizations

+

+ You don't have any organizations yet. Create one to get started. +

+
+ {isAdmin && ( + + )} +
+
+ )} +
+ ); +} \ No newline at end of file