Add admin user email management

frontend/app/users/[id]/page.tsx

@@ -101,8 +101,10 @@ export default function UserDetailPage() {
   const [profiles, setProfiles] = useState<UserProfileOption[]>([])
   const [profileSelection, setProfileSelection] = useState('')
   const [expiryInput, setExpiryInput] = useState('')
+  const [emailInput, setEmailInput] = useState('')
   const [savingProfile, setSavingProfile] = useState(false)
   const [savingExpiry, setSavingExpiry] = useState(false)
+  const [savingEmail, setSavingEmail] = useState(false)
   const [systemActionBusy, setSystemActionBusy] = useState(false)
   const [actionStatus, setActionStatus] = useState<string | null>(null)
   const [lineage, setLineage] = useState<UserLineage>(null)
@@ -165,6 +167,7 @@ export default function UserDetailPage() {
           : String(nextUser.profile_id)
       )
       setExpiryInput(toLocalDateTimeInput(nextUser?.expires_at))
+      setEmailInput(nextUser?.email ?? '')
       setError(null)
     } catch (err) {
       console.error(err)
@@ -218,6 +221,47 @@ export default function UserDetailPage() {
     }
   }
 
+  const saveUserEmail = async (clear = false) => {
+    if (!user) return
+    const email = clear ? '' : emailInput.trim()
+    if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setError('Enter a valid email address.')
+      setActionStatus(null)
+      return
+    }
+    setSavingEmail(true)
+    setError(null)
+    setActionStatus(null)
+    try {
+      const response = await authFetch(
+        `${getApiBase()}/admin/users/${encodeURIComponent(user.username)}/email`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email: email || null }),
+        }
+      )
+      const text = await response.text()
+      let data: any = null
+      try {
+        data = text ? JSON.parse(text) : null
+      } catch {
+        data = null
+      }
+      if (!response.ok) {
+        throw new Error(data?.detail || text || 'Email update failed')
+      }
+      setEmailInput(data?.user?.email ?? '')
+      await loadUser()
+      setActionStatus(email ? 'Contact email saved.' : 'Contact email removed.')
+    } catch (err) {
+      console.error(err)
+      setError(err instanceof Error ? err.message : 'Could not update the contact email.')
+    } finally {
+      setSavingEmail(false)
+    }
+  }
+
   const updateAutoSearchEnabled = async (enabled: boolean) => {
     if (!user) return
     try {
@@ -546,6 +590,53 @@ export default function UserDetailPage() {
             </div>
 
             <div className="user-detail-side-column">
+              <div className="admin-panel user-detail-panel">
+                <div className="user-detail-panel-header">
+                  <h2>Contact email</h2>
+                  <p className="lede">Used by Magent for account recovery and issue updates.</p>
+                </div>
+                <form
+                  className="user-detail-actions user-detail-actions--stacked"
+                  onSubmit={(event) => {
+                    event.preventDefault()
+                    void saveUserEmail()
+                  }}
+                >
+                  <label>
+                    <span className="user-bulk-label">Email address</span>
+                    <input
+                      type="email"
+                      value={emailInput}
+                      onChange={(event) => setEmailInput(event.target.value)}
+                      placeholder="person@example.com"
+                      autoComplete="off"
+                      disabled={savingEmail}
+                    />
+                  </label>
+                  <div className="user-detail-helper">
+                    This updates Magent only. It does not change the user&apos;s Jellyfin or Seerr account.
+                  </div>
+                  <div className="admin-inline-actions">
+                    <button
+                      type="submit"
+                      disabled={savingEmail || !emailInput.trim() || emailInput.trim() === (user.email ?? '')}
+                    >
+                      {savingEmail ? 'Saving...' : user.email ? 'Save email' : 'Add email'}
+                    </button>
+                    {user.email && (
+                      <button
+                        type="button"
+                        className="ghost-button"
+                        onClick={() => void saveUserEmail(true)}
+                        disabled={savingEmail}
+                      >
+                        Remove email
+                      </button>
+                    )}
+                  </div>
+                </form>
+              </div>
+
               <div className="admin-panel user-detail-panel">
                 <div className="user-detail-panel-header">
                   <h2>Access controls</h2>