Changes

2026-01-06 14:46:23 +00:00
parent bebc3a2029
commit 0104839c11
25 changed files with 2955 additions and 79 deletions
@@ -0,0 +1,20 @@
+import { Outlet } from "react-router-dom";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/navigation/AppSidebar";
+import { TopBar } from "@/components/navigation/TopBar";
+
+export default function AuthenticatedLayout() {
+  return (
+    <SidebarProvider>
+      <div className="min-h-screen flex w-full bg-background">
+        <AppSidebar />
+        <div className="flex-1 flex flex-col min-w-0">
+          <TopBar />
+          <main className="flex-1 overflow-auto">
+            <Outlet />
+          </main>
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}
@@ -0,0 +1,39 @@
+import { Shield } from "lucide-react";
+import { Outlet, Link } from "react-router-dom";
+
+export default function PublicLayout() {
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      {/* Subtle gradient background */}
+      <div className="fixed inset-0 bg-gradient-to-br from-background via-background to-secondary/30 pointer-events-none" />
+      
+      {/* Header */}
+      <header className="relative z-10 w-full py-6 px-4">
+        <div className="max-w-md mx-auto">
+          <Link to="/" className="flex items-center gap-2 justify-center">
+            <div className="w-9 h-9 rounded-lg bg-primary flex items-center justify-center">
+              <Shield className="w-5 h-5 text-primary-foreground" />
+            </div>
+            <span className="text-xl font-semibold text-foreground tracking-tight">Authy2</span>
+          </Link>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="relative z-10 flex-1 flex items-center justify-center px-4 py-8">
+        <div className="w-full max-w-md animate-fade-in">
+          <Outlet />
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="relative z-10 py-6 px-4">
+        <div className="max-w-md mx-auto text-center">
+          <p className="text-sm text-muted-foreground">
+            © {new Date().getFullYear()} Authy2. Secure identity management.
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+}
@@ -0,0 +1,176 @@
+import { useLocation } from "react-router-dom";
+import {
+  User,
+  Shield,
+  Link2,
+  Activity,
+  Building2,
+  Users,
+  Settings,
+  FileText,
+  Key,
+} from "lucide-react";
+import { NavLink } from "@/components/NavLink";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarHeader,
+  SidebarFooter,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+const userNavItems = [
+  { title: "Profile", url: "/profile", icon: User },
+  { title: "Security", url: "/security", icon: Shield },
+  { title: "Linked Accounts", url: "/linked-accounts", icon: Link2 },
+  { title: "Activity", url: "/activity", icon: Activity },
+];
+
+const orgNavItems = [
+  { title: "Overview", url: "/org", icon: Building2 },
+  { title: "Members", url: "/org/members", icon: Users },
+  { title: "Policies", url: "/org/policies", icon: Settings },
+  { title: "Audit Log", url: "/org/audit", icon: FileText },
+];
+
+const adminNavItems = [
+  { title: "OIDC Clients", url: "/org/clients", icon: Key },
+];
+
+export function AppSidebar() {
+  const { state } = useSidebar();
+  const collapsed = state === "collapsed";
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+  const isOrgActive = orgNavItems.some((item) => isActive(item.url)) || adminNavItems.some((item) => isActive(item.url));
+  const isUserActive = userNavItems.some((item) => isActive(item.url));
+
+  return (
+    <Sidebar
+      className={cn(
+        "border-r border-sidebar-border bg-sidebar transition-all duration-300",
+        collapsed ? "w-16" : "w-64"
+      )}
+      collapsible="icon"
+    >
+      {/* Logo */}
+      <SidebarHeader className="p-4 border-b border-sidebar-border">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-sidebar-primary flex items-center justify-center flex-shrink-0">
+            <Shield className="w-4 h-4 text-sidebar-primary-foreground" />
+          </div>
+          {!collapsed && (
+            <span className="text-lg font-semibold text-sidebar-foreground tracking-tight">
+              Authy2
+            </span>
+          )}
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent className="py-4">
+        {/* User Section */}
+        <SidebarGroup>
+          <SidebarGroupLabel className="px-4 text-xs font-medium text-sidebar-muted uppercase tracking-wider">
+            {!collapsed && "Account"}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {userNavItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      end
+                      className={cn(
+                        "flex items-center gap-3 px-4 py-2.5 text-sm text-sidebar-foreground rounded-lg mx-2 transition-colors",
+                        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                      )}
+                      activeClassName="bg-sidebar-accent text-sidebar-primary font-medium"
+                    >
+                      <item.icon className="w-4 h-4 flex-shrink-0" />
+                      {!collapsed && <span>{item.title}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Organization Section */}
+        <SidebarGroup className="mt-4">
+          <SidebarGroupLabel className="px-4 text-xs font-medium text-sidebar-muted uppercase tracking-wider">
+            {!collapsed && "Organization"}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {orgNavItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      end
+                      className={cn(
+                        "flex items-center gap-3 px-4 py-2.5 text-sm text-sidebar-foreground rounded-lg mx-2 transition-colors",
+                        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                      )}
+                      activeClassName="bg-sidebar-accent text-sidebar-primary font-medium"
+                    >
+                      <item.icon className="w-4 h-4 flex-shrink-0" />
+                      {!collapsed && <span>{item.title}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Admin Section */}
+        <SidebarGroup className="mt-4">
+          <SidebarGroupLabel className="px-4 text-xs font-medium text-sidebar-muted uppercase tracking-wider">
+            {!collapsed && "Admin"}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {adminNavItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      end
+                      className={cn(
+                        "flex items-center gap-3 px-4 py-2.5 text-sm text-sidebar-foreground rounded-lg mx-2 transition-colors",
+                        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                      )}
+                      activeClassName="bg-sidebar-accent text-sidebar-primary font-medium"
+                    >
+                      <item.icon className="w-4 h-4 flex-shrink-0" />
+                      {!collapsed && <span>{item.title}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="p-4 border-t border-sidebar-border">
+        {!collapsed && (
+          <div className="text-xs text-sidebar-muted">
+            v1.0.0 • Self-hosted
+          </div>
+        )}
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Menu, ChevronDown, LogOut, User, Shield, Building2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+// Mock user data - will be replaced with real auth context
+const mockUser = {
+  name: "John Doe",
+  email: "john@example.com",
+  avatar: null,
+  initials: "JD",
+};
+
+// Mock organization data
+const mockOrgs = [
+  { id: "1", name: "Acme Corp", role: "admin" },
+  { id: "2", name: "Beta Inc", role: "member" },
+];
+
+export function TopBar() {
+  const navigate = useNavigate();
+  const [currentOrg, setCurrentOrg] = useState(mockOrgs[0]);
+
+  const handleLogout = () => {
+    // Will be replaced with actual logout logic
+    navigate("/login");
+  };
+
+  return (
+    <header className="h-14 border-b border-border bg-card flex items-center justify-between px-4 flex-shrink-0">
+      {/* Left side - Sidebar toggle */}
+      <div className="flex items-center gap-3">
+        <SidebarTrigger className="text-muted-foreground hover:text-foreground">
+          <Menu className="w-5 h-5" />
+        </SidebarTrigger>
+      </div>
+
+      {/* Right side - Org selector + User menu */}
+      <div className="flex items-center gap-3">
+        {/* Organization Selector */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="flex items-center gap-2 h-9 px-3">
+              <div className="w-6 h-6 rounded bg-primary/10 flex items-center justify-center">
+                <Building2 className="w-3.5 h-3.5 text-primary" />
+              </div>
+              <span className="text-sm font-medium hidden sm:inline">{currentOrg.name}</span>
+              <ChevronDown className="w-4 h-4 text-muted-foreground" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel className="text-xs text-muted-foreground uppercase tracking-wider">
+              Switch Organization
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {mockOrgs.map((org) => (
+              <DropdownMenuItem
+                key={org.id}
+                onClick={() => setCurrentOrg(org)}
+                className="flex items-center justify-between"
+              >
+                <div className="flex items-center gap-2">
+                  <Building2 className="w-4 h-4 text-muted-foreground" />
+                  <span>{org.name}</span>
+                </div>
+                {org.role === "admin" && (
+                  <span className="text-xs bg-accent/10 text-accent px-1.5 py-0.5 rounded">
+                    Admin
+                  </span>
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* User Menu */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="flex items-center gap-2 h-9 px-2">
+              <Avatar className="w-7 h-7">
+                <AvatarImage src={mockUser.avatar || undefined} />
+                <AvatarFallback className="bg-primary text-primary-foreground text-xs">
+                  {mockUser.initials}
+                </AvatarFallback>
+              </Avatar>
+              <ChevronDown className="w-4 h-4 text-muted-foreground hidden sm:block" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel>
+              <div className="flex flex-col">
+                <span className="font-medium">{mockUser.name}</span>
+                <span className="text-xs text-muted-foreground font-normal">
+                  {mockUser.email}
+                </span>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => navigate("/profile")}>
+              <User className="w-4 h-4 mr-2" />
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => navigate("/security")}>
+              <Shield className="w-4 h-4 mr-2" />
+              Security
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={handleLogout} className="text-destructive focus:text-destructive">
+              <LogOut className="w-4 h-4 mr-2" />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}