bloby-bot 0.39.1 → 0.40.0

package/workspace/client/src/components/Lock/WorkspaceLock.tsx

@@ -1,484 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { Shield, KeyRound, Lock, ArrowLeft, Check, Loader2, Eye, EyeOff } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { PinInput } from './PinInput';
-
-// ── Types ─────────────────────────────────────────────────────────────
-
-type LockState =
-  | 'loading'
-  | 'setup-choose'
-  | 'setup-create'
-  | 'setup-confirm'
-  | 'locked'
-  | 'unlocked';
-
-type LockType = 'pin' | 'password';
-
-const SESSION_KEY = 'workspace_lock_session';
-
-// ── IMPORTANT ─────────────────────────────────────────────────────────
-// The API_BASE below must match how your workspace proxies requests to
-// the backend. Default Bloby workspaces use "/app/api" because the
-// supervisor proxies /app/api/* → backend. If your workspace serves the
-// backend directly (no proxy), change this to "/api".
-const API_BASE = '/app/api';
-
-// ── Component ─────────────────────────────────────────────────────────
-
-export function WorkspaceLock({ children }: { children: React.ReactNode }) {
-  const [state, setState] = useState<LockState>('loading');
-  const [lockType, setLockType] = useState<LockType | null>(null);
-  const [selectedType, setSelectedType] = useState<LockType | null>(null);
-  const [value, setValue] = useState('');
-  const [error, setError] = useState('');
-  const [shaking, setShaking] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [fadeKey, setFadeKey] = useState(0);
-  const firstEntry = useRef('');
-
-  const transitionTo = useCallback((next: LockState) => {
-    setFadeKey((k) => k + 1);
-    setState(next);
-  }, []);
-
-  const triggerShake = useCallback(() => {
-    setShaking(true);
-    setTimeout(() => setShaking(false), 500);
-  }, []);
-
-  // ── Check lock status on mount ──────────────────────────────────────
-  useEffect(() => {
-    (async () => {
-      try {
-        const res = await fetch(`${API_BASE}/lock/status`, { signal: AbortSignal.timeout(3000) });
-        const data = await res.json();
-
-        if (!data.configured) {
-          transitionTo('setup-choose');
-          return;
-        }
-
-        setLockType(data.type);
-
-        const token = localStorage.getItem(SESSION_KEY);
-        if (token) {
-          const vRes = await fetch(`${API_BASE}/lock/verify`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ token }),
-          });
-          const vData = await vRes.json();
-          if (vData.valid) {
-            setState('unlocked');
-            return;
-          }
-          localStorage.removeItem(SESSION_KEY);
-        }
-
-        transitionTo('locked');
-      } catch {
-        // Fail-open if backend is unreachable
-        setState('unlocked');
-      }
-    })();
-  }, [transitionTo]);
-
-  // ── Actions ─────────────────────────────────────────────────────────
-
-  const doSetup = async (type: LockType, val: string) => {
-    setSubmitting(true);
-    try {
-      const res = await fetch(`${API_BASE}/lock/setup`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ type, value: val }),
-      });
-      const data = await res.json();
-      if (data.token) localStorage.setItem(SESSION_KEY, data.token);
-      setState('unlocked');
-    } catch {
-      setError('Failed to save. Try again.');
-      triggerShake();
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const doVerify = async (val: string) => {
-    setSubmitting(true);
-    try {
-      const res = await fetch(`${API_BASE}/lock/verify`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ value: val }),
-      });
-      const data = await res.json();
-
-      if (data.valid) {
-        if (data.token) localStorage.setItem(SESSION_KEY, data.token);
-        setState('unlocked');
-      } else {
-        setError(lockType === 'pin' ? 'Wrong PIN' : 'Wrong password');
-        setValue('');
-        triggerShake();
-      }
-    } catch {
-      setError('Connection failed');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  // ── PIN complete handler (auto-advances) ────────────────────────────
-  const handlePinComplete = useCallback(
-    (completed: string) => {
-      if (state === 'setup-create') {
-        firstEntry.current = completed;
-        setValue('');
-        setError('');
-        transitionTo('setup-confirm');
-      } else if (state === 'setup-confirm') {
-        if (firstEntry.current === completed) {
-          doSetup(selectedType!, completed);
-        } else {
-          setError("PINs don't match. Try again.");
-          setValue('');
-          triggerShake();
-        }
-      } else if (state === 'locked') {
-        doVerify(completed);
-      }
-    },
-    [state, selectedType, transitionTo, triggerShake],
-  );
-
-  // ── Password submit handler ─────────────────────────────────────────
-  const handlePasswordSubmit = () => {
-    if (submitting || !value) return;
-
-    if (state === 'setup-create') {
-      if (value.length < 4) {
-        setError('At least 4 characters');
-        triggerShake();
-        return;
-      }
-      firstEntry.current = value;
-      setValue('');
-      setError('');
-      setShowPassword(false);
-      transitionTo('setup-confirm');
-    } else if (state === 'setup-confirm') {
-      if (firstEntry.current === value) {
-        doSetup(selectedType!, value);
-      } else {
-        setError("Passwords don't match. Try again.");
-        setValue('');
-        triggerShake();
-      }
-    } else if (state === 'locked') {
-      doVerify(value);
-    }
-  };
-
-  // ── Navigation ──────────────────────────────────────────────────────
-  const goBack = () => {
-    if (state === 'setup-confirm') {
-      transitionTo('setup-create');
-    } else {
-      transitionTo('setup-choose');
-    }
-    setValue('');
-    setError('');
-    setShowPassword(false);
-  };
-
-  const chooseType = (type: LockType) => {
-    setSelectedType(type);
-    setValue('');
-    setError('');
-    setShowPassword(false);
-    transitionTo('setup-create');
-  };
-
-  // ── Render ──────────────────────────────────────────────────────────
-
-  if (state === 'loading') {
-    return (
-      <div
-        className="fixed inset-0 z-[300] flex items-center justify-center"
-        style={{
-          backgroundColor: '#0A0A0A',
-          backgroundImage: 'radial-gradient(circle, #1f1f1f 1.2px, transparent 1.2px)',
-          backgroundSize: '20px 20px',
-        }}
-      >
-        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
-  if (state === 'unlocked') return <>{children}</>;
-
-  const isSetup = state === 'setup-choose' || state === 'setup-create' || state === 'setup-confirm';
-  const currentType = isSetup ? selectedType : lockType;
-  const isPin = currentType === 'pin';
-
-  return (
-    <div
-      className="fixed inset-0 z-[300] flex items-center justify-center overflow-auto"
-      style={{
-        backgroundColor: '#0A0A0A',
-        backgroundImage: 'radial-gradient(circle, #1f1f1f 1.2px, transparent 1.2px)',
-        backgroundSize: '20px 20px',
-      }}
-    >
-      <div className="w-full max-w-sm px-4 sm:px-5 py-8">
-        {/* ── Logo + badge ── */}
-        <div className="flex flex-col items-center mb-8">
-          <img
-            src="/bloby.png"
-            alt=""
-            className="h-14 mb-4 object-contain"
-            draggable={false}
-          />
-          <div className="flex items-center gap-1.5">
-            <Shield className="h-3.5 w-3.5 text-muted-foreground" />
-            <span className="text-[11px] font-medium text-muted-foreground uppercase tracking-widest">
-              Workspace Lock
-            </span>
-          </div>
-        </div>
-
-        {/* ── Main card ── */}
-        <div className="animated-border animated-border-slow rounded-2xl p-px">
-          <div
-            key={fadeKey}
-            className="rounded-2xl bg-[#111111] p-5 sm:p-7 animate-[fadeIn_0.2s_ease-out]"
-            style={{ animationFillMode: 'backwards' }}
-          >
-            {/* ════════════════ Choose screen ════════════════ */}
-            {state === 'setup-choose' && (
-              <div className="space-y-6">
-                <div className="text-center">
-                  <h1
-                    className="text-lg font-semibold text-foreground"
-                    style={{ fontFamily: "'Space Grotesk', sans-serif" }}
-                  >
-                    Secure your workspace
-                  </h1>
-                  <p className="text-sm text-muted-foreground mt-1">
-                    Choose your preferred lock method
-                  </p>
-                </div>
-
-                <div className="grid grid-cols-2 gap-3">
-                  <button
-                    onClick={() => chooseType('pin')}
-                    className="group rounded-xl border-2 border-[#252525] bg-[#161616] p-5 transition-all duration-200 hover:border-white/[0.12] hover:bg-[#1A1A1A] focus:outline-none focus:border-[rgba(175,39,227,0.45)] focus:shadow-[0_0_0_3px_rgba(175,39,227,0.1)]"
-                  >
-                    <div className="flex flex-col items-center gap-3">
-                      <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-white/[0.03] group-hover:bg-white/[0.06] transition-colors">
-                        <KeyRound className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors" />
-                      </div>
-                      <div className="text-center">
-                        <div className="text-sm font-medium text-foreground">PIN Code</div>
-                        <div className="text-[11px] text-muted-foreground mt-0.5">6 digits, quick access</div>
-                      </div>
-                    </div>
-                  </button>
-
-                  <button
-                    onClick={() => chooseType('password')}
-                    className="group rounded-xl border-2 border-[#252525] bg-[#161616] p-5 transition-all duration-200 hover:border-white/[0.12] hover:bg-[#1A1A1A] focus:outline-none focus:border-[rgba(175,39,227,0.45)] focus:shadow-[0_0_0_3px_rgba(175,39,227,0.1)]"
-                  >
-                    <div className="flex flex-col items-center gap-3">
-                      <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-white/[0.03] group-hover:bg-white/[0.06] transition-colors">
-                        <Lock className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors" />
-                      </div>
-                      <div className="text-center">
-                        <div className="text-sm font-medium text-foreground">Password</div>
-                        <div className="text-[11px] text-muted-foreground mt-0.5">Custom passphrase</div>
-                      </div>
-                    </div>
-                  </button>
-                </div>
-              </div>
-            )}
-
-            {/* ════════════════ Setup: create / confirm ════════════════ */}
-            {(state === 'setup-create' || state === 'setup-confirm') && selectedType && (
-              <div className="space-y-5">
-                <div className="flex items-center gap-3">
-                  <button
-                    onClick={goBack}
-                    className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-white/[0.04] hover:bg-white/[0.08] transition-colors"
-                  >
-                    <ArrowLeft className="h-3.5 w-3.5 text-muted-foreground" />
-                  </button>
-                  <div className="min-w-0">
-                    <h1
-                      className="text-base font-semibold text-foreground truncate"
-                      style={{ fontFamily: "'Space Grotesk', sans-serif" }}
-                    >
-                      {state === 'setup-create'
-                        ? isPin ? 'Set your PIN' : 'Set your password'
-                        : isPin ? 'Confirm your PIN' : 'Confirm your password'}
-                    </h1>
-                    <p className="text-xs text-muted-foreground">
-                      {state === 'setup-create'
-                        ? isPin ? 'Choose a 6-digit PIN' : 'Minimum 4 characters'
-                        : 'Enter it once more to confirm'}
-                    </p>
-                  </div>
-                </div>
-
-                <div className="flex flex-col items-center gap-3">
-                  {isPin ? (
-                    <PinInput
-                      key={state}
-                      value={value}
-                      onChange={(v) => { setValue(v); setError(''); }}
-                      onComplete={handlePinComplete}
-                      error={shaking}
-                      disabled={submitting}
-                    />
-                  ) : (
-                    <>
-                      <PasswordField
-                        key={state}
-                        value={value}
-                        onChange={(v) => { setValue(v); setError(''); }}
-                        onSubmit={handlePasswordSubmit}
-                        placeholder={state === 'setup-confirm' ? 'Re-enter password' : 'Enter password'}
-                        show={showPassword}
-                        onToggleShow={() => setShowPassword(!showPassword)}
-                        error={shaking}
-                        disabled={submitting}
-                      />
-                      <button
-                        onClick={handlePasswordSubmit}
-                        disabled={submitting || value.length < (state === 'setup-create' ? 4 : 1)}
-                        className="w-full h-10 rounded-xl bg-primary text-primary-foreground text-sm font-medium transition-all hover:bg-primary/90 disabled:opacity-25 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-                      >
-                        {submitting ? (
-                          <Loader2 className="h-4 w-4 animate-spin" />
-                        ) : state === 'setup-confirm' ? (
-                          <><Check className="h-4 w-4" />Confirm</>
-                        ) : (
-                          'Continue'
-                        )}
-                      </button>
-                    </>
-                  )}
-                  {error && <p className="text-xs text-destructive font-medium">{error}</p>}
-                </div>
-
-                <div className="flex items-center justify-center gap-1.5 pt-1">
-                  <div className="w-1.5 h-1.5 rounded-full bg-foreground" />
-                  <div className={cn('w-1.5 h-1.5 rounded-full transition-colors duration-300', state === 'setup-confirm' ? 'bg-foreground' : 'bg-white/15')} />
-                </div>
-              </div>
-            )}
-
-            {/* ════════════════ Locked ════════════════ */}
-            {state === 'locked' && lockType && (
-              <div className="space-y-6">
-                <div className="text-center">
-                  <h1
-                    className="text-lg font-semibold text-foreground"
-                    style={{ fontFamily: "'Space Grotesk', sans-serif" }}
-                  >
-                    Welcome back
-                  </h1>
-                  <p className="text-sm text-muted-foreground mt-1">
-                    {lockType === 'pin' ? 'Enter your PIN to continue' : 'Enter your password to continue'}
-                  </p>
-                </div>
-
-                <div className="flex flex-col items-center gap-3">
-                  {lockType === 'pin' ? (
-                    <PinInput
-                      value={value}
-                      onChange={(v) => { setValue(v); setError(''); }}
-                      onComplete={handlePinComplete}
-                      error={shaking}
-                      disabled={submitting}
-                    />
-                  ) : (
-                    <>
-                      <PasswordField
-                        value={value}
-                        onChange={(v) => { setValue(v); setError(''); }}
-                        onSubmit={handlePasswordSubmit}
-                        placeholder="Enter password"
-                        show={showPassword}
-                        onToggleShow={() => setShowPassword(!showPassword)}
-                        error={shaking}
-                        disabled={submitting}
-                      />
-                      <button
-                        onClick={handlePasswordSubmit}
-                        disabled={submitting || !value}
-                        className="w-full h-10 rounded-xl bg-primary text-primary-foreground text-sm font-medium transition-all hover:bg-primary/90 disabled:opacity-25 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-                      >
-                        {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Unlock'}
-                      </button>
-                    </>
-                  )}
-                  {error && <p className="text-xs text-destructive font-medium">{error}</p>}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <p className="text-center text-[11px] text-muted-foreground/40 mt-6">
-          Ask your agent to reset if you forget your{' '}
-          {lockType === 'pin' || selectedType === 'pin' ? 'PIN' : 'password'}
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// ── Password field sub-component ──────────────────────────────────────
-
-function PasswordField({
-  value, onChange, onSubmit, placeholder, show, onToggleShow, error, disabled,
-}: {
-  value: string; onChange: (v: string) => void; onSubmit: () => void;
-  placeholder: string; show: boolean; onToggleShow: () => void;
-  error: boolean; disabled: boolean;
-}) {
-  return (
-    <div className={cn('relative w-full', error && 'animate-shake')}>
-      <input
-        type={show ? 'text' : 'password'}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onKeyDown={(e) => e.key === 'Enter' && onSubmit()}
-        placeholder={placeholder}
-        disabled={disabled}
-        autoFocus
-        autoComplete="off"
-        className={cn(
-          'w-full h-12 rounded-xl border-2 bg-[#161616] px-4 pr-11 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none transition-all duration-200',
-          'border-[#252525] focus:border-[rgba(175,39,227,0.45)] focus:shadow-[0_0_0_3px_rgba(175,39,227,0.1),0_0_24px_-6px_rgba(175,39,227,0.18)]',
-          error && 'border-destructive/40',
-          disabled && 'opacity-40',
-        )}
-        style={{ fontSize: '16px' }}
-      />
-      <button
-        type="button"
-        onClick={onToggleShow}
-        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground/50 hover:text-foreground transition-colors p-1"
-        tabIndex={-1}
-      >
-        {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-      </button>
-    </div>
-  );
-}