feat(sessions): implement device auto-detection and active session management UI
Description:
Implements automated device detection on login and active session management UI for user profiles, as part of issue #312.
When a user logs in, the app now automatically captures their device info (OS, browser, CPU, RAM) using browser APIs and sends it to the backend. A new Active Sessions dropdown is added to the profile page via a settings icon next to the logout button, allowing users to view all active login sessions and remotely sign out of other devices.
Changes Made:
- Added device info auto-detection on login using ua-parser-js (OS, browser, CPU cores, RAM, internet speed)
- Sends device_info payload to backend on login request
- Added ActiveSessions component showing all active login sessions
- Each session card shows OS, browser, IP address, last active time
- Added "This device" badge for current session
- Added "Sign out" button for individual session termination
- Added "Sign out of all other devices" button
- Dropdown closes on outside click or ✕ button
- Fixed mobile responsive layout for icons and dropdown
- Removed Active Sessions from bottom of profile page
Type of Change:
-
Bug Fix -
Feature Development -
Documentation
Testing:
-
Tested on desktop -
Tested on mobile -
Tested in different browsers
Video Demo
Add a link to the demo of the PR
If you have used AI create this PR, please also record video of yourself explaining the changes.
Link to code walkthrough
Checklist:
-
Code follows project style guidelines -
Self-review completed -
No console errors -
TypeScript types are correct
Depends On: Backend MR in corpus-server-app must be merged first. Backend implements the sessions table and API endpoints: GET /api/v1/sessions/ DELETE /api/v1/sessions/ DELETE /api/v1/sessions/{session_id}

