graph: use replyTo instead of from to avoid ErrorSendAsDenied

src/globals/SiteIntegrations/components/MaskedField.tsx

@@ -1,24 +1,36 @@
 'use client'
 import type { TextFieldClientComponent } from 'payload'
-
-import { useField } from '@payloadcms/ui'
 import { useState } from 'react'
 
-export const MaskedField: TextFieldClientComponent = ({ field, path }) => {
-  const { setValue, value } = useField<string>({ path })
+export const MaskedField: TextFieldClientComponent = (props: any) => {
+  const { field, path, value: propValue, setValue: propSetValue, onChange: propOnChange } = props || {}
+  const [internalValue, setInternalValue] = useState(propValue ?? '')
   const [revealed, setRevealed] = useState(false)
   const label = typeof field?.label === 'string' ? field.label : (field?.name ?? path)
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newVal = e.target.value
+    setInternalValue(newVal)
+    if (typeof propSetValue === 'function') {
+      propSetValue(newVal)
+    }
+    if (typeof propOnChange === 'function') {
+      propOnChange(e)
+    }
+  }
+
+  const currentValue = propValue !== undefined ? propValue : internalValue
+
   return (
     <div className="field-type text">
-      <label className="field-label">{label}</label>
+      {label && <label className="field-label">{label}</label>}
       <div style={{ display: 'flex', gap: '.5rem' }}>
         <input
           autoComplete="off"
-          onChange={(e) => setValue(e.target.value)}
+          onChange={handleChange}
           style={{ flex: 1 }}
           type={revealed ? 'text' : 'password'}
-          value={value ?? ''}
+          value={currentValue ?? ''}
         />
         <button onClick={() => setRevealed((r) => !r)} type="button">
           {revealed ? 'Hide' : 'Reveal'}
@@ -27,4 +39,5 @@ export const MaskedField: TextFieldClientComponent = ({ field, path }) => {
     </div>
   )
 }
+
 export default MaskedField