Consent Scan

Frontend client for the ConsentPro scanner API. Provides URL validation, scan initiation, and results display for data privacy compliance scanning (GDPR, CCPA, HIPAA, and other regulations).

Overview

This is a Webflow-integrated frontend that connects to the ConsentPro scanner backend API. Users enter a URL, the app validates and initiates a scan, then redirects to a results page that polls for completion and displays compliance data.

Features

• URL Validation: Strict validation requiring valid protocol and hostname with TLD
• Scanner API Client: Full integration with ConsentPro v2 scanner endpoints
• Real-time Status Polling: Monitors scan progress with live activity updates
• Compliance Scoring: Displays overall compliance score with pass/fail/warning breakdown
• Detected Items Display: Shows unblocked scripts, cookies, and tracking technologies
• Criteria Accordion: Expandable list of all compliance criteria with status
• Typed Selectors: Type-safe element queries using data-fs-cs attributes

Project Structure

src/
├── api/
│   ├── backend.ts          # Scanner API client (startScan, getStatus, getResults)
│   ├── types.ts            # API response types
│   └── index.ts
├── pages/
│   ├── scan.ts             # Scan page - URL validation & scan initiation
│   └── results.ts          # Results page - polling & display
├── icons/
│   └── index.ts            # Inline SVG icon injection
├── utils/
│   ├── selectors.ts        # Typed selector system
│   ├── compliance.ts       # Compliance evaluation logic
│   ├── data-extractor.ts   # Extract structured data from API responses
│   ├── constants.ts        # Colors, categories, config
│   ├── helpers.ts          # UI utilities (displayError, clearError)
│   ├── errors.ts           # Custom error classes
│   ├── url.ts              # URL validation
│   └── index.ts
└── types/
    └── index.ts            # Type exports

Pages

Scan Page (/scan)

Handles URL input and scan initiation:

1. User enters URL in form
2. Validates URL (requires https://, valid hostname with .)
3. Calls scannerApi.startScan(origin)
4. Redirects to /result?trid={trackingId}&site={hostname}

Required Webflow Elements:

• data-fs-cs="scan-form" - Form element
• data-fs-cs="scan-url-input" - URL input field
• data-fs-cs="scan-submit" - Submit button (<input type="submit">)
• data-fs-cs="error-message" - Error display

Results Page (/result)

Polls scan status and displays results:

1. Parses ?trid= and ?site= query params
2. Polls scannerApi.getStatus(trackingId) every second
3. On completion, fetches scannerApi.getResults(trackingId)
4. Updates all result sections via modular updaters

Required Webflow Elements:

• data-fs-cs="compliance-score" - Main score display
• data-fs-cs="compliance-container" - Status hero card
• data-fs-cs="violations-list" - Major violations list
• data-fs-cs="script-list" - Unblocked scripts
• data-fs-cs="cookie-list" - Unblocked cookies
• data-fs-cs="criteria-list" - Compliance criteria accordion
• Plus various stat cards, progress indicators, etc.

API Client

import { scannerApi } from '$api';

// Start a scan
const { trackingId } = await scannerApi.startScan('https://example.com');

// Poll status
const status = await scannerApi.getStatus(trackingId);
// status.status: 'queued' | 'running' | 'completed' | 'failed'
// status.progress: { pagesScanned, totalPages }

// Get results
const results = await scannerApi.getResults(trackingId);
// results.results: ScanResults with detectedItems, statistics, etc.

Selector System

Type-safe element queries with automatic type inference:

import { querySelector, querySelectorAll } from '$utils';

// Returns HTMLFormElement | null
const form = querySelector('scan-form');

// Returns HTMLInputElement | null
const input = querySelector('scan-url-input');

// Query within scope
const value = querySelector('value', parentElement);

All element names are defined in src/utils/selectors.ts with their corresponding HTML element types.

Development

Setup

pnpm install

Development Mode

pnpm dev

Serves at http://localhost:3000 with live reload.

Build

pnpm build

Outputs to dist/scan.js and dist/results.js.

Type Check

pnpm check

Lint

pnpm lint:fix

Configuration

API Base URL

Set via environment variable or .env file:

API_BASE_URL=https://fs-consentpro-api-dev.finsweet.workers.dev

Injected at build time via bin/build.js.

Webflow Integration

1. Build the project: pnpm build
2. Upload dist/scan.js to your scan page
3. Upload dist/results.js to your results page
4. Add required data-fs-cs attributes to elements

Scan Page Structure

<form data-fs-cs="scan-form">
  <input type="url" data-fs-cs="scan-url-input" placeholder="https://example.com" />
  <input type="submit" data-fs-cs="scan-submit" value="Scan" data-wait="Scanning..." />
</form>
<div data-fs-cs="error-message" style="display: none;"></div>

Results Page Structure

See src/utils/selectors.ts for the complete list of element names and their expected types.

Path Aliases

• $api → src/api/index.ts
• $utils → src/utils/index.ts
• $types → src/types/index.ts
• $pages → src/pages/
• $icons → src/icons/index.ts