feat(frontend): introduced a working frontend prototype

7project/frontend/src/pages/LoginRegisterPage.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { login, register } from '../api';
+
+export default function LoginRegisterPage({ onLoggedIn }: { onLoggedIn: () => void }) {
+  const [mode, setMode] = useState<'login' | 'register'>('login');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      if (mode === 'login') {
+        await login(email, password);
+        onLoggedIn();
+      } else {
+        await register(email, password, firstName || undefined, lastName || undefined);
+        // After register, prompt login automatically
+        await login(email, password);
+        onLoggedIn();
+      }
+    } catch (err: any) {
+      setError(err?.message || 'Operation failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: 420, margin: '4rem auto', padding: 24, border: '1px solid #ddd', borderRadius: 8 }}>
+      <h2 style={{ marginTop: 0 }}>{mode === 'login' ? 'Login' : 'Register'}</h2>
+      <div style={{ marginBottom: 16 }}>
+        <button onClick={() => setMode('login')} disabled={mode === 'login'}>Login</button>
+        <button onClick={() => setMode('register')} disabled={mode === 'register'} style={{ marginLeft: 8 }}>Register</button>
+      </div>
+      <form onSubmit={handleSubmit}>
+        <div style={{ marginBottom: 12 }}>
+          <label>Email<br />
+            <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} style={{ width: '100%' }} />
+          </label>
+        </div>
+        <div style={{ marginBottom: 12 }}>
+          <label>Password<br />
+            <input type="password" required value={password} onChange={(e) => setPassword(e.target.value)} style={{ width: '100%' }} />
+          </label>
+        </div>
+        {mode === 'register' && (
+          <>
+            <div style={{ marginBottom: 12 }}>
+              <label>First name (optional)<br />
+                <input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} style={{ width: '100%' }} />
+              </label>
+            </div>
+            <div style={{ marginBottom: 12 }}>
+              <label>Last name (optional)<br />
+                <input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} style={{ width: '100%' }} />
+              </label>
+            </div>
+          </>
+        )}
+        {error && <div style={{ color: 'crimson', marginBottom: 12 }}>{error}</div>}
+        <button type="submit" disabled={loading}>{loading ? 'Please wait…' : (mode === 'login' ? 'Login' : 'Register')}</button>
+      </form>
+    </div>
+  );
+}