bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): migrate auth form controls

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-06 14:05:43 -07:00
parent b6bd136cf4
commit 6511326a3e
2 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
web/src/components/Login.tsx
View File

@ -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>

21
web/src/components/ResetPassword.tsx
View File

@ -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>{`