Lots of frontend changes

2026-02-07 19:10:53 +00:00 · 2026-02-07 19:10:53 +00:00 · 555ba7cf53
commit 555ba7cf53
parent ec29631c44
38 changed files with 1508 additions and 648 deletions
--- a/frontend/src/components/ui/AuthModal.tsx
+++ b/frontend/src/components/ui/AuthModal.tsx
@ -0,0 +1,154 @@
+import { useState, useCallback } from 'react';
+import { CloseIcon } from './icons/CloseIcon';
+
+type Tab = 'login' | 'register';
+
+export default function AuthModal({
+  onClose,
+  onLogin,
+  onRegister,
+  loading,
+  error,
+  onClearError,
+}: {
+  onClose: () => void;
+  onLogin: (email: string, password: string) => Promise<void>;
+  onRegister: (email: string, password: string, name?: string) => Promise<void>;
+  loading: boolean;
+  error: string | null;
+  onClearError: () => void;
+}) {
+  const [tab, setTab] = useState<Tab>('login');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+
+  const switchTab = useCallback(
+    (newTab: Tab) => {
+      setTab(newTab);
+      onClearError();
+    },
+    [onClearError]
+  );
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      try {
+        if (tab === 'login') {
+          await onLogin(email, password);
+        } else {
+          await onRegister(email, password, name || undefined);
+        }
+        onClose();
+      } catch {
+        // Error is handled by the hook
+      }
+    },
+    [tab, email, password, name, onLogin, onRegister, onClose]
+  );
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center" onClick={onClose}>
+      <div className="absolute inset-0 bg-black/50" />
+      <div
+        className="relative w-full max-w-sm mx-4 bg-white dark:bg-warm-800 rounded-lg shadow-xl border border-warm-200 dark:border-warm-700"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 pt-5 pb-3">
+          <h2 className="text-lg font-semibold text-navy-950 dark:text-warm-100">
+            {tab === 'login' ? 'Log in' : 'Create account'}
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300"
+          >
+            <CloseIcon className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex px-5 gap-4 border-b border-warm-200 dark:border-warm-700">
+          <button
+            className={`pb-2 text-sm font-medium border-b-2 transition-colors ${
+              tab === 'login'
+                ? 'border-teal-600 text-teal-600 dark:text-teal-400 dark:border-teal-400'
+                : 'border-transparent text-warm-500 dark:text-warm-400 hover:text-warm-700 dark:hover:text-warm-300'
+            }`}
+            onClick={() => switchTab('login')}
+          >
+            Log in
+          </button>
+          <button
+            className={`pb-2 text-sm font-medium border-b-2 transition-colors ${
+              tab === 'register'
+                ? 'border-teal-600 text-teal-600 dark:text-teal-400 dark:border-teal-400'
+                : 'border-transparent text-warm-500 dark:text-warm-400 hover:text-warm-700 dark:hover:text-warm-300'
+            }`}
+            onClick={() => switchTab('register')}
+          >
+            Register
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          {tab === 'register' && (
+            <div>
+              <label className="block text-sm font-medium text-warm-700 dark:text-warm-300 mb-1">
+                Name
+              </label>
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full px-3 py-2 text-sm rounded border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-900 text-navy-950 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-2 ring-teal-400"
+                placeholder="Your name (optional)"
+              />
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-warm-700 dark:text-warm-300 mb-1">
+              Email
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full px-3 py-2 text-sm rounded border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-900 text-navy-950 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-2 ring-teal-400"
+              placeholder="you@example.com"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-warm-700 dark:text-warm-300 mb-1">
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              minLength={8}
+              className="w-full px-3 py-2 text-sm rounded border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-900 text-navy-950 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-2 ring-teal-400"
+              placeholder={tab === 'register' ? 'Min 8 characters' : 'Your password'}
+            />
+          </div>
+
+          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full py-2 rounded bg-teal-600 text-white text-sm font-medium hover:bg-teal-700 disabled:opacity-50 disabled:cursor-wait"
+          >
+            {loading ? 'Please wait...' : tab === 'login' ? 'Log in' : 'Create account'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}