From 6511326a3e5de3e6d2cf4f5ec29c30c3ea98cfe7 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Wed, 6 May 2026 14:05:43 -0700
Subject: [PATCH] refactor(ui): migrate auth form controls

---
 web/src/components/Login.tsx         | 67 ++++++++++++++--------------
 web/src/components/ResetPassword.tsx | 21 ++++-----
 2 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/web/src/components/Login.tsx b/web/src/components/Login.tsx
index d9640b8..9b63aa8 100644
--- a/web/src/components/Login.tsx
+++ b/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">
-            <label>Email</label>
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="trader@example.com"
-              required
+          <div className="form-group">
+            <Input
+              label="Email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="trader@example.com"
+              required
             />
           </div>
 
-          {!isResetPassword && (
-            <div className="form-group">
-              <label>Password</label>
-              <input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
+          {!isResetPassword && (
+            <div className="form-group">
+              <Input
+                label="Password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="••••••••"
                 required
               />
             </div>
@@ -85,27 +86,27 @@ export function Login() {
             fontSize: '0.9rem'
           }}>{message}</div>}
 
-          <button type="submit" disabled={loading} className="auth-button">
-            {loading ? 'Processing...' : isResetPassword ? 'Send Reset Link' : isSignUp ? 'Sign Up' : 'Sign In'}
-          </button>
+          <Button type="submit" disabled={loading} className="auth-button">
+            {loading ? 'Processing...' : isResetPassword ? 'Send Reset Link' : isSignUp ? 'Sign Up' : 'Sign In'}
+          </Button>
         </form>
 
         <div className="auth-footer" style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
           {!isResetPassword && (
-            <button onClick={() => setIsSignUp(!isSignUp)} className="link-button">
-              {isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'}
-            </button>
-          )}
-
-          {!isSignUp && (
-            <button onClick={() => {
-              setIsResetPassword(!isResetPassword);
-              setError(null);
-              setMessage(null);
-            }} className="link-button">
-              {isResetPassword ? 'Back to Sign In' : 'Forgot Password?'}
-            </button>
-          )}
+            <Button type="button" onClick={() => setIsSignUp(!isSignUp)} variant="link" className="link-button">
+              {isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'}
+            </Button>
+          )}
+
+          {!isSignUp && (
+            <Button type="button" onClick={() => {
+              setIsResetPassword(!isResetPassword);
+              setError(null);
+              setMessage(null);
+            }} variant="link" className="link-button">
+              {isResetPassword ? 'Back to Sign In' : 'Forgot Password?'}
+            </Button>
+          )}
         </div>
       </div>
 
diff --git a/web/src/components/ResetPassword.tsx b/web/src/components/ResetPassword.tsx
index b01bea3..4c8f168 100644
--- a/web/src/components/ResetPassword.tsx
+++ b/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">
-                        <label>New Password</label>
-                        <input
-                            type="password"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            placeholder="New password"
+                    <div className="form-group">
+                        <Input
+                            label="New Password"
+                            type="password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            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">
-                        {loading ? 'Updating...' : 'Update Password'}
-                    </button>
+                    <Button type="submit" disabled={loading || !!message} className="auth-button">
+                        {loading ? 'Updating...' : 'Update Password'}
+                    </Button>
                 </form>
             </div>
             <style>{`