Changes
This commit is contained in:
gpt-engineer-app[bot]
+61
-3
@@ -3,8 +3,36 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import Index from "./pages/Index";
|
||||
import NotFound from "./pages/NotFound";
|
||||
|
||||
// Layouts
|
||||
import PublicLayout from "@/components/layouts/PublicLayout";
|
||||
import AuthenticatedLayout from "@/components/layouts/AuthenticatedLayout";
|
||||
|
||||
// Public pages
|
||||
import Index from "@/pages/Index";
|
||||
import LoginPage from "@/pages/auth/LoginPage";
|
||||
import RegisterPage from "@/pages/auth/RegisterPage";
|
||||
import VerifyEmailPage from "@/pages/auth/VerifyEmailPage";
|
||||
import ForgotPasswordPage from "@/pages/auth/ForgotPasswordPage";
|
||||
import ResetPasswordPage from "@/pages/auth/ResetPasswordPage";
|
||||
import InviteAcceptPage from "@/pages/auth/InviteAcceptPage";
|
||||
import OIDCConsentPage from "@/pages/auth/OIDCConsentPage";
|
||||
import OIDCErrorPage from "@/pages/auth/OIDCErrorPage";
|
||||
|
||||
// User pages
|
||||
import ProfilePage from "@/pages/user/ProfilePage";
|
||||
import SecurityPage from "@/pages/user/SecurityPage";
|
||||
import LinkedAccountsPage from "@/pages/user/LinkedAccountsPage";
|
||||
import ActivityPage from "@/pages/user/ActivityPage";
|
||||
|
||||
// Organization pages
|
||||
import OrgOverviewPage from "@/pages/org/OrgOverviewPage";
|
||||
import MembersPage from "@/pages/org/MembersPage";
|
||||
import PoliciesPage from "@/pages/org/PoliciesPage";
|
||||
import OrgAuditPage from "@/pages/org/OrgAuditPage";
|
||||
import OIDCClientsPage from "@/pages/org/OIDCClientsPage";
|
||||
|
||||
import NotFound from "@/pages/NotFound";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
@@ -15,8 +43,38 @@ const App = () => (
|
||||
<Sonner />
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
{/* Index redirect */}
|
||||
<Route path="/" element={<Index />} />
|
||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||
|
||||
{/* Public routes */}
|
||||
<Route element={<PublicLayout />}>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
<Route path="/verify-email" element={<VerifyEmailPage />} />
|
||||
<Route path="/forgot-password" element={<ForgotPasswordPage />} />
|
||||
<Route path="/reset-password" element={<ResetPasswordPage />} />
|
||||
<Route path="/invite" element={<InviteAcceptPage />} />
|
||||
<Route path="/consent" element={<OIDCConsentPage />} />
|
||||
<Route path="/error" element={<OIDCErrorPage />} />
|
||||
</Route>
|
||||
|
||||
{/* Authenticated routes */}
|
||||
<Route element={<AuthenticatedLayout />}>
|
||||
{/* User routes */}
|
||||
<Route path="/profile" element={<ProfilePage />} />
|
||||
<Route path="/security" element={<SecurityPage />} />
|
||||
<Route path="/linked-accounts" element={<LinkedAccountsPage />} />
|
||||
<Route path="/activity" element={<ActivityPage />} />
|
||||
|
||||
{/* Organization routes */}
|
||||
<Route path="/org" element={<OrgOverviewPage />} />
|
||||
<Route path="/org/members" element={<MembersPage />} />
|
||||
<Route path="/org/policies" element={<PoliciesPage />} />
|
||||
<Route path="/org/audit" element={<OrgAuditPage />} />
|
||||
<Route path="/org/clients" element={<OIDCClientsPage />} />
|
||||
</Route>
|
||||
|
||||
{/* Catch-all */}
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
+183
-54
@@ -2,95 +2,129 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
|
||||
All colors MUST be HSL.
|
||||
/* Authy2 Design System - Enterprise Authentication Platform
|
||||
Colors are HSL for theming flexibility
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
/* Core palette - Deep slate with teal accent */
|
||||
--background: 210 20% 98%;
|
||||
--foreground: 222 47% 11%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card-foreground: 222 47% 11%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--popover-foreground: 222 47% 11%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
/* Primary - Deep navy for trust */
|
||||
--primary: 222 47% 20%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
/* Secondary - Soft slate */
|
||||
--secondary: 215 20% 95%;
|
||||
--secondary-foreground: 222 47% 20%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
/* Muted - Subtle backgrounds */
|
||||
--muted: 215 20% 96%;
|
||||
--muted-foreground: 215 16% 47%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
/* Accent - Teal for actions and highlights */
|
||||
--accent: 173 58% 39%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
/* Semantic colors */
|
||||
--destructive: 0 72% 51%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--success: 152 69% 31%;
|
||||
--success-foreground: 0 0% 100%;
|
||||
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 0 0% 100%;
|
||||
|
||||
--info: 199 89% 48%;
|
||||
--info-foreground: 0 0% 100%;
|
||||
|
||||
/* UI elements */
|
||||
--border: 214 32% 91%;
|
||||
--input: 214 32% 91%;
|
||||
--ring: 173 58% 39%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
--sidebar-background: 0 0% 98%;
|
||||
/* Sidebar - Darker for visual hierarchy */
|
||||
--sidebar-background: 222 47% 11%;
|
||||
--sidebar-foreground: 215 20% 85%;
|
||||
--sidebar-primary: 173 58% 45%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 222 40% 18%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 222 40% 20%;
|
||||
--sidebar-ring: 173 58% 45%;
|
||||
--sidebar-muted: 215 16% 55%;
|
||||
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
/* Custom gradients and effects */
|
||||
--gradient-brand: linear-gradient(135deg, hsl(222 47% 20%), hsl(222 47% 11%));
|
||||
--gradient-accent: linear-gradient(135deg, hsl(173 58% 39%), hsl(173 58% 32%));
|
||||
--gradient-subtle: linear-gradient(135deg, hsl(210 20% 98%), hsl(215 20% 96%));
|
||||
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
|
||||
--sidebar-border: 220 13% 91%;
|
||||
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
--shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px hsl(222 47% 11% / 0.1), 0 2px 4px -2px hsl(222 47% 11% / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px hsl(222 47% 11% / 0.1), 0 4px 6px -4px hsl(222 47% 11% / 0.1);
|
||||
--shadow-card: 0 1px 3px 0 hsl(222 47% 11% / 0.06), 0 1px 2px -1px hsl(222 47% 11% / 0.06);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--background: 222 47% 6%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card: 222 47% 9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover: 222 47% 9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--primary: 173 58% 45%;
|
||||
--primary-foreground: 222 47% 11%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary: 222 40% 15%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--muted: 222 40% 15%;
|
||||
--muted-foreground: 215 20% 65%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--accent: 173 58% 39%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--destructive: 0 62% 40%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--success: 152 69% 36%;
|
||||
--success-foreground: 0 0% 100%;
|
||||
|
||||
--warning: 38 92% 55%;
|
||||
--warning-foreground: 0 0% 100%;
|
||||
|
||||
--info: 199 89% 53%;
|
||||
--info-foreground: 0 0% 100%;
|
||||
|
||||
--border: 222 40% 18%;
|
||||
--input: 222 40% 18%;
|
||||
--ring: 173 58% 45%;
|
||||
|
||||
--sidebar-background: 222 47% 6%;
|
||||
--sidebar-foreground: 215 20% 85%;
|
||||
--sidebar-primary: 173 58% 45%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
--sidebar-accent: 222 40% 12%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 222 40% 15%;
|
||||
--sidebar-ring: 173 58% 45%;
|
||||
--sidebar-muted: 215 16% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,7 +133,102 @@ All colors MUST be HSL.
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground antialiased;
|
||||
font-feature-settings: "cv11", "ss01";
|
||||
}
|
||||
|
||||
/* Smooth focus states */
|
||||
:focus-visible {
|
||||
@apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Auth card for public pages */
|
||||
.auth-card {
|
||||
@apply bg-card rounded-xl p-8 shadow-card border border-border;
|
||||
}
|
||||
|
||||
/* Section header styling */
|
||||
.section-header {
|
||||
@apply text-lg font-semibold text-foreground mb-1;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
@apply text-sm text-muted-foreground;
|
||||
}
|
||||
|
||||
/* Status badges */
|
||||
.status-badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.status-badge-success {
|
||||
@apply bg-success/10 text-success;
|
||||
}
|
||||
|
||||
.status-badge-warning {
|
||||
@apply bg-warning/10 text-warning;
|
||||
}
|
||||
|
||||
.status-badge-error {
|
||||
@apply bg-destructive/10 text-destructive;
|
||||
}
|
||||
|
||||
.status-badge-info {
|
||||
@apply bg-info/10 text-info;
|
||||
}
|
||||
|
||||
/* Page layout helpers */
|
||||
.page-container {
|
||||
@apply p-6 lg:p-8 max-w-5xl;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
@apply mb-8;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
@apply text-2xl font-semibold text-foreground tracking-tight;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
@apply text-muted-foreground mt-1;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Animation utilities */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+10
-9
@@ -1,14 +1,15 @@
|
||||
// Update this page (the content is just a fallback if you fail to update the page)
|
||||
import { useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const Index = () => {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
|
||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
// Redirect to login for now - will be replaced with auth check
|
||||
navigate("/login");
|
||||
}, [navigate]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Mail, ArrowLeft, ArrowRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
setIsSubmitted(true);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
if (isSubmitted) {
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-6">
|
||||
<Mail className="w-8 h-8 text-accent" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Check your email
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2 mb-6">
|
||||
If an account exists for {email}, you'll receive a password reset link shortly.
|
||||
</p>
|
||||
|
||||
<Link to="/login">
|
||||
<Button variant="outline" className="w-full">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to sign in
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Forgot password?
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Enter your email and we'll send you a reset link
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Sending..."
|
||||
) : (
|
||||
<>
|
||||
Send reset link
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground mt-6">
|
||||
<Link to="/login" className="text-accent hover:underline font-medium inline-flex items-center">
|
||||
<ArrowLeft className="w-4 h-4 mr-1" />
|
||||
Back to sign in
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { User, Lock, Upload, ArrowRight, Building2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
|
||||
export default function InviteAcceptPage() {
|
||||
const navigate = useNavigate();
|
||||
const [name, setName] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Mock invite data - will be fetched from URL token
|
||||
const inviteData = {
|
||||
email: "invited@example.com",
|
||||
organization: "Acme Corp",
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
navigate("/profile");
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Building2 className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
You're invited!
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
<span className="font-medium text-foreground">{inviteData.organization}</span> has
|
||||
invited you to join their organization
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Avatar upload */}
|
||||
<div className="flex flex-col items-center mb-6">
|
||||
<Avatar className="w-20 h-20 mb-3">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-xl">
|
||||
{name ? name.split(" ").map(n => n[0]).join("").slice(0, 2).toUpperCase() : "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<Button type="button" variant="outline" size="sm">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Upload photo
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={inviteData.email}
|
||||
disabled
|
||||
className="bg-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full name</Label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Joining..."
|
||||
) : (
|
||||
<>
|
||||
Join {inviteData.organization}
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Mail, Lock, ArrowRight, Fingerprint } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
// Mock login - will be replaced with actual auth
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
navigate("/profile");
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Welcome back
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Sign in to your account to continue
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Link
|
||||
to="/forgot-password"
|
||||
className="text-sm text-accent hover:underline"
|
||||
>
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Signing in..."
|
||||
) : (
|
||||
<>
|
||||
Sign in
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="relative my-6">
|
||||
<Separator />
|
||||
<span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground">
|
||||
or continue with
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Alternative login methods */}
|
||||
<div className="space-y-3">
|
||||
<Button variant="outline" className="w-full" type="button">
|
||||
<Fingerprint className="w-4 h-4 mr-2" />
|
||||
Sign in with Passkey
|
||||
</Button>
|
||||
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<Button variant="outline" className="w-full" type="button">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full" type="button">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full" type="button">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M21.35 11.1h-9.17v2.73h6.51c-.33 3.81-3.5 5.44-6.5 5.44C8.36 19.27 5 16.25 5 12c0-4.1 3.2-7.27 7.2-7.27 3.09 0 4.9 1.97 4.9 1.97L19 4.72S16.56 2 12.1 2C6.42 2 2.03 6.8 2.03 12c0 5.05 4.13 10 10.22 10 5.35 0 9.25-3.67 9.25-9.09 0-1.15-.15-1.81-.15-1.81z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground mt-6">
|
||||
Don't have an account?{" "}
|
||||
<Link to="/register" className="text-accent hover:underline font-medium">
|
||||
Create one
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { CheckCircle, XCircle, Shield, User, Mail, Building2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
export default function OIDCConsentPage() {
|
||||
const navigate = useNavigate();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Mock OIDC client data - will be fetched from auth flow
|
||||
const clientData = {
|
||||
name: "GitLab",
|
||||
logo: null,
|
||||
redirectUri: "https://gitlab.example.com/callback",
|
||||
scopes: [
|
||||
{ id: "openid", name: "OpenID", description: "Verify your identity" },
|
||||
{ id: "profile", name: "Profile", description: "Access your name and profile picture" },
|
||||
{ id: "email", name: "Email", description: "Access your email address" },
|
||||
],
|
||||
};
|
||||
|
||||
const handleAllow = () => {
|
||||
setIsLoading(true);
|
||||
// Mock consent - will redirect to client callback
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
// In real implementation: redirect to redirectUri with auth code
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const handleDeny = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-6">
|
||||
<div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Shield className="w-7 h-7 text-primary" />
|
||||
</div>
|
||||
<h1 className="text-xl font-semibold text-foreground tracking-tight">
|
||||
Authorize {clientData.name}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
This application wants to access your account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="p-4 bg-secondary/30 border-0 mb-6">
|
||||
<p className="text-sm text-foreground font-medium mb-3">
|
||||
{clientData.name} is requesting access to:
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{clientData.scopes.map((scope) => (
|
||||
<li key={scope.id} className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-card flex items-center justify-center flex-shrink-0">
|
||||
{scope.id === "openid" && <Shield className="w-4 h-4 text-accent" />}
|
||||
{scope.id === "profile" && <User className="w-4 h-4 text-accent" />}
|
||||
{scope.id === "email" && <Mail className="w-4 h-4 text-accent" />}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">{scope.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{scope.description}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-6">
|
||||
<Building2 className="w-4 h-4" />
|
||||
<span>
|
||||
Redirecting to: <span className="font-mono text-foreground">{clientData.redirectUri}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Separator className="mb-6" />
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleDeny}
|
||||
className="flex-1"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<XCircle className="w-4 h-4 mr-2" />
|
||||
Deny
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleAllow}
|
||||
className="flex-1"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
{isLoading ? "Authorizing..." : "Allow"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-xs text-muted-foreground mt-4">
|
||||
You can revoke this access anytime from your{" "}
|
||||
<a href="/linked-accounts" className="text-accent hover:underline">
|
||||
linked accounts
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { AlertTriangle, ArrowLeft, Home } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function OIDCErrorPage() {
|
||||
// Mock error data - will be parsed from URL params
|
||||
const errorData = {
|
||||
error: "invalid_request",
|
||||
description: "The request was missing a required parameter or was otherwise malformed.",
|
||||
clientName: "Unknown Application",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-6">
|
||||
<AlertTriangle className="w-8 h-8 text-destructive" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Authentication Error
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2 mb-4">
|
||||
There was a problem with the authentication request.
|
||||
</p>
|
||||
|
||||
<div className="bg-destructive/5 border border-destructive/20 rounded-lg p-4 mb-6 text-left">
|
||||
<p className="text-sm font-medium text-foreground mb-1">
|
||||
Error: <code className="text-destructive">{errorData.error}</code>
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{errorData.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button variant="outline" className="w-full" onClick={() => window.history.back()}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Go back
|
||||
</Button>
|
||||
<Link to="/">
|
||||
<Button variant="ghost" className="w-full">
|
||||
<Home className="w-4 h-4 mr-2" />
|
||||
Return to home
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Mail, Lock, User, ArrowRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const navigate = useNavigate();
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
// Mock registration - will be replaced with actual auth
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
navigate("/verify-email");
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Create your account
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Get started with Authy2 in seconds
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full name</Label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Must be at least 8 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Creating account..."
|
||||
) : (
|
||||
<>
|
||||
Create account
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground mt-6">
|
||||
Already have an account?{" "}
|
||||
<Link to="/login" className="text-accent hover:underline font-medium">
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<p className="text-center text-xs text-muted-foreground mt-4">
|
||||
By creating an account, you agree to our{" "}
|
||||
<Link to="/terms" className="underline">
|
||||
Terms of Service
|
||||
</Link>{" "}
|
||||
and{" "}
|
||||
<Link to="/privacy" className="underline">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Lock, ArrowRight, CheckCircle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
const navigate = useNavigate();
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
setIsSuccess(true);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
if (isSuccess) {
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle className="w-8 h-8 text-success" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Password reset successful
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2 mb-6">
|
||||
Your password has been updated. You can now sign in with your new password.
|
||||
</p>
|
||||
|
||||
<Button onClick={() => navigate("/login")} className="w-full">
|
||||
Sign in
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Reset your password
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Enter a new password for your account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">New password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Must be at least 8 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm new password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Resetting..."
|
||||
) : (
|
||||
<>
|
||||
Reset password
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { Mail, RefreshCw } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function VerifyEmailPage() {
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-6">
|
||||
<Mail className="w-8 h-8 text-accent" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
Check your email
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2 mb-6">
|
||||
We've sent a verification link to your email address. Click the link to verify your account.
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button variant="outline" className="w-full">
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Resend verification email
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground mt-6">
|
||||
Wrong email?{" "}
|
||||
<Link to="/register" className="text-accent hover:underline font-medium">
|
||||
Go back
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
import { useState } from "react";
|
||||
import { Search, Plus, MoreHorizontal, Shield, User, Mail, Clock } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
const members = [
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
email: "john@example.com",
|
||||
role: "admin",
|
||||
status: "active",
|
||||
lastActive: "2 hours ago",
|
||||
avatar: null,
|
||||
initials: "JD",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jane Smith",
|
||||
email: "jane@example.com",
|
||||
role: "member",
|
||||
status: "active",
|
||||
lastActive: "5 minutes ago",
|
||||
avatar: null,
|
||||
initials: "JS",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Bob Wilson",
|
||||
email: "bob@example.com",
|
||||
role: "member",
|
||||
status: "disabled",
|
||||
lastActive: "3 days ago",
|
||||
avatar: null,
|
||||
initials: "BW",
|
||||
},
|
||||
];
|
||||
|
||||
const pendingInvites = [
|
||||
{
|
||||
id: "1",
|
||||
email: "alice@example.com",
|
||||
role: "member",
|
||||
sentAt: "2 days ago",
|
||||
expiresAt: "5 days",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
email: "charlie@example.com",
|
||||
role: "admin",
|
||||
sentAt: "1 hour ago",
|
||||
expiresAt: "7 days",
|
||||
},
|
||||
];
|
||||
|
||||
export default function MembersPage() {
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">Members</h1>
|
||||
<p className="page-description">
|
||||
Manage organization members and invitations
|
||||
</p>
|
||||
</div>
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Invite member
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="members" className="w-full">
|
||||
<TabsList className="mb-4">
|
||||
<TabsTrigger value="members">
|
||||
Members ({members.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="invites">
|
||||
Pending Invites ({pendingInvites.length})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="members">
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search members..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10 max-w-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{members.map((member) => (
|
||||
<div key={member.id} className="p-4 flex items-center gap-4">
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarImage src={member.avatar || undefined} />
|
||||
<AvatarFallback className="bg-primary text-primary-foreground">
|
||||
{member.initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{member.name}
|
||||
</p>
|
||||
{member.role === "admin" && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
<Shield className="w-3 h-3 mr-1" />
|
||||
Admin
|
||||
</Badge>
|
||||
)}
|
||||
{member.status === "disabled" && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
Disabled
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground truncate">
|
||||
{member.email}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground hidden sm:block">
|
||||
Active {member.lastActive}
|
||||
</p>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>
|
||||
<User className="w-4 h-4 mr-2" />
|
||||
View profile
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Shield className="w-4 h-4 mr-2" />
|
||||
Change role
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="text-destructive">
|
||||
{member.status === "active" ? "Disable" : "Enable"} account
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="invites">
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{pendingInvites.map((invite) => (
|
||||
<div key={invite.id} className="p-4 flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
|
||||
<Mail className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{invite.email}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>Invited as {invite.role}</span>
|
||||
<span>•</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
Expires in {invite.expiresAt}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm">
|
||||
Resend
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="text-destructive">
|
||||
Revoke
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import { useState } from "react";
|
||||
import { Plus, Key, ExternalLink, MoreHorizontal, Copy, RefreshCw, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
const clients = [
|
||||
{
|
||||
id: "1",
|
||||
name: "GitLab",
|
||||
clientId: "gitlab_prod_xxxxxxxxxxxxx",
|
||||
redirectUris: ["https://gitlab.example.com/callback"],
|
||||
scopes: ["openid", "profile", "email"],
|
||||
createdAt: "2024-01-10",
|
||||
lastUsed: "2 hours ago",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Grafana",
|
||||
clientId: "grafana_prod_xxxxxxxxxxxxx",
|
||||
redirectUris: ["https://grafana.example.com/login/generic_oauth"],
|
||||
scopes: ["openid", "profile"],
|
||||
createdAt: "2024-01-08",
|
||||
lastUsed: "5 minutes ago",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "OAuth2 Proxy",
|
||||
clientId: "oauth2proxy_xxxxxxxxxxxxx",
|
||||
redirectUris: ["https://auth.example.com/oauth2/callback"],
|
||||
scopes: ["openid", "profile", "email", "groups"],
|
||||
createdAt: "2024-01-05",
|
||||
lastUsed: "1 day ago",
|
||||
},
|
||||
];
|
||||
|
||||
export default function OIDCClientsPage() {
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">OIDC Clients</h1>
|
||||
<p className="page-description">
|
||||
Manage applications that authenticate via Authy2
|
||||
</p>
|
||||
</div>
|
||||
<Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add client
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create OIDC Client</DialogTitle>
|
||||
<DialogDescription>
|
||||
Register a new application to authenticate via Authy2
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="clientName">Client name</Label>
|
||||
<Input id="clientName" placeholder="My Application" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="redirectUris">Redirect URIs</Label>
|
||||
<Textarea
|
||||
id="redirectUris"
|
||||
placeholder="https://myapp.example.com/callback"
|
||||
className="min-h-[80px]"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
One URI per line. These are the allowed callback URLs.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={() => setIsCreateOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => setIsCreateOpen(false)}>
|
||||
Create client
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{clients.map((client) => (
|
||||
<Card key={client.id}>
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Key className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground">{client.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||
{client.clientId}
|
||||
</code>
|
||||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||||
<Copy className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 mt-3">
|
||||
{client.scopes.map((scope) => (
|
||||
<Badge key={scope} variant="secondary" className="text-xs">
|
||||
{scope}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
View details
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Rotate secret
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="text-destructive">
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Delete client
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t flex items-center justify-between text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-4">
|
||||
<span>Created {client.createdAt}</span>
|
||||
<span>•</span>
|
||||
<span>Last used {client.lastUsed}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{client.redirectUris.length} redirect URI{client.redirectUris.length > 1 ? "s" : ""}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import { useState } from "react";
|
||||
import { Search, Filter, Download, User, Settings, Key, UserPlus, AlertTriangle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
const auditEvents = [
|
||||
{
|
||||
id: "1",
|
||||
type: "member_invited",
|
||||
actor: "John Doe",
|
||||
target: "alice@example.com",
|
||||
timestamp: "2024-01-15T10:30:00Z",
|
||||
details: "Invited as member",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
type: "policy_changed",
|
||||
actor: "John Doe",
|
||||
target: "Password Policy",
|
||||
timestamp: "2024-01-15T09:00:00Z",
|
||||
details: "Minimum length changed from 8 to 12",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
type: "member_disabled",
|
||||
actor: "Jane Smith",
|
||||
target: "bob@example.com",
|
||||
timestamp: "2024-01-14T15:45:00Z",
|
||||
details: "Account disabled",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
type: "client_created",
|
||||
actor: "John Doe",
|
||||
target: "GitLab",
|
||||
timestamp: "2024-01-14T12:00:00Z",
|
||||
details: "OIDC client created",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
type: "role_changed",
|
||||
actor: "John Doe",
|
||||
target: "jane@example.com",
|
||||
timestamp: "2024-01-13T09:00:00Z",
|
||||
details: "Role changed from member to admin",
|
||||
},
|
||||
];
|
||||
|
||||
const getEventIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "member_invited":
|
||||
case "role_changed":
|
||||
return <UserPlus className="w-4 h-4" />;
|
||||
case "policy_changed":
|
||||
return <Settings className="w-4 h-4" />;
|
||||
case "member_disabled":
|
||||
return <AlertTriangle className="w-4 h-4" />;
|
||||
case "client_created":
|
||||
return <Key className="w-4 h-4" />;
|
||||
default:
|
||||
return <User className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getEventTitle = (type: string) => {
|
||||
switch (type) {
|
||||
case "member_invited":
|
||||
return "Member invited";
|
||||
case "policy_changed":
|
||||
return "Policy changed";
|
||||
case "member_disabled":
|
||||
return "Member disabled";
|
||||
case "client_created":
|
||||
return "OIDC client created";
|
||||
case "role_changed":
|
||||
return "Role changed";
|
||||
default:
|
||||
return "Event";
|
||||
}
|
||||
};
|
||||
|
||||
export default function OrgAuditPage() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [typeFilter, setTypeFilter] = useState("all");
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">Audit Log</h1>
|
||||
<p className="page-description">
|
||||
View all administrative actions and changes
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="outline">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search events..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
<SelectValue placeholder="Filter by type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All events</SelectItem>
|
||||
<SelectItem value="members">Member changes</SelectItem>
|
||||
<SelectItem value="policies">Policy changes</SelectItem>
|
||||
<SelectItem value="clients">OIDC clients</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{auditEvents.map((event) => (
|
||||
<div key={event.id} className="p-4 flex items-start gap-4">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
event.type === "member_disabled"
|
||||
? "bg-destructive/10 text-destructive"
|
||||
: "bg-accent/10 text-accent"
|
||||
}`}
|
||||
>
|
||||
{getEventIcon(event.type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-medium text-foreground">
|
||||
{getEventTitle(event.type)}
|
||||
</p>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{event.target}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
<span>by {event.actor}</span>
|
||||
<span className="mx-2">•</span>
|
||||
<span>{event.details}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{formatDate(event.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import { Building2, Users, Shield, Key, ArrowRight, TrendingUp } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function OrgOverviewPage() {
|
||||
// Mock organization data
|
||||
const org = {
|
||||
name: "Acme Corp",
|
||||
createdAt: "January 2024",
|
||||
stats: {
|
||||
totalMembers: 24,
|
||||
activeToday: 18,
|
||||
pendingInvites: 3,
|
||||
oidcClients: 5,
|
||||
},
|
||||
};
|
||||
|
||||
const quickLinks = [
|
||||
{
|
||||
title: "Members",
|
||||
description: "Manage team members and roles",
|
||||
icon: Users,
|
||||
href: "/org/members",
|
||||
},
|
||||
{
|
||||
title: "Policies",
|
||||
description: "Configure security requirements",
|
||||
icon: Shield,
|
||||
href: "/org/policies",
|
||||
},
|
||||
{
|
||||
title: "OIDC Clients",
|
||||
description: "Manage connected applications",
|
||||
icon: Key,
|
||||
href: "/org/clients",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="w-7 h-7 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="page-title">{org.name}</h1>
|
||||
<p className="page-description">Created {org.createdAt}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Total Members</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.totalMembers}</p>
|
||||
</div>
|
||||
<Users className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Active Today</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.activeToday}</p>
|
||||
</div>
|
||||
<TrendingUp className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Pending Invites</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.pendingInvites}</p>
|
||||
</div>
|
||||
<Users className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">OIDC Clients</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.oidcClients}</p>
|
||||
</div>
|
||||
<Key className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<h2 className="text-lg font-semibold mb-4">Quick Actions</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{quickLinks.map((link) => (
|
||||
<Link key={link.href} to={link.href}>
|
||||
<Card className="h-full hover:border-accent/50 transition-colors cursor-pointer group">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
|
||||
<link.icon className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<ArrowRight className="w-4 h-4 text-muted-foreground group-hover:text-accent transition-colors" />
|
||||
</div>
|
||||
<h3 className="font-medium text-foreground">{link.title}</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">{link.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
import { Shield, Lock, Fingerprint, Smartphone, UserPlus, AlertTriangle } from "lucide-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
|
||||
export default function PoliciesPage() {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Security Policies</h1>
|
||||
<p className="page-description">
|
||||
Configure security requirements for organization members
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Registration Mode */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<UserPlus className="w-4 h-4" />
|
||||
Registration Mode
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Control how new members can join your organization
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Select defaultValue="invite">
|
||||
<SelectTrigger className="w-full max-w-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="open">Open registration</SelectItem>
|
||||
<SelectItem value="invite">Invite only</SelectItem>
|
||||
<SelectItem value="closed">Closed</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
Invite only: Members can only join via admin invitation
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Password Policy */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Lock className="w-4 h-4" />
|
||||
Password Policy
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Set minimum password requirements for all members
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<Label>Minimum password length</Label>
|
||||
<div className="flex items-center gap-4">
|
||||
<Slider
|
||||
defaultValue={[12]}
|
||||
max={32}
|
||||
min={8}
|
||||
step={1}
|
||||
className="w-full max-w-xs"
|
||||
/>
|
||||
<span className="text-sm font-medium w-16">12 chars</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require uppercase letters</Label>
|
||||
<p className="text-sm text-muted-foreground">At least one A-Z</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require numbers</Label>
|
||||
<p className="text-sm text-muted-foreground">At least one 0-9</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require special characters</Label>
|
||||
<p className="text-sm text-muted-foreground">At least one !@#$%^&*</p>
|
||||
</div>
|
||||
<Switch />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* MFA Requirements */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Smartphone className="w-4 h-4" />
|
||||
Multi-Factor Authentication
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Require additional authentication methods
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label className="flex items-center gap-2">
|
||||
Require TOTP
|
||||
<Badge variant="secondary" className="text-xs">Recommended</Badge>
|
||||
</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
All members must set up an authenticator app
|
||||
</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<Alert className="border-warning/30 bg-warning/5">
|
||||
<AlertTriangle className="w-4 h-4 text-warning" />
|
||||
<AlertDescription className="text-sm">
|
||||
Enabling this will require all existing members to set up TOTP on their next login.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Passkey Requirements */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Fingerprint className="w-4 h-4" />
|
||||
Passkeys (WebAuthn)
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Require passwordless authentication capability
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require at least one passkey</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Members must register a passkey for backup authentication
|
||||
</p>
|
||||
</div>
|
||||
<Switch />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
import { useState } from "react";
|
||||
import { LogIn, LogOut, Key, Fingerprint, Smartphone, AlertTriangle, CheckCircle, MapPin } from "lucide-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
const activityEvents = [
|
||||
{
|
||||
id: "1",
|
||||
type: "login_success",
|
||||
method: "password",
|
||||
timestamp: "2024-01-15T10:30:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Chrome on macOS",
|
||||
ip: "192.168.1.1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
type: "login_success",
|
||||
method: "passkey",
|
||||
timestamp: "2024-01-14T15:45:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Safari on iOS",
|
||||
ip: "192.168.1.2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
type: "login_failed",
|
||||
method: "password",
|
||||
timestamp: "2024-01-14T12:00:00Z",
|
||||
location: "Unknown",
|
||||
device: "Firefox on Windows",
|
||||
ip: "10.0.0.5",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
type: "mfa_enabled",
|
||||
method: "totp",
|
||||
timestamp: "2024-01-13T09:00:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Chrome on macOS",
|
||||
ip: "192.168.1.1",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
type: "passkey_added",
|
||||
method: "passkey",
|
||||
timestamp: "2024-01-12T14:30:00Z",
|
||||
location: "San Francisco, CA",
|
||||
device: "Safari on macOS",
|
||||
ip: "192.168.1.1",
|
||||
},
|
||||
];
|
||||
|
||||
const getEventIcon = (type: string, method: string) => {
|
||||
switch (type) {
|
||||
case "login_success":
|
||||
return method === "passkey" ? (
|
||||
<Fingerprint className="w-4 h-4" />
|
||||
) : (
|
||||
<LogIn className="w-4 h-4" />
|
||||
);
|
||||
case "login_failed":
|
||||
return <AlertTriangle className="w-4 h-4" />;
|
||||
case "mfa_enabled":
|
||||
return <Smartphone className="w-4 h-4" />;
|
||||
case "passkey_added":
|
||||
return <Fingerprint className="w-4 h-4" />;
|
||||
case "logout":
|
||||
return <LogOut className="w-4 h-4" />;
|
||||
default:
|
||||
return <Key className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getEventTitle = (type: string, method: string) => {
|
||||
switch (type) {
|
||||
case "login_success":
|
||||
return `Signed in with ${method}`;
|
||||
case "login_failed":
|
||||
return "Failed login attempt";
|
||||
case "mfa_enabled":
|
||||
return "Two-factor authentication enabled";
|
||||
case "passkey_added":
|
||||
return "Passkey added";
|
||||
case "logout":
|
||||
return "Signed out";
|
||||
default:
|
||||
return "Security event";
|
||||
}
|
||||
};
|
||||
|
||||
const getEventStatus = (type: string) => {
|
||||
if (type === "login_failed") {
|
||||
return { variant: "destructive" as const, label: "Failed" };
|
||||
}
|
||||
return { variant: "default" as const, label: "Success" };
|
||||
};
|
||||
|
||||
export default function ActivityPage() {
|
||||
const [filter, setFilter] = useState("all");
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">Activity</h1>
|
||||
<p className="page-description">
|
||||
Your recent account activity and security events
|
||||
</p>
|
||||
</div>
|
||||
<Select value={filter} onValueChange={setFilter}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Filter events" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All events</SelectItem>
|
||||
<SelectItem value="logins">Logins only</SelectItem>
|
||||
<SelectItem value="security">Security changes</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{activityEvents.map((event) => {
|
||||
const status = getEventStatus(event.type);
|
||||
return (
|
||||
<div key={event.id} className="p-4 flex items-start gap-4">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
event.type === "login_failed"
|
||||
? "bg-destructive/10 text-destructive"
|
||||
: "bg-accent/10 text-accent"
|
||||
}`}
|
||||
>
|
||||
{getEventIcon(event.type, event.method)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-medium text-foreground">
|
||||
{getEventTitle(event.type, event.method)}
|
||||
</p>
|
||||
{event.type === "login_failed" && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
Failed
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground space-y-0.5">
|
||||
<p>{event.device}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-3 h-3" />
|
||||
<span>{event.location}</span>
|
||||
<span className="text-muted-foreground/50">•</span>
|
||||
<span className="font-mono text-xs">{event.ip}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{formatDate(event.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { Link2, Unlink, AlertCircle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
|
||||
const socialProviders = [
|
||||
{
|
||||
id: "google",
|
||||
name: "Google",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
linked: true,
|
||||
email: "john.doe@gmail.com",
|
||||
},
|
||||
{
|
||||
id: "github",
|
||||
name: "GitHub",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
linked: true,
|
||||
email: "johndoe",
|
||||
},
|
||||
{
|
||||
id: "microsoft",
|
||||
name: "Microsoft",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path fill="#f25022" d="M1 1h10v10H1z" />
|
||||
<path fill="#00a4ef" d="M1 13h10v10H1z" />
|
||||
<path fill="#7fba00" d="M13 1h10v10H13z" />
|
||||
<path fill="#ffb900" d="M13 13h10v10H13z" />
|
||||
</svg>
|
||||
),
|
||||
linked: false,
|
||||
email: null,
|
||||
},
|
||||
];
|
||||
|
||||
export default function LinkedAccountsPage() {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Linked Accounts</h1>
|
||||
<p className="page-description">
|
||||
Connect external accounts for alternative login methods
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Alert className="mb-6">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
<AlertDescription>
|
||||
Linked accounts can only be used to sign in to an existing Authy2 account.
|
||||
They cannot be used to create new accounts.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="space-y-4">
|
||||
{socialProviders.map((provider) => (
|
||||
<Card key={provider.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-secondary flex items-center justify-center">
|
||||
{provider.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">{provider.name}</p>
|
||||
{provider.linked ? (
|
||||
<p className="text-sm text-muted-foreground">{provider.email}</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Not connected</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{provider.linked ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge className="bg-success/10 text-success border-0">Connected</Badge>
|
||||
<Button variant="outline" size="sm">
|
||||
<Unlink className="w-4 h-4 mr-2" />
|
||||
Disconnect
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button size="sm">
|
||||
<Link2 className="w-4 h-4 mr-2" />
|
||||
Connect
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import { useState } from "react";
|
||||
import { Mail, Building2, Upload, CheckCircle, AlertCircle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const [name, setName] = useState("John Doe");
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
// Mock user data
|
||||
const user = {
|
||||
name: "John Doe",
|
||||
email: "john@example.com",
|
||||
emailVerified: true,
|
||||
avatar: null,
|
||||
initials: "JD",
|
||||
organizations: [
|
||||
{ name: "Acme Corp", role: "Admin" },
|
||||
{ name: "Beta Inc", role: "Member" },
|
||||
],
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
setIsEditing(false);
|
||||
// Save logic here
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Profile</h1>
|
||||
<p className="page-description">
|
||||
Manage your personal information and organization memberships
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Profile Photo & Name */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Personal Information</CardTitle>
|
||||
<CardDescription>Update your photo and personal details</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Avatar */}
|
||||
<div className="flex items-center gap-6">
|
||||
<Avatar className="w-20 h-20">
|
||||
<AvatarImage src={user.avatar || undefined} />
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-xl">
|
||||
{user.initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<Button variant="outline" size="sm">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Change photo
|
||||
</Button>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
JPG, PNG or GIF. Max 2MB.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full name</Label>
|
||||
{isEditing ? (
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
<Button onClick={handleSave}>Save</Button>
|
||||
<Button variant="outline" onClick={() => setIsEditing(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between p-3 border rounded-lg bg-secondary/30">
|
||||
<span className="text-foreground">{user.name}</span>
|
||||
<Button variant="ghost" size="sm" onClick={() => setIsEditing(true)}>
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Email */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Email Address</CardTitle>
|
||||
<CardDescription>Your email is used for login and notifications</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between p-3 border rounded-lg bg-secondary/30">
|
||||
<div className="flex items-center gap-3">
|
||||
<Mail className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="text-foreground">{user.email}</span>
|
||||
{user.emailVerified ? (
|
||||
<Badge variant="secondary" className="bg-success/10 text-success border-0">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Verified
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary" className="bg-warning/10 text-warning border-0">
|
||||
<AlertCircle className="w-3 h-3 mr-1" />
|
||||
Unverified
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Organizations */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Organizations</CardTitle>
|
||||
<CardDescription>Organizations you're a member of</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{user.organizations.map((org, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-3 border rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<span className="text-foreground font-medium">{org.name}</span>
|
||||
</div>
|
||||
<Badge variant="secondary">{org.role}</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
import { useState } from "react";
|
||||
import { Lock, Fingerprint, Smartphone, Shield, Plus, AlertTriangle, CheckCircle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
|
||||
export default function SecurityPage() {
|
||||
const [showPasswordForm, setShowPasswordForm] = useState(false);
|
||||
|
||||
// Mock security data
|
||||
const security = {
|
||||
passwordLastChanged: "3 months ago",
|
||||
totpEnabled: true,
|
||||
passkeysCount: 2,
|
||||
passkeys: [
|
||||
{ id: "1", name: "MacBook Pro Touch ID", lastUsed: "Today" },
|
||||
{ id: "2", name: "iPhone Face ID", lastUsed: "Yesterday" },
|
||||
],
|
||||
policyRequirements: {
|
||||
totpRequired: true,
|
||||
passkeysRequired: false,
|
||||
minPasswordLength: 12,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Security</h1>
|
||||
<p className="page-description">
|
||||
Manage your authentication methods and security settings
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Policy Status */}
|
||||
<Card className="border-accent/30 bg-accent/5">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Shield className="w-5 h-5 text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">Organization Policy</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Your organization requires TOTP to be enabled for all members.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Password */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Lock className="w-4 h-4" />
|
||||
Password
|
||||
</CardTitle>
|
||||
<CardDescription>Last changed {security.passwordLastChanged}</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowPasswordForm(!showPasswordForm)}
|
||||
>
|
||||
Change password
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
{showPasswordForm && (
|
||||
<CardContent className="space-y-4 border-t pt-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="currentPassword">Current password</Label>
|
||||
<Input id="currentPassword" type="password" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="newPassword">New password</Label>
|
||||
<Input id="newPassword" type="password" />
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Minimum {security.policyRequirements.minPasswordLength} characters required by organization
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm new password</Label>
|
||||
<Input id="confirmPassword" type="password" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button>Update password</Button>
|
||||
<Button variant="outline" onClick={() => setShowPasswordForm(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* TOTP / Authenticator */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Smartphone className="w-4 h-4" />
|
||||
Authenticator App (TOTP)
|
||||
{security.policyRequirements.totpRequired && (
|
||||
<Badge variant="secondary" className="ml-2 text-xs">Required</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Use an authenticator app for two-factor authentication
|
||||
</CardDescription>
|
||||
</div>
|
||||
{security.totpEnabled ? (
|
||||
<Badge className="bg-success/10 text-success border-0">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
Enabled
|
||||
</Badge>
|
||||
) : (
|
||||
<Button size="sm">Set up</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
{security.totpEnabled && (
|
||||
<CardContent className="border-t pt-4">
|
||||
<Button variant="outline" size="sm">
|
||||
Reconfigure
|
||||
</Button>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Passkeys */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Fingerprint className="w-4 h-4" />
|
||||
Passkeys
|
||||
{security.policyRequirements.passkeysRequired && (
|
||||
<Badge variant="secondary" className="ml-2 text-xs">Required</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Use biometrics or security keys for passwordless login
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button size="sm">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add passkey
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="border-t pt-4">
|
||||
<div className="space-y-3">
|
||||
{security.passkeys.map((passkey) => (
|
||||
<div
|
||||
key={passkey.id}
|
||||
className="flex items-center justify-between p-3 border rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center">
|
||||
<Fingerprint className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">{passkey.name}</p>
|
||||
<p className="text-xs text-muted-foreground">Last used: {passkey.lastUsed}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+26
-12
@@ -13,6 +13,9 @@ export default {
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
@@ -31,6 +34,18 @@ export default {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
success: {
|
||||
DEFAULT: "hsl(var(--success))",
|
||||
foreground: "hsl(var(--success-foreground))",
|
||||
},
|
||||
warning: {
|
||||
DEFAULT: "hsl(var(--warning))",
|
||||
foreground: "hsl(var(--warning-foreground))",
|
||||
},
|
||||
info: {
|
||||
DEFAULT: "hsl(var(--info))",
|
||||
foreground: "hsl(var(--info-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
@@ -56,6 +71,7 @@ export default {
|
||||
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
|
||||
border: "hsl(var(--sidebar-border))",
|
||||
ring: "hsl(var(--sidebar-ring))",
|
||||
muted: "hsl(var(--sidebar-muted))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
@@ -63,22 +79,20 @@ export default {
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
boxShadow: {
|
||||
'sm': 'var(--shadow-sm)',
|
||||
'md': 'var(--shadow-md)',
|
||||
'lg': 'var(--shadow-lg)',
|
||||
'card': 'var(--shadow-card)',
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: {
|
||||
height: "0",
|
||||
},
|
||||
to: {
|
||||
height: "var(--radix-accordion-content-height)",
|
||||
},
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: {
|
||||
height: "var(--radix-accordion-content-height)",
|
||||
},
|
||||
to: {
|
||||
height: "0",
|
||||
},
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
|
||||
Reference in New Issue
Block a user