Create frontend/src/App.jsx

frontend/src/App.jsx

@@ -0,0 +1,207 @@
+// frontend/src/App.jsx
+import { useState, useEffect, useRef } from 'react';
+import { io } from 'socket.io-client';
+import './App.css';
+
+function App() {
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [status, setStatus] = useState('');
+  const [pairingCode, setPairingCode] = useState('');
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [logs, setLogs] = useState([]);
+  const socketRef = useRef(null);
+
+  useEffect(() => {
+    // Initialize socket connection
+    const socketUrl = window.location.origin;
+    
+    socketRef.current = io(socketUrl, {
+      autoConnect: true,
+      reconnection: true,
+      reconnectionDelay: 1000,
+      reconnectionAttempts: 5
+    });
+
+    const socket = socketRef.current;
+
+    socket.on('connect', () => {
+      addLog('✅ Connected to server', 'success');
+    });
+
+    socket.on('disconnect', () => {
+      addLog('❌ Disconnected from server', 'error');
+      setIsConnecting(false);
+    });
+
+    socket.on('status', (data) => {
+      setStatus(data.message);
+      addLog(`ℹ️ ${data.message}`, 'info');
+    });
+
+    socket.on('pairing-code', (data) => {
+      setPairingCode(data.code);
+      setStatus('Pairing code generated successfully!');
+      addLog(`🔑 Pairing Code: ${data.code}`, 'success');
+    });
+
+    socket.on('success', (data) => {
+      setStatus(data.message);
+      addLog(`✅ ${data.message}`, 'success');
+      setIsConnecting(false);
+      
+      // Reset after 3 seconds
+      setTimeout(() => {
+        resetForm();
+      }, 3000);
+    });
+
+    socket.on('error', (data) => {
+      setStatus(`Error: ${data.message}`);
+      addLog(`❌ ${data.message}`, 'error');
+      setIsConnecting(false);
+      setPairingCode('');
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+
+  const addLog = (message, type = 'info') => {
+    const timestamp = new Date().toLocaleTimeString();
+    setLogs(prev => [...prev, { message, type, timestamp }]);
+  };
+
+  const resetForm = () => {
+    setPhoneNumber('');
+    setPairingCode('');
+    setStatus('');
+    setIsConnecting(false);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    
+    if (!phoneNumber.trim()) {
+      setStatus('Phone number cannot be empty!');
+      addLog('❌ Phone number cannot be empty', 'error');
+      return;
+    }
+
+    const cleanNumber = phoneNumber.replace(/[^\d]/g, '');
+    
+    if (cleanNumber.length < 10 || cleanNumber.length > 15) {
+      setStatus('Invalid phone number! Must be 10-15 digits');
+      addLog('❌ Invalid phone number format', 'error');
+      return;
+    }
+
+    if (cleanNumber.startsWith('0')) {
+      setStatus('Phone number must include country code (e.g., 1, 44, 62, 91)');
+      addLog('❌ Country code required', 'error');
+      return;
+    }
+
+    setIsConnecting(true);
+    setPairingCode('');
+    setStatus('Starting pairing process...');
+    setLogs([]);
+    
+    addLog('🚀 Initiating connection...', 'info');
+    socketRef.current.emit('start-pairing', { phoneNumber: cleanNumber });
+  };
+
+  const handlePhoneChange = (e) => {
+    const value = e.target.value.replace(/[^\d+]/g, '');
+    setPhoneNumber(value);
+  };
+
+  const copyCode = () => {
+    navigator.clipboard.writeText(pairingCode);
+    addLog('📋 Pairing code copied!', 'success');
+  };
+
+  return (
+    <div className="container">
+      <div className="card">
+        <div className="header">
+          <h1>🤖 WA Pairing Service</h1>
+          <p>Get your WhatsApp bot session easily</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="form">
+          <div className="input-group">
+            <label htmlFor="phone">WhatsApp Bot Number</label>
+            <input
+              type="text"
+              id="phone"
+              value={phoneNumber}
+              onChange={handlePhoneChange}
+              placeholder="12025551234 (with country code)"
+              disabled={isConnecting}
+              maxLength={16}
+              className="input"
+            />
+            <small>Include country code (e.g., 1 for US, 44 for UK, 62 for ID, 91 for IN)</small>
+          </div>
+
+          <button 
+            type="submit" 
+            disabled={isConnecting}
+            className={`button ${isConnecting ? 'loading' : ''}`}
+          >
+            {isConnecting ? '⏳ Processing...' : '🚀 Start Pairing'}
+          </button>
+        </form>
+
+        {pairingCode && (
+          <div className="pairing-code">
+            <h3>Pairing Code</h3>
+            <div className="code-display">
+              <span className="code">{pairingCode}</span>
+              <button onClick={copyCode} className="copy-btn" title="Copy">
+                📋
+              </button>
+            </div>
+            <div className="instructions">
+              <p>Next steps:</p>
+              <ol>
+                <li>Open WhatsApp on your phone</li>
+                <li>Go to <strong>Linked Devices</strong></li>
+                <li>Enter the pairing code above</li>
+                <li>Wait for creds.json to be sent</li>
+              </ol>
+            </div>
+          </div>
+        )}
+
+        {status && (
+          <div className={`status ${status.includes('Error') || status.includes('Gagal') ? 'error' : 'success'}`}>
+            {status}
+          </div>
+        )}
+
+        {logs.length > 0 && (
+          <div className="logs">
+            <h3>📋 Activity Log</h3>
+            <div className="log-container">
+              {logs.map((log, index) => (
+                <div key={index} className={`log-entry ${log.type}`}>
+                  <span className="log-time">{log.timestamp}</span>
+                  <span className="log-message">{log.message}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="footer">
+          <p>🔒 Privacy guaranteed - Sessions auto-deleted after completion</p>
+          <p>⚡ Powered by Baileys 6.7.20</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;