This commit is contained in:
553
frontend/src/pages/Dashboard.tsx
Normal file
553
frontend/src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,553 @@
|
||||
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 }}>
|
||||
{account?.steamLoginSecure ? (
|
||||
<Button
|
||||
variant="contained" size="small" onClick={() => onSwitch(account.loginName || '')}
|
||||
sx={{ height: 28, fontSize: '0.7rem', bgcolor: 'secondary.main', '&:hover': { opacity: 0.9 } }}
|
||||
>
|
||||
LOGIN
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="outlined" size="small" onClick={onAuth} sx={{ height: 28, fontSize: '0.7rem' }}>AUTH</Button>
|
||||
)}
|
||||
<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;
|
||||
Reference in New Issue
Block a user