nexgen_mirrors
78ac65169e
Add a celebratory experience when users join or create an organization: - Add canvas-confetti dependency for visual effects - Store organization name in localStorage after successful join/create - Display celebration dialog with confetti animation on ProfilePage - Clear the celebration flag after showing to prevent repeat displays
532 lines
19 KiB
TypeScript
532 lines
19 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Mail, Upload, CheckCircle, AlertCircle, Loader2, Bell, AlertTriangle, Trash2, Building2, TriangleAlert } 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";
|
|
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, useLocation } from "react-router-dom";
|
|
import confetti from "canvas-confetti";
|
|
|
|
// Wrapper to handle confetti failures gracefully
|
|
const fireConfetti = () => {
|
|
try {
|
|
confetti({
|
|
particleCount: 100,
|
|
spread: 70,
|
|
origin: { y: 0.6 },
|
|
});
|
|
} catch (e) {
|
|
console.warn('Confetti failed:', e);
|
|
}
|
|
};
|
|
|
|
function ProfileSkeleton() {
|
|
return (
|
|
<div className="page-container">
|
|
<div className="page-header">
|
|
<Skeleton className="h-8 w-24" />
|
|
<Skeleton className="h-4 w-80 mt-2" />
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{/* Personal Information Skeleton */}
|
|
<Card>
|
|
<CardHeader>
|
|
<Skeleton className="h-5 w-40" />
|
|
<Skeleton className="h-4 w-56 mt-1" />
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="flex items-center gap-6">
|
|
<Skeleton className="w-20 h-20 rounded-full" />
|
|
<div>
|
|
<Skeleton className="h-9 w-32" />
|
|
<Skeleton className="h-3 w-40 mt-2" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-20" />
|
|
<Skeleton className="h-12 w-full" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Email Skeleton */}
|
|
<Card>
|
|
<CardHeader>
|
|
<Skeleton className="h-5 w-32" />
|
|
<Skeleton className="h-4 w-64 mt-1" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Skeleton className="h-12 w-full" />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function ProfilePage() {
|
|
const { user, isLoading: authLoading, refreshUser, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [name, setName] = useState("");
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [pendingInvites, setPendingInvites] = useState<PendingInvite[]>([]);
|
|
const [isResending, setIsResending] = useState(false);
|
|
|
|
// Delete account dialog state
|
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
const [confirmEmail, setConfirmEmail] = useState("");
|
|
|
|
// Celebration dialog state
|
|
const [showCelebration, setShowCelebration] = useState(false);
|
|
const [celebrationOrgName, setCelebrationOrgName] = useState("");
|
|
|
|
// Sync local name state with user data
|
|
useEffect(() => {
|
|
if (user?.full_name) {
|
|
setName(user.full_name);
|
|
}
|
|
}, [user?.full_name]);
|
|
|
|
// Check for org creation/join celebration
|
|
useEffect(() => {
|
|
const fromStorage = localStorage.getItem('justJoinedOrg');
|
|
if (fromStorage) {
|
|
setCelebrationOrgName(fromStorage);
|
|
setShowCelebration(true);
|
|
fireConfetti();
|
|
localStorage.removeItem('justJoinedOrg');
|
|
}
|
|
}, [location.pathname]);
|
|
|
|
// Fetch pending invitations for this user
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
api.users.getMyInvites()
|
|
.then((res) => setPendingInvites(res.invites ?? []))
|
|
.catch(() => { /* silently ignore */ });
|
|
}, [user]);
|
|
|
|
const getInitials = (fullName: string | null) => {
|
|
if (!fullName) return "?";
|
|
return fullName
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("")
|
|
.toUpperCase()
|
|
.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);
|
|
setConfirmEmail("");
|
|
await logout();
|
|
navigate("/login");
|
|
} catch (err) {
|
|
if (err instanceof ApiError && err.type === "USER_IS_SOLE_OWNER") {
|
|
const details = err.details as {
|
|
transfer_ownership?: string[];
|
|
} | undefined;
|
|
|
|
const transferOrgs = details?.transfer_ownership ?? [];
|
|
|
|
toast({
|
|
title: "Cannot delete account",
|
|
description:
|
|
transferOrgs.length > 0
|
|
? `You are the owner of ${transferOrgs.join(", ")} and other members exist. Transfer ownership to another member before deleting your account.`
|
|
: "You own organizations with other members. Transfer ownership 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({
|
|
title: "Name required",
|
|
description: "Please enter your full name",
|
|
variant: "destructive",
|
|
});
|
|
return;
|
|
}
|
|
|
|
setIsSaving(true);
|
|
try {
|
|
await api.users.updateMe({ full_name: name.trim() });
|
|
await refreshUser();
|
|
setIsEditing(false);
|
|
toast({
|
|
title: "Profile updated",
|
|
description: "Your name has been updated successfully",
|
|
});
|
|
} catch (error) {
|
|
if (error instanceof ApiError) {
|
|
toast({
|
|
title: "Update failed",
|
|
description: error.message,
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setName(user?.full_name || "");
|
|
setIsEditing(false);
|
|
};
|
|
|
|
const handleResendVerification = async () => {
|
|
setIsResending(true);
|
|
try {
|
|
await api.auth.resendVerification(user.email);
|
|
toast({
|
|
title: "Verification email sent",
|
|
description: "Check your inbox.",
|
|
});
|
|
} catch (err) {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "Failed to send",
|
|
description: err instanceof ApiError ? err.message : "An error occurred.",
|
|
});
|
|
} finally {
|
|
setIsResending(false);
|
|
}
|
|
};
|
|
|
|
if (authLoading || !user) {
|
|
return <ProfileSkeleton />;
|
|
}
|
|
|
|
return (
|
|
<div className="page-container">
|
|
<div className="page-header">
|
|
<h1 className="page-title">Profile</h1>
|
|
<p className="page-description">
|
|
Manage your personal information and account settings
|
|
</p>
|
|
</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">
|
|
<div className="flex items-center gap-2 text-primary font-semibold text-sm">
|
|
<Bell className="w-4 h-4" />
|
|
You have {pendingInvites.length} pending invitation{pendingInvites.length > 1 ? "s" : ""}
|
|
</div>
|
|
{pendingInvites.map((invite) => (
|
|
<div
|
|
key={invite.token}
|
|
className="flex items-center justify-between rounded-md border border-border bg-card px-4 py-3"
|
|
>
|
|
<div>
|
|
<p className="text-sm font-medium text-foreground">{invite.organization.name}</p>
|
|
<p className="text-xs text-muted-foreground capitalize">
|
|
Invited as <span className="font-medium">{invite.role}</span>
|
|
</p>
|
|
</div>
|
|
<a
|
|
href={`/invite?token=${invite.token}`}
|
|
className="inline-flex items-center gap-1 rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground hover:bg-primary/90 transition-colors"
|
|
>
|
|
Accept →
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{/* 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_url || undefined} />
|
|
<AvatarFallback className="bg-primary text-primary-foreground text-xl">
|
|
{getInitials(user.full_name)}
|
|
</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)}
|
|
disabled={isSaving}
|
|
/>
|
|
<Button onClick={handleSave} disabled={isSaving}>
|
|
{isSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
|
Save
|
|
</Button>
|
|
<Button variant="outline" onClick={handleCancel} disabled={isSaving}>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-between p-3 border rounded-lg bg-secondary/30">
|
|
<span className="text-foreground">{user.full_name || "Not set"}</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.email_verified ? (
|
|
<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>
|
|
{!user.email_verified && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="mt-3"
|
|
onClick={handleResendVerification}
|
|
disabled={isResending}
|
|
>
|
|
{isResending && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
|
Send verification email
|
|
</Button>
|
|
)}
|
|
</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
|
|
organizations with other members, transfer ownership first. Sole-member
|
|
organizations are deleted automatically.
|
|
</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={(open) => {
|
|
setDeleteDialogOpen(open);
|
|
if (!open) setConfirmEmail("");
|
|
}}
|
|
>
|
|
<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>
|
|
|
|
{/* Org ownership warning */}
|
|
<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-2">
|
|
<p className="flex items-center gap-2 font-medium">
|
|
<Building2 className="w-4 h-4" />
|
|
Organization ownership check
|
|
</p>
|
|
<p>
|
|
If you own organizations with other members, you must{" "}
|
|
<strong>transfer ownership</strong> to another member first.
|
|
</p>
|
|
<p>
|
|
Organizations where you are the <strong>sole member</strong> will
|
|
be automatically deleted along with your account.
|
|
</p>
|
|
</div>
|
|
|
|
{/* What will be deleted */}
|
|
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive space-y-1">
|
|
<p className="font-medium flex items-center gap-2">
|
|
<TriangleAlert className="w-4 h-4" />
|
|
The following will be permanently deleted:
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-0.5 text-destructive/80 pl-1">
|
|
<li>Your profile and account data</li>
|
|
<li>All SSH keys and active certificates</li>
|
|
<li>All linked accounts (Google, GitHub, etc.)</li>
|
|
<li>All active sessions</li>
|
|
<li>All passkeys and MFA methods</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Email confirmation input */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="confirm-email" className="text-sm">
|
|
Type your email address{" "}
|
|
<span className="font-mono font-semibold text-foreground">
|
|
{user.email}
|
|
</span>{" "}
|
|
to confirm:
|
|
</Label>
|
|
<Input
|
|
id="confirm-email"
|
|
type="email"
|
|
placeholder={user.email}
|
|
value={confirmEmail}
|
|
onChange={(e) => setConfirmEmail(e.target.value)}
|
|
disabled={isDeleting}
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setDeleteDialogOpen(false);
|
|
setConfirmEmail("");
|
|
}}
|
|
disabled={isDeleting}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleDeleteAccount}
|
|
disabled={isDeleting || confirmEmail.trim().toLowerCase() !== user.email.toLowerCase()}
|
|
>
|
|
{isDeleting && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
|
Yes, permanently delete my account
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Celebration dialog for org creation/join */}
|
|
<Dialog open={showCelebration} onOpenChange={setShowCelebration}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2 text-center text-xl">
|
|
🎉 Congratulations!
|
|
</DialogTitle>
|
|
<DialogDescription className="text-center text-base">
|
|
You've joined <span className="font-semibold">{celebrationOrgName}</span>!
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex justify-center py-4">
|
|
<Button onClick={() => setShowCelebration(false)}>
|
|
Get Started
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|