116 lines
4.7 KiB
TypeScript
116 lines
4.7 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>
|
|
)
|
|
}
|