Add full Oculog codebase

server/frontend/src/components/ClientDownload.js

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import './ClientDownload.css';
+
+const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:3001';
+
+function ClientDownload({ onClose }) {
+  const [serverId, setServerId] = useState('');
+  const [serverUrl, setServerUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+  
+  // Get the base server URL for curl command (where the API is hosted)
+  const getBaseUrl = () => {
+    // Use serverUrl if provided, otherwise default to current origin but replace port 3000 with 3001
+    if (serverUrl) {
+      return serverUrl;
+    }
+    return window.location.origin.replace(':3000', ':3001');
+  };
+  
+  // Generate curl command
+  const getCurlCommand = () => {
+    const baseUrl = getBaseUrl();
+    // Include serverUrl query parameter if a custom serverUrl was provided
+    const queryParam = serverUrl ? `?serverUrl=${encodeURIComponent(serverUrl)}` : '';
+    return `curl -s ${baseUrl}/api/download-client/${serverId}${queryParam} | bash`;
+  };
+  
+  const copyCurlCommand = () => {
+    navigator.clipboard.writeText(getCurlCommand());
+  };
+
+  const handleDownload = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+
+    try {
+      const response = await axios.post(
+        `${API_URL}/api/download-client`,
+        {
+          serverId: serverId || `server-${Date.now()}`,
+          serverUrl: serverUrl || window.location.origin.replace(':3000', ':3001')
+        },
+        {
+          responseType: 'blob'
+        }
+      );
+
+      // Create download link
+      const url = window.URL.createObjectURL(new Blob([response.data]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', `oculog-client-install.sh`);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+
+      setSuccess(true);
+      setTimeout(() => {
+        setSuccess(false);
+        if (onClose) onClose();
+      }, 3000);
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to generate client package');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="client-download">
+      <h2>Download Client</h2>
+      <p className="download-description">
+        Generate a pre-configured client installer for your Ubuntu server. 
+        The installer includes your server URL and API key automatically configured.
+      </p>
+
+      <form onSubmit={handleDownload} className="download-form">
+        <div className="form-group">
+          <label htmlFor="serverId">Server ID</label>
+          <input
+            type="text"
+            id="serverId"
+            value={serverId}
+            onChange={(e) => setServerId(e.target.value)}
+            placeholder="my-ubuntu-server"
+            required
+          />
+          <small>Unique identifier for this server</small>
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="serverUrl">Server URL (optional)</label>
+          <input
+            type="text"
+            id="serverUrl"
+            value={serverUrl}
+            onChange={(e) => setServerUrl(e.target.value)}
+            placeholder="http://your-server-ip:3001"
+          />
+          <small>Leave empty to use current server</small>
+        </div>
+
+        {error && <div className="error-message">{error}</div>}
+        {success && (
+          <div className="success-message">
+            Client installer downloaded! Run it on your Ubuntu server with: 
+            <code>sudo bash oculog-client-install.sh</code>
+          </div>
+        )}
+
+        <button type="submit" disabled={loading} className="download-button">
+          {loading ? 'Generating...' : 'Download Client Installer'}
+        </button>
+      </form>
+
+      {/* Curl Installation Instructions */}
+      <div className="curl-instructions">
+        <h3>Quick Install with curl</h3>
+        <p className="curl-description">
+          Copy and paste this command directly into your Ubuntu server terminal:
+        </p>
+        <div className="curl-command-container">
+          <code className="curl-command">
+            {serverId ? getCurlCommand() : 'curl -s SERVER_URL/api/download-client/SERVER_ID?serverUrl=SERVER_URL | bash'}
+          </code>
+          {serverId && (
+            <button 
+              type="button" 
+              onClick={copyCurlCommand}
+              className="copy-button"
+              title="Copy to clipboard"
+            >
+              <i className="fas fa-copy"></i>
+            </button>
+          )}
+        </div>
+        <p className="curl-note">
+          Fill in the Server ID field above to generate your custom curl command. The command will automatically use your Server URL if provided.
+        </p>
+      </div>
+
+      <div className="installation-instructions">
+        <h3>Manual Installation Instructions</h3>
+        <ol>
+          <li>Download the installer script above</li>
+          <li>Transfer it to your Ubuntu server</li>
+          <li>Make it executable: <code>chmod +x oculog-client-install.sh</code></li>
+          <li>Run as root: <code>sudo ./oculog-client-install.sh</code></li>
+          <li>The client will automatically start and begin sending metrics</li>
+        </ol>
+      </div>
+    </div>
+  );
+}
+
+export default ClientDownload;
+