GIRP — Frontend-Inputform

Vue 3 frontend for the GIRP public-facing incident intake interface. Renders dynamically guided input forms based on published playbooks, enabling stakeholders to report security incidents.

Part of the GIRP (Guided Incident Response Platform) — see the other repositories: Formbuilder, Frontend-SOCView, Backend-Inputform, Backend-SOCView and Launcher.

Technology Stack

• Framework: Vue 3 (Composition API, <script setup>)
• Language: TypeScript
• Build Tool: Vite
• State Management: Pinia
• UI: Bootstrap 5
• HTTP Client: Axios
• Internationalisation: Vue-i18n (English / German)
• Authentication: Session JWTs issued by Backend-Inputform; SSO via MSAL.js (Azure / Entra ID) or Better-Auth (config is loaded at runtime from Backend-SOCView)

Prerequisites

• Node.js >= 22.16 (see engines in package.json)
• npm

Setup

cp .env.example .env
npm install
npm run dev        # development server
npm run build      # type-check + production build
npm run preview    # preview production build

For a standalone production deployment without a separate static file server, the included Express wrapper can be used:

npm run start      # serves the dist/ build via Express

Configuration

GIRP is configured at runtime. In Docker and in production, all configuration is injected at container start via environment variables — the nginx entrypoint (or the Express wrapper) serves them to the SPA as /env-config.js, which sets the platform-wide window.__ENV__ global (UPPER_SNAKE keys named after the environment variables, same convention as Frontend-SOCView). These are the variables operators set:

Variable	Description	Default
INPUTFORM_API_URL	Base URL of the Backend-Inputform API	http://localhost:4000/api
SOCVIEW_API_URL	Base URL of Backend-SOCView (Better-Auth SSO + runtime auth config)	http://localhost:3000
INPUTFORM_AUTH_ENABLED	Require SSO login before form access. Defaults to true. Set false only for local demos/tests.	true
DEFAULT_FORM_ID	Default playbook ID offered when no ?form= parameter is present	—

Azure clientId/tenantId are not configured here — they are fetched at runtime from Backend-SOCView (/api/config).

Security note: the auth gate in this SPA (router guards) is a UX feature, not a security boundary. Enforcement happens server-side in Backend-Inputform (INPUTFORM_AUTH_ENABLED) and Backend-SOCView.

Local development (build-time VITE_* variables)

Warning: the VITE_* values baked in at build time are development fallbacks for npm run dev/npm run build only. At runtime they are ignored/overridden by the runtime variables above — do not rely on them for deployed containers. .env.example is the authoritative reference.

Variable	Description	Default
VITE_INPUTFORM_API_URL	Base URL of the Backend-Inputform API	http://localhost:4000
VITE_SOCVIEW_API_URL	Base URL of Backend-SOCView (Better-Auth SSO + runtime auth config)	http://localhost:3000
VITE_INPUTFORM_AUTH_ENABLED	Require SSO login before form access. Defaults to true. Set false only for local demos/tests.	true
VITE_DEFAULT_FORM_ID	Default playbook ID offered when no ?form= parameter is present	—

Form Engine

The intake flow is driven by a client-side form engine (src/composables/useFormEngine.ts) that:

• fetches the active playbook from the backend on session start,
• evaluates conditional routing rules to determine the next question,
• persists each answer to the backend in real time via POST /api/responses,
• resolves i18n field values for the user's locale,
• tracks session state (progress, history, expiry) in Pinia stores.

Playbook data is managed in src/stores/playbookStore.ts; navigation history in src/stores/navigationStore.ts; session tokens in src/stores/sessionStore.ts.

Question Types

The engine supports all question types defined in the GIRP playbook schema: textzeile, textbox, select, checkbox, int, date, and info. Validation rules, conditional logic, and i18n labels are evaluated client-side from the playbook definition.

Glossary note: identifiers such as textzeile (single-line text) and textbox (multi-line text) are German-derived schema keys kept as-is for playbook schema stability.

Development

npm run type-check   # vue-tsc
npm run lint         # ESLint
npm test             # Vitest unit tests

Security

See SECURITY.md for how to report vulnerabilities.

License

Licensed under the Sustainable Use License (source-available).