Skip to content

FRONTEND_MODULE_DOCUMENTATION.md

Latest commit

 

History

History
154 lines (125 loc) · 8.01 KB

FRONTEND_MODULE_DOCUMENTATION.md

File metadata and controls

154 lines (125 loc) · 8.01 KB

AIris Security Frontend Module Documentation

This is the detailed frontend module reference for the current tracked frontend/ tree.

1. Module Purpose

frontend/ is the Next.js UI layer that provides:

  • account entry flows (register/login/logout)
  • scan launch and live progress/log viewing
  • scan history and report navigation
  • full report page rendering + PDF download
  • client-side API wrappers and auth token handling

2. Current Tracked Frontend Structure

frontend/
  .gitignore
  FRONTEND_MODULE_DOCUMENTATION.md
  README.md
  package.json
  postcss.config.js
  setup_frontend.ps1
  tailwind.config.js

  components/
    LogTerminal.jsx
    PredictionCard.jsx
    RiskMeter.jsx
    VulnTable.jsx

  pages/
    _app.js
    contact.js
    history.js
    index.js
    login.js
    register.js
    scan.js
    report/
      Report.module.css
      [id].js
    results/
      Results.module.css
      index.js

  public/
    Alrish.logo.jpeg
    Login.png
    Register.png
    home logo.jpeg
    report  logo.jpeg
    result logo.jpeg

  services/
    api.js
    auth.js

  styles/
    globals.css

3. Runtime Flow (Current)

  1. _app.js applies global stylesheet and base layout wrapper.
  2. Auth entry pages (/login, /register) persist token/user objects in localStorage.
  3. /scan fetches scanner availability and starts scans through backend API.
  4. /scan polls scan status every 3 seconds, appending backend logs into local terminal state.
  5. On completion, UI routes to /report/[scan_id].
  6. /history and /results consume /api/scan/history and route to report views.
  7. /report/[id] renders findings + ML card and downloads PDF via blob URL.

4. Detailed File-by-File Reference

4.1 Frontend Root Files

File What It Contains Detailed Behavior
frontend/.gitignore Ignore policy Excludes Node dependencies, lockfiles, env files, build output, logs, coverage, editor artifacts.
frontend/FRONTEND_MODULE_DOCUMENTATION.md Frontend module knowledge base This document.
frontend/README.md Frontend usage guide Setup, pages/components summary, API integration notes.
frontend/package.json App manifest Scripts (dev, build, start, lint) and deps (next, react, axios, framer-motion, etc.).
frontend/postcss.config.js PostCSS config Enables tailwindcss and autoprefixer plugins for stylesheet pipeline.
frontend/tailwind.config.js Tailwind config Declares content globs (pages/components/app) and extends theme with dark color token.
frontend/setup_frontend.ps1 Setup automation script Verifies Node/npm, optionally cleans installs, runs npm install, checks key packages, creates .env.local, prints next steps.

4.2 Components (frontend/components)

File What It Contains Detailed Behavior
frontend/components/PredictionCard.jsx Active ML summary component Animated card rendering risk_score, confidence, attack type, hybrid sub-scores, predicted attack tags, and CVE list with NVD links. Used by report page.
frontend/components/LogTerminal.jsx Placeholder component file Currently empty; scan/history pages render logs inline instead of using this component.
frontend/components/RiskMeter.jsx Placeholder component file Currently empty; no active risk gauge component rendered from this file.
frontend/components/VulnTable.jsx Placeholder component file Currently empty; report table is rendered directly in page component.

4.3 Pages (frontend/pages)

File What It Contains Detailed Behavior
frontend/pages/_app.js App wrapper Imports styles/globals.css and wraps route component in a full-height container.
frontend/pages/index.js Landing page Reads token presence to alter nav CTA; renders feature cards and “How it works” flow; routes to login/register/scan/history/contact.
frontend/pages/login.js Login page Dark/light toggle persisted to localStorage; submits credentials via services/api.login; stores token/user and routes to /scan; handles HTTP/network error messaging.
frontend/pages/register.js Register page Redirects authenticated users to /scan; dark/light toggle persistence; submits signup via services/api.register; stores token/user and routes to /scan; displays validation/server/network errors.
frontend/pages/scan.js Main scan dashboard Auth-gated; loads scanner list (getAvailableScanners), starts scans (startScan), polls status (getScanStatus every 3s), appends backend logs, tracks progress/status, redirects to report on completion.
frontend/pages/history.js History dashboard Auth-gated history list from getScanHistory; status/risk badges and timestamps; report navigation only enabled for completed scans.
frontend/pages/results/index.js Alternate results listing Similar to history with risk classification and summary cards; supports refresh and new scan actions; routes into report page.
frontend/pages/contact.js Contact + FAQ page Frontend-only contact form simulation (sent state), static channel links, animated FAQ accordion, nav links to home/scan.
frontend/pages/report/[id].js Detailed report page Fetches results via getScanResults(id); renders summary, PredictionCard, findings table, raw output; PDF download via downloadPDFReport(id) blob handling.
frontend/pages/report/Report.module.css Legacy report CSS module Contains static table/container styles from an earlier styling approach; current report page primarily uses Tailwind classes.
frontend/pages/results/Results.module.css Legacy results CSS module Contains static table/button/risk-color classes from earlier styling; current results page primarily uses Tailwind classes.

4.4 Services (frontend/services)

File What It Contains Detailed Behavior
frontend/services/api.js Axios client + endpoint wrappers Configures base URL (NEXT_PUBLIC_API_URL fallback localhost), 3-minute timeout, bearer token request interceptor, 401 response interceptor (clears auth + redirect), exports auth/scan/report/history API methods.
frontend/services/auth.js Logout helper Clears token/user from localStorage and routes to /login.

4.5 Global Styling (frontend/styles)

File What It Contains Detailed Behavior
frontend/styles/globals.css Global style entrypoint Tailwind directives, default dark body/input/button styling, reusable animated .bg-grid utility and keyframes.

4.6 Public Assets (frontend/public)

File What It Contains Detailed Behavior
frontend/public/Alrish.logo.jpeg Primary logo asset Used as top-left brand icon in auth pages.
frontend/public/Login.png Login illustration Displayed in login page left-side hero section.
frontend/public/Register.png Register illustration Displayed in register page right-side hero section.
frontend/public/home logo.jpeg Home image asset Tracked static asset for home branding visuals.
frontend/public/report logo.jpeg Report image asset Tracked static asset for report-related branding visuals.
frontend/public/result logo.jpeg Results image asset Tracked static asset for results-related branding visuals.

5. API Usage Surface from Frontend

frontend/services/api.js currently calls:

  • POST /api/auth/register
  • POST /api/auth/login
  • GET /api/auth/me
  • GET /api/scan/scanners
  • POST /api/scan/start
  • GET /api/scan/status/{scan_id}
  • GET /api/scan/results/{scan_id}
  • GET /api/scan/health
  • GET /api/scan/report/{scan_id}/pdf
  • GET /api/scan/history

6. Known Quirks

  • Three tracked component files (LogTerminal.jsx, RiskMeter.jsx, VulnTable.jsx) are placeholders and not currently used.
  • CSS modules in pages/report and pages/results are retained legacy styles; active page rendering is largely Tailwind utility based.
  • Auth state is managed in localStorage; there is no shared context provider for token/user state.