/* ===== Pago na Hora — Auth screens (login, forgot, reset) ===== */
// Shared error banner. Renders nothing when there is no message.
function AuthError({ message }) {
if (!message) return null;
return (
{message}
);
}
// Shared shell: centered card matching the onboarding layout.
function AuthShell({ children }) {
return (
);
}
// Reads ?token= from the query string or the hash (e.g. #redefinir-senha?token=abc).
function readTokenFromUrl() {
const fromSearch = new URLSearchParams(location.search).get('token');
if (fromSearch) return fromSearch;
const hash = location.hash || '';
const qIndex = hash.indexOf('?');
if (qIndex >= 0) {
const token = new URLSearchParams(hash.slice(qIndex + 1)).get('token');
if (token) return token;
}
return '';
}
// Renders the "Entrar com Google" button using Google Identity Services.
// Hidden entirely when window.PNH_GOOGLE_CLIENT_ID is not configured.
function GoogleButton({ onCredential, onError }) {
const ref = useRef(null);
const clientId = window.PNH_GOOGLE_CLIENT_ID;
useEffect(() => {
if (!clientId || !ref.current) return;
let cancelled = false;
// Wait for the GIS script (loaded async in index.html) to be ready.
const tryInit = () => {
if (cancelled) return;
if (!(window.google && window.google.accounts && window.google.accounts.id)) {
setTimeout(tryInit, 250);
return;
}
try {
window.google.accounts.id.initialize({
client_id: clientId,
callback: (response) => {
if (response && response.credential) onCredential(response.credential);
else if (onError) onError('Não foi possível autenticar com o Google.');
},
});
window.google.accounts.id.renderButton(ref.current, {
theme: 'outline', size: 'large', width: 360, text: 'continue_with', shape: 'pill',
});
} catch (e) {
if (onError) onError('Falha ao carregar o login do Google.');
}
};
tryInit();
return () => { cancelled = true; };
}, [clientId]);
if (!clientId) return null;
return (
);
}
/* ---------- Login ---------- */
function Login({ onAuthed }) {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [busy, setBusy] = useState(false);
const [error, setError] = useState('');
// Stores the session and notifies the parent with the MeResponse.
async function completeLogin(loginResponse) {
PNH.session.setSession({ token: loginResponse.token, account_id: loginResponse.account_id, me: loginResponse });
let me = loginResponse;
try {
me = await PNH.api.auth.me();
PNH.session.setSession({ me });
} catch (e) {
// Fall back to the login payload if /auth/me fails; the user is still authenticated.
}
if (onAuthed) onAuthed(me);
}
async function submit(e) {
e.preventDefault();
if (busy) return;
setError('');
setBusy(true);
try {
const res = await PNH.api.auth.login({ email: email.trim(), password });
await completeLogin(res);
} catch (err) {
setError(err.detail || err.message || 'Não foi possível entrar.');
setBusy(false);
}
}
async function onGoogle(credential) {
setError('');
setBusy(true);
try {
const res = await PNH.api.auth.loginGoogle({ credential });
await completeLogin(res);
} catch (err) {
setError(err.detail || err.message || 'Não foi possível entrar com o Google.');
setBusy(false);
}
}
const canSubmit = email.trim() && password && !busy;
return (
Entrar na sua conta
Acesse o painel da Pago na Hora.
Não tem conta? Criar conta
);
}
/* ---------- Forgot password ---------- */
function ForgotPassword() {
const [email, setEmail] = useState('');
const [busy, setBusy] = useState(false);
const [sent, setSent] = useState(false);
async function submit(e) {
e.preventDefault();
if (busy) return;
setBusy(true);
try {
await PNH.api.auth.requestPasswordReset({ email: email.trim() });
} catch (err) {
// Always show the same neutral message — never reveal whether the e-mail exists.
}
setBusy(false);
setSent(true);
}
if (sent) {
return (
Verifique seu e-mail
Se houver uma conta associada a esse e-mail, enviamos um link para redefinir sua senha. Confira também a caixa de spam.
);
}
const canSubmit = email.trim() && !busy;
return (
Esqueceu a senha?
Informe seu e-mail e enviaremos um link para criar uma nova senha.
);
}
/* ---------- Reset password ---------- */
function ResetPassword() {
const [token] = useState(readTokenFromUrl);
const [password, setPassword] = useState('');
const [confirm, setConfirm] = useState('');
const [busy, setBusy] = useState(false);
const [error, setError] = useState('');
const [done, setDone] = useState(false);
async function submit(e) {
e.preventDefault();
if (busy) return;
setError('');
if (password.length < 8) { setError('A senha deve ter ao menos 8 caracteres.'); return; }
if (password !== confirm) { setError('As senhas não conferem.'); return; }
setBusy(true);
try {
await PNH.api.auth.resetPassword({ token, password });
setDone(true);
} catch (err) {
setError(err.detail || err.message || 'Não foi possível redefinir a senha.');
setBusy(false);
}
}
if (done) {
return (
Senha redefinida!
Sua senha foi atualizada. Agora você já pode entrar com a nova senha.
);
}
if (!token) {
return (
Link inválido
Este link de redefinição é inválido ou expirou. Solicite um novo a partir da tela de login.
);
}
const canSubmit = password && confirm && !busy;
return (
Criar nova senha
Escolha uma senha com pelo menos 8 caracteres.
);
}
/* ---------- Verify email ---------- */
function VerifyEmail() {
const [token] = useState(readTokenFromUrl);
// status: 'verifying' | 'ok' | 'error' | 'notoken'
const [status, setStatus] = useState(token ? 'verifying' : 'notoken');
const [error, setError] = useState('');
useEffect(() => {
if (!token) return;
let cancelled = false;
(async () => {
try {
await PNH.api.auth.verifyEmail({ token });
if (cancelled) return;
setStatus('ok');
// If a session is open, refresh it so the in-app banner clears on return.
if (PNH.session.getToken()) {
try { PNH.session.setSession({ me: await PNH.api.auth.me() }); } catch (e) { /* non-blocking */ }
}
} catch (err) {
if (cancelled) return;
setError(err.detail || err.message || 'Não foi possível confirmar o e-mail.');
setStatus('error');
}
})();
return () => { cancelled = true; };
}, [token]);
const goNext = PNH.session.getToken() ? '#dashboard' : '#login';
if (status === 'verifying') {
return (
Confirmando seu e-mail…
Só um instante enquanto validamos o seu link.
);
}
if (status === 'ok') {
return (
E-mail confirmado!
Tudo certo — sua conta está verificada.
);
}
if (status === 'error') {
return (
Link inválido ou expirado
{error} Entre na sua conta e reenvie a confirmação pelo aviso no topo do painel.
);
}
return (
Link inválido
Este link de confirmação é inválido. Entre na sua conta e reenvie a confirmação pelo aviso no topo do painel.
);
}
Object.assign(window, { Login, ForgotPassword, ResetPassword, VerifyEmail });