/* global React, Icon, Logo, SMAuth */
const { useState: useStateAuth, useRef: useRefAuth, useEffect: useEffectAuth } = React;
// SMAuth is defined globally by supabase-client.js
function AuthSide({ mode }) {
const isLogin = mode === 'login';
return (
);
}
function SocialButtons() {
const [loading, setLoading] = useStateAuth(false);
const [error, setError] = useStateAuth('');
const handleGoogle = async () => {
setError(''); setLoading(true);
const r = await SMAuth.loginWithGoogle();
// Si hay error muéstralo; si ok el browser se redirige solo a Google
if (!r.ok) { setError(r.error); setLoading(false); }
// En éxito Supabase redirige al browser → no hacemos nada más aquí
};
return (
{error && (
{error}
)}
);
}
// Segmented control shared by both forms — toggles mode in-place.
function AuthSeg({ mode, onChange }) {
return (
);
}
// ========== LOGIN FORM (inner) ==========
function LoginForm({ mode, onSwitch }) {
const [showPw, setShowPw] = useStateAuth(false);
const [email, setEmail] = useStateAuth('');
const [password, setPassword] = useStateAuth('');
const [error, setError] = useStateAuth('');
const [loading, setLoading] = useStateAuth(false);
const onSubmit = async (e) => {
e.preventDefault();
setError(''); setLoading(true);
try {
const r = await SMAuth.login(email.trim(), password);
if (r.ok) {
// Restore pending recharge if user was redirected from the homepage form
const pending = localStorage.getItem('sm_recarga');
window.location.href = pending ? 'dashboard.html#nueva' : 'dashboard.html';
return;
}
setError(r.error);
if (r.redirect) setTimeout(()=>window.location.href=r.redirect, 1500);
} finally { setLoading(false); }
};
return (
);
}
// ========== REGISTER FORM (inner) ==========
function RegisterForm({ mode, onSwitch }) {
const [pw, setPw] = useStateAuth('');
const [showPw, setShowPw] = useStateAuth(false);
const [firstName, setFirstName] = useStateAuth('');
const [lastName, setLastName] = useStateAuth('');
const [email, setEmail] = useStateAuth('');
const [error, setError] = useStateAuth('');
const rules = {
length: pw.length >= 8,
upper: /[A-Z]/.test(pw),
number: /[0-9]/.test(pw),
symbol: /[^A-Za-z0-9]/.test(pw),
};
const score = Object.values(rules).filter(Boolean).length;
const labels = ['Muy débil', 'Débil', 'Aceptable', 'Buena', 'Fuerte'];
const [loading, setLoading] = useStateAuth(false);
const onSubmit = async (e) => {
e.preventDefault();
setError('');
if (!firstName.trim() || firstName.trim().length < 2) { setError('El nombre debe tener al menos 2 caracteres.'); return; }
if (/\d/.test(firstName)) { setError('El nombre no puede contener números.'); return; }
if (!lastName.trim() || lastName.trim().length < 2) { setError('El apellido debe tener al menos 2 caracteres.'); return; }
if (/\d/.test(lastName)) { setError('El apellido no puede contener números.'); return; }
if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.trim())) { setError('Correo electrónico no válido.'); return; }
if (score < 3) { setError('La contraseña debe ser al menos "Buena" (cumple 3 reglas).'); return; }
setLoading(true);
try {
const r = await SMAuth.register({ firstName, lastName, email: email.trim(), password: pw });
if (r.ok) window.location.href = 'verify.html';
else setError(r.error);
} finally { setLoading(false); }
};
return (
);
}
// ========== UNIFIED AUTH CARD (login + register, in-place crossfade) ==========
function AuthCard({ initialMode }) {
const [mode, setMode] = useStateAuth(initialMode || 'login');
const [animKey, setAnimKey] = useStateAuth(0);
const switchMode = (next) => {
if (next === mode) return;
setMode(next);
setAnimKey(k => k + 1);
// Update URL silently so it remains shareable / refresh-friendly.
try {
const url = next === 'login' ? 'login.html' : 'register.html';
window.history.replaceState({}, '', url);
document.title = next === 'login' ? 'SMCUBA · Iniciar sesión' : 'SMCUBA · Crear cuenta';
} catch (_) {}
};
return (