Enhances form validation and error handling

Refactors parameter and form validation to improve error handling, utilizing Zod schemas for both parameters and form data. Introduces error handling for invalid parameters across multiple routes, providing detailed error messages and avoiding code duplication. Improves readability by consolidating validation logic and updating functions to return more informative responses on validation failures.

Relates to improved UX on form interactions.

Author: MichielOlijslagers

app/features/admin/routes/user.detail.ban.tsx

@@ -11,61 +11,51 @@ import { useState, useEffect } from "react";
 import type { OutletContext } from "./user.detail";
 import { createProtectedAction } from "~/lib/secureRoute";
 
-const banSchema = z.object({
-  banReason: z.string().min(1, "Ban reason is required").max(500, "Ban reason is too long"),
-  banExpires: z
-    .string()
-    .optional()
-    .refine(
-      (date) => {
-        if (!date) return true;
-        const selectedDate = new Date(date);
-        const now = new Date();
-        return selectedDate > now;
-      },
-      { message: "Ban expiration date must be in the future" }
-    ),
-});
-
 export const action = createProtectedAction({
   paramValidation: z.object({
     id: z.string(),
   }),
-  function: async ({ request, params }) => {
-    try {
-      const formData = await request.formData();
-      const banData = {
-        banReason: formData.get("banReason") as string,
-        banExpires: formData.get("banExpires") as string,
-      };
+  formValidation: z.object({
+    banReason: z.string().min(1, "Ban reason is required").max(500, "Ban reason is too long"),
+    banExpires: z
+      .string()
+      .optional()
+      .refine(
+        (date) => {
+          if (!date) return true;
+          const selectedDate = new Date(date);
+          const now = new Date();
+          return selectedDate > now;
+        },
+        { message: "Ban expiration date must be in the future" }
+      ),
+  }),
+  function: async ({ request, params, form }) => {
+    if (params.error) {
+      return { success: false, message: params.error.message };
+    }
+    const { id } = params.data;
 
-      const validatedData = banSchema.parse(banData);
+    if (form.error) {
+      return { success: false, message: form.error.message, fieldErrors: form.fieldErrors };
+    }
+    const { banReason, banExpires } = form.data;
 
-      // Calculate ban duration in seconds
-      const banExpiresIn = validatedData.banExpires
-        ? Math.floor((new Date(validatedData.banExpires).getTime() - Date.now()) / 1000)
-        : undefined;
+    // Calculate ban duration in seconds
+    const banExpiresIn = banExpires
+      ? Math.floor((new Date(banExpires).getTime() - Date.now()) / 1000)
+      : undefined;
 
-      await auth.api.banUser({
-        headers: request.headers,
-        body: {
-          userId: params.id,
-          banReason: validatedData.banReason,
-          banExpiresIn,
-        },
-      });
+    await auth.api.banUser({
+      headers: request.headers,
+      body: {
+        userId: id,
+        banReason: banReason,
+        banExpiresIn,
+      },
+    });
 
-      return { success: true, message: "User banned successfully" };
-    } catch (error) {
-      if (error instanceof z.ZodError) {
-        return {
-          success: false,
-          error: "Validation failed",
-          fieldErrors: error.flatten().fieldErrors,
-        };
-      }
-      return { success: false, error: "Failed to ban user" };
-    }
+    return { success: true, message: "User banned successfully" };
   },
 });
 

app/features/admin/routes/user.detail.delete.tsx

@@ -14,9 +14,14 @@ export const action = createProtectedAction({
     id: z.string(),
   }),
   function: async ({ params }) => {
+    if (params.error) {
+      return { success: false, message: params.error.message };
+    }
+    const { id } = params.data;
+
     try {
       await prisma.user.delete({
-        where: { id: params.id },
+        where: { id },
       });
 
       return { success: true, message: "User deleted successfully" };

app/features/admin/routes/user.detail.revoke-all.tsx

@@ -14,10 +14,15 @@ export const action = createProtectedAction({
     id: z.string(),
   }),
   function: async ({ params }) => {
+    if (params.error) {
+      return { success: false, message: params.error.message };
+    }
+    const { id: userId } = params.data;
+
     try {
       // Delete all sessions for the user
       await prisma.session.deleteMany({
-        where: { userId: params.id },
+        where: { userId },
       });
 
       return { success: true, message: "All sessions revoked successfully" };

app/features/admin/routes/user.detail.revoke.tsx

@@ -22,9 +22,14 @@ export const action = createProtectedAction({
     sessionId: z.string(),
   }),
   function: async ({ request, params }) => {
+    if (params.error) {
+      return { success: false, message: params.error.message };
+    }
+    const { sessionId } = params.data;
+
     try {
       const session = await prisma.session.findUnique({
-        where: { id: params.sessionId },
+        where: { id: sessionId },
       });
 
       if (!session) {

app/features/admin/routes/user.detail.set-role.tsx

@@ -11,40 +11,33 @@ import type { OutletContext } from "./user.detail";
 import { Checkbox } from "~/components/ui/checkbox";
 import { createProtectedAction } from "~/lib/secureRoute";
 
-const roleSchema = z.object({
-  roles: z.array(z.enum(["user", "admin"])).min(1, "At least one role is required"),
-});
-
 export const action = createProtectedAction({
   paramValidation: z.object({
     id: z.string(),
   }),
-  function: async ({ request, params }) => {
-    try {
-      const formData = await request.formData();
-      const roles = formData.getAll("roles") as string[];
+  formValidation: z.object({
+    roles: z.array(z.enum(["user", "admin"])).min(1, "At least one role is required"),
+  }),
+  function: async ({ request, params, form }) => {
+    if (params.error) {
+      return { success: false, message: params.error.message };
+    }
+    const { id: userId } = params.data;
 
-      const validatedData = roleSchema.parse({ roles });
+    if (form.error) {
+      return { success: false, message: form.error.message, fieldErrors: form.fieldErrors };
+    }
+    const { roles } = form.data;
 
-      await auth.api.setRole({
-        headers: request.headers,
-        body: {
-          userId: params.id,
-          role: validatedData.roles,
-        },
-      });
+    await auth.api.setRole({
+      headers: request.headers,
+      body: {
+        userId,
+        role: roles,
+      },
+    });
 
-      return { success: true, message: "User roles updated successfully" };
-    } catch (error) {
-      if (error instanceof z.ZodError) {
-        return {
-          success: false,
-          error: "Validation failed",
-          fieldErrors: error.flatten().fieldErrors,
-        };
-      }
-      return { success: false, error: "Failed to update user roles" };
-    }
+    return { success: true, message: "User roles updated successfully" };
   },
 });
 

app/features/admin/routes/user.detail.tsx

@@ -17,8 +17,13 @@ export const loader = createProtectedLoader({
     id: z.string(),
   }),
   function: async ({ params }) => {
+    if (params.error) {
+      throw new Response(params.error.message, { status: 400 });
+    }
+    const { id } = params.data;
+
     const user = await prisma.user.findUnique({
-      where: { id: params.id },
+      where: { id },
       include: {
         sessions: {
           orderBy: { createdAt: "desc" },

app/features/admin/routes/user.detail.unban.tsx

@@ -14,9 +14,14 @@ export const action = createProtectedAction({
     id: z.string(),
   }),
   function: async ({ params }) => {
+    if (params.error) {
+      return { success: false, message: params.error.message };
+    }
+    const { id } = params.data;
+
     try {
       await prisma.user.update({
-        where: { id: params.id },
+        where: { id },
         data: {
           banned: false,
           banReason: null,

app/features/admin/routes/users.tsx

@@ -20,13 +20,18 @@ export const loader = createProtectedLoader({
     sortDirection: z.enum(["asc", "desc"]).optional(),
   }),
   function: async ({ query }) => {
+    if (query.error) {
+      throw new Response(query.error.message, { status: 400 });
+    }
+    const { page, limit, search, sortBy, sortDirection } = query.data;
+
     // Build the where clause for searching
-    const where = query.search
+    const where = search
       ? {
           OR: [
-            { name: { contains: query.search, mode: Prisma.QueryMode.insensitive } },
-            { email: { contains: query.search, mode: Prisma.QueryMode.insensitive } },
-            { role: { contains: query.search, mode: Prisma.QueryMode.insensitive } },
+            { name: { contains: search, mode: Prisma.QueryMode.insensitive } },
+            { email: { contains: search, mode: Prisma.QueryMode.insensitive } },
+            { role: { contains: search, mode: Prisma.QueryMode.insensitive } },
           ],
         }
       : {};
@@ -38,10 +43,10 @@ export const loader = createProtectedLoader({
     const users = await prisma.user.findMany({
       where,
       orderBy: {
-        [query.sortBy]: query.sortDirection,
+        [sortBy]: sortDirection,
       },
-      skip: (query.page - 1) * query.limit,
-      take: query.limit,
+      skip: (page - 1) * limit,
+      take: limit,
     });
 
     return {
@@ -50,10 +55,10 @@ export const loader = createProtectedLoader({
         role: user.role ? user.role.split(",").map((role) => role.trim()) : null,
       })),
       total,
-      page: query.page,
-      limit: query.limit,
-      sortBy: query.sortBy,
-      sortDirection: query.sortDirection,
+      page,
+      limit,
+      sortBy,
+      sortDirection,
     };
   },
 });

app/features/dashboard/routes/profile.tsx

@@ -9,14 +9,7 @@ import { formatDate } from "~/lib/date";
 import { Badge } from "~/components/ui/badge";
 import { useState, useEffect } from "react";
 import { auth } from "~/lib/auth";
-import {
-  redirect,
-  useLoaderData,
-  type LoaderFunctionArgs,
-  type ActionFunctionArgs,
-  Form,
-  useActionData,
-} from "react-router";
+import { redirect, useLoaderData, Form, useActionData } from "react-router";
 import { authClient } from "~/lib/auth-client";
 import prisma from "~/lib/prismaClient";
 import {
@@ -31,6 +24,7 @@ import {
 } from "~/components/ui/alert-dialog";
 import { toast } from "sonner";
 import { createProtectedAction, createProtectedLoader } from "~/lib/secureRoute";
+import z from "zod";
 
 type Session = {
   id: string;
@@ -39,6 +33,7 @@ type Session = {
   isCurrent: boolean;
 };
 
+// TODO: split intent into separate actions
 export const action = createProtectedAction({
   function: async ({ request }) => {
     const formData = await request.formData();

app/features/organization/routes/members.invite.cancel.tsx

@@ -23,7 +23,10 @@ export const action = createProtectedAction({
     inviteId: z.string(),
   }),
   function: async ({ request, params }) => {
-    const inviteId = params.inviteId;
+    if (params.error) {
+      return { success: false, message: params.error.message };
+    }
+    const { inviteId } = params.data;
 
     if (!inviteId) {
       return { success: false, message: "Invitation ID is required" };
@@ -49,7 +52,11 @@ export const loader = createProtectedLoader({
     inviteId: z.string(),
   }),
   function: async ({ params }) => {
-    const inviteId = params.inviteId;
+    if (params.error) {
+      throw new Response(params.error.message, { status: 400 });
+    }
+
+    const { inviteId } = params.data;
 
     if (!inviteId) {
       return redirect("/app/organization/members");