justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MCS-150 intake: add encryption notice, EIN field, photo ID upload

Browse source 
- Security notice: SSL encryption, encrypted at rest, no third-party sharing
- EIN field added (required for MCS-150 form field 19)
- Photo ID upload with camera capture on mobile
- ID auto-deleted after filing processed
- Preview with remove button

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
justin 2026-05-30 13:28:43 -05:00
parent a265990351
commit b59b266a80
1 changed files with 72 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

74
site/src/components/intake/steps/MCS150Step.astro
View file

@ -5,8 +5,12 @@
<div class="pw-step" data-slug="mcs150-update">
<h2>MCS-150 Update Information</h2>
<p class="pw-help">
Provide your current company information. We will prepare and fax your MCS-150 biennial update to FMCSA on your behalf.
Provide your current company information. We will prepare and submit your MCS-150 biennial update to FMCSA on your behalf.
</p>
<div class="pw-security-notice">
<svg style="width:16px;height:16px;flex-shrink:0;margin-top:2px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
<span>All personal information (driver's license, SSN/EIN, etc.) is transmitted over 256-bit SSL encryption and stored encrypted at rest. We never share your data with third parties — it is used solely to prepare your FMCSA filing.</span>
</div>
<div class="pw-form-grid">
<h3>Company Information</h3>
@ -25,7 +29,7 @@
</label>
</div>
<div class="pw-row-2">
<div class="pw-row-3">
<label class="pw-field">
<span>USDOT Number <em>*</em></span>
<input type="text" id="mcs-dot" required placeholder="e.g. 1234567" />
@ -34,6 +38,10 @@
<span>MC/MX/FF Number</span>
<input type="text" id="mcs-mc" placeholder="e.g. MC-123456" />
</label>
<label class="pw-field">
<span>EIN (Tax ID)</span>
<input type="text" id="mcs-ein" placeholder="XX-XXXXXXX" maxlength="12" />
</label>
</div>
<h3>Principal Business Address</h3>
@ -198,6 +206,26 @@
</div>
</div>
<h3>Government-Issued Photo ID</h3>
<p class="pw-field-help">FMCSA requires a copy of the authorized signer's government-issued photo ID (driver's license, passport, or state ID) with MCS-150 submissions.</p>
<div class="pw-upload-area" id="mcs-id-upload-area">
<input type="file" id="mcs-photo-id" accept="image/*,.pdf" capture="environment" style="display:none" />
<div id="mcs-id-preview" class="pw-id-preview" hidden>
<img id="mcs-id-img" style="max-width:200px;max-height:150px;border-radius:6px;border:1px solid #d1d5db" />
<button type="button" id="mcs-id-remove" class="pw-id-remove">Remove</button>
</div>
<button type="button" id="mcs-id-btn" class="pw-id-btn">
<svg style="width:24px;height:24px;color:#64748b" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/></svg>
<span>Take Photo or Upload ID</span>
<span style="font-size:11px;color:#94a3b8">Driver's license, passport, or state ID</span>
</button>
</div>
<div class="pw-security-notice" style="margin-top:8px">
<svg style="width:14px;height:14px;flex-shrink:0;margin-top:2px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
<span style="font-size:11px">Your ID is encrypted in transit and at rest. It is used only for FMCSA identity verification and automatically deleted after your filing is processed.</span>
</div>
</div>
<div id="pw-mcs150-errors" class="pw-err" hidden></div>
</div>
@ -217,6 +245,13 @@
.pw-cargo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.3rem 1rem; font-size: 0.85rem; color: #374151; }
.pw-cargo-grid label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.pw-err { color: #b91c1c; margin-top: 0.75rem; font-size: 0.9rem; background: #fee2e2; padding: 0.5rem 0.75rem; border-radius: 6px; }
.pw-security-notice { display: flex; gap: 8px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; margin-bottom: 1rem; font-size: 12px; color: #1e40af; line-height: 1.5; }
.pw-field-help { font-size: 0.8rem; color: #64748b; margin: 0 0 0.5rem; }
.pw-upload-area { border: 2px dashed #d1d5db; border-radius: 8px; padding: 1rem; text-align: center; }
.pw-id-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto; padding: 12px 24px; background: none; border: none; cursor: pointer; color: #374151; font-size: 13px; font-weight: 500; }
.pw-id-btn:hover { color: #f97316; }
.pw-id-preview { display: flex; align-items: center; gap: 12px; justify-content: center; }
.pw-id-remove { background: #fee2e2; color: #991b1b; border: none; padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; }
@media (max-width: 640px) {
.pw-row-2, .pw-row-3 { grid-template-columns: 1fr; }
@ -249,6 +284,7 @@
"mcs-miles": d.annual_miles || "",
"mcs-signer-name": d.signer_name || "",
"mcs-signer-title": d.signer_title || "",
"mcs-ein": d.ein || "",
};
for (const [id, val] of Object.entries(fields)) {
const el = document.getElementById(id) as HTMLInputElement | HTMLSelectElement;
@ -309,7 +345,41 @@
cargo_types: cargoTypes,
signer_name: val("mcs-signer-name"),
signer_title: val("mcs-signer-title"),
ein: val("mcs-ein"),
photo_id_uploaded: !!(window as any).__mcs150PhotoId,
};
PW.set({ ...state, intake_data: intake });
});
// Photo ID upload handling
const idBtn = document.getElementById("mcs-id-btn")!;
const idInput = document.getElementById("mcs-photo-id") as HTMLInputElement;
const idPreview = document.getElementById("mcs-id-preview")!;
const idImg = document.getElementById("mcs-id-img") as HTMLImageElement;
const idRemove = document.getElementById("mcs-id-remove")!;
idBtn.addEventListener("click", () => idInput.click());
idInput.addEventListener("change", () => {
const file = idInput.files?.[0];
if (!file) return;
// Store file reference for upload on submit
(window as any).__mcs150PhotoId = file;
// Show preview
if (file.type.startsWith("image/")) {
const reader = new FileReader();
reader.onload = (e) => { idImg.src = e.target?.result as string; };
reader.readAsDataURL(file);
} else {
idImg.src = "";
idImg.alt = file.name;
}
idPreview.hidden = false;
idBtn.style.display = "none";
});
idRemove.addEventListener("click", () => {
(window as any).__mcs150PhotoId = null;
idInput.value = "";
idPreview.hidden = true;
idBtn.style.display = "flex";
});
</script>