s.gruessing/IT-Nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show consent pending state in browser during RDP approval

Browse Source 
- Agent sends rdp_consent_pending after spawning consent dialog
- Browser shows 'Warte auf Zustimmung...' with yellow indicator
- First frame switches to 'connected', denial shows red error message
- Fixed stale closure bug in onmessage with connectedRef

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Simon Grüssing
2026-06-11 10:25:37 +02:00
parent d42dc562a3
commit 383bbff7a6
2 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/common/RemoteDesktopPanel.jsx
View File

@@ -9,7 +9,7 @@ const SCREEN_OPTIONS = [
];
export default function RemoteDesktopPanel({ agentId, agentHostname, autoConnect = false, fullscreen = false }) {
const [status, setStatus] = useState('idle');
const [status, setStatus] = useState('idle'); // idle | connecting | waiting | connected | error
const [error, setError] = useState('');
const [fps, setFps] = useState(0);
const [resolution, setResolution] = useState('');
@@ -17,6 +17,7 @@ export default function RemoteDesktopPanel({ agentId, agentHostname, autoConnect
const canvasRef = useRef(null);
const wsRef = useRef(null);
const fpsRef = useRef({ count: 0, last: Date.now() });
const connectedRef = useRef(false);
const getWsUrl = () => {
const token = localStorage.getItem('token');
@@ -30,15 +31,18 @@ export default function RemoteDesktopPanel({ agentId, agentHostname, autoConnect
const ws = new WebSocket(getWsUrl());
wsRef.current = ws;
connectedRef.current = false;
ws.onopen = () => {
ws.send(JSON.stringify({ type: 'rdp_start', screen }));
setStatus('connected');
};
ws.onmessage = (e) => {
try {
const msg = JSON.parse(e.data);
if (msg.type === 'rdp_frame') {
if (msg.type === 'rdp_consent_pending') {
setStatus('waiting');
} else if (msg.type === 'rdp_frame') {
if (!connectedRef.current) { connectedRef.current = true; setStatus('connected'); }
const img = new window.Image();
img.onload = () => {
const canvas = canvasRef.current;
@@ -67,7 +71,7 @@ export default function RemoteDesktopPanel({ agentId, agentHostname, autoConnect
};
ws.onerror = () => { setStatus('error'); setError('WebSocket-Fehler'); };
ws.onclose = () => setStatus(s => s === 'connected' ? 'idle' : s);
ws.onclose = () => setStatus(s => (s === 'connected' || s === 'waiting' || s === 'connecting') ? 'idle' : s);
};
const disconnect = () => {
@@ -88,8 +92,8 @@ export default function RemoteDesktopPanel({ agentId, agentHostname, autoConnect
return () => { wsRef.current?.close(); };
}, []);
const statusColor = { connected: '#34d399', connecting: '#f59e0b', error: '#ef4444', idle: '#6b7280' }[status];
const statusLabel = { connected: 'Verbunden', connecting: 'Verbinde…', error: 'Fehler', idle: 'Getrennt' }[status];
const statusColor = { connected: '#34d399', connecting: '#f59e0b', waiting: '#f59e0b', error: '#ef4444', idle: '#6b7280' }[status] ?? '#6b7280';
const statusLabel = { connected: 'Verbunden', connecting: 'Verbinde…', waiting: 'Warte auf Zustimmung…', error: 'Fehler', idle: 'Getrennt' }[status] ?? '';
const containerStyle = fullscreen
? { display: 'flex', flexDirection: 'column', height: '100vh', background: '#0d1117' }
@@ -116,7 +120,7 @@ export default function RemoteDesktopPanel({ agentId, agentHostname, autoConnect
<select
value={screenIdx}
onChange={e => setScreenIdx(Number(e.target.value))}
disabled={status === 'connected' || status === 'connecting'}
disabled={status === 'connected' || status === 'connecting' || status === 'waiting'}
style={{ fontSize: 12, padding: '3px 8px', borderRadius: 7, border: '1px solid var(--border-color)', background: 'var(--bg-tertiary)', color: 'var(--text-primary)', cursor: 'pointer', marginLeft: 4 }}
>
{SCREEN_OPTIONS.map(o => (
@@ -147,7 +151,7 @@ export default function RemoteDesktopPanel({ agentId, agentHostname, autoConnect
</div>
{/* Canvas-Bereich */}
{status === 'idle' || status === 'error' ? (
{(status === 'idle' || status === 'error') ? (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: fullscreen ? 0 : 320, flex: fullscreen ? 1 : undefined, gap: 14, color: 'var(--text-muted)' }}>
<span style={{ fontSize: 44 }}>🖥️</span>
<div style={{ textAlign: 'center' }}>
@@ -156,6 +160,14 @@ export default function RemoteDesktopPanel({ agentId, agentHostname, autoConnect
{error && <div style={{ marginTop: 8, color: '#ef4444', fontSize: 12 }}>{error}</div>}
</div>
</div>
) : status === 'waiting' ? (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: fullscreen ? 0 : 320, flex: fullscreen ? 1 : undefined, gap: 14, color: 'var(--text-muted)' }}>
<span style={{ fontSize: 44 }}>⏳</span>
<div style={{ textAlign: 'center' }}>
<div style={{ fontSize: 14, fontWeight: 600, color: '#f59e0b', marginBottom: 4 }}>Warte auf Zustimmung…</div>
<div style={{ fontSize: 12 }}>Der Benutzer muss den Bildschirmzugriff erst erlauben.</div>
</div>
</div>
) : (
<div style={{ background: '#000', lineHeight: 0, position: 'relative', flex: fullscreen ? 1 : undefined, overflow: fullscreen ? 'hidden' : undefined }}>
<canvas