small fixes

frontend/src/components/AdminUsersModal.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { FiPlus, FiTrash2, FiEdit2, FiUser, FiShield, FiArrowLeft } from 'react-icons/fi';
 import Modal from './Modal';
 import LoadingOverlay from './LoadingOverlay';
@@ -219,11 +219,47 @@ const AdminForm = ({ target, domains, currentUserEmail, onCancel, onSaved, onToa
   const [error, setError] = useState('');
   const [busy, setBusy] = useState(false);
 
+  // Tracks whether the user has manually typed in the email field.
+  // Once they have, we stop auto-filling to avoid clobbering their input.
+  const [emailTouched, setEmailTouched] = useState(isEdit);
+  const emailRef = useRef(null);
+
   const sortedDomainNames = useMemo(
     () => [...domains].map((d) => d.domain).sort(),
     [domains]
   );
 
+  // Auto-fill email with "@<domain>" when creating a NEW domain_admin
+  // and exactly one domain is selected, as long as the user hasn't
+  // manually edited the email field yet.
+  useEffect(() => {
+    if (isEdit) return;
+    if (role !== 'domain_admin') return;
+    if (emailTouched) return;
+    if (allowedDomains.size === 1) {
+      const [onlyDomain] = [...allowedDomains];
+      setEmail(`@${onlyDomain}`);
+      // Place caret before the @ so the user can type the local part directly.
+      requestAnimationFrame(() => {
+        const el = emailRef.current;
+        if (el && document.activeElement === el) {
+          try { el.setSelectionRange(0, 0); } catch { /* ignore */ }
+        }
+      });
+    } else if (allowedDomains.size === 0) {
+      setEmail('');
+    }
+  }, [allowedDomains, role, isEdit, emailTouched]);
+
+  // When the user focuses the email field for the first time after
+  // an auto-fill, place the caret at position 0 so they can just type.
+  const handleEmailFocus = () => {
+    const el = emailRef.current;
+    if (el && !emailTouched && email.startsWith('@')) {
+      try { el.setSelectionRange(0, 0); } catch { /* ignore */ }
+    }
+  };
+
   const toggleDomain = (d) => {
     const next = new Set(allowedDomains);
     if (next.has(d)) next.delete(d); else next.add(d);
@@ -297,9 +333,11 @@ const AdminForm = ({ target, domains, currentUserEmail, onCancel, onSaved, onToa
       <div>
         <label className="block text-sm font-semibold text-gray-700 mb-2">Email</label>
         <input
+          ref={emailRef}
           type="email"
           value={email}
-          onChange={(e) => setEmail(e.target.value)}
+          onChange={(e) => { setEmail(e.target.value); setEmailTouched(true); }}
+          onFocus={handleEmailFocus}
           className="input-field"
           disabled={isEdit}
           placeholder="admin@example.com"
@@ -395,6 +433,11 @@ const AdminForm = ({ target, domains, currentUserEmail, onCancel, onSaved, onToa
               ))}
             </div>
           )}
+          {!isEdit && allowedDomains.size === 1 && !emailTouched && (
+            <p className="mt-2 text-xs text-gray-500">
+              Email pre-filled with the selected domain. You can still edit it.
+            </p>
+          )}
         </div>
       )}
 
@@ -436,4 +479,4 @@ const AdminForm = ({ target, domains, currentUserEmail, onCancel, onSaved, onToa
   );
 };
 
-export default AdminUsersModal;
+export default AdminUsersModal;