);
}
function Signup({ onNavigate }) {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [agreed, setAgreed] = useState(true);
const strength = Math.min(4, Math.floor(password.length / 3));
const strengthLabel =
password.length === 0 ? "Use at least 8 characters"
: password.length < 8 ? "Too short — use at least 8 characters"
: strength >= 4 ? "Strong password"
: "Decent — longer is stronger";
const submit = (e) => {
e.preventDefault();
if (loading) return;
setError("");
if (password.length < 8) {
setError("Password must be at least 8 characters long.");
return;
}
if (!agreed) {
setError("Please accept the Terms to continue.");
return;
}
setLoading(true);
const name = (firstName + " " + lastName).trim();
API.post("/auth/register", { email: email, password: password, name: name })
.then((data) => {
Auth.setSession(data.token, data.user);
onNavigate("dashboard");
})
.catch((err) => {
setError(err.message || "Could not create your account.");
setLoading(false);
});
};
return (
3-day Pro trial · 10,000 requests / minute
Create your account
Your personal API key is issued the moment you sign up.
);
}
/**
* Forgot-password — asks for an email and calls the backend. The backend
* always returns 200 (anti-enumeration) so the client message is the same
* regardless of whether the email matched a real account.
*/
function Forgot({ onNavigate }) {
const [email, setEmail] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [sent, setSent] = useState(false);
const submit = (e) => {
e.preventDefault();
if (loading) return;
setError("");
if (!email) { setError("Enter your email."); return; }
setLoading(true);
API.forgotPassword(email)
.then(() => { setSent(true); setLoading(false); })
.catch((err) => {
// Backend is configured to always succeed for anti-enumeration; an
// error here means a network failure or a server fault, not a
// missing email. Show it honestly.
setError((err && err.message) || "Could not send the reset email. Please try again.");
setLoading(false);
});
};
return (
Account recovery
Reset your password
Enter the email you signed up with. If it matches an account, we'll
send a one-time reset link that expires in 60 minutes.
{sent ? (
Didn't get one? Make sure you typed the exact address you signed up with. Google-only accounts cannot be reset this way — sign in with Google instead.
) : (
)}
);
}
/**
* Reset-password — landing target for the link in the reset email. Reads the
* token from the URL (`?action=reset-password&token=...`), takes a new
* password, calls the backend, and on success sends the user to sign in.
* Successful reset also invalidates every existing session for that user.
*/
function ResetPassword({ onNavigate }) {
const [token, setToken] = useState("");
const [password, setPassword] = useState("");
const [confirm, setConfirm] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [done, setDone] = useState(false);
useEffect(() => {
try {
const params = new URLSearchParams(window.location.search);
const t = params.get("token") || "";
setToken(t);
if (!t) setError("This reset link is incomplete. Open it from your email again, or request a new one.");
} catch (e) { /* ignore */ }
}, []);
const submit = (e) => {
e.preventDefault();
if (loading) return;
setError("");
if (password.length < 8) { setError("Password must be at least 8 characters."); return; }
if (password !== confirm) { setError("The two passwords do not match."); return; }
if (!token) return;
setLoading(true);
API.resetPassword(token, password)
.then(() => { setDone(true); setLoading(false); })
.catch((err) => {
setError((err && err.message) || "Could not reset your password. The link may have expired.");
setLoading(false);
});
};
return (
Account recovery
Choose a new password
Pick a new password for your account. Existing sessions on every
device will be signed out the moment this completes.
{done ? (
) : (
)}
);
}
/**
* Verify-email — landing target for the link in the verification email. Runs
* the verification call automatically on mount, then shows a clear success
* or failure state with the right next-step button.
*/
function VerifyEmail({ onNavigate }) {
const [state, setState] = useState("checking"); // checking | ok | fail | missing
const [error, setError] = useState("");
useEffect(() => {
let token = "";
try {
const params = new URLSearchParams(window.location.search);
token = params.get("token") || "";
} catch (e) { /* ignore */ }
if (!token) { setState("missing"); return; }
API.verifyEmail(token)
.then(() => setState("ok"))
.catch((err) => {
setError((err && err.message) || "This link is invalid or has expired.");
setState("fail");
});
}, []);
return (
Account verification
{state === "checking" && "One moment — confirming your link with the server."}
{state === "ok" && "Your email is now confirmed. You can keep using your account as normal."}
{state === "missing" && "This link is incomplete. Open it from your email again, or request a new verification link from the dashboard."}
{state === "fail" && (error || "This link is invalid or has expired.")}