Function SecuritySection

web/src/app/profile/components/security-section.tsx:61–387

()

}

export function SecuritySection() {
  const { toast } = useToast()
  const queryClient = useQueryClient()

  const {
    data: sessionsData,
    isLoading: loadingSessions,
    error: sessionsError,
    refetch: refetchSessions,
    isFetching: fetchingSessions,
  } = useQuery({
    queryKey: ['sessions'],
    queryFn: fetchSessions,
  })

  const allSessions = sessionsData?.activeSessions ?? []

  const webSessions = useMemo(
    () => allSessions.filter((session) => session.sessionType === 'web'),
    [allSessions],
  )

  const cliSessions = useMemo(
    () => allSessions.filter((session) => session.sessionType === 'cli'),
    [allSessions],
  )

  const [activeTab, setActiveTab] = useState<'web' | 'cli'>('web')
  const [isLogoutConfirmOpen, setIsLogoutConfirmOpen] = useState(false)
  const [isBulkLoggingOut, setIsBulkLoggingOut] = useState(false)

  const TAB_LABELS = { web: 'Web Sessions', cli: 'CLI Sessions' } as const
  const PRIMARY_VERB = { web: 'Log out of other', cli: 'Revoke all' } as const
  const CONFIRM_VERB = { web: 'Log Out', cli: 'Revoke' } as const

  const revokeSessionMutation = useMutation({
    mutationFn: async (id: string) => {
      const res = await fetch('/api/sessions', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ sessionIds: [id] }),
      })
      if (!res.ok) {
        const errorText = await res.text()
        throw new Error(errorText)
      }
      return res.json()
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ['sessions'] })
      toast({ title: 'Session revoked' })
    },
    onError: (e: any) => {
      toast({
        title: 'Revoke failed',
        description: e.message ?? String(e),
        variant: 'destructive',
      })