TabRds-old.jsx

Go to the documentation of this file.

import React from 'react';
import { apiFetch } from '../../lib/api';
 
function TabRds({ agentId, agentUuid }) {
  const [rustdeskInfo, setRustdeskInfo] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);
 
  React.useEffect(() => {
    if (agentUuid) {
      loadRustdeskInfo();
    }
  }, [agentUuid]);
 
  async function loadRustdeskInfo() {
    setLoading(true);
    setError(null);
    
    try {
      const response = await apiFetch(`/rustdesk/connect/${agentUuid}`);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      
      const data = await response.json();
      console.log('[RDS] Received data:', data);
      
      if (data.success) {
        setRustdeskInfo(data);
      } else if (data.install_required) {
        setRustdeskInfo({ install_required: true });
      } else {
        setError(data.error || 'Failed to load Rustdesk info');
      }
    } catch (err) {
      console.error('[RDS] Failed to load info:', err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }
 
  function openRustdesk() {
    if (!rustdeskInfo || !rustdeskInfo.rustdesk_id) return;
    
    const { rustdesk_id, server, public_key } = rustdeskInfo;
    
    // Build complete connection URL with all parameters
    // Format: rustdesk://<ID>?relay-server=<server>:21117&rendezvous-server=<server>:21116&key=<key>
    const rustdeskUrl = `rustdesk://${rustdesk_id}?relay-server=${server}:21117&rendezvous-server=${server}:21116&key=${encodeURIComponent(public_key)}`;
    
    console.log('[RDS] Opening RustDesk with URL:', rustdeskUrl);
    
    // Attempt to open (may not work on all platforms)
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = rustdeskUrl;
    document.body.appendChild(iframe);
    
    setTimeout(() => {
      document.body.removeChild(iframe);
    }, 1000);
    
    // Show manual instructions
    alert(`RustDesk Connection Info:
 
ID: ${rustdesk_id}
Server: ${server}
Public Key: ${public_key}
 
⚠️ IMPORTANT - ONE-TIME SETUP REQUIRED:
Your RustDesk client must be configured to use YOUR custom server.
Otherwise you'll get "Failed to connect" or wrong server errors.
 
Quick Setup Options:
 
OPTION 1 - Automatic Setup (Windows):
  Download and run: https://everydaytech.au/agent/rustdesk-admin-setup.bat
  This will configure RustDesk automatically.
 
OPTION 2 - Manual Setup:
  1. Open RustDesk application
  2. Click the menu icon (☰) or go to Settings
  3. Click "Network" tab
  4. Click "Unlock Network Settings"
  5. Set ID Server: ${server}
  6. Set Relay Server: ${server}
  7. Set Key: ${public_key}
  8. Click "Apply" and restart RustDesk
  
After setup, you can connect by just entering the ID: ${rustdesk_id}
No password needed for unattended access.`);
  }
 
  if (loading) {
    return (
      <div className="tab-container">
        <h2>Remote Desktop (Rustdesk)</h2>
        <div className="card">Loading...</div>
      </div>
    );
  }
 
  if (error) {
    return (
      <div className="tab-container">
        <h2>Remote Desktop (Rustdesk)</h2>
        <div className="card" style={{ color: 'red' }}>
          Error: {error}<br /><br />
          <button className="btn" onClick={loadRustdeskInfo}>Retry</button>
        </div>
      </div>
    );
  }
 
  if (!rustdeskInfo) {
    return (
      <div className="tab-container">
        <h2>Remote Desktop (Rustdesk)</h2>
        <div className="card">No connection info available</div>
      </div>
    );
  }
 
  if (rustdeskInfo.install_required) {
    return (
      <div className="tab-container">
        <h2>Remote Desktop (Rustdesk)</h2>
        <div className="card">
          <p><strong>Rustdesk is installing...</strong></p>
          <p>Rustdesk will automatically install when the agent starts. This may take a few minutes.</p>
          <p>Please refresh this page in 2-3 minutes.</p>
          <br />
          <button className="btn" onClick={loadRustdeskInfo}>Refresh Status</button>
        </div>
      </div>
    );
  }
 
  return (
    <div className="tab-container">
      <h2>Remote Desktop (Rustdesk)</h2>
      <div className="card">
        <h3>Connection Information</h3>
        <div style={{ marginBottom: '15px' }}>
          <div style={{ marginBottom: '10px' }}>
            <strong>Rustdesk ID:</strong> 
            <code style={{ 
              marginLeft: '10px', 
              padding: '4px 8px', 
              background: '#f5f5f5', 
              borderRadius: '4px',
              fontSize: '14px',
              userSelect: 'all'
            }}>
              {rustdeskInfo.rustdesk_id}
            </code>
          </div>
          <div style={{ marginBottom: '10px' }}>
            <strong>Server:</strong> 
            <code style={{ 
              marginLeft: '10px', 
              padding: '4px 8px', 
              background: '#f5f5f5', 
              borderRadius: '4px',
              fontSize: '14px',
              userSelect: 'all'
            }}>
              {rustdeskInfo.server}
            </code>
          </div>
          <div style={{ marginBottom: '10px' }}>
            <strong>Public Key:</strong> 
            <code style={{ 
              marginLeft: '10px', 
              padding: '4px 8px', 
              background: '#f5f5f5', 
              borderRadius: '4px',
              fontSize: '12px',
              userSelect: 'all',
              wordBreak: 'break-all'
            }}>
              {rustdeskInfo.public_key}
            </code>
          </div>
          <div style={{ marginBottom: '10px' }}>
            <strong>Hostname:</strong> {rustdeskInfo.hostname}
          </div>
        </div>
        
        <div style={{
          marginBottom: '20px',
          padding: '12px',
          background: '#fff3cd',
          border: '1px solid #ffc107',
          borderRadius: '4px'
        }}>
          <strong>⚠️ ONE-TIME SETUP REQUIRED</strong><br />
          Your computer must be configured to use YOUR custom RustDesk server.<br />
          <strong>Download and run:</strong> <a href="/agent/rustdesk-admin-setup.bat" download style={{fontWeight: 'bold'}}>rustdesk-admin-setup.bat</a><br />
          <em style={{fontSize: '0.9em', color: '#856404'}}>This only needs to be done once per support computer.</em>
        </div>
        
        <button className="btn" onClick={openRustdesk} style={{ marginBottom: '20px' }}>
          🖥️ Connect via Rustdesk
        </button>
        
        <div style={{ 
          marginTop: '20px', 
          padding: '15px', 
          background: '#f9f9f9', 
          borderRadius: '4px',
          fontSize: '0.9em'
        }}>
          <p style={{ marginTop: 0 }}><strong>⚠️ First Time Setup (Required):</strong></p>
          <ol style={{ marginBottom: 0, paddingLeft: '20px' }}>
            <li>Open RustDesk application on your computer</li>
            <li>Click the <strong>menu icon (☰)</strong> at the top</li>
            <li>Select <strong>"Settings"</strong></li>
            <li>Click <strong>"Network"</strong> tab</li>
            <li>Click <strong>"Unlock Network Settings"</strong> button</li>
            <li>In <strong>ID Server</strong> field, enter: <code style={{background: '#fff', padding: '2px 6px'}}>{rustdeskInfo.server}</code></li>
            <li>In <strong>Relay Server</strong> field, enter: <code style={{background: '#fff', padding: '2px 6px'}}>{rustdeskInfo.server}</code></li>
            <li>In <strong>Key</strong> field, paste: <code style={{background: '#fff', padding: '2px 6px', fontSize: '11px'}}>{rustdeskInfo.public_key}</code></li>
            <li>Click <strong>"Apply"</strong> or <strong>"OK"</strong></li>
            <li>Close and restart RustDesk</li>
            <li>After restart, enter this ID: <code style={{background: '#fff', padding: '2px 6px'}}>{rustdeskInfo.rustdesk_id}</code></li>
            <li>Click <strong>"Connect"</strong></li>
          </ol>
          <p style={{ marginTop: '15px', marginBottom: 0, color: '#d9534f' }}>
            <strong>⚠️ On Linux:</strong> You may need to reboot your computer after installing RustDesk for the protocol handler to work.
          </p>
          <p style={{ marginTop: '10px', marginBottom: 0 }}>
            <strong>Don't have RustDesk?</strong> 
            <a href="https://rustdesk.com/download" target="_blank" rel="noopener" style={{ marginLeft: '5px' }}>
              Download here
            </a>
          </p>
        </div>
      </div>
    </div>
  );
}
 
export default TabRds;