594 lines
26 KiB
TypeScript
594 lines
26 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
Box, Container, Typography, Button, TextField,
|
|
InputAdornment, IconButton, AppBar, Toolbar, Avatar,
|
|
Tooltip, Dialog, DialogTitle, DialogContent,
|
|
DialogActions, CircularProgress, Paper, Chip,
|
|
Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
|
|
Switch, FormControlLabel, Divider, List, ListItem, ListItemText, ListItemSecondaryAction,
|
|
Tabs, Tab, Select, MenuItem, FormControl, InputLabel
|
|
} from '@mui/material';
|
|
import SearchIcon from '@mui/icons-material/Search';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
import SteamIcon from '@mui/icons-material/SportsEsports';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
|
import SyncIcon from '@mui/icons-material/Sync';
|
|
import BoltIcon from '@mui/icons-material/Bolt';
|
|
import TimerIcon from '@mui/icons-material/Timer';
|
|
import LockResetIcon from '@mui/icons-material/LockReset';
|
|
import SettingsIcon from '@mui/icons-material/Settings';
|
|
import ShareIcon from '@mui/icons-material/Share';
|
|
import GroupAddIcon from '@mui/icons-material/GroupAdd';
|
|
import PublicIcon from '@mui/icons-material/Public';
|
|
import ShieldIcon from '@mui/icons-material/Shield';
|
|
import GppBadIcon from '@mui/icons-material/GppBad';
|
|
import PeopleIcon from '@mui/icons-material/People';
|
|
import { useAccounts, type Account } from '../hooks/useAccounts';
|
|
import { useAppTheme } from '../theme/ThemeContext';
|
|
import type { ThemeType } from '../theme/SteamTheme';
|
|
import NebulaBanner from '../components/NebulaBanner';
|
|
|
|
const Dashboard: React.FC = () => {
|
|
const { currentTheme, setTheme } = useAppTheme();
|
|
const {
|
|
accounts, isLoading, isSyncing, serverConfig, addAccount, deleteAccount,
|
|
switchAccount, openSteamLogin, updateServerConfig, loginToServer,
|
|
getCommunityAccounts, syncNow
|
|
} = useAccounts();
|
|
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
|
const [identifier, setIdentifier] = useState('');
|
|
|
|
const [addTab, setAddTab] = useState(0);
|
|
const [communityAccounts, setCommunityAccounts] = useState<any[]>([]);
|
|
const [isCommunityLoading, setIsCommunityLoading] = useState(false);
|
|
const [serverUrl, setServerUrl] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (serverConfig?.url) {
|
|
setServerUrl(serverConfig.url);
|
|
}
|
|
}, [serverConfig?.url]);
|
|
|
|
const loadCommunity = async () => {
|
|
setIsCommunityLoading(true);
|
|
try {
|
|
const data = await getCommunityAccounts();
|
|
setCommunityAccounts(Array.isArray(data) ? data : []);
|
|
} catch (e) {
|
|
} finally {
|
|
setIsCommunityLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isAddDialogOpen && addTab === 1) {
|
|
loadCommunity();
|
|
}
|
|
}, [isAddDialogOpen, addTab]);
|
|
|
|
const handleAddAccount = async () => {
|
|
if (!identifier) return;
|
|
try {
|
|
await addAccount({ identifier });
|
|
setIsAddDialogOpen(false);
|
|
setIdentifier('');
|
|
} catch (e) {
|
|
console.error("[Dashboard] Add failed:", e);
|
|
}
|
|
};
|
|
|
|
const handleAddFromCommunity = async (commAcc: any) => {
|
|
try {
|
|
await addAccount({ identifier: commAcc.steamId });
|
|
setIsAddDialogOpen(false);
|
|
} catch (e) { }
|
|
};
|
|
|
|
const saveSettings = async () => {
|
|
await updateServerConfig({ url: serverUrl });
|
|
alert("Server URL updated!");
|
|
};
|
|
|
|
const safeAccounts = Array.isArray(accounts) ? accounts : [];
|
|
const filteredAccounts = safeAccounts.filter((acc) => {
|
|
if (!acc) return false;
|
|
const name = acc.personaName || 'Unknown';
|
|
const id = acc.steamId || '';
|
|
return name.toLowerCase().includes(searchTerm.toLowerCase()) || id.includes(searchTerm);
|
|
});
|
|
|
|
return (
|
|
<Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', backgroundColor: 'background.default' }}>
|
|
<NebulaBanner />
|
|
|
|
<AppBar position="sticky" sx={{ WebkitAppRegion: 'drag', background: 'background.default', boxShadow: 'none', borderBottom: '1px solid', borderColor: 'divider' } as any}>
|
|
<Toolbar variant="dense">
|
|
<SteamIcon sx={{ mr: 2, color: 'primary.main' }} />
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1, fontWeight: 'bold', fontSize: '1rem', letterSpacing: '1px' }}>
|
|
ULTIMATE BAN TRACKER
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, WebkitAppRegion: 'no-drag' } as any}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mr: 1 }}>
|
|
{isSyncing ? (
|
|
<CircularProgress size={16} sx={{ color: 'primary.main', mr: 1 }} />
|
|
) : (
|
|
<IconButton size="small" onClick={() => syncNow()} disabled={!serverConfig?.enabled} sx={{ color: 'primary.main' }}>
|
|
<SyncIcon sx={{ fontSize: 18 }} />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
|
|
<TextField
|
|
size="small"
|
|
placeholder="Search accounts..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
sx={{
|
|
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
|
borderRadius: 1,
|
|
width: 200,
|
|
'& .MuiOutlinedInput-root': { '& fieldset': { border: 'none' }, height: 32 }
|
|
}}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<SearchIcon fontSize="small" sx={{ color: 'text.secondary' }} />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
startIcon={<AddIcon />}
|
|
onClick={() => setIsAddDialogOpen(true)}
|
|
sx={{ height: 32 }}
|
|
>
|
|
Add
|
|
</Button>
|
|
|
|
<IconButton color="inherit" onClick={() => setIsSettingsOpen(true)}>
|
|
<SettingsIcon />
|
|
</IconButton>
|
|
</Box>
|
|
</Toolbar>
|
|
</AppBar>
|
|
|
|
<Container maxWidth="xl" sx={{ mt: 4, mb: 4, flexGrow: 1, overflowY: 'auto' }}>
|
|
{isLoading ? (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 10 }}><CircularProgress color="primary" /></Box>
|
|
) : (
|
|
<TableContainer component={Paper} sx={{ background: 'background.paper', backdropFilter: 'blur(10px)', borderRadius: 0, border: '1px solid', borderColor: 'divider' }}>
|
|
<Table size="small">
|
|
<TableHead>
|
|
<TableRow sx={{ background: 'rgba(0,0,0,0.1)' }}>
|
|
<TableCell sx={{ color: 'text.secondary', fontWeight: 'bold', width: 60 }}>AVATAR</TableCell>
|
|
<TableCell sx={{ color: 'text.secondary', fontWeight: 'bold' }}>ACCOUNT</TableCell>
|
|
<TableCell sx={{ color: 'text.secondary', fontWeight: 'bold' }}>BAN STATUS</TableCell>
|
|
<TableCell sx={{ color: 'text.secondary', fontWeight: 'bold' }}>COOLDOWN</TableCell>
|
|
<TableCell sx={{ color: 'text.secondary', fontWeight: 'bold', textAlign: 'right' }}>ACTIONS</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{filteredAccounts.map((account) => (
|
|
<AccountRow
|
|
key={account._id}
|
|
account={account}
|
|
onDelete={deleteAccount}
|
|
onSwitch={switchAccount}
|
|
onAuth={() => openSteamLogin(account.steamId)}
|
|
/>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)}
|
|
|
|
{!isLoading && filteredAccounts.length === 0 && (
|
|
<Box sx={{ width: '100%', mt: 10, textAlign: 'center' }}>
|
|
<Typography variant="h6" color="textSecondary">
|
|
No accounts tracked. Click "Add Account" to get started!
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Container>
|
|
|
|
{/* Settings Dialog */}
|
|
<Dialog open={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} maxWidth="sm" fullWidth>
|
|
<DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Settings & Customization</DialogTitle>
|
|
<DialogContent sx={{ backgroundColor: 'background.paper', pt: 2 }}>
|
|
<Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main', mt: 1 }}>THEME SELECTION</Typography>
|
|
<FormControl fullWidth size="small" sx={{ mb: 3 }}>
|
|
<InputLabel sx={{ color: 'text.secondary' }}>Active Theme</InputLabel>
|
|
<Select
|
|
value={currentTheme || 'steam'}
|
|
label="Active Theme"
|
|
onChange={(e) => setTheme(e.target.value as ThemeType)}
|
|
sx={{ bgcolor: 'rgba(0,0,0,0.1)', color: 'text.primary' }}
|
|
>
|
|
<MenuItem value="steam">Steam Classic</MenuItem>
|
|
<MenuItem value="mocha">Catppuccin Mocha</MenuItem>
|
|
<MenuItem value="latte">Catppuccin Latte</MenuItem>
|
|
<MenuItem value="nord">Nord Arctic</MenuItem>
|
|
<MenuItem value="tokyo">Tokyo Night</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
|
|
<Divider sx={{ my: 2, borderColor: 'divider' }} />
|
|
|
|
<Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main' }}>BACKEND CONFIGURATION</Typography>
|
|
<TextField
|
|
fullWidth
|
|
label="Server URL"
|
|
value={serverUrl}
|
|
onChange={(e) => setServerUrl(e.target.value)}
|
|
placeholder="https://ultimate-ban-tracker.narl.io"
|
|
margin="dense"
|
|
sx={{ mb: 2 }}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
onClick={saveSettings}
|
|
sx={{ height: 30 }}
|
|
>
|
|
Apply
|
|
</Button>
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
|
|
<Divider sx={{ my: 2, borderColor: 'divider' }} />
|
|
|
|
<Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main' }}>COMMUNITY AUTHENTICATION</Typography>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', p: 2, bgcolor: 'rgba(0,0,0,0.1)', borderRadius: 1 }}>
|
|
<Box>
|
|
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>
|
|
{serverConfig?.token ? "Connected to Server" : "Not Authenticated"}
|
|
</Typography>
|
|
<Typography variant="caption" color="textSecondary">
|
|
{serverConfig?.token ? "Your accounts can now be shared with others." : "Login to share and sync with your community."}
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
{serverConfig?.token && (
|
|
<Button
|
|
variant="outlined"
|
|
color="error"
|
|
onClick={() => updateServerConfig({ token: undefined, enabled: false })}
|
|
>
|
|
Logout
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="outlined"
|
|
color="primary"
|
|
onClick={() => loginToServer()}
|
|
disabled={!serverUrl}
|
|
>
|
|
{serverConfig?.token ? "Re-Login" : "Login with Steam"}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
|
|
<FormControlLabel
|
|
control={
|
|
<Switch
|
|
checked={serverConfig?.enabled || false}
|
|
onChange={(e) => updateServerConfig({ enabled: e.target.checked })}
|
|
disabled={!serverConfig?.token}
|
|
/>
|
|
}
|
|
label="Enable Community Sync"
|
|
sx={{ mt: 2 }}
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}>
|
|
<Button onClick={() => setIsSettingsOpen(false)} color="inherit" variant="contained">Done</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
|
|
{/* Add Account Dialog */}
|
|
<Dialog open={isAddDialogOpen} onClose={() => setIsAddDialogOpen(false)} maxWidth="sm" fullWidth>
|
|
<DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary', p: 0 }}>
|
|
<Tabs value={addTab} onChange={(_, v) => setAddTab(v)} variant="fullWidth" textColor="inherit" indicatorColor="primary">
|
|
<Tab label="Manual Add" icon={<AddIcon />} iconPosition="start" />
|
|
<Tab label="From Community" icon={<PublicIcon />} iconPosition="start" disabled={!serverConfig?.token} />
|
|
</Tabs>
|
|
</DialogTitle>
|
|
<DialogContent sx={{ backgroundColor: 'background.paper', pt: 2, minHeight: 300 }}>
|
|
{addTab === 0 ? (
|
|
<>
|
|
<Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
|
|
Enter a SteamID64 or Profile URL. You will need to authenticate to enable full tracking and instant login features.
|
|
</Typography>
|
|
<TextField
|
|
fullWidth
|
|
autoFocus
|
|
placeholder="SteamID64 or Profile URL"
|
|
value={identifier}
|
|
onChange={(e) => setIdentifier(e.target.value)}
|
|
sx={{ '& .MuiOutlinedInput-root': { backgroundColor: 'rgba(0, 0, 0, 0.1)' } }}
|
|
/>
|
|
</>
|
|
) : (
|
|
<Box>
|
|
{isCommunityLoading ? (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress size={32} /></Box>
|
|
) : (
|
|
<List>
|
|
{communityAccounts
|
|
.filter(ca => !safeAccounts.find(a => a.steamId === ca.steamId))
|
|
.map((ca) => (
|
|
<ListItem key={ca.steamId} divider sx={{ borderColor: 'divider' }}>
|
|
<Avatar src={ca.avatar} variant="square" sx={{ width: 32, height: 32, mr: 2 }} />
|
|
<ListItemText
|
|
primary={ca.personaName}
|
|
secondary={ca.steamId}
|
|
primaryTypographyProps={{ sx: { color: 'text.primary', fontWeight: 'bold' } }}
|
|
/>
|
|
<ListItemSecondaryAction>
|
|
<Button size="small" variant="contained" onClick={() => handleAddFromCommunity(ca)}>Add</Button>
|
|
</ListItemSecondaryAction>
|
|
</ListItem>
|
|
))}
|
|
{communityAccounts.length === 0 && <Typography align="center" color="textSecondary" sx={{ p: 4 }}>No shared accounts found on server.</Typography>}
|
|
</List>
|
|
)}
|
|
</Box>
|
|
)}
|
|
</DialogContent>
|
|
<DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}>
|
|
<Button onClick={() => setIsAddDialogOpen(false)} color="inherit">Cancel</Button>
|
|
{addTab === 0 && <Button onClick={handleAddAccount} variant="contained" color="success" disabled={!identifier}>Add</Button>}
|
|
</DialogActions>
|
|
</Dialog>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
// --- Sub-Component: AccountRow ---
|
|
|
|
const AccountRow: React.FC<{
|
|
account: Account,
|
|
onDelete: (id: string) => void,
|
|
onSwitch: (login: string) => void,
|
|
onAuth: () => void
|
|
}> = ({ account, onDelete, onSwitch, onAuth }) => {
|
|
const { shareAccountWithUser, getServerUsers, serverConfig } = useAccounts();
|
|
const [timeLeft, setTimeLeft] = useState<string | null>(null);
|
|
const [isShareOpen, setIsShareOpen] = useState(false);
|
|
const [targetUserId, setTargetUserId] = useState('');
|
|
const [isSharing, setIsSharing] = useState(false);
|
|
const [serverUsers, setServerUsers] = useState<any[]>([]);
|
|
|
|
const cooldownDate = account?.cooldownExpiresAt ? new Date(account.cooldownExpiresAt) : null;
|
|
const isCooldownActive = cooldownDate && !isNaN(cooldownDate.getTime()) && cooldownDate.getTime() > Date.now();
|
|
|
|
useEffect(() => {
|
|
if (!isCooldownActive || !cooldownDate) {
|
|
setTimeLeft(null);
|
|
return;
|
|
}
|
|
const targetTime = cooldownDate.getTime();
|
|
const timer = setInterval(() => {
|
|
const diff = targetTime - Date.now();
|
|
if (diff <= 0) { setTimeLeft(null); clearInterval(timer); return; }
|
|
const hours = Math.floor(diff / 3600000);
|
|
const mins = Math.floor((diff % 3600000) / 60000);
|
|
const secs = Math.floor((diff % 60000) / 1000);
|
|
setTimeLeft(`${hours}h ${mins}m ${secs}s`);
|
|
}, 1000);
|
|
return () => clearInterval(timer);
|
|
}, [account?.cooldownExpiresAt, isCooldownActive]);
|
|
|
|
const avatarSrc = account?.localAvatar
|
|
? `steam-resource://${account.localAvatar}`
|
|
: (account?.avatar || '');
|
|
const [imgSrc, setImgSrc] = useState(avatarSrc);
|
|
|
|
useEffect(() => {
|
|
setImgSrc(avatarSrc);
|
|
}, [avatarSrc]);
|
|
|
|
const handleOpenShare = async () => {
|
|
setIsShareOpen(true);
|
|
try {
|
|
const [users, selfInfo] = await Promise.all([
|
|
getServerUsers(),
|
|
(window as any).electronAPI.getServerUserInfo()
|
|
]);
|
|
const filtered = (Array.isArray(users) ? users : []).filter(u =>
|
|
u.steamId !== selfInfo.steamId &&
|
|
u.steamId !== account.steamId
|
|
);
|
|
setServerUsers(filtered);
|
|
} catch (e) {}
|
|
};
|
|
|
|
const handleShare = async () => {
|
|
if (!targetUserId) return;
|
|
setIsSharing(true);
|
|
try {
|
|
await shareAccountWithUser(account.steamId, targetUserId);
|
|
alert(`Account shared successfully!`);
|
|
setIsShareOpen(false);
|
|
setTargetUserId('');
|
|
} catch (e: any) {
|
|
alert(e.message || "Failed to share account");
|
|
} finally {
|
|
setIsSharing(false);
|
|
}
|
|
};
|
|
|
|
const isBanned = account?.vacBanned || (account?.gameBans && account.gameBans > 0);
|
|
const isShared = account?._id.startsWith('shared_');
|
|
|
|
return (
|
|
<TableRow sx={{ '&:hover': { background: 'action.hover' }, borderBottom: '1px solid', borderColor: 'divider' }}>
|
|
<TableCell>
|
|
<Box sx={{ position: 'relative' }}>
|
|
<Avatar src={imgSrc} variant="square" sx={{ width: 32, height: 32, border: '1px solid', borderColor: 'divider' }} />
|
|
{isShared && (
|
|
<Tooltip title="Community Shared Account">
|
|
<PeopleIcon sx={{ position: 'absolute', bottom: -4, right: -4, fontSize: 14, color: 'primary.main', bgcolor: 'background.default', borderRadius: '50%', border: '1px solid', borderColor: 'divider', p: 0.2 }} />
|
|
</Tooltip>
|
|
)}
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Typography variant="body2" sx={{ fontWeight: 'bold', color: isBanned ? 'error.main' : 'text.primary' }}>
|
|
{account?.personaName || 'Unknown'}
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>{account?.steamId}</Typography>
|
|
</TableCell>
|
|
<TableCell>
|
|
{isBanned ? (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'error.main' }}>
|
|
<GppBadIcon sx={{ fontSize: 16 }} />
|
|
<Typography variant="caption" sx={{ fontWeight: 'bold', letterSpacing: '0.5px' }}>ACCOUNT BANNED</Typography>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
|
{account?.vacBanned && (
|
|
<Chip label="VAC" size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold', borderRadius: 0.5 }} />
|
|
)}
|
|
{account?.gameBans ? account.gameBans > 0 && (
|
|
<Chip label={`${account.gameBans} GAME`} size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold', borderRadius: 0.5 }} />
|
|
) : null}
|
|
</Box>
|
|
</Box>
|
|
) : (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'success.main' }}>
|
|
<ShieldIcon sx={{ fontSize: 16 }} />
|
|
<Typography variant="caption" sx={{ fontWeight: 'bold', letterSpacing: '0.5px' }}>SECURE</Typography>
|
|
</Box>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
{account?.authError ? (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', color: 'warning.main', gap: 0.5 }}>
|
|
<LockResetIcon sx={{ fontSize: 16 }} />
|
|
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>Needs Re-auth</Typography>
|
|
</Box>
|
|
) : isCooldownActive ? (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', color: 'primary.main', gap: 0.5 }}>
|
|
<TimerIcon sx={{ fontSize: 16 }} />
|
|
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>{timeLeft}</Typography>
|
|
</Box>
|
|
) : (
|
|
<Typography variant="caption" sx={{ color: 'text.secondary' }}>Available</Typography>
|
|
)}
|
|
</TableCell>
|
|
<TableCell align="right">
|
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 0.5, alignItems: 'center' }}>
|
|
{/* Fast Switcher Button - Always available if we have a login name */}
|
|
{account.loginName && (
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
onClick={() => onSwitch(account.loginName || '')}
|
|
sx={{
|
|
height: 28,
|
|
fontSize: '0.7rem',
|
|
bgcolor: 'secondary.main',
|
|
'&:hover': { opacity: 0.9 },
|
|
minWidth: 60
|
|
}}
|
|
>
|
|
LOGIN
|
|
</Button>
|
|
)}
|
|
|
|
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
|
|
|
|
// ... (inside AccountRow)
|
|
|
|
{/* Scraper Auth Button - Controls the optional cooldown tracking */}
|
|
<Tooltip title={account.steamLoginSecure && !account.authError ? "Session valid - Tracking active" : (account.steamLoginSecure ? "Refresh scraper session" : "Authenticate for cooldown tracking")}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
|
<IconButton
|
|
size="small"
|
|
onClick={onAuth}
|
|
disabled={!!(account.steamLoginSecure && !account.authError)}
|
|
sx={{
|
|
color: account.steamLoginSecure && !account.authError ? 'success.main' : (account.authError ? 'error.main' : 'warning.main'),
|
|
border: '1px solid',
|
|
borderColor: account.steamLoginSecure && !account.authError ? 'success.main' : 'divider',
|
|
borderRadius: 1,
|
|
opacity: account.steamLoginSecure && !account.authError ? 1 : 1,
|
|
background: account.steamLoginSecure && !account.authError ? 'rgba(163, 207, 6, 0.1)' : 'transparent'
|
|
}}
|
|
>
|
|
{account.steamLoginSecure && !account.authError ? <VerifiedUserIcon fontSize="inherit" /> : (account.authError ? <LockResetIcon fontSize="inherit" /> : <BoltIcon fontSize="inherit" />)}
|
|
</IconButton>
|
|
{account.steamLoginSecure && !account.authError && (
|
|
<Typography variant="caption" sx={{ color: 'success.main', fontWeight: 'bold', fontSize: '0.6rem', letterSpacing: '0.5px' }}>
|
|
TRACKING
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Tooltip>
|
|
|
|
<Divider orientation="vertical" flexItem sx={{ mx: 0.5, my: 0.5 }} />
|
|
|
|
<IconButton size="small" onClick={handleOpenShare} disabled={!serverConfig?.token}><ShareIcon fontSize="inherit" sx={{ color: 'primary.main' }}/></IconButton>
|
|
<IconButton size="small" sx={{ color: 'text.secondary' }} onClick={() => (window as any).electronAPI.openExternal(account?.profileUrl || '')}><OpenInNewIcon fontSize="inherit"/></IconButton>
|
|
<IconButton size="small" sx={{ color: 'error.main' }} onClick={() => onDelete(account?._id || '')}><DeleteIcon fontSize="inherit"/></IconButton>
|
|
</Box>
|
|
|
|
{/* Share Dialog */}
|
|
<Dialog open={isShareOpen} onClose={() => setIsShareOpen(false)} maxWidth="xs" fullWidth>
|
|
<DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Share Account</DialogTitle>
|
|
<DialogContent sx={{ backgroundColor: 'background.paper', pt: 2 }}>
|
|
<Typography variant="body2" sx={{ mb: 2 }}>
|
|
Select a community member to share this account with.
|
|
</Typography>
|
|
<FormControl fullWidth size="small" sx={{ mt: 1 }}>
|
|
<InputLabel sx={{ color: 'text.secondary' }}>Select User</InputLabel>
|
|
<Select
|
|
value={targetUserId}
|
|
label="Select User"
|
|
onChange={(e) => setTargetUserId(e.target.value as string)}
|
|
sx={{ bgcolor: 'rgba(0,0,0,0.1)', color: 'text.primary' }}
|
|
>
|
|
{serverUsers.map(user => (
|
|
<MenuItem key={user.steamId} value={user.steamId}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<Avatar src={user.avatar} sx={{ width: 24, height: 24 }} />
|
|
{user.personaName}
|
|
</Box>
|
|
</MenuItem>
|
|
))}
|
|
{serverUsers.length === 0 && <MenuItem disabled>No users found on server</MenuItem>}
|
|
</Select>
|
|
</FormControl>
|
|
</DialogContent>
|
|
<DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}>
|
|
<Button onClick={() => setIsShareOpen(false)} color="inherit" disabled={isSharing}>Cancel</Button>
|
|
<Button
|
|
onClick={handleShare}
|
|
variant="contained"
|
|
startIcon={isSharing ? <CircularProgress size={16} color="inherit" /> : <GroupAddIcon />}
|
|
disabled={!targetUserId || isSharing}
|
|
>
|
|
{isSharing ? "Sharing..." : "Grant Access"}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|