Phase 1d: react-hook-form + zod on Login and NewTicket

- Both forms use useForm with zodResolver against shared schemas
  (loginSchema, createTicketSchema)
- Field-level errors rendered inline under inputs
- isSubmitting drives button disabled state
- NewTicket: severity registered with valueAsNumber; CTISelect wrapped in
  nested Controllers (one per categoryId/typeId/itemId) since it controls
  three form fields as a single compound input
- Admin forms stay on useState for now — they get redesigned with shadcn
  dialogs in Phase 3, RHF migration lands with that

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

client/src/pages/Login.tsx

@@ -1,29 +1,37 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { loginSchema, type LoginInput } from '../../../shared/schemas/auth';
 import { useAuth } from '../contexts/AuthContext';
 
 export default function Login() {
   const { login } = useAuth();
   const navigate = useNavigate();
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
   const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const {
-    e.preventDefault();
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginInput>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: { username: '', password: '' },
+  });
+
+  const onSubmit = async (data: LoginInput) => {
     setError('');
-    setLoading(true);
     try {
-      await login(username, password);
+      await login(data.username, data.password);
       navigate('/');
     } catch {
       setError('Invalid username or password');
-    } finally {
-      setLoading(false);
     }
   };
 
+  const inputClass =
+    'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
+
   return (
     <div className="min-h-screen bg-gray-950 flex items-center justify-center px-4">
       <div className="w-full max-w-sm">
@@ -33,8 +41,9 @@ export default function Login() {
         </div>
 
         <form
-          onSubmit={handleSubmit}
+          onSubmit={handleSubmit(onSubmit)}
           className="bg-gray-900 border border-gray-800 rounded-xl shadow-2xl p-8 space-y-4"
+          noValidate
         >
           {error && (
             <div className="bg-red-500/10 border border-red-500/30 text-red-400 text-sm px-4 py-3 rounded-lg">
@@ -44,33 +53,26 @@ export default function Login() {
 
           <div>
             <label className="block text-sm font-medium text-gray-300 mb-1">Username</label>
-            <input
+            <input type="text" autoFocus className={inputClass} {...register('username')} />
-              type="text"
+            {errors.username && (
-              value={username}
+              <p className="mt-1 text-xs text-red-400">{errors.username.message}</p>
-              onChange={(e) => setUsername(e.target.value)}
+            )}
-              required
-              autoFocus
-              className="w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
           </div>
 
           <div>
             <label className="block text-sm font-medium text-gray-300 mb-1">Password</label>
-            <input
+            <input type="password" className={inputClass} {...register('password')} />
-              type="password"
+            {errors.password && (
-              value={password}
+              <p className="mt-1 text-xs text-red-400">{errors.password.message}</p>
-              onChange={(e) => setPassword(e.target.value)}
+            )}
-              required
-              className="w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
           </div>
 
           <button
             type="submit"
-            disabled={loading}
+            disabled={isSubmitting}
             className="w-full bg-blue-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors"
           >
-            {loading ? 'Signing in...' : 'Sign in'}
+            {isSubmitting ? 'Signing in...' : 'Sign in'}
           </button>
         </form>
       </div>

client/src/pages/NewTicket.tsx

@@ -1,9 +1,11 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import api from '../api/client';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { createTicketSchema, type CreateTicketInput } from '../../../shared/schemas/ticket';
 import Modal from '../components/Modal';
 import CTISelect from '../components/CTISelect';
-import { User } from '../types';
+import { useUsers, useCreateTicket } from '../api/queries';
 
 interface NewTicketModalProps {
   onClose: () => void;
@@ -11,64 +13,49 @@ interface NewTicketModalProps {
 
 export default function NewTicketModal({ onClose }: NewTicketModalProps) {
   const navigate = useNavigate();
-  const [users, setUsers] = useState<User[]>([]);
+  const { data: users = [] } = useUsers();
+  const createTicket = useCreateTicket();
   const [error, setError] = useState('');
-  const [submitting, setSubmitting] = useState(false);
 
-  const [form, setForm] = useState({
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<CreateTicketInput>({
+    resolver: zodResolver(createTicketSchema),
+    defaultValues: {
       title: '',
       overview: '',
       severity: 3,
-    assigneeId: '',
       categoryId: '',
       typeId: '',
       itemId: '',
+      assigneeId: undefined,
+    },
   });
 
-  useEffect(() => {
+  const onSubmit = async (data: CreateTicketInput) => {
-    api.get<User[]>('/users').then((r) => setUsers(r.data));
-  }, []);
-
-  const handleCTI = (cti: { categoryId: string; typeId: string; itemId: string }) => {
-    setForm((f) => ({ ...f, ...cti }));
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!form.categoryId || !form.typeId || !form.itemId) {
-      setError('Please select a Category, Type, and Item');
-      return;
-    }
     setError('');
-    setSubmitting(true);
     try {
-      const payload: Record<string, unknown> = {
+      const payload: Record<string, unknown> = { ...data };
-        title: form.title,
+      if (!data.assigneeId) delete payload.assigneeId;
-        overview: form.overview,
+      const created = await createTicket.mutateAsync(payload);
-        severity: form.severity,
-        categoryId: form.categoryId,
-        typeId: form.typeId,
-        itemId: form.itemId,
-      };
-      if (form.assigneeId) payload.assigneeId = form.assigneeId;
-
-      const res = await api.post('/tickets', payload);
       onClose();
-      navigate(`/${res.data.displayId}`);
+      navigate(`/${created.displayId}`);
     } catch {
       setError('Failed to create ticket');
-    } finally {
-      setSubmitting(false);
     }
   };
 
   const inputClass =
     'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
   const labelClass = 'block text-sm font-medium text-gray-300 mb-1';
+  const errorClass = 'mt-1 text-xs text-red-400';
 
   return (
     <Modal title="New Ticket" onClose={onClose} size="lg">
-      <form onSubmit={handleSubmit} className="space-y-4">
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
         {error && (
           <div className="bg-red-500/10 border border-red-500/30 text-red-400 text-sm px-4 py-3 rounded-lg">
             {error}
@@ -79,34 +66,31 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
           <label className={labelClass}>Title</label>
           <input
             type="text"
-            value={form.title}
-            onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
-            required
             className={inputClass}
             placeholder="Brief description of the issue"
             autoFocus
+            {...register('title')}
           />
+          {errors.title && <p className={errorClass}>{errors.title.message}</p>}
         </div>
 
         <div>
           <label className={labelClass}>Overview</label>
           <textarea
-            value={form.overview}
-            onChange={(e) => setForm((f) => ({ ...f, overview: e.target.value }))}
-            required
             rows={4}
             className={inputClass}
             placeholder="Detailed description... Markdown supported"
+            {...register('overview')}
           />
+          {errors.overview && <p className={errorClass}>{errors.overview.message}</p>}
         </div>
 
         <div className="grid grid-cols-2 gap-4">
           <div>
             <label className={labelClass}>Severity</label>
             <select
-              value={form.severity}
-              onChange={(e) => setForm((f) => ({ ...f, severity: Number(e.target.value) }))}
               className={inputClass}
+              {...register('severity', { valueAsNumber: true })}
             >
               <option value={1}>SEV 1 — Critical</option>
               <option value={2}>SEV 2 — High</option>
@@ -114,15 +98,12 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
               <option value={4}>SEV 4 — Low</option>
               <option value={5}>SEV 5 — Minimal</option>
             </select>
+            {errors.severity && <p className={errorClass}>{errors.severity.message}</p>}
           </div>
 
           <div>
             <label className={labelClass}>Assignee</label>
-            <select
+            <select className={inputClass} {...register('assigneeId')}>
-              value={form.assigneeId}
-              onChange={(e) => setForm((f) => ({ ...f, assigneeId: e.target.value }))}
-              className={inputClass}
-            >
               <option value="">Unassigned</option>
               {users
                 .filter((u) => u.role !== 'SERVICE')
@@ -137,10 +118,39 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
 
         <div>
           <label className={labelClass}>Routing (CTI)</label>
+          <Controller
+            control={control}
+            name="categoryId"
+            render={({ field: categoryField }) => (
+              <Controller
+                control={control}
+                name="typeId"
+                render={({ field: typeField }) => (
+                  <Controller
+                    control={control}
+                    name="itemId"
+                    render={({ field: itemField }) => (
                       <CTISelect
-            value={{ categoryId: form.categoryId, typeId: form.typeId, itemId: form.itemId }}
+                        value={{
-            onChange={handleCTI}
+                          categoryId: categoryField.value,
+                          typeId: typeField.value,
+                          itemId: itemField.value,
+                        }}
+                        onChange={(cti) => {
+                          categoryField.onChange(cti.categoryId);
+                          typeField.onChange(cti.typeId);
+                          itemField.onChange(cti.itemId);
+                        }}
                       />
+                    )}
+                  />
+                )}
+              />
+            )}
+          />
+          {(errors.categoryId || errors.typeId || errors.itemId) && (
+            <p className={errorClass}>Please select a Category, Type, and Item</p>
+          )}
         </div>
 
         <div className="flex justify-end gap-3 pt-1">
@@ -153,10 +163,10 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
           </button>
           <button
             type="submit"
-            disabled={submitting}
+            disabled={isSubmitting}
             className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
           >
-            {submitting ? 'Creating...' : 'Create Ticket'}
+            {isSubmitting ? 'Creating...' : 'Create Ticket'}
           </button>
         </div>
       </form>