feat: implement granular access revocation and global unsharing in the account permissions dialog
This commit is contained in:
234
frontend/src/pages/DashboardRow.tsx
Normal file
234
frontend/src/pages/DashboardRow.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user