feat: add security activity and trusted devices management to settings page
This commit is contained in:
Usman Baig
@@ -1,8 +1,11 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import ProfileSettings from '@/components/settings/ProfileSettings'
|
||||
import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
|
||||
import SecurityActivityCard from '@/components/settings/SecurityActivityCard'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
UserIcon,
|
||||
@@ -13,13 +16,26 @@ import {
|
||||
ExternalLinkIcon,
|
||||
} from '@ciphera-net/ui'
|
||||
|
||||
// Inline SVG icons not available in ciphera-ui
|
||||
function BellIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Types ---
|
||||
|
||||
type ProfileSubTab = 'profile' | 'security' | 'preferences'
|
||||
|
||||
type ActiveSelection =
|
||||
| { section: 'profile'; subTab: ProfileSubTab }
|
||||
| { section: 'notifications' }
|
||||
| { section: 'account' }
|
||||
| { section: 'devices' }
|
||||
| { section: 'activity' }
|
||||
|
||||
type ExpandableSection = 'profile' | 'account'
|
||||
|
||||
@@ -217,8 +233,31 @@ function AppSettingsSection() {
|
||||
switch (active.section) {
|
||||
case 'profile':
|
||||
return <ProfileSettings activeTab={active.subTab} />
|
||||
case 'notifications':
|
||||
return (
|
||||
<div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-8 shadow-sm">
|
||||
<div className="text-center max-w-md mx-auto">
|
||||
<BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notification Preferences</h3>
|
||||
<p className="text-sm text-neutral-500 mb-4">
|
||||
Configure which notifications you receive and how you want to be notified.
|
||||
</p>
|
||||
<Link
|
||||
href="/notifications"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors"
|
||||
>
|
||||
Open Notification Center
|
||||
<ChevronRightIcon className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
case 'account':
|
||||
return <AccountManagementCard />
|
||||
case 'devices':
|
||||
return <TrustedDevicesCard />
|
||||
case 'activity':
|
||||
return <SecurityActivityCard />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
@@ -266,6 +305,17 @@ function AppSettingsSection() {
|
||||
/>
|
||||
</ExpandableSubItems>
|
||||
</div>
|
||||
|
||||
{/* Notifications (flat, no expansion) */}
|
||||
<SectionHeader
|
||||
expanded={false}
|
||||
active={active.section === 'notifications'}
|
||||
onToggle={() => setActive({ section: 'notifications' })}
|
||||
icon={BellIcon}
|
||||
label="Notifications"
|
||||
description="Email and in-app notifications"
|
||||
hasChildren={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -308,16 +358,14 @@ function AppSettingsSection() {
|
||||
external
|
||||
/>
|
||||
<SubItem
|
||||
active={false}
|
||||
onClick={() => window.open('https://auth.ciphera.net/devices', '_blank')}
|
||||
active={active.section === 'devices'}
|
||||
onClick={() => setActive({ section: 'devices' })}
|
||||
label="Trusted Devices"
|
||||
external
|
||||
/>
|
||||
<SubItem
|
||||
active={false}
|
||||
onClick={() => window.open('https://auth.ciphera.net/activity', '_blank')}
|
||||
active={active.section === 'activity'}
|
||||
onClick={() => setActive({ section: 'activity' })}
|
||||
label="Security Activity"
|
||||
external
|
||||
/>
|
||||
</ExpandableSubItems>
|
||||
</div>
|
||||
|
||||
246
components/settings/SecurityActivityCard.tsx
Normal file
246
components/settings/SecurityActivityCard.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import { getUserActivity, type AuditLogEntry } from '@/lib/api/activity'
|
||||
import { Spinner } from '@ciphera-net/ui'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
|
||||
const EVENT_LABELS: Record<string, string> = {
|
||||
login_success: 'Sign in',
|
||||
login_failure: 'Failed sign in',
|
||||
oauth_login_success: 'OAuth sign in',
|
||||
oauth_login_failure: 'Failed OAuth sign in',
|
||||
password_change: 'Password changed',
|
||||
'2fa_enabled': '2FA enabled',
|
||||
'2fa_disabled': '2FA disabled',
|
||||
recovery_codes_regenerated: 'Recovery codes regenerated',
|
||||
account_deleted: 'Account deleted',
|
||||
}
|
||||
|
||||
const EVENT_ICONS: Record<string, string> = {
|
||||
login_success: 'M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9',
|
||||
login_failure: 'M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z',
|
||||
oauth_login_success: 'M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9',
|
||||
oauth_login_failure: 'M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z',
|
||||
password_change: 'M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z',
|
||||
'2fa_enabled': 'M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z',
|
||||
'2fa_disabled': 'M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z',
|
||||
recovery_codes_regenerated: 'M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z',
|
||||
account_deleted: 'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0',
|
||||
}
|
||||
|
||||
function getEventColor(eventType: string, outcome: string): string {
|
||||
if (outcome === 'failure') return 'text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950/30'
|
||||
if (eventType === '2fa_enabled') return 'text-green-500 dark:text-green-400 bg-green-50 dark:bg-green-950/30'
|
||||
if (eventType === '2fa_disabled') return 'text-amber-500 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30'
|
||||
if (eventType === 'account_deleted') return 'text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950/30'
|
||||
if (eventType === 'recovery_codes_regenerated') return 'text-amber-500 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30'
|
||||
return 'text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800'
|
||||
}
|
||||
|
||||
function getMethodLabel(entry: AuditLogEntry): string | null {
|
||||
const method = entry.metadata?.method
|
||||
if (!method) return null
|
||||
if (method === 'magic_link') return 'Magic link'
|
||||
if (method === 'passkey') return 'Passkey'
|
||||
return method as string
|
||||
}
|
||||
|
||||
function getFailureReason(entry: AuditLogEntry): string | null {
|
||||
if (entry.outcome !== 'failure') return null
|
||||
const reason = entry.metadata?.reason
|
||||
if (!reason) return null
|
||||
const labels: Record<string, string> = {
|
||||
invalid_credentials: 'Invalid credentials',
|
||||
invalid_password: 'Wrong password',
|
||||
account_locked: 'Account locked',
|
||||
email_not_verified: 'Email not verified',
|
||||
invalid_2fa: 'Invalid 2FA code',
|
||||
}
|
||||
return labels[reason as string] || (reason as string).replace(/_/g, ' ')
|
||||
}
|
||||
|
||||
function formatRelativeTime(dateStr: string): string {
|
||||
const date = new Date(dateStr)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - date.getTime()
|
||||
const diffMin = Math.floor(diffMs / 60000)
|
||||
const diffHr = Math.floor(diffMin / 60)
|
||||
const diffDay = Math.floor(diffHr / 24)
|
||||
|
||||
if (diffMin < 1) return 'Just now'
|
||||
if (diffMin < 60) return `${diffMin}m ago`
|
||||
if (diffHr < 24) return `${diffHr}h ago`
|
||||
if (diffDay < 7) return `${diffDay}d ago`
|
||||
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
|
||||
})
|
||||
}
|
||||
|
||||
function formatFullDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
function parseBrowserName(ua: string): string {
|
||||
if (!ua) return 'Unknown'
|
||||
if (ua.includes('Firefox')) return 'Firefox'
|
||||
if (ua.includes('Edg/')) return 'Edge'
|
||||
if (ua.includes('Chrome')) return 'Chrome'
|
||||
if (ua.includes('Safari')) return 'Safari'
|
||||
if (ua.includes('Opera') || ua.includes('OPR')) return 'Opera'
|
||||
return 'Browser'
|
||||
}
|
||||
|
||||
function parseOS(ua: string): string {
|
||||
if (!ua) return ''
|
||||
if (ua.includes('Mac OS X')) return 'macOS'
|
||||
if (ua.includes('Windows')) return 'Windows'
|
||||
if (ua.includes('Linux')) return 'Linux'
|
||||
if (ua.includes('Android')) return 'Android'
|
||||
if (ua.includes('iPhone') || ua.includes('iPad')) return 'iOS'
|
||||
return ''
|
||||
}
|
||||
|
||||
export default function SecurityActivityCard() {
|
||||
const { user } = useAuth()
|
||||
const [entries, setEntries] = useState<AuditLogEntry[]>([])
|
||||
const [totalCount, setTotalCount] = useState(0)
|
||||
const [hasMore, setHasMore] = useState(false)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [loadingMore, setLoadingMore] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [offset, setOffset] = useState(0)
|
||||
|
||||
const fetchActivity = useCallback(async (currentOffset: number, append: boolean) => {
|
||||
try {
|
||||
const data = await getUserActivity(PAGE_SIZE, currentOffset)
|
||||
const newEntries = data.entries ?? []
|
||||
setEntries(prev => append ? [...prev, ...newEntries] : newEntries)
|
||||
setTotalCount(data.total_count)
|
||||
setHasMore(data.has_more)
|
||||
setOffset(currentOffset + newEntries.length)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load activity')
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) return
|
||||
setLoading(true)
|
||||
fetchActivity(0, false).finally(() => setLoading(false))
|
||||
}, [user, fetchActivity])
|
||||
|
||||
const handleLoadMore = async () => {
|
||||
setLoadingMore(true)
|
||||
await fetchActivity(offset, true)
|
||||
setLoadingMore(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Security Activity</h2>
|
||||
<p className="text-neutral-500 dark:text-neutral-400 text-sm mb-6">
|
||||
Recent security events on your account{totalCount > 0 ? ` (${totalCount})` : ''}
|
||||
</p>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="rounded-2xl border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-950/20 p-6 text-center">
|
||||
<p className="text-red-600 dark:text-red-400">{error}</p>
|
||||
</div>
|
||||
) : entries.length === 0 ? (
|
||||
<div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 text-center">
|
||||
<svg className="w-12 h-12 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||
</svg>
|
||||
<p className="text-neutral-500 dark:text-neutral-400">No activity recorded yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{entries.map((entry) => {
|
||||
const label = EVENT_LABELS[entry.event_type] || entry.event_type.replace(/_/g, ' ')
|
||||
const color = getEventColor(entry.event_type, entry.outcome)
|
||||
const iconPath = EVENT_ICONS[entry.event_type] || EVENT_ICONS['login_success']
|
||||
const method = getMethodLabel(entry)
|
||||
const reason = getFailureReason(entry)
|
||||
const browser = entry.user_agent ? parseBrowserName(entry.user_agent) : null
|
||||
const os = entry.user_agent ? parseOS(entry.user_agent) : null
|
||||
const deviceStr = [browser, os].filter(Boolean).join(' on ')
|
||||
|
||||
return (
|
||||
<div
|
||||
key={entry.id}
|
||||
className="flex items-start gap-3 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3"
|
||||
>
|
||||
<div className={`flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center mt-0.5 ${color}`}>
|
||||
<svg className="w-4.5 h-4.5" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d={iconPath} />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium text-neutral-900 dark:text-white text-sm">
|
||||
{label}
|
||||
</span>
|
||||
{method && (
|
||||
<span className="text-xs px-1.5 py-0.5 rounded bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400">
|
||||
{method}
|
||||
</span>
|
||||
)}
|
||||
{entry.outcome === 'failure' && (
|
||||
<span className="text-xs px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-950/40 text-red-600 dark:text-red-400">
|
||||
Failed
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-500 dark:text-neutral-400 flex-wrap">
|
||||
{reason && <span>{reason}</span>}
|
||||
{reason && (deviceStr || entry.ip_address) && <span>·</span>}
|
||||
{deviceStr && <span>{deviceStr}</span>}
|
||||
{deviceStr && entry.ip_address && <span>·</span>}
|
||||
{entry.ip_address && <span>{entry.ip_address}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 text-right">
|
||||
<span className="text-xs text-neutral-500 dark:text-neutral-400" title={formatFullDate(entry.created_at)}>
|
||||
{formatRelativeTime(entry.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{hasMore && (
|
||||
<div className="pt-2 text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLoadMore}
|
||||
disabled={loadingMore}
|
||||
className="text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loadingMore ? 'Loading...' : 'Load more'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
160
components/settings/TrustedDevicesCard.tsx
Normal file
160
components/settings/TrustedDevicesCard.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import { getUserDevices, removeDevice, type TrustedDevice } from '@/lib/api/devices'
|
||||
import { Spinner, toast } from '@ciphera-net/ui'
|
||||
|
||||
function formatRelativeTime(dateStr: string): string {
|
||||
const date = new Date(dateStr)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - date.getTime()
|
||||
const diffMin = Math.floor(diffMs / 60000)
|
||||
const diffHr = Math.floor(diffMin / 60)
|
||||
const diffDay = Math.floor(diffHr / 24)
|
||||
|
||||
if (diffMin < 1) return 'Just now'
|
||||
if (diffMin < 60) return `${diffMin}m ago`
|
||||
if (diffHr < 24) return `${diffHr}h ago`
|
||||
if (diffDay < 7) return `${diffDay}d ago`
|
||||
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
|
||||
})
|
||||
}
|
||||
|
||||
function formatFullDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
function getDeviceIcon(hint: string): string {
|
||||
const h = hint.toLowerCase()
|
||||
if (h.includes('iphone') || h.includes('android') || h.includes('ios')) {
|
||||
return 'M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3'
|
||||
}
|
||||
return 'M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z'
|
||||
}
|
||||
|
||||
export default function TrustedDevicesCard() {
|
||||
const { user } = useAuth()
|
||||
const [devices, setDevices] = useState<TrustedDevice[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [removingId, setRemovingId] = useState<string | null>(null)
|
||||
|
||||
const fetchDevices = useCallback(async () => {
|
||||
try {
|
||||
const data = await getUserDevices()
|
||||
setDevices(data.devices ?? [])
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load devices')
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) return
|
||||
setLoading(true)
|
||||
fetchDevices().finally(() => setLoading(false))
|
||||
}, [user, fetchDevices])
|
||||
|
||||
const handleRemove = async (device: TrustedDevice) => {
|
||||
if (device.is_current) {
|
||||
toast.error('You cannot remove the device you are currently using.')
|
||||
return
|
||||
}
|
||||
|
||||
setRemovingId(device.id)
|
||||
try {
|
||||
await removeDevice(device.id)
|
||||
setDevices(prev => prev.filter(d => d.id !== device.id))
|
||||
toast.success('Device removed. A new sign-in from it will trigger an alert.')
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to remove device')
|
||||
} finally {
|
||||
setRemovingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Trusted Devices</h2>
|
||||
<p className="text-neutral-500 dark:text-neutral-400 text-sm mb-6">
|
||||
Devices that have signed in to your account. Removing a device means the next sign-in from it will trigger a new device alert.
|
||||
</p>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="rounded-2xl border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-950/20 p-6 text-center">
|
||||
<p className="text-red-600 dark:text-red-400">{error}</p>
|
||||
</div>
|
||||
) : devices.length === 0 ? (
|
||||
<div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 text-center">
|
||||
<svg className="w-12 h-12 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z" />
|
||||
</svg>
|
||||
<p className="text-neutral-500 dark:text-neutral-400">No trusted devices yet. They appear after you sign in.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{devices.map((device) => (
|
||||
<div
|
||||
key={device.id}
|
||||
className="flex items-center gap-3 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3"
|
||||
>
|
||||
<div className="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d={getDeviceIcon(device.display_hint)} />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-neutral-900 dark:text-white text-sm truncate">
|
||||
{device.display_hint || 'Unknown device'}
|
||||
</span>
|
||||
{device.is_current && (
|
||||
<span className="text-xs px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-950/40 text-green-600 dark:text-green-400 flex-shrink-0">
|
||||
This device
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
|
||||
<span title={formatFullDate(device.first_seen_at)}>
|
||||
First seen {formatRelativeTime(device.first_seen_at)}
|
||||
</span>
|
||||
<span>·</span>
|
||||
<span title={formatFullDate(device.last_seen_at)}>
|
||||
Last seen {formatRelativeTime(device.last_seen_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!device.is_current && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemove(device)}
|
||||
disabled={removingId === device.id}
|
||||
className="flex-shrink-0 text-xs font-medium text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{removingId === device.id ? 'Removing...' : 'Remove'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
28
lib/api/activity.ts
Normal file
28
lib/api/activity.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import apiRequest from './client'
|
||||
|
||||
export interface AuditLogEntry {
|
||||
id: string
|
||||
created_at: string
|
||||
event_type: string
|
||||
outcome: string
|
||||
ip_address?: string
|
||||
user_agent?: string
|
||||
metadata?: Record<string, string>
|
||||
}
|
||||
|
||||
export interface ActivityResponse {
|
||||
entries: AuditLogEntry[] | null
|
||||
total_count: number
|
||||
has_more: boolean
|
||||
limit: number
|
||||
offset: number
|
||||
}
|
||||
|
||||
export async function getUserActivity(
|
||||
limit = 20,
|
||||
offset = 0
|
||||
): Promise<ActivityResponse> {
|
||||
return apiRequest<ActivityResponse>(
|
||||
`/auth/user/activity?limit=${limit}&offset=${offset}`
|
||||
)
|
||||
}
|
||||
19
lib/api/devices.ts
Normal file
19
lib/api/devices.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import apiRequest from './client'
|
||||
|
||||
export interface TrustedDevice {
|
||||
id: string
|
||||
display_hint: string
|
||||
first_seen_at: string
|
||||
last_seen_at: string
|
||||
is_current: boolean
|
||||
}
|
||||
|
||||
export async function getUserDevices(): Promise<{ devices: TrustedDevice[] }> {
|
||||
return apiRequest<{ devices: TrustedDevice[] }>('/auth/user/devices')
|
||||
}
|
||||
|
||||
export async function removeDevice(deviceId: string): Promise<void> {
|
||||
return apiRequest<void>(`/auth/user/devices/${deviceId}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user