From ad386f5cef2e8a005747cb8661739d3ad0b7c17d Mon Sep 17 00:00:00 2001
From: Chaim <chaim@marcus-law.co.il>
Date: Mon, 30 Mar 2026 09:20:40 +0000
Subject: [PATCH] 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>
---
 dashboard/src/App.jsx | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/App.jsx b/dashboard/src/App.jsx
index badf7ab..1a905db 100644
--- a/dashboard/src/App.jsx
+++ b/dashboard/src/App.jsx
@@ -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">