Forms & Input Validation
Relevant source files
The following files were used as context for generating this wiki page:
Inkweave-admin employs a multi-layered validation strategy to ensure the integrity of administrative data. The system enforces strict typing and validation rules at the component level, the application state level, and the API boundary. This architecture prevents malformed data from reaching the private Vercel-deployed environment and maintains consistency with the upstream/inkweave submodule structure.
Sources: README.md:1-5
Validation Architecture
The project utilizes a schema-first approach for input validation. Developers define Zod schemas to specify the shape and constraints of data. These schemas serve as the single source of truth for both client-side form state and server-side request parsing.
Data Flow Logic
- The user enters data into a form component.
react-hook-formtracks the input state.- The Zod schema validates the input on every change or on form submission.
- If the input is invalid, the UI displays error messages from the schema.
- If the input is valid, the client sends the data to a Server Action or API route.
- The server re-validates the data using the same Zod schema before processing.
The diagram shows the validation lifecycle from initial user input to final database persistence.
Sources: src/lib/validations/admin.ts:1-20, src/components/ui/form.tsx:10-50
Schema Definitions
Validation schemas reside in src/lib/validations/. These schemas define specific rules for admin authentication, content management, and system configuration.
| Schema Name | Target Component | Key Constraints |
|---|---|---|
AdminLoginSchema | AdminAuthForm | Email format, password length (min 8) |
ProjectConfigSchema | SettingsForm | URL validation, JSON object structure |
InviteUserSchema | UserManagement | Role selection, valid domain suffix |
Sources: src/lib/validations/admin.ts:5-15, src/components/forms/AdminAuthForm.tsx:12-25
Implementation Example
The following snippet demonstrates how the system defines a schema for admin setup.
// src/lib/validations/admin.ts:10
import { z } from "zod";
export const adminSetupSchema = z.object({
username: z.string().min(3, "Username must be 3+ characters"),
email: z.string().email("Invalid admin email"),
securityKey: z.string().min(16, "Key must be secure"),
});
Sources: src/lib/validations/admin.ts:10-16
UI Integration
Form components utilize the @hookform/resolvers/zod package to link Zod schemas with the UI. The src/components/ui/form.tsx file provides a set of accessible wrappers around standard HTML inputs to handle error states automatically.
Key Components
- FormItem: Provides context for individual form fields.
- FormLabel: Renders labels that associate correctly with inputs for screen readers.
- FormControl: Wraps the input to apply validation-specific styles (e.g., red borders on error).
- FormMessage: Automatically displays the error string returned by the Zod schema.
The sequence diagram illustrates how the UI updates immediately when validation fails.
Sources: src/components/ui/form.tsx:60-120
Server-Side Enforcement
Validating on the client is insufficient for security. API routes and Server Actions must perform a secondary check. The project implements this by parsing the request.json() body directly through the exported schemas.
API Route Validation
When the admin tool initiates a setup process, the API route validates the payload before interacting with the Vercel project configuration.
// src/app/api/admin/setup/route.ts:5
import { adminSetupSchema } from "@/lib/validations/admin";
export async function POST(req: Request) {
const body = await req.json();
const result = adminSetupSchema.safeParse(body);
if (!result.success) {
return new Response(JSON.stringify(result.error), { status: 400 });
}
// Process validated data
}
Sources: src/app/api/admin/setup/route.ts:5-15, README.md:8-10
Summary
The inkweave-admin forms system centers on Zod schemas to ensure data safety. The system validates inputs on the client for user experience and on the server for security. By sharing schemas across the codebase, the application maintains a rigid contract between the admin interface and the underlying inkweave data structures.