import React, { useState, useEffect } from 'react';
function SessionManager() {
const [sessions, setSessions] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
loadSessions();
}, []);
const loadSessions = async () => {
try {
const data = await getActiveSessions();
setSessions(data);
} catch (error) {
console.error('Failed to load sessions:', error);
} finally {
setLoading(false);
}
};
const handleLogoutSession = async (sessionId, deviceName) => {
const confirmed = confirm(`Logout from ${deviceName}?`);
if (!confirmed) return;
try {
await logoutSession(sessionId);
await loadSessions();
alert('Session terminated successfully');
} catch (error) {
alert('Failed to logout: ' + error.message);
}
};
const handleLogoutAll = async () => {
const confirmed = confirm(
'This will log you out from all other devices. Continue?'
);
if (!confirmed) return;
try {
const result = await logoutOtherSessions();
await loadSessions();
alert(`Logged out from ${result.terminated_count} devices`);
} catch (error) {
alert('Failed to logout: ' + error.message);
}
};
const formatDate = (dateString) => {
return new Date(dateString).toLocaleString();
};
if (loading) return <div>Loading sessions...</div>;
return (
<div className="session-manager">
<div className="header">
<h2>Active Sessions ({sessions.length})</h2>
<button onClick={handleLogoutAll} disabled={sessions.length <= 1}>
Logout All Other Devices
</button>
</div>
<div className="sessions-list">
{sessions.map(session => (
<div
key={session.id}
className={`session-card ${session.is_current ? 'current' : ''}`}
>
<div className="session-info">
<h3>
{session.device_name}
{session.is_current && <span className="badge">Current</span>}
</h3>
<p className="ip">{session.ip_address}</p>
<p className="activity">
Last active: {formatDate(session.last_activity)}
</p>
<p className="created">
Created: {formatDate(session.created_at)}
</p>
</div>
{!session.is_current && (
<button
onClick={() => handleLogoutSession(session.id, session.device_name)}
className="logout-btn"
>
Logout
</button>
)}
</div>
))}
</div>
</div>
);
}
export default SessionManager;
