235 lines
12 KiB
TypeScript
235 lines
12 KiB
TypeScript
const AccountRow: React.FC<{
|
|
account: Account,
|
|
onDelete: (id: string) => void,
|
|
onSwitch: (login: string) => void,
|
|
onAuth: () => void
|
|
}> = ({ account, onDelete, onSwitch, onAuth }) => {
|
|
const { shareAccountWithUser, revokeAccountAccess, revokeAllAccountAccess, 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);
|
|
setTargetUserId('');
|
|
} catch (e: any) {
|
|
alert(e.message || "Failed to share account");
|
|
} finally {
|
|
setIsSharing(false);
|
|
}
|
|
};
|
|
|
|
const handleRevoke = async (targetSteamId: string) => {
|
|
if (!window.confirm("Revoke access for this user?")) return;
|
|
try {
|
|
await revokeAccountAccess(account.steamId, targetSteamId);
|
|
} catch (e: any) { alert(e.message); }
|
|
};
|
|
|
|
const handleRevokeAll = async () => {
|
|
if (!window.confirm("Completely stop sharing this account with the community?")) return;
|
|
try {
|
|
await revokeAllAccountAccess(account.steamId);
|
|
setIsShareOpen(false);
|
|
} catch (e: any) { alert(e.message); }
|
|
};
|
|
|
|
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' }}>
|
|
{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>
|
|
)}
|
|
|
|
<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, 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>
|
|
|
|
<Dialog open={isShareOpen} onClose={() => setIsShareOpen(false)} maxWidth="xs" fullWidth>
|
|
<DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Account Permissions</DialogTitle>
|
|
<DialogContent sx={{ backgroundColor: 'background.paper', pt: 2 }}>
|
|
<Typography variant="subtitle2" sx={{ mb: 1, color: 'primary.main' }}>GRANT ACCESS</Typography>
|
|
<Box sx={{ display: 'flex', gap: 1, mb: 3 }}>
|
|
<FormControl fullWidth size="small">
|
|
<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
|
|
.filter(u => !(account as any).sharedWith?.find((sw: any) => sw.steamId === u.steamId))
|
|
.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 eligible users found</MenuItem>}
|
|
</Select>
|
|
</FormControl>
|
|
<Button onClick={handleShare} variant="contained" disabled={!targetUserId || isSharing} sx={{ minWidth: 80 }}>
|
|
{isSharing ? <CircularProgress size={16} color="inherit" /> : "Add"}
|
|
</Button>
|
|
</Box>
|
|
<Divider sx={{ my: 2, borderColor: 'divider' }} />
|
|
<Typography variant="subtitle2" sx={{ mb: 1, color: 'primary.main' }}>CURRENT ACCESS</Typography>
|
|
<List size="small" sx={{ bgcolor: 'rgba(0,0,0,0.05)', borderRadius: 1, mb: 2 }}>
|
|
{(account as any).sharedWith?.map((sw: any) => (
|
|
<ListItem key={sw.steamId} dense divider sx={{ borderColor: 'divider' }}>
|
|
<Avatar src={sw.avatar} sx={{ width: 24, height: 24, mr: 1 }} />
|
|
<ListItemText primary={sw.personaName} primaryTypographyProps={{ variant: 'body2', sx: { fontWeight: 'bold' } }} />
|
|
<ListItemSecondaryAction>
|
|
<IconButton size="small" color="error" onClick={() => handleRevoke(sw.steamId)}><DeleteIcon fontSize="inherit" /></IconButton>
|
|
</ListItemSecondaryAction>
|
|
</ListItem>
|
|
))}
|
|
{(!(account as any).sharedWith || (account as any).sharedWith.length === 0) && (
|
|
<Typography variant="caption" align="center" sx={{ display: 'block', p: 2, opacity: 0.6 }}>Not shared with anyone yet.</Typography>
|
|
)}
|
|
</List>
|
|
{(account as any).sharedWith?.length > 0 && (
|
|
<Button fullWidth variant="outlined" color="error" size="small" onClick={handleRevokeAll} startIcon={<GppBadIcon />}>Revoke All Shared Access</Button>
|
|
)}
|
|
</DialogContent>
|
|
<DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}><Button onClick={() => setIsShareOpen(false)} color="inherit" variant="contained">Done</Button></DialogActions>
|
|
</Dialog>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
};
|