fluxy-bot 0.2.37 → 0.2.39

package/workspace/client/src/App.tsx

@@ -1,7 +1,10 @@
 import { useState, useEffect } from 'react';
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import ErrorBoundary from './components/ErrorBoundary';
 import DashboardLayout from './components/Layout/DashboardLayout';
 import DashboardPage from './components/Dashboard/DashboardPage';
+import LandingPage from './components/Landing/LandingPage';
+import LoginPage from './components/Auth/LoginPage';
 
 function DashboardError() {
   return (
@@ -22,7 +25,46 @@ function DashboardError() {
   );
 }
 
-export default function App() {
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const [status, setStatus] = useState<'checking' | 'ok' | 'denied'>('checking');
+
+  useEffect(() => {
+    (async () => {
+      try {
+        // Check if credentials are configured at all
+        const cfgRes = await fetch('/api/auth/configured');
+        const cfg = await cfgRes.json();
+        if (!cfg.configured) {
+          // First run — allow access (onboarding hasn't happened yet)
+          setStatus('ok');
+          return;
+        }
+
+        // Credentials exist — verify session
+        const meRes = await fetch('/api/auth/me');
+        const me = await meRes.json();
+        setStatus(me.authenticated ? 'ok' : 'denied');
+      } catch {
+        // Worker not ready — allow (onboarding scenario)
+        setStatus('ok');
+      }
+    })();
+  }, []);
+
+  if (status === 'checking') {
+    return (
+      <div className="flex items-center justify-center h-dvh bg-background">
+        <div className="h-8 w-8 border-2 border-muted-foreground/30 border-t-foreground rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (status === 'denied') return <Navigate to="/login" replace />;
+
+  return <>{children}</>;
+}
+
+function Dashboard() {
   const [showOnboard, setShowOnboard] = useState(false);
   const [rebuildState, setRebuildState] = useState<'idle' | 'rebuilding' | 'error'>('idle');
   const [buildError, setBuildError] = useState('');
@@ -36,14 +78,12 @@ export default function App() {
       .catch(() => {});
   }, []);
 
-  // Listen for rebuild events from Fluxy iframe via postMessage
   useEffect(() => {
     let safetyTimer: ReturnType<typeof setTimeout>;
     const handler = (e: MessageEvent) => {
       if (e.data?.type === 'fluxy:rebuilding') {
         setRebuildState('rebuilding');
         setBuildError('');
-        // Safety: auto-reload after 60s in case app:rebuilt message is lost
         clearTimeout(safetyTimer);
         safetyTimer = setTimeout(() => location.reload(), 60_000);
       } else if (e.data?.type === 'fluxy:rebuilt') {
@@ -59,7 +99,6 @@ export default function App() {
         setShowOnboard(false);
       } else if (e.data?.type === 'fluxy:hmr-update') {
         console.log('[dashboard] File changed — reloading...');
-        // Preserve widget open state so chat isn't disrupted
         const panel = document.getElementById('fluxy-widget-panel');
         if (panel?.classList.contains('open')) {
           sessionStorage.setItem('fluxy_widget_open', '1');
@@ -107,3 +146,21 @@ export default function App() {
     </>
   );
 }
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<LandingPage />} />
+      <Route path="/login" element={<LoginPage />} />
+      <Route
+        path="/dashboard"
+        element={
+          <ProtectedRoute>
+            <Dashboard />
+          </ProtectedRoute>
+        }
+      />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

package/workspace/client/src/components/Auth/LoginPage.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      });
+      const data = await res.json();
+      if (data.ok) {
+        navigate('/dashboard');
+      } else {
+        setError(data.error || 'Login failed');
+      }
+    } catch {
+      setError('Connection error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-dvh flex flex-col items-center justify-center bg-background px-6">
+      <div className="w-full max-w-sm">
+        <div className="flex flex-col items-center mb-8">
+          <img src="/fluxy.png" alt="Fluxy" className="h-12 w-auto mb-4" />
+          <h1 className="text-xl font-semibold">Welcome Back</h1>
+          <p className="text-sm text-muted-foreground mt-1">Sign in to access the dashboard</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+          <input
+            type="text"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            autoComplete="username"
+            autoFocus
+            className="w-full bg-white/[0.05] border border-white/[0.08] rounded-xl px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground outline-none input-glow"
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="current-password"
+            className="w-full bg-white/[0.05] border border-white/[0.08] rounded-xl px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground outline-none input-glow"
+          />
+          {error && (
+            <div className="bg-red-500/8 border border-red-500/15 rounded-lg px-3 py-2 text-xs text-red-400">
+              {error}
+            </div>
+          )}
+          <button
+            type="submit"
+            disabled={loading || !username || !password}
+            className="w-full bg-gradient-brand text-white font-medium rounded-full py-3 text-sm hover:opacity-90 transition-opacity disabled:opacity-50"
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+
+        <div className="mt-6 text-center">
+          <Link to="/" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            Back to home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

package/workspace/client/src/components/Landing/LandingPage.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export default function LandingPage() {
+  const navigate = useNavigate();
+  const [botName, setBotName] = useState('Fluxy');
+  const [isAuthed, setIsAuthed] = useState(false);
+  const [checking, setChecking] = useState(true);
+
+  useEffect(() => {
+    Promise.all([
+      fetch('/api/settings').then((r) => r.json()).catch(() => null),
+      fetch('/api/auth/me').then((r) => r.json()).catch(() => null),
+    ]).then(([settings, me]) => {
+      if (settings?.agent_name) setBotName(settings.agent_name);
+      if (me?.authenticated) setIsAuthed(true);
+      setChecking(false);
+    });
+  }, []);
+
+  return (
+    <div className="min-h-dvh flex flex-col bg-background">
+      {/* Header */}
+      <header className="flex items-center justify-between px-6 py-4">
+        <div className="flex items-center gap-2">
+          <img src="/fluxy.png" alt={botName} className="h-6 w-auto" />
+          <span className="text-sm font-semibold">{botName}</span>
+        </div>
+        {!checking && (
+          <button
+            onClick={() => navigate(isAuthed ? '/dashboard' : '/login')}
+            className="text-sm font-medium px-4 py-2 rounded-full border border-white/[0.08] hover:bg-white/[0.06] transition-colors"
+          >
+            {isAuthed ? 'Dashboard' : 'Sign In'}
+          </button>
+        )}
+      </header>
+
+      {/* Hero */}
+      <main className="flex-1 flex flex-col items-center justify-center px-6 text-center">
+        <video
+          src="/fluxy_say_hi.webm"
+          autoPlay
+          loop
+          muted
+          playsInline
+          className="h-28 w-28 rounded-full object-cover mb-8"
+        />
+        <h1 className="text-3xl sm:text-4xl font-bold mb-3">
+          <span className="text-gradient">{botName}</span>
+        </h1>
+        <p className="text-muted-foreground text-base max-w-md">
+          Your personal AI assistant, always ready to help.
+        </p>
+      </main>
+
+      {/* Footer */}
+      <footer className="py-4 text-center">
+        <p className="text-xs text-muted-foreground/60">Powered by Fluxy</p>
+      </footer>
+    </div>
+  );
+}

package/workspace/client/src/main.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import './styles/globals.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 );