"use client"; import { AlertTriangle, Check, Clock, Eye, EyeOff, Key, Loader2, Lock, MapPin, Monitor, Shield, Smartphone, Trash2, } from "lucide-react"; import { useState } from "react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupInput } from "@/components/ui/input-group"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface SecuritySession { id: string; device: string; location: string; ipAddress: string; lastActive: Date; current: boolean; } export interface SecurityEvent { id: string; type: "login" | "password_change" | "2fa_enabled" | "2fa_disabled" | "logout"; description: string; ipAddress: string; location: string; timestamp: Date; status: "success" | "failed" | "suspicious"; } export interface SettingsSecurityProps { twoFactorEnabled?: boolean; sessions?: SecuritySession[]; securityHistory?: SecurityEvent[]; onPasswordChange?: ( currentPassword: string, newPassword: string ) => Promise; onEnable2FA?: () => Promise; onDisable2FA?: () => Promise; onRevokeSession?: (sessionId: string) => Promise; onRevokeAllSessions?: () => Promise; onGenerateBackupCodes?: () => Promise; className?: string; } function formatDate(date: Date): string { return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit", }).format(date); } function formatRelativeTime(date: Date): string { const now = Date.now(); const diff = now - date.getTime(); const minutes = Math.floor(diff / 60_000); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); if (minutes < 1) return "Just now"; if (minutes < 60) return `${minutes}m ago`; if (hours < 24) return `${hours}h ago`; if (days < 7) return `${days}d ago`; return formatDate(date); } export default function SettingsSecurity({ twoFactorEnabled = false, sessions = [], securityHistory = [], onPasswordChange, onEnable2FA, onDisable2FA, onRevokeSession, onRevokeAllSessions, onGenerateBackupCodes, className, }: SettingsSecurityProps) { const [isChangingPassword, setIsChangingPassword] = useState(false); const [isRevoking, setIsRevoking] = useState(null); const [passwordDialogOpen, setPasswordDialogOpen] = useState(false); const [backupCodesDialogOpen, setBackupCodesDialogOpen] = useState(false); const [showBackupCodes, setShowBackupCodes] = useState(false); const [errors, setErrors] = useState>({}); const [backupCodes, setBackupCodes] = useState([]); const [passwordData, setPasswordData] = useState({ current: "", new: "", confirm: "", }); const handlePasswordChange = async () => { setErrors({}); if (!passwordData.current.trim()) { setErrors({ current: "Current password is required" }); return; } if (!passwordData.new.trim()) { setErrors({ new: "New password is required" }); return; } if (passwordData.new.length < 8) { setErrors({ new: "Password must be at least 8 characters" }); return; } if (passwordData.new !== passwordData.confirm) { setErrors({ confirm: "Passwords do not match" }); return; } setIsChangingPassword(true); try { await onPasswordChange?.(passwordData.current, passwordData.new); setPasswordData({ current: "", new: "", confirm: "" }); setPasswordDialogOpen(false); } catch (error) { setErrors({ _general: error instanceof Error ? error.message : "Failed to change password", }); } finally { setIsChangingPassword(false); } }; const handleGenerateBackupCodes = async () => { try { const codes = await onGenerateBackupCodes?.(); if (codes) { setBackupCodes(codes); setBackupCodesDialogOpen(true); } } catch (error) { setErrors({ backupCodes: error instanceof Error ? error.message : "Failed to generate backup codes", }); } }; const getEventIcon = (type: SecurityEvent["type"]) => { switch (type) { case "login": return Lock; case "password_change": return Key; case "2fa_enabled": case "2fa_disabled": return Shield; default: return Clock; } }; const getStatusBadge = (status: SecurityEvent["status"]) => { switch (status) { case "success": return ( Success ); case "failed": return ( Failed ); case "suspicious": return ( Suspicious ); } }; return (

Security Manage your account security and authentication

{/* Password & 2FA */}

{/* Password Change */}

Password

{/* Two-Factor Authentication */}

Two-Factor Authentication

{twoFactorEnabled ? ( <>

Enabled

Disable Two-Factor Authentication? This will reduce the security of your account. You can re-enable it anytime. Cancel Disable 2FA

) : ( )}

{/* Active Sessions */}

Active Sessions

{sessions.length > 1 && ( Revoke All Sessions? This will sign you out from all devices except this one. Cancel Revoke All )}

{sessions.length === 0 ? (

No active sessions

) : (

{sessions.map((session) => (

{session.device.includes("Mobile") ? ( ) : ( )}

{session.device} {session.current && ( Current )}

{session.location} • {session.ipAddress} • Active {formatRelativeTime(session.lastActive)}

{!session.current && ( )}

))}

)}

{/* Security History */}

Security History

{securityHistory.length === 0 ? (

No security events

) : (

{securityHistory.map((event) => { const Icon = getEventIcon(event.type); return (

{event.description} {getStatusBadge(event.status)}

{event.location} • {event.ipAddress} • {formatDate(event.timestamp)}

); })}

)}

{/* Backup Codes Dialog */} ); }

Active Sessions

Security History

Example Usage