DownloadAgentModal.jsx

Go to the documentation of this file.

import React, { useState, useEffect } from "react";
import "./DownloadAgentModal.css";
 
export default function DownloadAgentModal({ tenantId, onClose }) {
  const [error, setError] = useState(null);
  const [downloadToken, setDownloadToken] = useState(null);
  const [loading, setLoading] = useState(false);
  const [copied, setCopied] = useState(false);
  const [selectedPlatform, setSelectedPlatform] = useState('windows');
 
  useEffect(() => {
    generateDownloadToken();
  }, []);
 
  const generateDownloadToken = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const token = localStorage.getItem('token');
      const backendUrl = 'https://rmm-psa-backend-t9f7k.ondigitalocean.app';
      const response = await fetch(`${backendUrl}/api/agent-v3/download-token`, {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });
 
      if (!response.ok) throw new Error('Failed to generate download token');
 
      const data = await response.json();
      setDownloadToken(data.token);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  const getDownloadUrl = (platform) => {
    if (!downloadToken) return '';
    const baseUrl = window.location.origin;
    const backendUrl = 'https://rmm-psa-backend-t9f7k.ondigitalocean.app';
    return `${backendUrl}/api/agent-v3/download/${platform}/${downloadToken}?tenant=${tenantId}`;
  };
 
  const getInstallCommand = (platform) => {
    const url = getDownloadUrl(platform);
    switch (platform) {
      case 'windows':
        return `# Run in PowerShell as Administrator\niwr -useb "${url}" -OutFile "$env:TEMP\\agent-v3.exe"; Start-Process "$env:TEMP\\agent-v3.exe" -ArgumentList "/S" -Wait`;
      case 'linux':
        return `# Run in terminal\nwget -qO- "${url}" | sudo bash`;
      case 'macos':
        return `# Run in terminal\ncurl -sL "${url}" -o ~/Downloads/agent-v3.pkg && open ~/Downloads/agent-v3.pkg`;
      default:
        return url;
    }
  };
 
  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };
 
  const platforms = [
    { key: 'windows', label: 'Windows', icon: 'window' },
    { key: 'linux', label: 'Linux', icon: 'terminal' },
    { key: 'macos', label: 'macOS', icon: 'apple' }
  ];
 
  return (
    <div className="download-modal-overlay">
      <div className="download-modal modern-modal">
        <div className="download-modal-header modern-header">
          <h2>
            <span className="material-symbols-outlined">download</span>
            Download Agent v3
          </h2>
          <button className="neutral modern-close" onClick={onClose} title="Close">
            <span className="material-symbols-outlined">close</span>
          </button>
        </div>
        <div className="download-modal-body modern-body">
          {/* Agent v3 Section */}
          <div style={{ background: 'linear-gradient(135deg, #f0f9ff, #e0f2fe)', padding: '1.5rem', borderRadius: '8px' }}>
            <h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', fontWeight: 600, color: 'var(--text)', display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span className="material-symbols-outlined" style={{ fontSize: '1.3rem', color: '#0ea5e9' }}>
                rocket_launch
              </span>
              EverydayTech Agent v3
            </h3>
            <p style={{
              fontSize: '0.9rem',
              color: 'var(--text-muted, #334155)',
              margin: '0 0 1rem 0',
              lineHeight: 1.4
            }}>
              Enterprise-grade MeshCentral agent with white-label branding. Automatically registers to tenant {tenantId}.
            </p>
 
            {/* Platform Selector */}
            <div style={{ marginBottom: '1rem' }}>
              <label style={{ display: 'block', marginBottom: '8px', fontWeight: 500, fontSize: '0.9rem', color: 'var(--text)' }}>
                Select Platform:
              </label>
              <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                {platforms.map(platform => (
                  <button
                    key={platform.key}
                    className={`secondary modern-action ${selectedPlatform === platform.key ? 'selected' : ''}`}
                    onClick={() => setSelectedPlatform(platform.key)}
                    style={{
                      minWidth: '100px',
                      background: selectedPlatform === platform.key ? 'linear-gradient(135deg, #0ea5e9, #06b6d4)' : undefined,
                      color: selectedPlatform === platform.key ? 'white' : undefined
                    }}
                  >
                    <span className="material-symbols-outlined">{platform.icon}</span>
                    {platform.label}
                  </button>
                ))}
              </div>
            </div>
 
            {/* Download URL */}
            {loading ? (
              <div style={{ textAlign: 'center', padding: '1rem', color: 'var(--text-muted)' }}>
                <span className="material-symbols-outlined" style={{ fontSize: '2rem', animation: 'spin 1s linear infinite' }}>refresh</span>
                <p>Generating download link...</p>
              </div>
            ) : downloadToken ? (
              <>
                <div style={{ marginBottom: '1rem' }}>
                  <label style={{ display: 'block', marginBottom: '8px', fontWeight: 500, fontSize: '0.9rem', color: 'var(--text)' }}>
                    Direct Download URL:
                  </label>
                  <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
                    <input
                      type="text"
                      value={getDownloadUrl(selectedPlatform)}
                      readOnly
                      style={{
                        flex: 1,
                        padding: '8px 12px',
                        border: '1px solid var(--border)',
                        borderRadius: '6px',
                        fontSize: '0.85rem',
                        fontFamily: 'monospace',
                        background: 'var(--bg-secondary)',
                        color: 'var(--text)'
                      }}
                    />
                    <button
                      className="secondary modern-action"
                      onClick={() => copyToClipboard(getDownloadUrl(selectedPlatform))}
                      title="Copy URL"
                    >
                      <span className="material-symbols-outlined">
                        {copied ? 'check' : 'content_copy'}
                      </span>
                      {copied ? 'Copied!' : 'Copy'}
                    </button>
                  </div>
                </div>
 
                {/* Install Command */}
                <div style={{ marginBottom: '1rem' }}>
                  <label style={{ display: 'block', marginBottom: '8px', fontWeight: 500, fontSize: '0.9rem', color: 'var(--text)' }}>
                    One-Liner Install Command:
                  </label>
                  <div style={{ position: 'relative' }}>
                    <pre style={{
                      padding: '12px',
                      background: '#1e293b',
                      color: '#e2e8f0',
                      borderRadius: '6px',
                      fontSize: '0.8rem',
                      overflow: 'auto',
                      margin: 0,
                      whiteSpace: 'pre-wrap',
                      wordBreak: 'break-all'
                    }}>
                      {getInstallCommand(selectedPlatform)}
                    </pre>
                    <button
                      className="secondary modern-action"
                      onClick={() => copyToClipboard(getInstallCommand(selectedPlatform))}
                      style={{
                        position: 'absolute',
                        top: '8px',
                        right: '8px',
                        minWidth: 'auto',
                        padding: '4px 8px'
                      }}
                      title="Copy command"
                    >
                      <span className="material-symbols-outlined" style={{ fontSize: '1rem' }}>
                        {copied ? 'check' : 'content_copy'}
                      </span>
                    </button>
                  </div>
                </div>
 
                {/* Features */}
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginBottom: '1rem' }}>
                  <span style={{ fontSize: '0.75rem', background: '#f0fdf4', color: '#166534', padding: '4px 8px', borderRadius: '4px', border: '1px solid #bbf7d0' }}>✓ Remote Desktop</span>
                  <span style={{ fontSize: '0.75rem', background: '#f0fdf4', color: '#166534', padding: '4px 8px', borderRadius: '4px', border: '1px solid #bbf7d0' }}>✓ Terminal Access</span>
                  <span style={{ fontSize: '0.75rem', background: '#f0fdf4', color: '#166534', padding: '4px 8px', borderRadius: '4px', border: '1px solid #bbf7d0' }}>✓ File Transfer</span>
                  <span style={{ fontSize: '0.75rem', background: '#f0fdf4', color: '#166534', padding: '4px 8px', borderRadius: '4px', border: '1px solid #bbf7d0' }}>✓ Auto-Registration</span>
                  <span style={{ fontSize: '0.75rem', background: '#f0fdf4', color: '#166534', padding: '4px 8px', borderRadius: '4px', border: '1px solid #bbf7d0' }}>✓ Wake-on-LAN</span>
                  <span style={{ fontSize: '0.75rem', background: '#f0fdf4', color: '#166534', padding: '4px 8px', borderRadius: '4px', border: '1px solid #bbf7d0' }}>✓ Intel AMT</span>
                </div>
 
                {/* Info Note */}
                <div style={{ 
                  background: '#fef3c7', 
                  border: '1px solid #fbbf24', 
                  borderRadius: '6px', 
                  padding: '10px', 
                  fontSize: '0.85rem',
                  color: '#92400e',
                  marginBottom: '1rem'
                }}>
                  <strong>📝 Note:</strong> This download link is valid for 5 minutes and can only be used once. Share it with your client to install the agent.
                </div>
              </>
            ) : null}
 
            <div className="modern-actions-row" style={{ justifyContent: 'flex-start', gap: '0.5rem', flexWrap: 'wrap' }}>
              <button
                className="secondary modern-action"
                onClick={() => window.open('/agent-v3', '_blank')}
                title="Open Agent v3 Download Page"
              >
                <span className="material-symbols-outlined">open_in_new</span>
                View Full Documentation
              </button>
              <button
                className="secondary modern-action"
                onClick={generateDownloadToken}
                disabled={loading}
                title="Generate new download link"
              >
                <span className="material-symbols-outlined">refresh</span>
                {loading ? 'Generating...' : 'New Link'}
              </button>
            </div>
          </div>
 
          {error && <div className="download-status-error modern-error">{error}</div>}
        </div>
        <div className="download-modal-footer modern-footer">
          <button className="neutral modern-cancel" onClick={onClose}>
            <span className="material-symbols-outlined">cancel</span>
            Cancel
          </button>
        </div>
      </div>
    </div>
  );
}