naim-firebase-auth-wrapper
Version:
React components and hooks for Firebase Authentication and Firestore with Mantine UI
84 lines • 4.5 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useCallback } from 'react';
import { Paper, Title, Table, Button, Text, Group, Badge, Loader, ActionIcon } from '@mantine/core';
import { IconTrash, IconRefresh } from '@tabler/icons-react';
import { useAuth } from '../hooks/useAuth';
import { getUserSessions, terminateSession } from '../services/firestore';
export const SessionManager = ({ onTerminateSuccess, onError }) => {
const { user } = useAuth();
const [sessions, setSessions] = useState([]);
const [loading, setLoading] = useState(true);
const [currentSessionId, setCurrentSessionId] = useState(null);
const loadSessions = useCallback(async () => {
if (!user)
return;
setLoading(true);
try {
const userSessions = await getUserSessions(user.uid);
setSessions(userSessions);
// Get current session ID
const sessionId = localStorage.getItem('sessionId');
setCurrentSessionId(sessionId);
}
catch (error) {
console.error('Error loading sessions:', error);
onError?.(error);
}
finally {
setLoading(false);
}
}, [user, onError]);
useEffect(() => {
loadSessions();
}, [loadSessions]);
const handleTerminateSession = async (sessionId) => {
try {
await terminateSession(sessionId);
setSessions(sessions.filter(session => session.id !== sessionId));
onTerminateSuccess?.();
}
catch (error) {
console.error('Error terminating session:', error);
onError?.(error);
}
};
const formatDate = (date) => {
return new Date(date).toLocaleString();
};
const parseDeviceInfo = (deviceInfoStr) => {
try {
const deviceInfo = JSON.parse(deviceInfoStr);
return {
browser: getBrowserName(deviceInfo.userAgent),
platform: deviceInfo.platform,
language: deviceInfo.language
};
}
catch (e) {
return { browser: 'Unknown', platform: 'Unknown', language: 'Unknown' };
}
};
const getBrowserName = (userAgent) => {
if (userAgent.includes('Firefox'))
return 'Firefox';
if (userAgent.includes('Chrome'))
return 'Chrome';
if (userAgent.includes('Safari'))
return 'Safari';
if (userAgent.includes('Edge'))
return 'Edge';
if (userAgent.includes('MSIE') || userAgent.includes('Trident/'))
return 'Internet Explorer';
return 'Unknown';
};
if (loading) {
return _jsx(Loader, {});
}
return (_jsxs(Paper, { radius: "md", p: "xl", withBorder: true, children: [_jsxs(Group, { justify: "apart", mb: "md", children: [_jsx(Title, { order: 2, children: "Active Sessions" }), _jsx(Button, { leftSection: _jsx(IconRefresh, { size: 16 }), variant: "subtle", onClick: loadSessions, children: "Refresh" })] }), sessions.length === 0 ? (_jsx(Text, { color: "dimmed", children: "No active sessions found." })) : (_jsxs(Table, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Device" }), _jsx("th", { children: "Last Active" }), _jsx("th", { children: "Started" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Actions" })] }) }), _jsx("tbody", { children: sessions.map((session) => {
const deviceInfo = parseDeviceInfo(session.deviceInfo);
const isCurrentSession = session.id === currentSessionId;
return (_jsxs("tr", { children: [_jsxs("td", { children: [_jsx(Text, { fw: 500, children: deviceInfo.browser }), _jsx(Text, { size: "xs", color: "dimmed", children: deviceInfo.platform })] }), _jsx("td", { children: formatDate(session.lastActive) }), _jsx("td", { children: formatDate(session.createdAt) }), _jsx("td", { children: isCurrentSession ? (_jsx(Badge, { color: "green", children: "Current Session" })) : (_jsx(Badge, { color: "blue", children: "Active" })) }), _jsx("td", { children: !isCurrentSession && (_jsx(ActionIcon, { color: "red", onClick: () => handleTerminateSession(session.id), children: _jsx(IconTrash, { size: 16 }) })) })] }, session.id));
}) })] }))] }));
};
//# sourceMappingURL=SessionManager.js.map