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

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

@ -1,5 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTradingAuth } from '../lib/tradingAuth'; import { useTradingAuth } from '../lib/tradingAuth';
import { Button, Input } from './ui/Primitives';
export function Login() { export function Login() {
const tradingAuth = useTradingAuth(); const tradingAuth = useTradingAuth();
@ -51,8 +52,8 @@ export function Login() {
<form onSubmit={handleLogin}> <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)}
@ -63,8 +64,8 @@ export function Login() {
{!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)}
@ -85,26 +86,26 @@ export function Login() {
fontSize: '0.9rem' fontSize: '0.9rem'
}}>{message}</div>} }}>{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> </form>
<div className="auth-footer" style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}> <div className="auth-footer" style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
{!isResetPassword && ( {!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>
</div> </div>

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

@ -1,5 +1,6 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { resetPlatformPassword } from '../lib/authSession'; import { resetPlatformPassword } from '../lib/authSession';
import { Button, Input } from './ui/Primitives';
export function ResetPassword() { export function ResetPassword() {
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
@ -45,8 +46,8 @@ export function ResetPassword() {
<form onSubmit={handlePasswordReset}> <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)}
@ -58,9 +59,9 @@ export function ResetPassword() {
{error && <div className="error-message">{error}</div>} {error && <div className="error-message">{error}</div>}
{message && <div className="success-message" style={{ color: '#00ff88', marginBottom: '20px', textAlign: 'center' }}>{message}</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> </form>
</div> </div>
<style>{` <style>{`