feat: add username/password fields to customer form for Espo auth

Instead of manually entering base64, users can now type username and
password which auto-generates the Espo-Authorization header value.
Empty credentials on edit won't overwrite existing API key.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-30 09:20:40 +00:00
parent a11ddb82a6
commit ad386f5cef
+35 -4
View File
@@ -160,12 +160,27 @@ function CustomerForm({ onDone, onCancel, customer }) {
name: customer?.name || '', email: customer?.email || '',
espocrm_url: customer?.espocrm_url || '', espocrm_api_key: ''
})
const [authUser, setAuthUser] = useState('')
const [authPass, setAuthPass] = useState('')
const updateAuthFromCredentials = (user, pass) => {
setAuthUser(user)
setAuthPass(pass)
if (user && pass) {
setForm(f => ({ ...f, espocrm_api_key: btoa(user + ':' + pass) }))
} else {
setForm(f => ({ ...f, espocrm_api_key: '' }))
}
}
const submit = async () => {
const payload = { ...form }
if (!payload.espocrm_api_key) delete payload.espocrm_api_key
const url = isEdit ? `${API}/customers/${customer.id}` : `${API}/customers`
await fetch(url, {
method: isEdit ? 'PUT' : 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(form)
body: JSON.stringify(payload)
})
onDone()
}
@@ -178,9 +193,25 @@ function CustomerForm({ onDone, onCancel, customer }) {
className={inputClass} dir="ltr" />
<input placeholder="EspoCRM URL" value={form.espocrm_url} onChange={e => setForm({ ...form, espocrm_url: e.target.value })}
className={inputClass} dir="ltr" />
<input placeholder={isEdit ? "Espo-Authorization (השאר ריק אם לא משתנה)" : "Espo-Authorization (base64)"}
value={form.espocrm_api_key} onChange={e => setForm({ ...form, espocrm_api_key: e.target.value })}
className={`${inputClass} font-mono`} dir="ltr" />
<div className="bg-slate-50 rounded-xl p-3 space-y-2">
<p className="text-xs font-bold text-slate-500 text-right">פרטי התחברות ל-EspoCRM</p>
<div className="flex gap-2">
<input placeholder="סיסמה" value={authPass}
onChange={e => updateAuthFromCredentials(authUser, e.target.value)}
className="flex-1 bg-white border border-slate-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500" dir="ltr" type="password" />
<input placeholder="שם משתמש" value={authUser}
onChange={e => updateAuthFromCredentials(e.target.value, authPass)}
className="flex-1 bg-white border border-slate-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500" dir="ltr" />
</div>
{form.espocrm_api_key && (
<p className="text-[10px] text-slate-400 font-mono truncate" dir="ltr">
Espo-Authorization: {form.espocrm_api_key}
</p>
)}
{isEdit && !form.espocrm_api_key && (
<p className="text-[10px] text-slate-400 text-right">השאר ריק כדי לא לשנות</p>
)}
</div>
<div className="flex gap-2">
<button onClick={submit}
className="deep-action-gradient text-white px-4 py-2.5 rounded-xl font-bold flex-1 shadow-lg shadow-blue-500/20 active:scale-95 transition-all">