refactor(ui): migrate auth form controls

web/src/components/Login.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useTradingAuth } from '../lib/tradingAuth';
+import { Button, Input } from './ui/Primitives';
 
 export function Login() {
   const tradingAuth = useTradingAuth();
@@ -50,25 +51,25 @@ export function Login() {
         </p>
 
         <form onSubmit={handleLogin}>
-          <div className="form-group">
+          <div className="form-group">
-            <label>Email</label>
+            <Input
-            <input
+              label="Email"
-              type="email"
+              type="email"
-              value={email}
+              value={email}
-              onChange={(e) => setEmail(e.target.value)}
+              onChange={(e) => setEmail(e.target.value)}
-              placeholder="trader@example.com"
+              placeholder="trader@example.com"
-              required
+              required
             />
           </div>
 
-          {!isResetPassword && (
+          {!isResetPassword && (
-            <div className="form-group">
+            <div className="form-group">
-              <label>Password</label>
+              <Input
-              <input
+                label="Password"
-                type="password"
+                type="password"
-                value={password}
+                value={password}
-                onChange={(e) => setPassword(e.target.value)}
+                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
+                placeholder="••••••••"
                 required
               />
             </div>
@@ -85,27 +86,27 @@ export function Login() {
             fontSize: '0.9rem'
           }}>{message}</div>}
 
-          <button type="submit" disabled={loading} className="auth-button">
+          <Button type="submit" disabled={loading} className="auth-button">
-            {loading ? 'Processing...' : isResetPassword ? 'Send Reset Link' : isSignUp ? 'Sign Up' : 'Sign In'}
+            {loading ? 'Processing...' : isResetPassword ? 'Send Reset Link' : isSignUp ? 'Sign Up' : 'Sign In'}
-          </button>
+          </Button>
         </form>
 
         <div className="auth-footer" style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
           {!isResetPassword && (
-            <button onClick={() => setIsSignUp(!isSignUp)} className="link-button">
+            <Button type="button" onClick={() => setIsSignUp(!isSignUp)} variant="link" className="link-button">
-              {isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'}
+              {isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'}
-            </button>
+            </Button>
-          )}
+          )}
-
+
-          {!isSignUp && (
+          {!isSignUp && (
-            <button onClick={() => {
+            <Button type="button" onClick={() => {
-              setIsResetPassword(!isResetPassword);
+              setIsResetPassword(!isResetPassword);
-              setError(null);
+              setError(null);
-              setMessage(null);
+              setMessage(null);
-            }} className="link-button">
+            }} variant="link" className="link-button">
-              {isResetPassword ? 'Back to Sign In' : 'Forgot Password?'}
+              {isResetPassword ? 'Back to Sign In' : 'Forgot Password?'}
-            </button>
+            </Button>
-          )}
+          )}
         </div>
       </div>
 

web/src/components/ResetPassword.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { resetPlatformPassword } from '../lib/authSession';
+import { Button, Input } from './ui/Primitives';
 
 export function ResetPassword() {
     const [password, setPassword] = useState('');
@@ -44,13 +45,13 @@ export function ResetPassword() {
                 <p className="subtitle">Enter your new password below</p>
 
                 <form onSubmit={handlePasswordReset}>
-                    <div className="form-group">
+                    <div className="form-group">
-                        <label>New Password</label>
+                        <Input
-                        <input
+                            label="New Password"
-                            type="password"
+                            type="password"
-                            value={password}
+                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
+                            onChange={(e) => setPassword(e.target.value)}
-                            placeholder="New password"
+                            placeholder="New password"
                             required
                         />
                     </div>
@@ -58,9 +59,9 @@ export function ResetPassword() {
                     {error && <div className="error-message">{error}</div>}
                     {message && <div className="success-message" style={{ color: '#00ff88', marginBottom: '20px', textAlign: 'center' }}>{message}</div>}
 
-                    <button type="submit" disabled={loading || !!message} className="auth-button">
+                    <Button type="submit" disabled={loading || !!message} className="auth-button">
-                        {loading ? 'Updating...' : 'Update Password'}
+                        {loading ? 'Updating...' : 'Update Password'}
-                    </button>
+                    </Button>
                 </form>
             </div>
             <style>{`