CLEAN REDEPLOY: Secure Express state with Dashboard fix

server.js

@@ -47,7 +47,7 @@ app.post('/api/login', (req, res) => {
     addLog("Successful login attempt.");
     res.json({ success: true });
   } else {
-    addLog("Failed login attempt.");
+    addLog(`Failed login attempt with key: ${passkey}`);
     res.status(401).json({ success: false, error: 'Invalid passkey' });
   }
 });
@@ -90,11 +90,10 @@ app.post('/api/start', checkPasskey, async (req, res) => {
     wppClient = await wppconnect.create({
       session: 'gradio-session',
       autoClose: 0,
-      updatesLog: false,
+      updatesLog: true,
       catchQR: (base64Qr) => {
         currentStatus = 'QR_CODE';
         qrCodeBase64 = base64Qr;
-        addLog("QR Code generated.");
       },
       statusFind: (statusSession) => {
         addLog(`Session Status: ${statusSession}`);
@@ -116,13 +115,6 @@ app.post('/api/start', checkPasskey, async (req, res) => {
         ]
       }
     });
-    
-    // Check initial status
-    const isLogged = await wppClient.isLoggedIn();
-    if (isLogged) {
-        currentStatus = 'CONNECTED';
-        addLog("Already logged in.");
-    }
 
   } catch (error) {
     addLog(`WPPConnect Error: ${error.message}`);
@@ -139,8 +131,8 @@ app.post('/api/send', checkPasskey, async (req, res) => {
     if (!phone.includes('@')) recipient = isGroup ? `${phone}@g.us` : `${phone}@c.us`;
     addLog(`Sending message to ${recipient}...`);
     const result = await wppClient.sendText(recipient, message);
+    addLog("Message sent successfully!");
     res.json({ success: true, result });
-    addLog("Message sent!");
   } catch (error) {
     addLog(`Send Error: ${error.message}`);
     res.status(500).json({ error: error.message });
@@ -155,10 +147,10 @@ if (fs.existsSync(distPath)) {
     res.sendFile(path.join(distPath, 'index.html'));
   });
 } else {
-    app.get('*', (req, res) => {
-        if (req.path.startsWith('/api/')) return res.status(404).json({ error: 'API route not found' });
-        res.send("Frontend build not found. Please run 'npm run build'.");
-    });
+  app.get('*', (req, res) => {
+    if (req.path.startsWith('/api/')) return res.status(404).json({ error: 'API route not found' });
+    res.send("Frontend build not found. Please run 'npm run build'.");
+  });
 }
 
 app.listen(PORT, "0.0.0.0", () => {

src/App.tsx

@@ -9,11 +9,9 @@ import {
   Terminal, 
   LogOut,
   AlertCircle,
-  Clock,
-  Link as LinkIcon,
-  Plus,
   Unlock,
-  ShieldCheck
+  ShieldCheck,
+  RefreshCw
 } from 'lucide-react';
 
 type Status = 'DISCONNECTED' | 'INITIALIZING' | 'QR_CODE' | 'CONNECTED' | 'ERROR';
@@ -22,6 +20,7 @@ function App() {
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
   const [passkey, setPasskey] = useState('');
   const [loginError, setLoginError] = useState('');
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
   
   const [status, setStatus] = useState<Status>('DISCONNECTED');
   const [qrCode, setQrCode] = useState('');
@@ -44,19 +43,23 @@ function App() {
 
   const checkInitialAuth = async (key: string) => {
     try {
-      const response = await fetch(`/api/status?passkey=${key}`);
+      const response = await fetch('/api/status', {
+        headers: { 'x-passkey': key }
+      });
       if (response.ok) {
         setIsAuthenticated(true);
       } else {
         localStorage.removeItem('passkey');
       }
     } catch (e) {
-      // Offline or server error
+      console.error('Initial auth check failed:', e);
     }
   };
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (!passkey) return;
+    setIsLoggingIn(true);
     setLoginError('');
     try {
       const response = await fetch('/api/login', {
@@ -72,7 +75,9 @@ function App() {
         setLoginError('Invalid passkey. Please try again.');
       }
     } catch (err) {
-      setLoginError('Could not connect to authentication server.');
+      setLoginError('Could not connect to server.');
+    } finally {
+      setIsLoggingIn(false);
     }
   };
 
@@ -86,9 +91,11 @@ function App() {
     if (!isAuthenticated) return;
 
     const pollStatus = async () => {
-      const savedPasskey = localStorage.getItem('passkey');
+      const savedPasskey = localStorage.getItem('passkey') || '';
       try {
-        const response = await fetch(`/api/status?passkey=${savedPasskey}`);
+        const response = await fetch('/api/status', {
+          headers: { 'x-passkey': savedPasskey }
+        });
         if (response.status === 401) {
           handleLogout();
           return;
@@ -114,9 +121,11 @@ function App() {
   }, [isAuthenticated, groups.length]);
 
   const fetchGroups = async () => {
-    const savedPasskey = localStorage.getItem('passkey');
+    const savedPasskey = localStorage.getItem('passkey') || '';
     try {
-      const response = await fetch(`/api/groups?passkey=${savedPasskey}`);
+      const response = await fetch('/api/groups', {
+        headers: { 'x-passkey': savedPasskey }
+      });
       if (response.ok) {
         const data = await response.json();
         if (data.groups) setGroups(data.groups);
@@ -127,24 +136,30 @@ function App() {
   };
 
   const startService = async () => {
-    const savedPasskey = localStorage.getItem('passkey');
+    const savedPasskey = localStorage.getItem('passkey') || '';
     try {
-      await fetch(`/api/start?passkey=${savedPasskey}`, { method: 'POST' });
+      await fetch('/api/start', { 
+        method: 'POST',
+        headers: { 'x-passkey': savedPasskey }
+      });
     } catch (err) {
-      setLogs(prev => [...prev, `Error starting service: ${err}`]);
+      console.error('Start service error:', err);
     }
   };
 
   const sendMessage = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSending(true);
-    const savedPasskey = localStorage.getItem('passkey');
+    const savedPasskey = localStorage.getItem('passkey') || '';
     const recipient = activeTab === 'direct' ? phone : selectedGroup;
     
     try {
-      const response = await fetch(`/api/send?passkey=${savedPasskey}`, {
+      const response = await fetch('/api/send', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: { 
+          'Content-Type': 'application/json',
+          'x-passkey': savedPasskey
+        },
         body: JSON.stringify({
           phone: recipient,
           message,
@@ -153,6 +168,7 @@ function App() {
       });
       if (response.ok) {
         setMessage('');
+        alert('Message sent successfully!');
       } else {
         const data = await response.json();
         alert(`Error: ${data.error}`);
@@ -170,26 +186,24 @@ function App() {
 
   if (!isAuthenticated) {
     return (
-      <div className="min-h-screen bg-[#0f172a] flex items-center justify-center p-4">
+      <div className="min-h-screen bg-[#0f172a] flex items-center justify-center p-4 font-sans">
         <div className="max-w-md w-full bg-[#1e293b] rounded-3xl shadow-2xl border border-white/5 overflow-hidden">
           <div className="p-8 text-center">
             <div className="w-20 h-20 bg-orange-500/20 rounded-2xl flex items-center justify-center mx-auto mb-6 border border-orange-500/30 shadow-inner">
               <ShieldCheck className="w-10 h-10 text-orange-500" />
             </div>
-            <h1 className="text-3xl font-bold text-white mb-2">Private Access</h1>
+            <h1 className="text-3xl font-bold text-white mb-2">Restricted Access</h1>
             <p className="text-slate-400 mb-8">Enter your security passkey to manage the WPPConnect server.</p>
             
             <form onSubmit={handleLogin} className="space-y-4">
-              <div className="relative group">
-                <input
-                  type="password"
-                  placeholder="Security Passkey..."
-                  value={passkey}
-                  onChange={(e) => setPasskey(e.target.value)}
-                  className="w-full px-6 py-4 bg-slate-900/50 border border-slate-700 rounded-2xl focus:ring-4 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all text-center text-xl font-mono tracking-widest text-white placeholder:tracking-normal placeholder:font-sans placeholder:text-slate-500"
-                  autoFocus
-                />
-              </div>
+              <input
+                type="password"
+                placeholder="Security Passkey..."
+                value={passkey}
+                onChange={(e) => setPasskey(e.target.value)}
+                className="w-full px-6 py-4 bg-slate-900/50 border border-slate-700 rounded-2xl focus:ring-4 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all text-center text-xl font-mono tracking-widest text-white placeholder:tracking-normal placeholder:font-sans placeholder:text-slate-500"
+                autoFocus
+              />
               
               {loginError && (
                 <div className="flex items-center justify-center gap-2 text-red-400 text-sm font-medium bg-red-500/10 py-3 rounded-xl border border-red-500/20">
@@ -200,9 +214,10 @@ function App() {
 
               <button
                 type="submit"
-                className="w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 rounded-2xl transition-all shadow-lg shadow-orange-500/25 flex items-center justify-center gap-3 active:scale-[0.98]"
+                disabled={isLoggingIn}
+                className="w-full bg-orange-500 hover:bg-orange-600 disabled:bg-orange-500/50 text-white font-bold py-4 rounded-2xl transition-all shadow-lg shadow-orange-500/25 flex items-center justify-center gap-3 active:scale-[0.98]"
               >
-                <Unlock className="w-5 h-5" />
+                {isLoggingIn ? <RefreshCw className="w-5 h-5 animate-spin" /> : <Unlock className="w-5 h-5" />}
                 Unlock Dashboard
               </button>
             </form>
@@ -216,9 +231,8 @@ function App() {
   }
 
   return (
-    <div className="min-h-screen bg-[#f8f9fa] text-gray-900 font-sans">
+    <div className="min-h-screen bg-[#f8f9fa] text-gray-900 font-sans selection:bg-orange-100 selection:text-orange-900">
       <div className="max-w-6xl mx-auto px-4 py-8">
-        {/* Header */}
         <header className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8 bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
           <div className="flex items-center gap-4">
             <div className="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center shadow-lg shadow-orange-200">
@@ -253,7 +267,6 @@ function App() {
         </header>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          {/* Left Column: Messaging */}
           <div className="space-y-6">
             <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
               <div className="flex gap-1 p-1 bg-gray-50 rounded-xl mb-6">
@@ -261,13 +274,13 @@ function App() {
                   onClick={() => setActiveTab('direct')}
                   className={`flex-1 flex items-center justify-center gap-2 py-2 text-sm font-semibold rounded-lg transition-all ${activeTab === 'direct' ? 'bg-white shadow-sm text-orange-600' : 'text-gray-500 hover:text-gray-700'}`}
                 >
-                  <MessageSquare className="w-4 h-4" /> Direct Message
+                  <MessageSquare className="w-4 h-4" /> Direct
                 </button>
                 <button 
                   onClick={() => setActiveTab('group')}
                   className={`flex-1 flex items-center justify-center gap-2 py-2 text-sm font-semibold rounded-lg transition-all ${activeTab === 'group' ? 'bg-white shadow-sm text-orange-600' : 'text-gray-500 hover:text-gray-700'}`}
                 >
-                  <Users className="w-4 h-4" /> Group Message
+                  <Users className="w-4 h-4" /> Groups
                 </button>
               </div>
 
@@ -277,8 +290,8 @@ function App() {
                     <QrCode className="w-8 h-8" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-gray-900">Not Connected</h3>
-                    <p className="text-sm text-gray-500 max-w-[200px] mx-auto mt-1">Please authenticate with WhatsApp to start messaging.</p>
+                    <h3 className="font-semibold text-gray-900">WhatsApp Offline</h3>
+                    <p className="text-sm text-gray-500 max-w-[200px] mx-auto mt-1">Authenticate to enable messaging features.</p>
                   </div>
                 </div>
               ) : (
@@ -297,16 +310,26 @@ function App() {
                   ) : (
                     <div className="space-y-2">
                       <label className="block text-sm font-medium text-gray-700">Select Group</label>
-                      <select 
-                        value={selectedGroup}
-                        onChange={(e) => setSelectedGroup(e.target.value)}
-                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none disabled:bg-gray-100"
-                      >
-                        <option value="">-- Choose a group --</option>
-                        {groups.map((g) => (
-                          <option key={g.id._serialized} value={g.id._serialized}>{g.name || g.id.user}</option>
-                        ))}
-                      </select>
+                      <div className="flex gap-2">
+                        <select 
+                          value={selectedGroup}
+                          onChange={(e) => setSelectedGroup(e.target.value)}
+                          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none"
+                        >
+                          <option value="">-- Choose a group --</option>
+                          {groups.map((g) => (
+                            <option key={g.id._serialized} value={g.id._serialized}>{g.name || g.id.user}</option>
+                          ))}
+                        </select>
+                        <button 
+                          type="button"
+                          onClick={fetchGroups}
+                          className="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+                          title="Refresh groups"
+                        >
+                          <RefreshCw className="w-4 h-4 text-gray-600" />
+                        </button>
+                      </div>
                     </div>
                   )}
 
@@ -334,14 +357,13 @@ function App() {
             </div>
           </div>
 
-          {/* Right Column: QR Code & Logs */}
           <div className="space-y-6 flex flex-col">
             <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 flex flex-col items-center justify-center min-h-[300px]">
               <h2 className="text-lg font-semibold mb-4 border-b pb-2 w-full text-left text-gray-900">Authentication</h2>
               {status === 'QR_CODE' && qrCode ? (
                 <div className="flex flex-col items-center animate-in fade-in zoom-in duration-300">
                   <img src={qrCode} alt="WhatsApp QR Code" className="w-64 h-64 border-4 border-white shadow-sm rounded-lg" />
-                  <p className="text-sm text-gray-500 mt-4 text-center">Scan this QR code with your WhatsApp app.</p>
+                  <p className="text-sm text-gray-500 mt-4 text-center">Scan this QR code with WhatsApp.</p>
                 </div>
               ) : status === 'CONNECTED' ? (
                 <div className="flex flex-col items-center text-green-500">