// Pantalla de login / registro. Se muestra cuando no hay token válido.
// Layout split-screen: formulario a la izquierda, panel hero a la derecha.
// En mobile colapsa a una sola columna y oculta el panel hero.
const EMAIL_RX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// Calcula la "fuerza" de una contraseña en una escala 0-4.
// 0=vacía, 1=débil, 2=ok, 3=fuerte, 4=excelente.
function passwordStrength(pwd) {
if (!pwd) return 0;
let score = 0;
if (pwd.length >= 6) score++;
if (pwd.length >= 10) score++;
if (/[A-Z]/.test(pwd) && /[a-z]/.test(pwd)) score++;
if (/\d/.test(pwd) && /[^A-Za-z0-9]/.test(pwd)) score++;
return Math.min(score, 4);
}
const STRENGTH_LABELS = ['', 'Débil', 'Aceptable', 'Fuerte', 'Excelente'];
const STRENGTH_COLORS = ['transparent', '#ef6868', '#f5a623', '#26d989', '#00c275'];
function AuthScreen({ backend, onAuthenticated, initialMode = 'login', onBack }) {
const { useState, useMemo, useEffect, useRef } = React;
const [mode, setMode] = useState(initialMode);
const [email, setEmail] = useState('');
const [emailTouched, setEmailTouched] = useState(false);
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [passwordConfirm, setPasswordConfirm] = useState('');
const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
const [remember, setRemember] = useState(true);
const [importLocal, setImportLocal] = useState(true);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [googleClientId, setGoogleClientId] = useState('');
const googleBtnRef = useRef(null);
const isRegister = mode === 'register';
const hasLocalData = useMemo(() => {
try {
const a = localStorage.getItem('finanzas_assets');
return a && JSON.parse(a).length > 0;
} catch { return false; }
}, []);
// Validación email en vivo (solo se muestra después del primer blur, para no
// chillar mientras el usuario está tipeando los primeros caracteres)
const emailValid = !email || EMAIL_RX.test(email);
const showEmailError = emailTouched && !emailValid;
const strength = passwordStrength(password);
// Cargar GOOGLE_CLIENT_ID desde el backend al montar.
useEffect(() => {
fetch(`${backend}/api/config`)
.then(r => r.ok ? r.json() : {})
.then(c => setGoogleClientId(c.googleClientId || ''))
.catch(() => {});
}, [backend]);
// Helper de payload que comparte registro / login / google con la lógica
// de import de localData.
const buildLocalPayload = () => {
if (mode !== 'register' || !importLocal || !hasLocalData) return null;
try {
return {
portfolios: JSON.parse(localStorage.getItem('finanzas_portfolios') || '[]'),
assets: JSON.parse(localStorage.getItem('finanzas_assets') || '[]'),
activePortfolio: localStorage.getItem('finanzas_activePortfolio') || null,
};
} catch { return null; }
};
const cleanupLocalAfterImport = () => {
if (mode === 'register' && importLocal && hasLocalData) {
localStorage.removeItem('finanzas_assets');
localStorage.removeItem('finanzas_portfolios');
localStorage.removeItem('finanzas_activePortfolio');
}
};
// Render del botón oficial de Google una vez que la lib + el client ID están listos.
// Re-renderiza cuando cambia el modo (para que el theme matchee).
useEffect(() => {
if (!googleClientId || !googleBtnRef.current) return;
let canceled = false;
const tryInit = () => {
if (canceled) return;
const g = window.google?.accounts?.id;
if (!g) { setTimeout(tryInit, 120); return; }
g.initialize({
client_id: googleClientId,
callback: async (resp) => {
if (!resp?.credential) return;
setLoading(true); setError('');
try {
const localData = buildLocalPayload();
const r = await fetch(`${backend}/api/auth/google`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ credential: resp.credential, remember, localData }),
});
const data = await r.json();
if (!r.ok) throw new Error(data.error || 'Error con Google');
localStorage.setItem('finanzas_token', data.token);
cleanupLocalAfterImport();
onAuthenticated(data.token, data.user);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
},
});
// Limpiar el contenedor antes de re-renderizar (evita botones duplicados al
// cambiar de modo o re-correr el efecto).
if (googleBtnRef.current) googleBtnRef.current.innerHTML = '';
g.renderButton(googleBtnRef.current, {
type: 'standard', theme: 'filled_black', size: 'large',
text: isRegister ? 'signup_with' : 'continue_with',
shape: 'pill', width: 320,
});
};
tryInit();
return () => { canceled = true; };
}, [googleClientId, mode, backend, importLocal, hasLocalData, remember]);
const submit = async (e) => {
e.preventDefault();
setError('');
if (!EMAIL_RX.test(email.trim())) {
setEmailTouched(true);
return setError('Ingresá un email válido');
}
if (password.length < 6) return setError('La contraseña debe tener al menos 6 caracteres');
if (isRegister && password !== passwordConfirm) return setError('Las contraseñas no coinciden');
setLoading(true);
try {
const localData = buildLocalPayload();
const resp = await fetch(`${backend}/api/auth/${mode}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: email.trim(), password, remember, localData }),
});
const data = await resp.json();
if (!resp.ok) throw new Error(data.error || 'Error desconocido');
localStorage.setItem('finanzas_token', data.token);
cleanupLocalAfterImport();
onAuthenticated(data.token, data.user);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
const switchMode = () => {
setMode(isRegister ? 'login' : 'register');
setError('');
setPasswordConfirm('');
};
return (
setEmailTouched(true)}
onPasswordChange={setPassword}
onShowPasswordToggle={() => setShowPassword(s => !s)}
onPasswordConfirmChange={setPasswordConfirm}
onShowPasswordConfirmToggle={() => setShowPasswordConfirm(s => !s)}
onRememberChange={setRemember}
onImportLocalChange={setImportLocal}
onSubmit={submit}
onSwitchMode={switchMode}
/>
);
}
// ─── Panel izquierdo: formulario ──────────────────────────────────────────
function AuthFormPanel(props) {
const {
mode, isRegister, email, password, showPassword,
passwordConfirm, showPasswordConfirm,
showEmailError, emailValid,
strength, remember, importLocal, hasLocalData, loading, error,
googleClientId, googleBtnRef, onBack,
onEmailChange, onEmailBlur, onPasswordChange, onShowPasswordToggle,
onPasswordConfirmChange, onShowPasswordConfirmToggle,
onRememberChange, onImportLocalChange, onSubmit, onSwitchMode,
} = props;
// Estado del match de contraseñas para el feedback en vivo bajo el campo de
// confirmación. Mientras `passwordConfirm` está vacío no decimos nada.
const confirmMatches = passwordConfirm.length > 0 && passwordConfirm === password;
const confirmMismatches = passwordConfirm.length > 0 && passwordConfirm !== password;
return (
{onBack && (
)}
{isRegister ? 'Creá tu cuenta' : 'Bienvenido de vuelta'}
{isRegister
? 'Trackeá tu portafolio en segundos. Es gratis.'
: 'Ingresá para ver tus portafolios.'}
{/* Botón Google — solo se muestra si hay Client ID configurado */}
{googleClientId && (
<>
)}
{isRegister ? '¿Ya tenés cuenta? ' : '¿No tenés cuenta? '}
Al continuar aceptás que tus datos se almacenen de forma segura para
gestionar tu portafolio. No compartimos información con terceros.
);
}
// ─── Panel derecho: hero decorativo con value props ───────────────────────
function AuthHeroPanel() {
return (
{/* Patrón decorativo */}
Tu portafolio,
todo en un lugar.
Cripto, acciones y ETFs con precios reales en USD y conversión automática a CCL/Dólar Cripto.
Precios en vivo cada 30s
Múltiples portafolios independientes
Carga en USD o ARS — convierte solo
🌱 Beta · Empezando juntos
Mi Portafolio
$39,438.50
+$884.50 (+2.30%)
30D
{rows.map(r => )}
);
}
function MockAssetRow({ ticker, name, qty, value, change, iconUrl }) {
const [imgFailed, setImgFailed] = React.useState(false);
const positive = change >= 0;
return (
{iconUrl && !imgFailed ? (
setImgFailed(true)}
style={{ width: 26, height: 26, borderRadius: '50%', objectFit: 'cover', flexShrink: 0, background: 'rgba(255,255,255,0.06)' }} />
) : (
{ticker.slice(0, 2)}
)}
{value}
{positive ? '+' : ''}{change.toFixed(1)}%
Soporta tus activos favoritos
{CONSTELLATION_LOGOS.map((logo, i) => (
))}
);
}
function ConstellationLogo({ src, alt, delay }) {
const [hidden, setHidden] = React.useState(false);
if (hidden) return null;
return (
setHidden(true)}
style={{ width: 26, height: 26, objectFit: 'contain' }}
/>
);
}
// ─── Subcomponentes ──────────────────────────────────────────────────────
function BrandHeader() {
return (
);
}
function FieldLabel({ label, error, children }) {
return (
);
}
function Input({ hasError, isValid, ...rest }) {
const borderColor = hasError ? 'var(--red)' : isValid ? 'var(--accent)' : 'var(--border-strong)';
return (
e.target.style.boxShadow = `0 0 0 3px ${hasError ? 'rgba(239,104,104,0.15)' : 'rgba(0,194,117,0.15)'}`}
onBlurCapture={(e) => {
e.target.style.boxShadow = 'none';
rest.onBlur?.(e);
}}
/>
);
}
function PasswordInput({ value, onChange, show, onToggleShow, placeholder, autoComplete, disabled, hasError, isValid }) {
const borderColor = hasError ? 'var(--red)' : isValid ? 'var(--accent)' : 'var(--border-strong)';
const focusRing = hasError ? 'rgba(239,104,104,0.15)' : 'rgba(0,194,117,0.15)';
return (
onChange(e.target.value)}
placeholder={placeholder}
autoComplete={autoComplete}
disabled={disabled}
style={{
width: '100%', padding: '12px 44px 12px 14px', borderRadius: 10, fontSize: 14,
background: 'var(--panel-2)', border: `1px solid ${borderColor}`,
color: 'var(--text)', outline: 'none', boxSizing: 'border-box',
transition: 'border-color 0.15s, box-shadow 0.15s',
}}
onFocus={e => e.target.style.boxShadow = `0 0 0 3px ${focusRing}`}
onBlur={e => e.target.style.boxShadow = 'none'}
/>
);
}
function PasswordStrengthBar({ strength }) {
const label = STRENGTH_LABELS[strength];
const color = STRENGTH_COLORS[strength];
return (
{[1, 2, 3, 4].map(i => (
))}
{label && (
{label}
)}
);
}
function Bullet({ children }) {
return (
);
}
function Spinner() {
return (
);
}
Object.assign(window, { AuthScreen });