feat: replace browser default validation with custom error messages

Replace the browser's native 'Please fill in this field' validation
tooltips with custom, design-cohesive inline error messages across all
14 forms in the dashboard.

Changes:
- Add noValidate to all forms to disable browser's native validation
- Implement custom validation with inline error messages using existing
  design patterns (text-xs text-red-500 with role='alert')
- Add aria-invalid and aria-describedby attributes for accessibility
- Clear field errors on input change for better UX
- Maintain all existing functionality without regressions

Forms updated:
- Login (email, password, SSO org slug)
- Registration (name, email, password, org name)
- Create project dialog (project name)
- Create environment dialog (environment name)
- Create segment (key, name)
- Create flag (key, name, default value JSON)
- API keys (key name)
- Webhooks (name, URL)
- Environment settings (environment name)
- Team invite (email)
- Target inspector (target key)
- Target comparison (target A/B keys)
- Onboarding project setup (project name)
- Onboarding flag creation (flag key, flag name)

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

Author: 2 people

dashboard/src/app/(app)/flags/page.tsx

@@ -5,7 +5,14 @@ import { api } from "@/lib/api";
 import { useAppStore } from "@/stores/app-store";
 import { SegmentRulesEditor } from "@/components/segment-rules-editor";
 import { toast } from "@/components/toast";
-import { PageHeader, Card, Button, Input, Label, EmptyState } from "@/components/ui";
+import {
+  PageHeader,
+  Card,
+  Button,
+  Input,
+  Label,
+  EmptyState,
+} from "@/components/ui";
 import { Select } from "@/components/ui/select";
 import { Users, Trash2, ChevronDown } from "lucide-react";
 import { ContextualHint, HINTS } from "@/components/contextual-hint";
@@ -23,19 +30,41 @@ export default function SegmentsPage() {
   const projectId = useAppStore((s) => s.currentProjectId);
   const [segments, setSegments] = useState<Segment[]>([]);
   const [showCreate, setShowCreate] = useState(false);
-  const [form, setForm] = useState({ key: "", name: "", description: "", match_type: "all" });
+  const [form, setForm] = useState({
+    key: "",
+    name: "",
+    description: "",
+    match_type: "all",
+  });
+  const [fieldErrors, setFieldErrors] = useState<{
+    key?: string;
+    name?: string;
+  }>({});
   const [deleting, setDeleting] = useState<string | null>(null);
   const [expanded, setExpanded] = useState<string | null>(null);
 
   function reload() {
     if (!token || !projectId) return;
-    api.listSegments(token, projectId).then((s) => setSegments(s ?? [])).catch(() => {});
+    api
+      .listSegments(token, projectId)
+      .then((s) => setSegments(s ?? []))
+      .catch(() => {});
   }
 
-  useEffect(() => { reload(); }, [token, projectId]);
+  useEffect(() => {
+    reload();
+  }, [token, projectId]);
 
   async function handleCreate(e: React.FormEvent) {
     e.preventDefault();
+    const errors: { key?: string; name?: string } = {};
+    if (!form.key.trim()) errors.key = "Key is required";
+    if (!form.name.trim()) errors.name = "Name is required";
+    if (Object.keys(errors).length > 0) {
+      setFieldErrors(errors);
+      return;
+    }
+    setFieldErrors({});
     if (!token || !projectId) {
       toast("Select a project first", "error");
       return;
@@ -47,7 +76,10 @@ export default function SegmentsPage() {
       toast("Segment created", "success");
       reload();
     } catch (err: unknown) {
-      toast(err instanceof Error ? err.message : "Failed to create segment", "error");
+      toast(
+        err instanceof Error ? err.message : "Failed to create segment",
+        "error",
+      );
     }
   }
 
@@ -59,19 +91,32 @@ export default function SegmentsPage() {
       toast("Segment deleted", "success");
       reload();
     } catch (err: unknown) {
-      toast(err instanceof Error ? err.message : "Failed to delete segment", "error");
+      toast(
+        err instanceof Error ? err.message : "Failed to delete segment",
+        "error",
+      );
       setDeleting(null);
     }
   }
 
-  async function handleSaveRules(segKey: string, rules: Condition[], matchType: string) {
+  async function handleSaveRules(
+    segKey: string,
+    rules: Condition[],
+    matchType: string,
+  ) {
     if (!token || !projectId) return;
     try {
-      await api.updateSegment(token, projectId, segKey, { rules, match_type: matchType });
+      await api.updateSegment(token, projectId, segKey, {
+        rules,
+        match_type: matchType,
+      });
       toast("Segment rules saved", "success");
       reload();
     } catch (err: unknown) {
-      toast(err instanceof Error ? err.message : "Failed to save rules", "error");
+      toast(
+        err instanceof Error ? err.message : "Failed to save rules",
+        "error",
+      );
     }
   }
 
@@ -93,37 +138,98 @@ export default function SegmentsPage() {
         description="Reusable audience definitions for targeting"
         docsUrl={DOCS_LINKS.segments}
         actions={
-          <Button onClick={() => setShowCreate(!showCreate)}>Create Segment</Button>
+          <Button onClick={() => setShowCreate(!showCreate)}>
+            Create Segment
+          </Button>
         }
       />
 
       <ContextualHint hint={HINTS.segmentsIntro} />
 
       {showCreate && (
-        <form onSubmit={handleCreate} className="rounded-xl border border-slate-200/80 bg-white p-4 space-y-4 shadow-sm ring-1 ring-indigo-100 sm:p-6">
+        <form
+          onSubmit={handleCreate}
+          noValidate
+          className="rounded-xl border border-slate-200/80 bg-white p-4 space-y-4 shadow-sm ring-1 ring-indigo-100 sm:p-6"
+        >
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div>
               <Label>Key</Label>
-              <Input value={form.key} onChange={(e) => setForm({ ...form, key: e.target.value })} placeholder="beta-users" required className="mt-1" />
+              <Input
+                value={form.key}
+                onChange={(e) => {
+                  setForm({ ...form, key: e.target.value });
+                  if (fieldErrors.key)
+                    setFieldErrors({ ...fieldErrors, key: undefined });
+                }}
+                placeholder="beta-users"
+                required
+                className="mt-1"
+                aria-invalid={!!fieldErrors.key}
+                aria-describedby={fieldErrors.key ? "key-error" : undefined}
+              />
+              {fieldErrors.key && (
+                <p className="text-xs text-red-500" role="alert" id="key-error">
+                  {fieldErrors.key}
+                </p>
+              )}
             </div>
             <div>
               <Label>Name</Label>
-              <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Beta Users" required className="mt-1" />
+              <Input
+                value={form.name}
+                onChange={(e) => {
+                  setForm({ ...form, name: e.target.value });
+                  if (fieldErrors.name)
+                    setFieldErrors({ ...fieldErrors, name: undefined });
+                }}
+                placeholder="Beta Users"
+                required
+                className="mt-1"
+                aria-invalid={!!fieldErrors.name}
+                aria-describedby={fieldErrors.name ? "name-error" : undefined}
+              />
+              {fieldErrors.name && (
+                <p
+                  className="text-xs text-red-500"
+                  role="alert"
+                  id="name-error"
+                >
+                  {fieldErrors.name}
+                </p>
+              )}
             </div>
           </div>
           <div>
             <Label>Description</Label>
-            <Input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Users enrolled in beta program" className="mt-1" />
+            <Input
+              value={form.description}
+              onChange={(e) =>
+                setForm({ ...form, description: e.target.value })
+              }
+              placeholder="Users enrolled in beta program"
+              className="mt-1"
+            />
           </div>
           <div>
             <Label>Match Type</Label>
             <div className="mt-1">
-              <Select value={form.match_type} onValueChange={(val) => setForm({ ...form, match_type: val })} options={MATCH_TYPE_OPTIONS} />
+              <Select
+                value={form.match_type}
+                onValueChange={(val) => setForm({ ...form, match_type: val })}
+                options={MATCH_TYPE_OPTIONS}
+              />
             </div>
           </div>
           <div className="flex gap-2">
             <Button type="submit">Create</Button>
-            <Button type="button" variant="secondary" onClick={() => setShowCreate(false)}>Cancel</Button>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => setShowCreate(false)}
+            >
+              Cancel
+            </Button>
           </div>
         </form>
       )}
@@ -151,36 +257,70 @@ export default function SegmentsPage() {
                     onClick={() => setExpanded(isExpanded ? null : seg.key)}
                   >
                     <div className="min-w-0">
-                      <p className="font-mono text-sm font-medium text-slate-900">{seg.key}</p>
-                      <p className="mt-0.5 text-xs text-slate-500">{seg.name} &middot; Match {seg.match_type} &middot; {seg.rules?.length || 0} rules</p>
-                      {seg.description && <p className="mt-0.5 text-xs text-slate-400">{seg.description}</p>}
+                      <p className="font-mono text-sm font-medium text-slate-900">
+                        {seg.key}
+                      </p>
+                      <p className="mt-0.5 text-xs text-slate-500">
+                        {seg.name} &middot; Match {seg.match_type} &middot;{" "}
+                        {seg.rules?.length || 0} rules
+                      </p>
+                      {seg.description && (
+                        <p className="mt-0.5 text-xs text-slate-400">
+                          {seg.description}
+                        </p>
+                      )}
                     </div>
                     <div className="flex items-center gap-2 shrink-0">
                       {deleting === seg.key ? (
-                        <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
-                          <Button size="sm" variant="destructive-ghost" onClick={() => handleDelete(seg.key)}>Confirm</Button>
-                          <Button size="sm" variant="ghost" onClick={() => setDeleting(null)}>Cancel</Button>
+                        <div
+                          className="flex items-center gap-1"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Button
+                            size="sm"
+                            variant="destructive-ghost"
+                            onClick={() => handleDelete(seg.key)}
+                          >
+                            Confirm
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => setDeleting(null)}
+                          >
+                            Cancel
+                          </Button>
                         </div>
                       ) : (
                         <Button
                           size="icon-sm"
                           variant="ghost"
-                          onClick={(e) => { e.stopPropagation(); setDeleting(seg.key); }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setDeleting(seg.key);
+                          }}
                           title="Delete segment"
                           className="text-slate-400 hover:text-red-500 hover:bg-red-50"
                         >
                           <Trash2 className="h-4 w-4" />
                         </Button>
                       )}
-                      <ChevronDown className={cn("h-4 w-4 text-slate-400 transition-transform duration-200", isExpanded && "rotate-180")} />
+                      <ChevronDown
+                        className={cn(
+                          "h-4 w-4 text-slate-400 transition-transform duration-200",
+                          isExpanded && "rotate-180",
+                        )}
+                      />
                     </div>
                   </div>
                   {isExpanded && (
                     <div className="border-t border-slate-100 px-4 py-4 bg-slate-50/50 sm:px-6 animate-fade-in">
                       <SegmentRulesEditor
                         rules={seg.rules ?? []}
                         matchType={seg.match_type}
-                        onSave={(rules, matchType) => handleSaveRules(seg.key, rules, matchType)}
+                        onSave={(rules, matchType) =>
+                          handleSaveRules(seg.key, rules, matchType)
+                        }
                       />
                     </div>
                   )}