import {
html, useState, useEffect, useRef, useCallback,
} from './vendor/htm-preact.js';
import { t } from './i18n.js';
import {
hubFetch, navigate, session, HUB, loadAuth, _storeRecoveryKey,
} from './hub-client.js';
import * as platform from './platform.js';
const PASSWORD_MIN_BITS = 60;
const PASSWORD_MIN_LEN = 12;
// ── reCAPTCHA v2 helper ──────────────────────────────────────────────────────
let _captchaSiteKey = null;
let _captchaKeyFetched = false;
async function fetchCaptchaSiteKey() {
if (_captchaKeyFetched) return _captchaSiteKey;
try {
const info = await hubFetch('/v1/hub/info');
_captchaSiteKey = info.captcha_site_key || null;
} catch { _captchaSiteKey = null; }
_captchaKeyFetched = true;
return _captchaSiteKey;
}
function loadRecaptchaScript() {
if (document.getElementById('recaptcha-script')) return;
const s = document.createElement('script');
s.id = 'recaptcha-script';
s.src = 'https://www.google.com/recaptcha/api.js?render=explicit';
s.async = true;
s.defer = true;
document.head.appendChild(s);
}
function useCaptcha() {
const [siteKey, setSiteKey] = useState(_captchaSiteKey);
const [token, setToken] = useState(null);
const containerRef = useRef(null);
const widgetId = useRef(null);
useEffect(() => {
fetchCaptchaSiteKey().then(k => {
if (k) { setSiteKey(k); loadRecaptchaScript(); }
});
}, []);
useEffect(() => {
if (!siteKey || !containerRef.current) return;
const poll = setInterval(() => {
if (window.grecaptcha && window.grecaptcha.render && widgetId.current === null) {
clearInterval(poll);
widgetId.current = window.grecaptcha.render(containerRef.current, {
sitekey: siteKey,
callback: (tk) => setToken(tk),
'expired-callback': () => setToken(null),
theme: document.documentElement.getAttribute('data-theme') === 'dark'
? 'dark' : 'light',
});
}
}, 100);
return () => clearInterval(poll);
}, [siteKey]);
const reset = useCallback(() => {
if (widgetId.current !== null && window.grecaptcha) {
window.grecaptcha.reset(widgetId.current);
setToken(null);
}
}, []);
const widget = siteKey
? html``
: null;
return { token, widget, reset, enabled: !!siteKey };
}
function passwordBits(pw) {
if (!pw) return 0;
let pool = 0;
if (/[a-z]/.test(pw)) pool += 26;
if (/[A-Z]/.test(pw)) pool += 26;
if (/[0-9]/.test(pw)) pool += 10;
if (/[^A-Za-z0-9]/.test(pw)) pool += 32;
let bits = pw.length * Math.log2(pool || 1);
const unique = new Set(pw).size;
if (unique < pw.length / 2) bits *= 0.6;
if (/^[0-9]+$/.test(pw)) bits *= 0.5;
if (/(password|motdepasse|azerty|qwerty|123456|meshbay)/i.test(pw)) bits *= 0.3;
return Math.round(bits);
}
export function FirstRunPage({ onSet }) {
const [url, setUrl] = useState('');
const [error, setError] = useState('');
const [busy, setBusy] = useState(false);
const submit = async (e) => {
e.preventDefault();
setError('');
setBusy(true);
try {
await window.meshbay.setHubBase(url.trim());
onSet();
} catch (err) {
setError(platform.bridgeMessage(err));
setBusy(false);
}
};
return html`
${t('firstrun.title')}
${t('firstrun.hint')}
${error && html`
${error}
`}
${t('firstrun.note')}
`;
}
export function LoginPage({ onLogin }) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const [pendingVerif, setPendingVerif] = useState(false);
const onSubmit = async (e) => {
e.preventDefault();
const name = username.trim();
if (!name || !password) return;
setError('');
setPendingVerif(false);
setLoading(true);
try {
// Trimmed to match the hub's stored username and every client-side key
// derivation (auth_key, bundle_key, recovery_key all fold the username in).
await onLogin(name, password);
navigate('/');
} catch (err) {
if (err.message === 'email_verification_required') {
setPendingVerif(true);
} else {
setError(err.message);
}
} finally {
setLoading(false);
}
};
return html`
${t('login.title')}
`;
}
export function RegisterPage() {
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirm, setConfirm] = useState('');
const [error, setError] = useState('');
const [phase, setPhase] = useState('form'); // form | recovery | verify | done
const [loading, setLoading] = useState(false);
const [code, setCode] = useState('');
const [verifying, setVerifying] = useState(false);
const [resent, setResent] = useState(false);
const [recoveryMnemonic, setRecoveryMnemonic] = useState('');
const [recoverySaved, setRecoverySaved] = useState(false);
const [recoveryCopied, setRecoveryCopied] = useState(false);
const [emailRecovery, setEmailRecovery] = useState(true);
const captcha = useCaptcha();
const onSubmit = async (e) => {
e.preventDefault();
const name = username.trim();
if (password !== confirm) { setError(t('register.err_mismatch')); return; }
if (password.length < PASSWORD_MIN_LEN) {
setError(t('register.err_min_len', { n: PASSWORD_MIN_LEN })); return;
}
if (passwordBits(password) < PASSWORD_MIN_BITS) {
setError(t('register.err_too_weak')); return;
}
setError('');
setLoading(true);
try {
if (window.MeshBayKeys) {
// The account recovery key (docs/auth-confirm.md §4.3/§4.4): generated
// here, shown once on the next screen. When the user leaves "e-mail it"
// checked, the mnemonic goes in the register body so the hub appends it
// to the verification e-mail (and stores it nowhere); otherwise it is
// screen-only. The derived key is kept in `session.recoveryKey` and
// persisted, so groups joined later — this session or a future one —
// still leave a recovery-wrapped copy on their node.
const rk = window.MeshBayKeys.generateRecoveryKey();
// `name` (trimmed), not the raw field: the hub stores the trimmed
// username and every key derivation must fold in the same string.
// `captcha.token` rides along — the submit button is already disabled
// until it is set when a captcha is configured (see the form below).
await window.MeshBayKeys.registerUser(
name, email, password, emailRecovery ? rk.mnemonic : null,
captcha.token);
setRecoveryMnemonic(rk.mnemonic);
session.recoveryKey =
await window.MeshBayKeys.deriveRecoveryKey(rk.mnemonic, name);
await _storeRecoveryKey(session.recoveryKey);
setPhase('recovery');
} else {
await hubFetch('/v1/users/register', {
method: 'POST',
body: {
username: name, email, password,
pk_user_ed25519: '', pk_user_x25519: '',
captcha_token: captcha.token,
},
});
setPhase('verify');
}
} catch (err) {
setError(err.message);
// A reCAPTCHA token is single-use: after a failed attempt (name taken,
// e-mail in use…) it is spent, so clear it and make the user solve a
// fresh one before the next try. No-op when no captcha is configured.
captcha.reset();
} finally {
setLoading(false);
}
};
const onVerify = async (e) => {
e.preventDefault();
if (!code.trim()) return;
setError('');
setVerifying(true);
try {
await hubFetch('/v1/users/verify-email', {
method: 'POST',
body: { email, code: code.trim() },
});
setPhase('done');
} catch (err) {
setError(err.message);
} finally {
setVerifying(false);
}
};
const onResend = async () => {
setError('');
setResent(false);
try {
await hubFetch('/v1/users/register', {
method: 'POST',
body: {
username: username.trim(), email, password,
pk_user_ed25519: '', pk_user_x25519: '',
},
});
setResent(true);
} catch (err) {
setError(err.message);
}
};
if (phase === 'done') {
return html`