Improve UX: better error messages, validation, and mobile fixes
FCC Compliance Check: - FRN validation: shows "must be 10 digits" with digit count - Auto-strips non-digits and pads to 10 - 30-second timeout with friendly message - "Not found in any FCC database" with link to CORES - Network error guidance - FRN display uses overflow-wrap for mobile - Error box uses innerHTML for clickable links Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
6865da2004
commit
4853f67f5e
1 changed files with 32 additions and 7 deletions
|
|
@ -100,7 +100,7 @@ import Base from "../../layouts/Base.astro";
|
||||||
<p id="entity-dba" class="text-sm text-gray-500 hidden"></p>
|
<p id="entity-dba" class="text-sm text-gray-500 hidden"></p>
|
||||||
<p id="entity-address" class="text-sm text-gray-500 mt-1"></p>
|
<p id="entity-address" class="text-sm text-gray-500 mt-1"></p>
|
||||||
<p class="mt-2 text-sm text-gray-600">
|
<p class="mt-2 text-sm text-gray-600">
|
||||||
FRN: <span id="entity-frn" class="font-mono font-semibold text-gray-800"></span>
|
FRN: <span id="entity-frn" class="font-mono font-semibold text-gray-800" style="overflow-wrap:break-word;"></span>
|
||||||
</p>
|
</p>
|
||||||
<div id="entity-details" class="hidden mt-3 space-y-1 text-sm text-gray-600">
|
<div id="entity-details" class="hidden mt-3 space-y-1 text-sm text-gray-600">
|
||||||
<p id="detail-filer-id"></p>
|
<p id="detail-filer-id"></p>
|
||||||
|
|
@ -338,8 +338,17 @@ import Base from "../../layouts/Base.astro";
|
||||||
frnInput.addEventListener("keydown", (e) => { if (e.key === "Enter") runCheck(); });
|
frnInput.addEventListener("keydown", (e) => { if (e.key === "Enter") runCheck(); });
|
||||||
|
|
||||||
async function runCheck() {
|
async function runCheck() {
|
||||||
const frn = frnInput.value.trim();
|
const raw = frnInput.value.trim().replace(/\D/g, "");
|
||||||
if (!frn) return;
|
if (!raw) {
|
||||||
|
showError("Please enter a 10-digit FRN.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (raw.length !== 10) {
|
||||||
|
showError("FRN must be exactly 10 digits (e.g., 0012345678). You entered " + raw.length + " digits.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const frn = raw.padStart(10, "0");
|
||||||
|
frnInput.value = frn;
|
||||||
|
|
||||||
// Update URL
|
// Update URL
|
||||||
const url = new URL(window.location);
|
const url = new URL(window.location);
|
||||||
|
|
@ -352,22 +361,38 @@ import Base from "../../layouts/Base.astro";
|
||||||
loadingEl.classList.remove("hidden");
|
loadingEl.classList.remove("hidden");
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`${API}/api/v1/fcc/lookup?frn=${frn}`);
|
const controller = new AbortController();
|
||||||
|
const timeout = setTimeout(() => controller.abort(), 30000);
|
||||||
|
|
||||||
|
const res = await fetch(`${API}/api/v1/fcc/lookup?frn=${frn}`, { signal: controller.signal });
|
||||||
|
clearTimeout(timeout);
|
||||||
|
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
const body = await res.json().catch(() => ({}));
|
const body = await res.json().catch(() => ({}));
|
||||||
throw new Error(body.detail || body.error || `Lookup failed (${res.status})`);
|
if (res.status === 400) {
|
||||||
|
throw new Error(body.error || "Invalid FRN format. Please check and try again.");
|
||||||
|
}
|
||||||
|
throw new Error(body.error || "FCC lookup failed. Please try again.");
|
||||||
}
|
}
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
if (!data.entity_name && !data.cores?.entity_name && !data.filer_499) {
|
||||||
|
showError('FRN ' + frn + ' was not found in any FCC database. Verify your number at <a href="https://apps.fcc.gov/coresWeb/publicHome.do" target="_blank" style="color:#1e40af;text-decoration:underline;">FCC CORES</a>.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
renderResults(data);
|
renderResults(data);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
showError(err.message);
|
if (err.name === "AbortError") {
|
||||||
|
showError("The FCC databases are taking too long to respond. Please try again in a few moments.");
|
||||||
|
} else {
|
||||||
|
showError(err.message || "Could not reach the FCC databases. Please check your internet connection and try again.");
|
||||||
|
}
|
||||||
} finally {
|
} finally {
|
||||||
loadingEl.classList.add("hidden");
|
loadingEl.classList.add("hidden");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showError(msg) {
|
function showError(msg) {
|
||||||
errorMessage.textContent = msg;
|
errorMessage.innerHTML = msg;
|
||||||
errorBox.classList.remove("hidden");
|
errorBox.classList.remove("hidden");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue