Phase 6.4: DMS-Forms on RHF + Zod

- Dms.tsx folder-create: RHF+Zod (name required)
- ShareDialog add-share: RHF+Zod (shareId required, shareType/permission kept as useState)
- Error display under each field
- Preserved all existing functionality: folder tree, file grid, share links
- Added 2 validation tests for ShareDialog (empty shareId, valid submit)

frontend/src/__tests__/dms/FolderCreate.validation.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+vi.mock('@/api/dms', () => ({
+  shareFile: vi.fn().mockResolvedValue({}),
+  removeShare: vi.fn(),
+}));
+
+vi.mock('@/api/permissions', () => ({
+  fetchFilePermissions: vi.fn().mockResolvedValue([]),
+  grantPermission: vi.fn(),
+  revokePermission: vi.fn(),
+  createShareLink: vi.fn(),
+  revokeShareLink: vi.fn(),
+}));
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn(), warning: vi.fn() }),
+}));
+
+import { ShareDialog } from '@/components/dms/ShareDialog';
+import { shareFile } from '@/api/dms';
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('ShareDialog validation (RHF + Zod)', () => {
+  it('shows validation error when share ID is empty', async () => {
+    render(
+      <ShareDialog
+        open
+        file={{ id: 'f1', name: 'test.pdf', folder_id: null, mime_type: 'application/pdf', size_bytes: 100, created_at: '', updated_at: '', created_by: '' } as any}
+        onClose={vi.fn()}
+        onShared={vi.fn()}
+      />
+    );
+    // Find the submit button inside the add-share form
+    const addShareButtons = screen.getAllByRole('button', { name: /hinzufügen|add share/i });
+    const submitBtn = addShareButtons.find((b) => b.getAttribute('type') === 'submit');
+    expect(submitBtn).toBeTruthy();
+    fireEvent.click(submitBtn!);
+    await waitFor(() => {
+      const errors = screen.getAllByText(/erforderlich|required/i);
+      expect(errors.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('calls shareFile when form is valid', async () => {
+    render(
+      <ShareDialog
+        open
+        file={{ id: 'f1', name: 'test.pdf', folder_id: null, mime_type: 'application/pdf', size_bytes: 100, created_at: '', updated_at: '', created_by: '' } as any}
+        onClose={vi.fn()}
+        onShared={vi.fn()}
+      />
+    );
+    // Fill in share ID - find the input inside the share-add-section
+    const shareSection = screen.getByTestId('share-add-section');
+    const input = shareSection.querySelector('input');
+    expect(input).toBeTruthy();
+    fireEvent.change(input!, { target: { value: 'user-123' } });
+    fireEvent.submit(input!.closest('form')!);
+    await waitFor(() => {
+      expect(shareFile).toHaveBeenCalledWith('f1', expect.objectContaining({ user_id: 'user-123' }));
+    }, { timeout: 3000 });
+  });
+});

frontend/src/components/dms/ShareDialog.tsx

@@ -5,6 +5,9 @@
 
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { Modal } from '@/components/ui/Modal';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -45,12 +48,22 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
   const [loading, setLoading] = useState(false);
 
   const [shareType, setShareType] = useState<'user' | 'group'>('user');
-  const [shareId, setShareId] = useState('');
   const [sharePermission, setSharePermission] = useState<'read' | 'write'>('read');
   const [linkPassword, setLinkPassword] = useState('');
   const [linkExpiry, setLinkExpiry] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
+  // ── Share form (RHF + Zod) ──
+  const shareSchema = z.object({
+    shareId: z.string().min(1, 'required'),
+  });
+  type ShareFormData = z.infer<typeof shareSchema>;
+
+  const { register: registerShare, handleSubmit: handleSubmitShare, reset: resetShare, formState: { errors: shareErrors } } = useForm<ShareFormData>({
+    resolver: zodResolver(shareSchema),
+    defaultValues: { shareId: '' },
+  });
+
   const loadData = useCallback(async () => {
     if (!file) return;
     setLoading(true);
@@ -69,18 +82,18 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
     }
   }, [open, file, loadData]);
 
-  const handleAddShare = useCallback(async () => {
+  const handleAddShare = useCallback(async (data: ShareFormData) => {
-    if (!file || !shareId) return;
+    if (!file) return;
     setSubmitting(true);
     try {
       const payload: { user_id?: string; group_id?: string; permission: 'read' | 'write' } = {
         permission: sharePermission,
       };
-      if (shareType === 'user') payload.user_id = shareId;
+      if (shareType === 'user') payload.user_id = data.shareId;
-      else payload.group_id = shareId;
+      else payload.group_id = data.shareId;
       await shareFile(file.id, payload);
       toast.success(t('dms.shared'));
-      setShareId('');
+      resetShare({ shareId: '' });
       onShared();
       loadData();
     } catch (err) {
@@ -88,7 +101,7 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
       toast.error(msg);
     }
     setSubmitting(false);
-  }, [file, shareId, shareType, sharePermission, toast, t, onShared, loadData]);
+  }, [file, shareType, sharePermission, toast, t, onShared, loadData, resetShare]);
 
   const handleRemovePermission = useCallback(async (userId: string) => {
     if (!file) return;
@@ -155,6 +168,7 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
         {/* Add share section */}
         <div className="space-y-3" data-testid="share-add-section">
           <h3 className="text-sm font-semibold text-secondary-900">{t('dms.addShare')}</h3>
+          <form onSubmit={handleSubmitShare(handleAddShare)}>
           <div className="flex items-center gap-3 flex-wrap">
             <Select
               label={t('dms.userOrGroup')}
@@ -167,8 +181,8 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
             />
             <Input
               label={shareType === 'user' ? t('dms.userId') : t('dms.groupId')}
-              value={shareId}
+              {...registerShare('shareId')}
-              onChange={(e) => setShareId(e.target.value)}
+              error={shareErrors.shareId?.message === 'required' ? t('validation.required') : undefined}
               placeholder={shareType === 'user' ? t('dms.userId') : t('dms.groupId')}
             />
             <Select
@@ -182,13 +196,14 @@ export function ShareDialog({ open, file, onClose, onShared }: ShareDialogProps)
             />
           </div>
           <Button
-            onClick={handleAddShare}
+            type="submit"
             isLoading={submitting}
-            disabled={!shareId}
             size="sm"
+            className="mt-2"
           >
             {t('dms.addShare')}
           </Button>
+          </form>
         </div>
 
         {/* Current permissions */}

frontend/src/pages/Dms.tsx

@@ -7,6 +7,9 @@
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -69,7 +72,6 @@ export function DmsPage() {
   // Modal state
   const [showUpload, setShowUpload] = useState(false);
   const [showNewFolder, setShowNewFolder] = useState(false);
-  const [newFolderName, setNewFolderName] = useState('');
   const [previewFile, setPreviewFile] = useState<DmsFile | null>(null);
   const [shareFile, setShareFile] = useState<DmsFile | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<DmsFile | null>(null);
@@ -77,6 +79,17 @@ export function DmsPage() {
   const [showBulkMove, setShowBulkMove] = useState(false);
   const [bulkMoveTarget, setBulkMoveTarget] = useState<string>('');
 
+  // ── Folder create form (RHF + Zod) ──
+  const folderSchema = z.object({
+    name: z.string().min(1, 'required'),
+  });
+  type FolderFormData = z.infer<typeof folderSchema>;
+
+  const { register: registerFolder, handleSubmit: handleSubmitFolder, reset: resetFolder, formState: { errors: folderErrors } } = useForm<FolderFormData>({
+    resolver: zodResolver(folderSchema),
+    defaultValues: { name: '' },
+  });
+
   // Mobile view state
   const [activeView, setActiveView] = useState<'tree' | 'files' | 'details'>('tree');
 
@@ -236,16 +249,15 @@ export function DmsPage() {
   }, [deleteTarget, selectedFile, toast, t]);
 
   // Handle create folder
-  const handleCreateFolder = useCallback(async () => {
+  const handleCreateFolder = useCallback(async (data: FolderFormData) => {
-    if (!newFolderName.trim()) return;
     setSubmittingFolder(true);
     try {
       const folder = await createFolder({
-        name: newFolderName.trim(),
+        name: data.name.trim(),
         parent_id: selectedFolderId,
       });
       setFolders((prev) => [...prev, folder]);
-      setNewFolderName('');
+      resetFolder({ name: '' });
       setShowNewFolder(false);
       toast.success(t('dms.createFolder'));
     } catch (err) {
@@ -253,7 +265,7 @@ export function DmsPage() {
       toast.error(msg);
     }
     setSubmittingFolder(false);
-  }, [newFolderName, selectedFolderId, toast, t]);
+  }, [selectedFolderId, toast, t, resetFolder]);
 
   // Handle upload complete
   const handleUploadComplete = useCallback(() => {
@@ -469,25 +481,22 @@ export function DmsPage() {
 
       {/* New folder form */}
       {showNewFolder && (
-        <div className="mb-2 p-3 bg-secondary-50 border-b border-secondary-200" data-testid="new-folder-form">
+        <form onSubmit={handleSubmitFolder(handleCreateFolder)} className="mb-2 p-3 bg-secondary-50 border-b border-secondary-200" data-testid="new-folder-form">
           <div className="flex items-center gap-3 max-w-md">
             <Input
               label={t('dms.folderName')}
-              value={newFolderName}
+              {...registerFolder('name')}
-              onChange={(e) => setNewFolderName(e.target.value)}
+              error={folderErrors.name?.message === 'required' ? t('validation.required') : undefined}
               placeholder={t('dms.folderName')}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') handleCreateFolder();
-              }}
             />
-            <Button size="sm" onClick={handleCreateFolder} isLoading={submittingFolder}>
+            <Button size="sm" type="submit" isLoading={submittingFolder}>
               {t('dms.createFolder')}
             </Button>
-            <Button variant="secondary" size="sm" onClick={() => { setShowNewFolder(false); setNewFolderName(''); }}>
+            <Button variant="secondary" size="sm" type="button" onClick={() => { setShowNewFolder(false); resetFolder({ name: '' }); }}>
               {t('dms.cancel')}
             </Button>
           </div>
-        </div>
+        </form>
       )}
 
       {/* Upload dropzone */}