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>
This commit is contained in:
+29
-27
@@ -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) => {
|
||||
e.preventDefault();
|
||||
const {
|
||||
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
|
||||
type="text"
|
||||
value={username}
|
||||
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"
|
||||
/>
|
||||
<input type="text" autoFocus className={inputClass} {...register('username')} />
|
||||
{errors.username && (
|
||||
<p className="mt-1 text-xs text-red-400">{errors.username.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
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"
|
||||
/>
|
||||
<input type="password" className={inputClass} {...register('password')} />
|
||||
{errors.password && (
|
||||
<p className="mt-1 text-xs text-red-400">{errors.password.message}</p>
|
||||
)}
|
||||
</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>
|
||||
|
||||
@@ -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({
|
||||
title: '',
|
||||
overview: '',
|
||||
severity: 3,
|
||||
assigneeId: '',
|
||||
categoryId: '',
|
||||
typeId: '',
|
||||
itemId: '',
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<CreateTicketInput>({
|
||||
resolver: zodResolver(createTicketSchema),
|
||||
defaultValues: {
|
||||
title: '',
|
||||
overview: '',
|
||||
severity: 3,
|
||||
categoryId: '',
|
||||
typeId: '',
|
||||
itemId: '',
|
||||
assigneeId: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
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;
|
||||
}
|
||||
const onSubmit = async (data: CreateTicketInput) => {
|
||||
setError('');
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const payload: Record<string, unknown> = {
|
||||
title: form.title,
|
||||
overview: form.overview,
|
||||
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);
|
||||
const payload: Record<string, unknown> = { ...data };
|
||||
if (!data.assigneeId) delete payload.assigneeId;
|
||||
const created = await createTicket.mutateAsync(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
|
||||
value={form.assigneeId}
|
||||
onChange={(e) => setForm((f) => ({ ...f, assigneeId: e.target.value }))}
|
||||
className={inputClass}
|
||||
>
|
||||
<select className={inputClass} {...register('assigneeId')}>
|
||||
<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>
|
||||
<CTISelect
|
||||
value={{ categoryId: form.categoryId, typeId: form.typeId, itemId: form.itemId }}
|
||||
onChange={handleCTI}
|
||||
<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: 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>
|
||||
|
||||
Reference in New Issue
Block a user