fluxy-bot 0.8.9 → 0.9.0

package/supervisor/chat/src/components/LoginScreen.tsx

@@ -1,331 +1,280 @@
 import { useState, useRef, useEffect, type KeyboardEvent } from 'react';
-import {
-    Lock,
-    LoaderCircle,
-    ArrowRight,
-    ArrowLeft,
-    Shield,
-    Check
-} from 'lucide-react';
+import { Lock, LoaderCircle, ArrowRight, ArrowLeft, Shield, Check } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 
 const LOGIN_STORAGE_KEY = 'fluxy_login_totp';
 
 interface Props {
-    onLogin: (token: string) => void;
-    totpEnabled?: boolean;
+  onLogin: (token: string) => void;
+  totpEnabled?: boolean;
 }
 
-export default function LoginScreen({ onLogin }: Props) {
-    const [password, setPassword] = useState('');
-    const [error, setError] = useState('');
-    const [loading, setLoading] = useState(false);
+export default function LoginScreen({ onLogin, totpEnabled }: Props) {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
 
-    // TOTP state
-    const [phase, setPhase] = useState<'password' | 'totp'>('password');
-    const [totpCode, setTotpCode] = useState('');
-    const [pendingToken, setPendingToken] = useState('');
-    const [trustDevice, setTrustDevice] = useState(true);
-    const [useRecovery, setUseRecovery] = useState(false);
-    const totpInputRef = useRef<HTMLInputElement>(null);
+  // TOTP state
+  const [phase, setPhase] = useState<'password' | 'totp'>('password');
+  const [totpCode, setTotpCode] = useState('');
+  const [pendingToken, setPendingToken] = useState('');
+  const [trustDevice, setTrustDevice] = useState(true);
+  const [useRecovery, setUseRecovery] = useState(false);
+  const totpInputRef = useRef<HTMLInputElement>(null);
 
-    // Restore TOTP phase after page reload (mobile: OS suspends PWA on app-switch)
-    useEffect(() => {
-        try {
-            const raw = sessionStorage.getItem(LOGIN_STORAGE_KEY);
-            if (!raw) return;
-            const saved = JSON.parse(raw);
-            if (saved.pendingToken && saved.expiresAt > Date.now()) {
-                setPendingToken(saved.pendingToken);
-                setPhase('totp');
-            } else {
-                sessionStorage.removeItem(LOGIN_STORAGE_KEY);
-            }
-        } catch {}
-    }, []);
+  // Restore TOTP phase after page reload (mobile: OS suspends PWA on app-switch)
+  useEffect(() => {
+    try {
+      const raw = sessionStorage.getItem(LOGIN_STORAGE_KEY);
+      if (!raw) return;
+      const saved = JSON.parse(raw);
+      if (saved.pendingToken && saved.expiresAt > Date.now()) {
+        setPendingToken(saved.pendingToken);
+        setPhase('totp');
+      } else {
+        sessionStorage.removeItem(LOGIN_STORAGE_KEY);
+      }
+    } catch {}
+  }, []);
 
-    // Auto-focus TOTP input when switching to TOTP phase
-    useEffect(() => {
-        if (phase === 'totp') {
-            setTimeout(() => totpInputRef.current?.focus(), 100);
-        }
-    }, [phase]);
-
-    function saveLoginState(token: string) {
-        try {
-            // Pending token has 5min server expiry — save with matching client expiry
-            sessionStorage.setItem(
-                LOGIN_STORAGE_KEY,
-                JSON.stringify({
-                    pendingToken: token,
-                    expiresAt: Date.now() + 4.5 * 60 * 1000
-                })
-            );
-        } catch {}
+  // Auto-focus TOTP input when switching to TOTP phase
+  useEffect(() => {
+    if (phase === 'totp') {
+      setTimeout(() => totpInputRef.current?.focus(), 100);
     }
+  }, [phase]);
 
-    function clearLoginState() {
-        try {
-            sessionStorage.removeItem(LOGIN_STORAGE_KEY);
-        } catch {}
-    }
+  function saveLoginState(token: string) {
+    try {
+      // Pending token has 5min server expiry — save with matching client expiry
+      sessionStorage.setItem(LOGIN_STORAGE_KEY, JSON.stringify({
+        pendingToken: token,
+        expiresAt: Date.now() + 4.5 * 60 * 1000,
+      }));
+    } catch {}
+  }
 
-    const handleSubmit = async () => {
-        if (!password.trim() || loading) return;
-        setLoading(true);
-        setError('');
+  function clearLoginState() {
+    try { sessionStorage.removeItem(LOGIN_STORAGE_KEY); } catch {}
+  }
 
-        try {
-            const credentials = btoa(`admin:${password}`);
-            const res = await fetch('/api/portal/login', {
-                headers: { Authorization: `Basic ${credentials}` },
-                credentials: 'include'
-            });
-            const data = await res.json();
+  const handleSubmit = async () => {
+    if (!password.trim() || loading) return;
+    setLoading(true);
+    setError('');
 
-            if (res.ok && data.token) {
-                clearLoginState();
-                onLogin(data.token);
-            } else if (res.ok && data.requiresTOTP) {
-                setPendingToken(data.pendingToken);
-                saveLoginState(data.pendingToken);
-                setPhase('totp');
-                setError('');
-            } else {
-                setError(data.error || 'Invalid password');
-            }
-        } catch {
-            setError('Could not reach server');
-        } finally {
-            setLoading(false);
-        }
-    };
+    try {
+      const credentials = btoa(`admin:${password}`);
+      const res = await fetch('/api/portal/login', {
+        headers: { 'Authorization': `Basic ${credentials}` },
+        credentials: 'include',
+      });
+      const data = await res.json();
 
-    const handleTotpSubmit = async () => {
-        if (!totpCode.trim() || loading) return;
-        setLoading(true);
+      if (res.ok && data.token) {
+        clearLoginState();
+        onLogin(data.token);
+      } else if (res.ok && data.requiresTOTP) {
+        setPendingToken(data.pendingToken);
+        saveLoginState(data.pendingToken);
+        setPhase('totp');
         setError('');
+      } else {
+        setError(data.error || 'Invalid password');
+      }
+    } catch {
+      setError('Could not reach server');
+    } finally {
+      setLoading(false);
+    }
+  };
 
-        try {
-            const res = await fetch(
-                `/api/portal/login/totp?pending=${encodeURIComponent(pendingToken)}&code=${encodeURIComponent(totpCode)}&trust=${trustDevice ? '1' : '0'}`,
-                { credentials: 'include' }
-            );
-            const data = await res.json();
-
-            if (res.ok && data.token) {
-                clearLoginState();
-                onLogin(data.token);
-            } else {
-                setError(data.error || 'Invalid code');
-            }
-        } catch {
-            setError('Could not reach server');
-        } finally {
-            setLoading(false);
-        }
-    };
+  const handleTotpSubmit = async () => {
+    if (!totpCode.trim() || loading) return;
+    setLoading(true);
+    setError('');
 
-    const handleKeyDown = (e: KeyboardEvent) => {
-        if (e.key === 'Enter') {
-            if (phase === 'password') handleSubmit();
-            else handleTotpSubmit();
-        }
-    };
+    try {
+      const res = await fetch(
+        `/api/portal/login/totp?pending=${encodeURIComponent(pendingToken)}&code=${encodeURIComponent(totpCode)}&trust=${trustDevice ? '1' : '0'}`,
+        { credentials: 'include' },
+      );
+      const data = await res.json();
 
-    const handleBackToPassword = () => {
-        setPhase('password');
-        setError('');
-        setTotpCode('');
-        setUseRecovery(false);
+      if (res.ok && data.token) {
         clearLoginState();
-    };
+        onLogin(data.token);
+      } else {
+        setError(data.error || 'Invalid code');
+      }
+    } catch {
+      setError('Could not reach server');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      if (phase === 'password') handleSubmit();
+      else handleTotpSubmit();
+    }
+  };
+
+  const handleBackToPassword = () => {
+    setPhase('password');
+    setError('');
+    setTotpCode('');
+    setUseRecovery(false);
+    clearLoginState();
+  };
 
-    const inputCls =
-        'w-full bg-white/[0.05] border border-white/[0.08] text-white rounded-xl px-4 py-3 text-base outline-none input-glow placeholder:text-white/20 transition-all';
+  const inputCls = 'w-full bg-white/[0.05] border border-white/[0.08] text-white rounded-xl px-4 py-3 text-base outline-none input-glow placeholder:text-white/20 transition-all';
 
-    return (
-        <div className="flex flex-col items-center justify-center h-dvh px-6">
-            <div className="w-full max-w-[320px] flex flex-col items-center">
-                <AnimatePresence mode="wait">
-                    {phase === 'password' ? (
-                        <motion.div
-                            key="password"
-                            initial={{ opacity: 0, x: -20 }}
-                            animate={{ opacity: 1, x: 0 }}
-                            exit={{ opacity: 0, x: -20 }}
-                            transition={{ duration: 0.2 }}
-                            className="w-full flex flex-col items-center"
-                        >
-                            <div className="w-14 h-14 rounded-2xl bg-white/[0.04] border border-white/[0.08] flex items-center justify-center mb-5">
-                                <Lock className="h-6 w-6 text-white/40" />
-                            </div>
+  return (
+    <div className="flex flex-col items-center justify-center h-dvh px-6">
+      <div className="w-full max-w-[320px] flex flex-col items-center">
+        <AnimatePresence mode="wait">
+          {phase === 'password' ? (
+            <motion.div
+              key="password"
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.2 }}
+              className="w-full flex flex-col items-center"
+            >
+              <div className="w-14 h-14 rounded-2xl bg-white/[0.04] border border-white/[0.08] flex items-center justify-center mb-5">
+                <Lock className="h-6 w-6 text-white/40" />
+              </div>
 
-                            <h1 className="text-xl font-bold text-white tracking-tight mb-1">
-                                Welcome back
-                            </h1>
-                            <p className="text-white/40 text-[13px] mb-6">
-                                Enter your password to continue.
-                            </p>
+              <h1 className="text-xl font-bold text-white tracking-tight mb-1">
+                Welcome back
+              </h1>
+              <p className="text-white/40 text-[13px] mb-6">
+                Enter your password to continue.
+              </p>
 
-                            {error && (
-                                <div className="w-full bg-red-500/8 border border-red-500/15 rounded-xl px-4 py-2.5 mb-4">
-                                    <p className="text-red-400/90 text-[12px]">
-                                        {error}
-                                    </p>
-                                </div>
-                            )}
+              {error && (
+                <div className="w-full bg-red-500/8 border border-red-500/15 rounded-xl px-4 py-2.5 mb-4">
+                  <p className="text-red-400/90 text-[12px]">{error}</p>
+                </div>
+              )}
 
-                            <input
-                                type="password"
-                                value={password}
-                                onChange={e => setPassword(e.target.value)}
-                                onKeyDown={handleKeyDown}
-                                placeholder="Password"
-                                autoComplete="current-password"
-                                className={inputCls}
-                            />
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Password"
+                autoFocus
+                autoComplete="current-password"
+                className={inputCls}
+              />
 
-                            <button
-                                onClick={handleSubmit}
-                                disabled={!password.trim() || loading}
-                                className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
-                            >
-                                {loading ? (
-                                    <>
-                                        <LoaderCircle className="h-4 w-4 animate-spin" />
-                                        Signing in...
-                                    </>
-                                ) : (
-                                    <>
-                                        Sign In
-                                        <ArrowRight className="h-4 w-4" />
-                                    </>
-                                )}
-                            </button>
-                        </motion.div>
-                    ) : (
-                        <motion.div
-                            key="totp"
-                            initial={{ opacity: 0, x: 20 }}
-                            animate={{ opacity: 1, x: 0 }}
-                            exit={{ opacity: 0, x: 20 }}
-                            transition={{ duration: 0.2 }}
-                            className="w-full flex flex-col items-center"
-                        >
-                            <div className="w-14 h-14 rounded-2xl bg-[#AF27E3]/10 border border-[#AF27E3]/20 flex items-center justify-center mb-5">
-                                <Shield className="h-6 w-6 text-[#AF27E3]" />
-                            </div>
+              <button
+                onClick={handleSubmit}
+                disabled={!password.trim() || loading}
+                className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+              >
+                {loading ? (
+                  <><LoaderCircle className="h-4 w-4 animate-spin" />Signing in...</>
+                ) : (
+                  <>Sign In<ArrowRight className="h-4 w-4" /></>
+                )}
+              </button>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="totp"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 20 }}
+              transition={{ duration: 0.2 }}
+              className="w-full flex flex-col items-center"
+            >
+              <div className="w-14 h-14 rounded-2xl bg-[#AF27E3]/10 border border-[#AF27E3]/20 flex items-center justify-center mb-5">
+                <Shield className="h-6 w-6 text-[#AF27E3]" />
+              </div>
 
-                            <h1 className="text-xl font-bold text-white tracking-tight mb-1">
-                                {useRecovery
-                                    ? 'Recovery code'
-                                    : 'Enter your 2FA code'}
-                            </h1>
-                            <p className="text-white/40 text-[13px] mb-6">
-                                {useRecovery
-                                    ? 'Enter one of your recovery codes.'
-                                    : 'Open your authenticator app and enter the 6-digit code.'}
-                            </p>
+              <h1 className="text-xl font-bold text-white tracking-tight mb-1">
+                {useRecovery ? 'Recovery code' : 'Enter your 2FA code'}
+              </h1>
+              <p className="text-white/40 text-[13px] mb-6">
+                {useRecovery
+                  ? 'Enter one of your recovery codes.'
+                  : 'Open your authenticator app and enter the 6-digit code.'}
+              </p>
 
-                            {error && (
-                                <div className="w-full bg-red-500/8 border border-red-500/15 rounded-xl px-4 py-2.5 mb-4">
-                                    <p className="text-red-400/90 text-[12px]">
-                                        {error}
-                                    </p>
-                                </div>
-                            )}
+              {error && (
+                <div className="w-full bg-red-500/8 border border-red-500/15 rounded-xl px-4 py-2.5 mb-4">
+                  <p className="text-red-400/90 text-[12px]">{error}</p>
+                </div>
+              )}
 
-                            <input
-                                ref={totpInputRef}
-                                type="text"
-                                inputMode={useRecovery ? 'text' : 'numeric'}
-                                autoComplete="one-time-code"
-                                maxLength={useRecovery ? 20 : 6}
-                                value={totpCode}
-                                onChange={e => {
-                                    setTotpCode(
-                                        useRecovery
-                                            ? e.target.value
-                                            : e.target.value.replace(/\D/g, '')
-                                    );
-                                    setError('');
-                                }}
-                                onKeyDown={handleKeyDown}
-                                placeholder={
-                                    useRecovery ? 'Recovery code' : '000000'
-                                }
-                                className={
-                                    inputCls +
-                                    (useRecovery
-                                        ? ''
-                                        : ' tracking-[0.3em] text-center font-mono')
-                                }
-                            />
+              <input
+                ref={totpInputRef}
+                type="text"
+                inputMode={useRecovery ? 'text' : 'numeric'}
+                autoComplete="one-time-code"
+                maxLength={useRecovery ? 20 : 6}
+                value={totpCode}
+                onChange={(e) => {
+                  setTotpCode(useRecovery ? e.target.value : e.target.value.replace(/\D/g, ''));
+                  setError('');
+                }}
+                onKeyDown={handleKeyDown}
+                placeholder={useRecovery ? 'Recovery code' : '000000'}
+                autoFocus
+                className={inputCls + (useRecovery ? '' : ' tracking-[0.3em] text-center font-mono')}
+              />
 
-                            {/* Trust device checkbox */}
-                            <label className="flex items-center gap-2.5 mt-4 w-full cursor-pointer">
-                                <div
-                                    role="presentation"
-                                    onClick={() => setTrustDevice(v => !v)}
-                                    className={`w-5 h-5 rounded-md border flex items-center justify-center transition-all ${
-                                        trustDevice
-                                            ? 'bg-[#AF27E3] border-[#AF27E3]'
-                                            : 'bg-white/[0.04] border-white/[0.12]'
-                                    }`}
-                                >
-                                    {trustDevice && (
-                                        <Check className="h-3.5 w-3.5 text-white" />
-                                    )}
-                                </div>
-                                <span className="text-[13px] text-white/50">
-                                    Trust this device for 90 days
-                                </span>
-                            </label>
+              {/* Trust device checkbox */}
+              <label className="flex items-center gap-2.5 mt-4 w-full cursor-pointer">
+                <div
+                  onClick={() => setTrustDevice(v => !v)}
+                  className={`w-5 h-5 rounded-md border flex items-center justify-center transition-all ${
+                    trustDevice
+                      ? 'bg-[#AF27E3] border-[#AF27E3]'
+                      : 'bg-white/[0.04] border-white/[0.12]'
+                  }`}
+                >
+                  {trustDevice && <Check className="h-3.5 w-3.5 text-white" />}
+                </div>
+                <span className="text-[13px] text-white/50">Trust this device for 90 days</span>
+              </label>
 
-                            <button
-                                onClick={handleTotpSubmit}
-                                disabled={!totpCode.trim() || loading}
-                                className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
-                            >
-                                {loading ? (
-                                    <>
-                                        <LoaderCircle className="h-4 w-4 animate-spin" />
-                                        Verifying...
-                                    </>
-                                ) : (
-                                    <>
-                                        Verify
-                                        <ArrowRight className="h-4 w-4" />
-                                    </>
-                                )}
-                            </button>
+              <button
+                onClick={handleTotpSubmit}
+                disabled={!totpCode.trim() || loading}
+                className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+              >
+                {loading ? (
+                  <><LoaderCircle className="h-4 w-4 animate-spin" />Verifying...</>
+                ) : (
+                  <>Verify<ArrowRight className="h-4 w-4" /></>
+                )}
+              </button>
 
-                            <div className="flex items-center gap-4 mt-4">
-                                <button
-                                    onClick={handleBackToPassword}
-                                    className="text-[12px] text-white/30 hover:text-white/50 flex items-center gap-1 transition-colors"
-                                >
-                                    <ArrowLeft className="h-3 w-3" />
-                                    Back
-                                </button>
-                                <button
-                                    onClick={() => {
-                                        setUseRecovery(v => !v);
-                                        setTotpCode('');
-                                        setError('');
-                                    }}
-                                    className="text-[12px] text-white/30 hover:text-white/50 transition-colors"
-                                >
-                                    {useRecovery
-                                        ? 'Use authenticator code'
-                                        : 'Use a recovery code'}
-                                </button>
-                            </div>
-                        </motion.div>
-                    )}
-                </AnimatePresence>
-            </div>
-        </div>
-    );
+              <div className="flex items-center gap-4 mt-4">
+                <button
+                  onClick={handleBackToPassword}
+                  className="text-[12px] text-white/30 hover:text-white/50 flex items-center gap-1 transition-colors"
+                >
+                  <ArrowLeft className="h-3 w-3" />
+                  Back
+                </button>
+                <button
+                  onClick={() => { setUseRecovery(v => !v); setTotpCode(''); setError(''); }}
+                  className="text-[12px] text-white/30 hover:text-white/50 transition-colors"
+                >
+                  {useRecovery ? 'Use authenticator code' : 'Use a recovery code'}
+                </button>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
 }