132 lines
4.2 KiB
TypeScript
132 lines
4.2 KiB
TypeScript
import {
|
|
Calendar,
|
|
Clock,
|
|
ExternalLink,
|
|
Globe,
|
|
MonitorSmartphone,
|
|
Shield,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
interface UserAccountInfoProps {
|
|
user: {
|
|
accountCreated: number;
|
|
lastLogin: number | null;
|
|
ipRegister: string;
|
|
ipCurrent: string;
|
|
twoFactorConfirmed: number;
|
|
machine_id: string;
|
|
mail: string;
|
|
gender: string;
|
|
};
|
|
}
|
|
|
|
export function UserAccountInfo({ user }: UserAccountInfoProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Account Details</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<Calendar className="h-4 w-4 text-muted-foreground shrink-0" />
|
|
<span className="text-muted-foreground">Registered</span>
|
|
<span className="ml-auto font-medium">
|
|
{new Date(user.accountCreated * 1000).toLocaleDateString(
|
|
"it-IT",
|
|
{
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
},
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<Clock className="h-4 w-4 text-muted-foreground shrink-0" />
|
|
<span className="text-muted-foreground">Last Login</span>
|
|
<span className="ml-auto font-medium">
|
|
{user.lastLogin
|
|
? new Date(user.lastLogin * 1000).toLocaleDateString(
|
|
"it-IT",
|
|
{
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
},
|
|
)
|
|
: "Never"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<Globe className="h-4 w-4 text-muted-foreground shrink-0" />
|
|
<span className="text-muted-foreground">IP Register</span>
|
|
<span className="ml-auto flex items-center gap-1.5">
|
|
<code className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
|
|
{user.ipRegister}
|
|
</code>
|
|
<Link
|
|
href={`/admin/users?search=${user.ipRegister}`}
|
|
title="Find other users with this IP"
|
|
>
|
|
<ExternalLink className="h-3 w-3 text-primary" />
|
|
</Link>
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<Globe className="h-4 w-4 text-muted-foreground shrink-0" />
|
|
<span className="text-muted-foreground">IP Current</span>
|
|
<span className="ml-auto flex items-center gap-1.5">
|
|
<code className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
|
|
{user.ipCurrent}
|
|
</code>
|
|
<Link
|
|
href={`/admin/users?search=${user.ipCurrent}`}
|
|
title="Find other users with this IP"
|
|
>
|
|
<ExternalLink className="h-3 w-3 text-primary" />
|
|
</Link>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<Shield className="h-4 w-4 text-muted-foreground shrink-0" />
|
|
<span className="text-muted-foreground">2FA</span>
|
|
<Badge
|
|
variant={user.twoFactorConfirmed ? "default" : "outline"}
|
|
className="ml-auto"
|
|
>
|
|
{user.twoFactorConfirmed ? "Enabled" : "Disabled"}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<MonitorSmartphone className="h-4 w-4 text-muted-foreground shrink-0" />
|
|
<span className="text-muted-foreground">Machine ID</span>
|
|
<code className="ml-auto text-xs font-mono bg-muted px-2 py-0.5 rounded truncate max-w-[180px]">
|
|
{user.machine_id || "N/A"}
|
|
</code>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<span className="text-muted-foreground">Email</span>
|
|
<span className="ml-auto font-medium">{user.mail}</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<span className="text-muted-foreground">Gender</span>
|
|
<Badge variant="outline" className="ml-auto">
|
|
{user.gender}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|