Feat(Fix): Multi Org, Suspension, User Detail
Multi Org switch, members suspend/unsuspend status, delete account, next serial, show email in user member search
This commit is contained in:
@@ -13,6 +13,7 @@ import {
|
||||
Ban,
|
||||
UserCheck,
|
||||
AlertTriangle,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -123,6 +124,11 @@ export default function AdminUsersPage() {
|
||||
const [isSuspending, setIsSuspending] = useState(false);
|
||||
const [showSuspendConfirm, setShowSuspendConfirm] = useState(false);
|
||||
|
||||
// Hard delete
|
||||
const [showHardDelete, setShowHardDelete] = useState(false);
|
||||
const [hardDeleteConfirmEmail, setHardDeleteConfirmEmail] = useState("");
|
||||
const [isHardDeleting, setIsHardDeleting] = useState(false);
|
||||
|
||||
// ── Fetch users ─────────────────────────────────────────────────────────────
|
||||
const fetchUsers = useCallback(async (q: string, pg: number) => {
|
||||
setIsLoading(true);
|
||||
@@ -233,7 +239,16 @@ export default function AdminUsersPage() {
|
||||
setShowSuspendConfirm(false);
|
||||
toast({ title: "User suspended", description: `${selectedUser.full_name || selectedUser.email} has been suspended.` });
|
||||
} catch (err) {
|
||||
toast({ variant: "destructive", title: "Failed to suspend user", description: err instanceof ApiError ? err.message : "Something went wrong" });
|
||||
setShowSuspendConfirm(false);
|
||||
if (err instanceof ApiError && err.type === "OWNER_PROTECTION") {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Cannot suspend organization owner",
|
||||
description: "Transfer ownership to another member before suspending this account.",
|
||||
});
|
||||
} else {
|
||||
toast({ variant: "destructive", title: "Failed to suspend user", description: err instanceof ApiError ? err.message : "Something went wrong" });
|
||||
}
|
||||
} finally {
|
||||
setIsSuspending(false);
|
||||
}
|
||||
@@ -255,6 +270,31 @@ export default function AdminUsersPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// ── Hard delete user ─────────────────────────────────────────────────────────
|
||||
const handleHardDelete = async () => {
|
||||
if (!selectedUser) return;
|
||||
setIsHardDeleting(true);
|
||||
try {
|
||||
const result = await api.admin.hardDeleteUser(selectedUser.id);
|
||||
setUsers((prev) => prev.filter((u) => u.id !== selectedUser.id));
|
||||
setTotal((t) => t - 1);
|
||||
setShowHardDelete(false);
|
||||
setSelectedUser(null);
|
||||
toast({
|
||||
title: "User permanently deleted",
|
||||
description: `${result.deleted_user_email} — ${result.certs_revoked} cert(s) revoked, ${result.ssh_keys_deleted} key(s) deleted.`,
|
||||
});
|
||||
} catch (err) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Failed to delete user",
|
||||
description: err instanceof ApiError ? err.message : "Something went wrong",
|
||||
});
|
||||
} finally {
|
||||
setIsHardDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Filter by role client-side
|
||||
const filteredUsers = users.filter((u) => {
|
||||
if (roleFilter === "all") return true;
|
||||
@@ -540,6 +580,28 @@ export default function AdminUsersPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Danger zone — Hard delete */}
|
||||
{selectedUser.id !== currentUser?.id && (
|
||||
<div className="mt-6 p-4 border border-destructive/30 rounded-lg space-y-3">
|
||||
<h3 className="text-sm font-semibold flex items-center gap-2 text-destructive">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
Danger Zone
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Permanently delete this account. This cannot be undone — all SSH keys and certificates will be revoked immediately.
|
||||
</p>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => { setHardDeleteConfirmEmail(""); setShowHardDelete(true); }}
|
||||
className="text-destructive border-destructive/40 hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Permanently delete account
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</SheetContent>
|
||||
@@ -617,6 +679,55 @@ export default function AdminUsersPage() {
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* ── Hard delete confirmation ──────────────────────────────────────────── */}
|
||||
<Dialog
|
||||
open={showHardDelete}
|
||||
onOpenChange={(open) => { setShowHardDelete(open); if (!open) setHardDeleteConfirmEmail(""); }}
|
||||
>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2 text-destructive">
|
||||
<Trash2 className="w-5 h-5" />
|
||||
Permanently delete account?
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
This will <strong>permanently</strong> delete{" "}
|
||||
<strong>{selectedUser?.full_name || selectedUser?.email}</strong>,
|
||||
revoke all their SSH certificates, and remove all their SSH keys. This action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="py-2 space-y-2">
|
||||
<Label className="text-sm">
|
||||
Type <span className="font-mono font-semibold">{selectedUser?.email}</span> to confirm
|
||||
</Label>
|
||||
<Input
|
||||
value={hardDeleteConfirmEmail}
|
||||
onChange={(e) => setHardDeleteConfirmEmail(e.target.value)}
|
||||
placeholder={selectedUser?.email ?? ""}
|
||||
disabled={isHardDeleting}
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowHardDelete(false)}
|
||||
disabled={isHardDeleting}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleHardDelete}
|
||||
disabled={isHardDeleting || hardDeleteConfirmEmail !== selectedUser?.email}
|
||||
>
|
||||
{isHardDeleting && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
Delete permanently
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,455 @@
|
||||
/**
|
||||
* OIDCLoginPage — Standalone OIDC proxy login UI
|
||||
*
|
||||
* Unified entry point for OIDC authorization flows via the Gatehouse OIDC bridge.
|
||||
* Handles:
|
||||
* 1. Unauthenticated users → shows an email/password login form
|
||||
* 2. Already-authenticated users → shows a consent/approval screen directly
|
||||
*
|
||||
* Route: /oidc-login?oidc_session_id=<id>
|
||||
*
|
||||
* Configure your oauth2-proxy / OIDC client's login_url to:
|
||||
* https://<gatehouse-ui>/oidc-login
|
||||
*/
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useSearchParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
Shield,
|
||||
Mail,
|
||||
Lock,
|
||||
ArrowRight,
|
||||
Loader2,
|
||||
XCircle,
|
||||
CheckCircle,
|
||||
AlertTriangle,
|
||||
User,
|
||||
Building2,
|
||||
Key,
|
||||
LogOut,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { ApiError, tokenManager } from "@/lib/api";
|
||||
|
||||
// ── Configuration ─────────────────────────────────────────────────────────────
|
||||
const GATEHOUSE_OIDC = (import.meta.env.VITE_API_BASE_URL ?? "http://localhost:5000/api/v1")
|
||||
.replace(/\/api\/v1\/?$/, "");
|
||||
|
||||
// ── Scope display metadata ────────────────────────────────────────────────────
|
||||
const SCOPE_META: Record<string, { icon: typeof Shield; label: string; description: string }> = {
|
||||
openid: { icon: Shield, label: "Identity", description: "Verify your identity" },
|
||||
profile: { icon: User, label: "Profile", description: "Your name and username" },
|
||||
email: { icon: Mail, label: "Email", description: "Your email address" },
|
||||
groups: { icon: Building2, label: "Groups", description: "Your organization memberships" },
|
||||
roles: { icon: Shield, label: "Roles", description: "Your roles in the organization" },
|
||||
offline_access: { icon: Key, label: "Offline Access", description: "Access data while you're away" },
|
||||
};
|
||||
|
||||
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||
interface OIDCContext {
|
||||
oidc_session_id: string;
|
||||
client_name: string;
|
||||
scopes: string[];
|
||||
redirect_uri: string;
|
||||
}
|
||||
|
||||
type PageStep = "loading" | "login" | "consent" | "error";
|
||||
|
||||
// ── API helpers ───────────────────────────────────────────────────────────────
|
||||
async function fetchOIDCContext(oidcSessionId: string): Promise<OIDCContext> {
|
||||
const res = await fetch(`${GATEHOUSE_OIDC}/oidc/begin`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ oidc_session_id: oidcSessionId }),
|
||||
});
|
||||
const body = await res.json();
|
||||
if (!res.ok || !body.success) {
|
||||
throw new Error(body.message || "Failed to load authorization context.");
|
||||
}
|
||||
return body.data as OIDCContext;
|
||||
}
|
||||
|
||||
async function completeOIDCFlow(oidcSessionId: string, token: string): Promise<string> {
|
||||
const res = await fetch(`${GATEHOUSE_OIDC}/oidc/complete`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ oidc_session_id: oidcSessionId, token }),
|
||||
});
|
||||
const body = await res.json();
|
||||
if (!res.ok || !body.success) {
|
||||
throw new Error(body.message || "Authorization failed.");
|
||||
}
|
||||
return body.data.redirect_url as string;
|
||||
}
|
||||
|
||||
// ── Main component ────────────────────────────────────────────────────────────
|
||||
export default function OIDCLoginPage() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const { user, isLoading: authLoading, login, logout } = useAuth();
|
||||
|
||||
const oidcSessionId = searchParams.get("oidc_session_id");
|
||||
|
||||
const [step, setStep] = useState<PageStep>("loading");
|
||||
const [context, setContext] = useState<OIDCContext | null>(null);
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||
const [isCompleting, setIsCompleting] = useState(false);
|
||||
|
||||
// Login form state
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [loginError, setLoginError] = useState<string | null>(null);
|
||||
|
||||
// ── Load OIDC context on mount ─────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!oidcSessionId) {
|
||||
setErrorMsg("Missing oidc_session_id. This page must be accessed from an OIDC authorization flow.");
|
||||
setStep("error");
|
||||
return;
|
||||
}
|
||||
|
||||
fetchOIDCContext(oidcSessionId)
|
||||
.then((ctx) => {
|
||||
setContext(ctx);
|
||||
// Determine initial step once we have context and auth state is known
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
setErrorMsg(err.message);
|
||||
setStep("error");
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [oidcSessionId]);
|
||||
|
||||
// ── Determine step once both context and auth state are ready ───────────────
|
||||
useEffect(() => {
|
||||
if (authLoading || !context || step !== "loading") return;
|
||||
const token = tokenManager.getToken();
|
||||
setStep(token ? "consent" : "login");
|
||||
}, [authLoading, context, step]);
|
||||
|
||||
// ── Complete OIDC flow ──────────────────────────────────────────────────────
|
||||
const handleComplete = useCallback(async () => {
|
||||
if (!context) return;
|
||||
const token = tokenManager.getToken();
|
||||
if (!token) {
|
||||
setStep("login");
|
||||
return;
|
||||
}
|
||||
setIsCompleting(true);
|
||||
try {
|
||||
const redirectUrl = await completeOIDCFlow(context.oidc_session_id, token);
|
||||
window.location.href = redirectUrl;
|
||||
} catch (err) {
|
||||
setErrorMsg(err instanceof Error ? err.message : "Could not complete authorization.");
|
||||
setStep("error");
|
||||
} finally {
|
||||
setIsCompleting(false);
|
||||
}
|
||||
}, [context]);
|
||||
|
||||
// ── Login form submit ───────────────────────────────────────────────────────
|
||||
const handleLoginSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!context) return;
|
||||
setLoginError(null);
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
// skipNavigate=true so we control post-login navigation
|
||||
const result = await login(email, password, false, true);
|
||||
if (result.requiresTotp || result.requiresWebAuthn) {
|
||||
// MFA required — hand off to main login page which already handles this
|
||||
navigate(`/login?oidc_session_id=${context.oidc_session_id}`);
|
||||
return;
|
||||
}
|
||||
// Login succeeded — move to consent step
|
||||
setStep("consent");
|
||||
} catch (err) {
|
||||
const message =
|
||||
err instanceof ApiError ? err.message
|
||||
: err instanceof Error ? err.message
|
||||
: "Invalid email or password.";
|
||||
setLoginError(message);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ── Deny / cancel ───────────────────────────────────────────────────────────
|
||||
const handleDeny = () => {
|
||||
if (context?.redirect_uri) {
|
||||
window.location.href = `${context.redirect_uri}?error=access_denied&error_description=User+denied+access`;
|
||||
} else {
|
||||
navigate("/");
|
||||
}
|
||||
};
|
||||
|
||||
// ── Switch account ──────────────────────────────────────────────────────────
|
||||
const handleSwitchAccount = async () => {
|
||||
await logout();
|
||||
setStep("login");
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
setLoginError(null);
|
||||
};
|
||||
|
||||
// ── Render: loading ──────────────────────────────────────────────────────────
|
||||
if (step === "loading") {
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
<Loader2 className="w-8 h-8 text-accent animate-spin mx-auto mb-4" />
|
||||
<p className="text-sm text-muted-foreground">Loading authorization request…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Render: error ─────────────────────────────────────────────────────────────
|
||||
if (step === "error") {
|
||||
return (
|
||||
<div className="auth-card text-center space-y-4">
|
||||
<div className="w-14 h-14 rounded-full bg-destructive/10 flex items-center justify-center mx-auto">
|
||||
<XCircle className="w-7 h-7 text-destructive" />
|
||||
</div>
|
||||
<h1 className="text-lg font-semibold text-foreground">Authorization Error</h1>
|
||||
<p className="text-sm text-muted-foreground">{errorMsg}</p>
|
||||
{context?.redirect_uri && (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
window.location.href = `${context.redirect_uri}?error=server_error&error_description=${encodeURIComponent(errorMsg ?? "Unknown error")}`;
|
||||
}}
|
||||
>
|
||||
Return to application
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="ghost" className="w-full" onClick={() => navigate("/")}>
|
||||
Go to dashboard
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Render: login form ────────────────────────────────────────────────────────
|
||||
if (step === "login") {
|
||||
return (
|
||||
<div className="auth-card space-y-6">
|
||||
{/* Header */}
|
||||
<div className="text-center space-y-3">
|
||||
<div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mx-auto">
|
||||
<Shield className="w-7 h-7 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-foreground tracking-tight">
|
||||
Sign in to continue
|
||||
</h1>
|
||||
{context && (
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
<span className="font-medium text-foreground">{context.client_name}</span>
|
||||
{" "}is requesting access to your account
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Requested scopes preview */}
|
||||
{context && context.scopes.length > 0 && (
|
||||
<Card className="p-3 bg-secondary/30 border-0">
|
||||
<p className="text-xs text-muted-foreground mb-2">This application will access:</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{context.scopes.map((scope) => {
|
||||
const meta = SCOPE_META[scope];
|
||||
return (
|
||||
<Badge key={scope} variant="secondary" className="text-xs gap-1">
|
||||
{meta?.label ?? scope}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Login form */}
|
||||
<form onSubmit={handleLoginSubmit} className="space-y-4">
|
||||
{loginError && (
|
||||
<div className="flex items-start gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/20">
|
||||
<AlertTriangle className="w-4 h-4 text-destructive flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-destructive">{loginError}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="oidc-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="oidc-email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
className="pl-9"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="oidc-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="oidc-password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
className="pl-9"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? (
|
||||
<><Loader2 className="w-4 h-4 animate-spin mr-2" />Signing in…</>
|
||||
) : (
|
||||
<><ArrowRight className="w-4 h-4 mr-2" />Sign in</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Need an account?{" "}
|
||||
<a href="/register" className="text-primary hover:underline">Register here</a>
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Forgot your password?{" "}
|
||||
<a href="/forgot-password" className="text-primary hover:underline">Reset it</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDeny}
|
||||
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Cancel and return to application
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Render: consent screen (user is authenticated) ────────────────────────────
|
||||
if (step === "consent" && context) {
|
||||
return (
|
||||
<div className="auth-card space-y-6">
|
||||
{/* Header */}
|
||||
<div className="text-center space-y-3">
|
||||
<div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mx-auto">
|
||||
<Shield className="w-7 h-7 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-foreground tracking-tight">
|
||||
Authorize {context.client_name}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
This application is requesting access to your account
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Signed-in-as banner */}
|
||||
{user && (
|
||||
<Card className="p-3 bg-secondary/30 border-0 flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<div className="w-7 h-7 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
|
||||
<User className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{user.email}</p>
|
||||
<p className="text-xs text-muted-foreground">Signed in</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSwitchAccount}
|
||||
className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 flex-shrink-0 transition-colors"
|
||||
>
|
||||
<LogOut className="w-3 h-3" />
|
||||
Switch
|
||||
</button>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Requested permissions */}
|
||||
<Card className="p-4 bg-secondary/30 border-0">
|
||||
<p className="text-sm font-medium text-foreground mb-3">
|
||||
{context.client_name} is requesting:
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{context.scopes.map((scope) => {
|
||||
const meta = SCOPE_META[scope];
|
||||
const Icon = meta?.icon ?? Key;
|
||||
return (
|
||||
<li key={scope} className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-card flex items-center justify-center flex-shrink-0">
|
||||
<Icon className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{meta?.label ?? scope}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{meta?.description ?? scope}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={handleComplete}
|
||||
disabled={isCompleting}
|
||||
>
|
||||
{isCompleting ? (
|
||||
<><Loader2 className="w-4 h-4 animate-spin mr-2" />Completing…</>
|
||||
) : (
|
||||
<><CheckCircle className="w-4 h-4 mr-2" />Allow access</>
|
||||
)}
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full" onClick={handleDeny} disabled={isCompleting}>
|
||||
<XCircle className="w-4 h-4 mr-2" />
|
||||
Deny
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-center text-muted-foreground">
|
||||
By allowing, you agree to share the above information with{" "}
|
||||
<span className="font-medium text-foreground">{context.client_name}</span>.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -128,7 +128,7 @@ function CADetailCard({ ca, onEdit, onRotate, onDelete }: CADetailCardProps) {
|
||||
<CardContent className="space-y-4">
|
||||
{/* Stats — hidden for system CAs (we have no cert records for them) */}
|
||||
{!isSystem && (
|
||||
<div className="grid grid-cols-3 gap-3 text-center">
|
||||
<div className="grid grid-cols-4 gap-3 text-center">
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<p className="text-lg font-semibold">{ca.active_certs}</p>
|
||||
<p className="text-xs text-muted-foreground">Active certs</p>
|
||||
@@ -141,6 +141,10 @@ function CADetailCard({ ca, onEdit, onRotate, onDelete }: CADetailCardProps) {
|
||||
<p className="text-lg font-semibold">{ca.default_cert_validity_hours}h</p>
|
||||
<p className="text-xs text-muted-foreground">Default validity</p>
|
||||
</div>
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<p className="text-lg font-semibold">{ca.next_serial_number ?? '—'}</p>
|
||||
<p className="text-xs text-muted-foreground">Next serial</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
|
||||
import { api, OrgComplianceMember, create403Handler } from "@/lib/api";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useOrganizations } from "@/hooks/useOrganizations";
|
||||
import { useOrg } from "@/contexts/OrgContext";
|
||||
|
||||
const STATUS_CONFIG: Record<string, { label: string; color: string; icon: typeof Clock }> = {
|
||||
compliant: {
|
||||
@@ -47,19 +47,10 @@ const STATUS_CONFIG: Record<string, { label: string; color: string; icon: typeof
|
||||
export default function CompliancePage() {
|
||||
const navigate = useNavigate();
|
||||
const { toast } = useToast();
|
||||
const [currentOrgId, setCurrentOrgId] = useState<string | null>(null);
|
||||
const { selectedOrgId: currentOrgId } = useOrg();
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
|
||||
// Fetch organizations to get current org
|
||||
const { data: organizations, isLoading: orgsLoading } = useOrganizations();
|
||||
|
||||
useEffect(() => {
|
||||
if (organizations && organizations.length > 0) {
|
||||
setCurrentOrgId(organizations[0].id);
|
||||
}
|
||||
}, [organizations]);
|
||||
|
||||
// Fetch compliance data
|
||||
const { data: complianceData, isLoading: complianceLoading } = useQuery({
|
||||
queryKey: ['org-compliance', currentOrgId],
|
||||
@@ -101,7 +92,7 @@ export default function CompliancePage() {
|
||||
suspended: complianceData?.members?.filter(m => m.status === 'suspended').length || 0,
|
||||
};
|
||||
|
||||
if (orgsLoading || complianceLoading) {
|
||||
if (complianceLoading) {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="flex items-center justify-center py-12">
|
||||
|
||||
@@ -344,11 +344,18 @@ function DepartmentMembersPanel({ orgId, deptId }: { orgId: string; deptId: stri
|
||||
className="flex-1 h-8 rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="">Select org member to add…</option>
|
||||
{available.map((m) => (
|
||||
<option key={m.user_id} value={m.user_id}>
|
||||
{m.user?.full_name || m.user?.email || m.user_id}
|
||||
</option>
|
||||
))}
|
||||
{available.map((m) => {
|
||||
const email = m.user?.email || "";
|
||||
const name = m.user?.full_name;
|
||||
const label = name && email
|
||||
? `${name} (${email})`
|
||||
: email || m.user_id;
|
||||
return (
|
||||
<option key={m.user_id} value={m.user_id}>
|
||||
{label}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
<Button size="sm" onClick={handleAdd} disabled={!selectedUserId || isAdding}>
|
||||
{isAdding ? <Loader2 className="w-3 h-3 animate-spin mr-1" /> : <UserPlus className="w-3 h-3 mr-1" />}
|
||||
|
||||
+998
-204
File diff suppressed because it is too large
Load Diff
@@ -23,10 +23,11 @@ import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { api, OIDCClient, OIDCClientWithSecret } from "@/lib/api";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useOrg } from "@/contexts/OrgContext";
|
||||
|
||||
export default function OIDCClientsPage() {
|
||||
const { toast } = useToast();
|
||||
const [orgId, setOrgId] = useState<string | null>(null);
|
||||
const { selectedOrgId: orgId } = useOrg();
|
||||
const [clients, setClients] = useState<OIDCClient[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
@@ -44,15 +45,10 @@ export default function OIDCClientsPage() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
api.users.organizations()
|
||||
.then((data) => {
|
||||
if (!data.organizations.length) { setIsLoading(false); return; }
|
||||
const id = data.organizations[0].id;
|
||||
setOrgId(id);
|
||||
loadData(id);
|
||||
})
|
||||
.catch(() => { setIsLoading(false); });
|
||||
}, []);
|
||||
if (!orgId) { setIsLoading(false); return; }
|
||||
setIsLoading(true);
|
||||
loadData(orgId);
|
||||
}, [orgId]);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!orgId || !nameRef.current || !urisRef.current) return;
|
||||
|
||||
@@ -1,33 +1,82 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Building2, Users, Shield, Key, ArrowRight, TrendingUp, Loader2 } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { api, Organization, OIDCClient } from "@/lib/api";
|
||||
import { Building2, Users, Shield, Key, ArrowRight, TrendingUp, Loader2, Trash2, AlertTriangle, ArrowLeftRight } from "lucide-react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { api, OIDCClient, ApiError } from "@/lib/api";
|
||||
import { useOrg } from "@/contexts/OrgContext";import { useOrganizations } from "@/hooks/useOrganizations";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
|
||||
export default function OrgOverviewPage() {
|
||||
const [org, setOrg] = useState<Organization | null>(null);
|
||||
const navigate = useNavigate();
|
||||
const { selectedOrg, selectOrg } = useOrg();
|
||||
const { refetch: refetchOrgs } = useOrganizations();
|
||||
const [memberCount, setMemberCount] = useState<number>(0);
|
||||
const [clientCount, setClientCount] = useState<number>(0);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Delete org dialog state
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
const isOwner = selectedOrg?.role === "owner";
|
||||
|
||||
useEffect(() => {
|
||||
api.users.organizations()
|
||||
.then(async (data) => {
|
||||
if (!data.organizations.length) return;
|
||||
const first = data.organizations[0];
|
||||
setOrg(first);
|
||||
|
||||
const [membersResp, clientsResp] = await Promise.allSettled([
|
||||
api.organizations.getMembers(first.id),
|
||||
api.organizations.getClients(first.id),
|
||||
]);
|
||||
|
||||
if (membersResp.status === "fulfilled") setMemberCount(membersResp.value.count);
|
||||
if (clientsResp.status === "fulfilled") setClientCount((clientsResp.value as { clients: OIDCClient[]; count: number }).count);
|
||||
})
|
||||
.catch(console.error)
|
||||
if (!selectedOrg) return;
|
||||
setIsLoading(true);
|
||||
Promise.allSettled([
|
||||
api.organizations.getMembers(selectedOrg.id),
|
||||
api.organizations.getClients(selectedOrg.id),
|
||||
]).then(([membersResp, clientsResp]) => {
|
||||
if (membersResp.status === "fulfilled") setMemberCount(membersResp.value.count);
|
||||
if (clientsResp.status === "fulfilled") setClientCount((clientsResp.value as { clients: OIDCClient[]; count: number }).count);
|
||||
}).catch(console.error)
|
||||
.finally(() => setIsLoading(false));
|
||||
}, []);
|
||||
}, [selectedOrg?.id]);
|
||||
|
||||
const handleDeleteOrg = async () => {
|
||||
if (!selectedOrg) return;
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
await api.organizations.deleteOrganization(selectedOrg.id);
|
||||
toast({ title: "Organization deleted", description: `"${selectedOrg.name}" has been deleted.` });
|
||||
setDeleteDialogOpen(false);
|
||||
// Refresh org list; context will auto-select next available org
|
||||
const result = await refetchOrgs();
|
||||
const remaining = result.data ?? [];
|
||||
if (remaining.length > 0) {
|
||||
selectOrg(remaining[0]);
|
||||
navigate("/org");
|
||||
} else {
|
||||
navigate("/org-setup");
|
||||
}
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.type === "ORG_HAS_MEMBERS") {
|
||||
toast({
|
||||
title: "Cannot delete organization",
|
||||
description: "This organization still has other members. Transfer ownership or remove all members first.",
|
||||
variant: "destructive",
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "Deletion failed",
|
||||
description: err instanceof ApiError ? err.message : "An unexpected error occurred.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
setDeleteDialogOpen(false);
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const quickLinks = [
|
||||
{
|
||||
@@ -50,7 +99,7 @@ export default function OrgOverviewPage() {
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) {
|
||||
if (isLoading && !selectedOrg) {
|
||||
return (
|
||||
<div className="page-container flex items-center justify-center py-12">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||||
@@ -58,6 +107,7 @@ export default function OrgOverviewPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const org = selectedOrg;
|
||||
const createdAt = org?.created_at
|
||||
? new Date(org.created_at).toLocaleDateString("en-US", { month: "long", year: "numeric" })
|
||||
: "";
|
||||
@@ -115,7 +165,7 @@ export default function OrgOverviewPage() {
|
||||
|
||||
{/* Quick Links */}
|
||||
<h2 className="text-lg font-semibold mb-4">Quick Actions</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="grid gap-4 md:grid-cols-3 mb-8">
|
||||
{quickLinks.map((link) => (
|
||||
<Link key={link.href} to={link.href}>
|
||||
<Card className="h-full hover:border-accent/50 transition-colors cursor-pointer group">
|
||||
@@ -133,6 +183,92 @@ export default function OrgOverviewPage() {
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Danger Zone — owners only */}
|
||||
{isOwner && (
|
||||
<Card className="border-destructive/40">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base text-destructive flex items-center gap-2">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
Danger Zone
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Irreversible actions for this organization. Proceed with caution.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Transfer ownership hint */}
|
||||
<div className="flex items-center justify-between rounded-lg border border-border p-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium">Transfer Ownership</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Pass ownership to another member before deleting the organization.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigate("/org/members")}
|
||||
>
|
||||
<ArrowLeftRight className="w-4 h-4 mr-2" />
|
||||
Go to Members
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Delete organization */}
|
||||
<div className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive/5 p-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-destructive">Delete Organization</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Permanently deletes this organization.{" "}
|
||||
{memberCount > 1
|
||||
? `You must remove all ${memberCount - 1} other member${memberCount > 2 ? "s" : ""} first.`
|
||||
: "This action cannot be undone."}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => setDeleteDialogOpen(true)}
|
||||
disabled={memberCount > 1}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Delete confirmation dialog */}
|
||||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2 text-destructive">
|
||||
<Trash2 className="w-5 h-5" />
|
||||
Delete "{org?.name}"?
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
This will permanently delete the organization and all associated
|
||||
data. This action <strong>cannot be undone</strong>.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
|
||||
<AlertTriangle className="w-4 h-4 inline mr-2" />
|
||||
You are about to delete <strong>{org?.name}</strong>. All settings,
|
||||
policies, OIDC clients, and CA configurations will be lost.
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDeleteDialogOpen(false)} disabled={isDeleting}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDeleteOrg} disabled={isDeleting}>
|
||||
{isDeleting && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
Yes, delete organization
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ import { Button } from "@/components/ui/button";
|
||||
import { api, OrgPolicyResponse, UpdateOrgPolicyDto, create403Handler } from "@/lib/api";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useOrganizations } from "@/hooks/useOrganizations";
|
||||
import { useOrg } from "@/contexts/OrgContext";
|
||||
|
||||
const MFA_MODE_LABELS: Record<string, { label: string; description: string }> = {
|
||||
disabled: {
|
||||
@@ -41,8 +41,8 @@ export default function PoliciesPage() {
|
||||
const navigate = useNavigate();
|
||||
const { toast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
const [currentOrgId, setCurrentOrgId] = useState<string | null>(null);
|
||||
|
||||
const { selectedOrgId: currentOrgId } = useOrg();
|
||||
|
||||
// Local form state for unsaved changes
|
||||
const [formData, setFormData] = useState({
|
||||
mfa_policy_mode: '',
|
||||
@@ -51,15 +51,6 @@ export default function PoliciesPage() {
|
||||
});
|
||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
||||
|
||||
// Fetch organizations to get current org
|
||||
const { data: organizations, isLoading: orgsLoading } = useOrganizations();
|
||||
|
||||
useEffect(() => {
|
||||
if (organizations && organizations.length > 0) {
|
||||
setCurrentOrgId(organizations[0].id);
|
||||
}
|
||||
}, [organizations]);
|
||||
|
||||
// Fetch org policy
|
||||
const { data: policy, isLoading: policyLoading } = useQuery({
|
||||
queryKey: ['org-policy', currentOrgId],
|
||||
@@ -180,7 +171,7 @@ export default function PoliciesPage() {
|
||||
}
|
||||
};
|
||||
|
||||
if (orgsLoading || policyLoading) {
|
||||
if (policyLoading) {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="flex items-center justify-center py-12">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Mail, Upload, CheckCircle, AlertCircle, Loader2, Bell } from "lucide-react";
|
||||
import { Mail, Upload, CheckCircle, AlertCircle, Loader2, Bell, AlertTriangle, Trash2, Building2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
@@ -7,9 +7,18 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { api, ApiError, PendingInvite } from "@/lib/api";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
function ProfileSkeleton() {
|
||||
return (
|
||||
@@ -57,12 +66,17 @@ function ProfileSkeleton() {
|
||||
}
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { user, isLoading: authLoading, refreshUser } = useAuth();
|
||||
const { user, isLoading: authLoading, refreshUser, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [name, setName] = useState("");
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [pendingInvites, setPendingInvites] = useState<PendingInvite[]>([]);
|
||||
|
||||
// Delete account dialog state
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
// Sync local name state with user data
|
||||
useEffect(() => {
|
||||
if (user?.full_name) {
|
||||
@@ -88,6 +102,35 @@ export default function ProfilePage() {
|
||||
.slice(0, 2);
|
||||
};
|
||||
|
||||
const handleDeleteAccount = async () => {
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
await api.users.deleteMe();
|
||||
toast({ title: "Account deleted", description: "Your account has been deleted." });
|
||||
setDeleteDialogOpen(false);
|
||||
await logout();
|
||||
navigate("/login");
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.type === "USER_IS_SOLE_OWNER") {
|
||||
const orgs: string[] = (err.details?.organizations as string[]) ?? [];
|
||||
toast({
|
||||
title: "Cannot delete account",
|
||||
description: `You are the sole owner of: ${orgs.join(", ")}. Transfer ownership or delete those organizations first.`,
|
||||
variant: "destructive",
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "Deletion failed",
|
||||
description: err instanceof ApiError ? err.message : "An unexpected error occurred.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
setDeleteDialogOpen(false);
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!name.trim()) {
|
||||
toast({
|
||||
@@ -139,6 +182,20 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Account Suspended Banner */}
|
||||
{(user.status === "suspended" || user.status === "compliance_suspended") && (
|
||||
<div className="flex items-start gap-3 rounded-lg border border-red-300 bg-red-50 px-4 py-4 text-red-800 dark:border-red-700 dark:bg-red-950/60 dark:text-red-300">
|
||||
<AlertTriangle className="w-5 h-5 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="font-semibold text-sm">Account suspended</p>
|
||||
<p className="text-sm mt-0.5 opacity-90">
|
||||
Your account has been suspended. You cannot perform most actions.
|
||||
Please contact your administrator to resolve this.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pending Invitations Banner */}
|
||||
{pendingInvites.length > 0 && (
|
||||
<div className="rounded-lg border border-primary/40 bg-primary/10 p-4 space-y-3">
|
||||
@@ -250,7 +307,75 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Danger Zone */}
|
||||
<Card className="border-destructive/40">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base text-destructive flex items-center gap-2">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
Danger Zone
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Irreversible actions for your account. Proceed with caution.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive/5 p-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-destructive">Delete Account</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Permanently deletes your profile and all associated data. If you own
|
||||
any organizations you must transfer ownership or delete them first.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => setDeleteDialogOpen(true)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Delete account
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Delete account confirmation dialog */}
|
||||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2 text-destructive">
|
||||
<Trash2 className="w-5 h-5" />
|
||||
Delete your account?
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Your profile, SSH keys, linked accounts, and session data will be
|
||||
permanently deleted. This action <strong>cannot be undone</strong>.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="rounded-lg border border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-950/40 p-3 text-sm text-amber-800 dark:text-amber-300 space-y-1">
|
||||
<p className="flex items-center gap-2 font-medium">
|
||||
<Building2 className="w-4 h-4" />
|
||||
Organization ownership check
|
||||
</p>
|
||||
<p>
|
||||
If you are the sole owner of any organization that has other members,
|
||||
you must <strong>transfer ownership</strong> to another member or delete
|
||||
those organizations before proceeding.
|
||||
</p>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDeleteDialogOpen(false)} disabled={isDeleting}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDeleteAccount} disabled={isDeleting}>
|
||||
{isDeleting && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
Yes, delete my account
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user