Fix API password field having no editable state or visible control

changelog.md

@@ -217,5 +217,4 @@
 - BO : Fixed issue when a freshly installed module logged an account error before any API credentials were entered
 - BO : Fixed issue when the "Could not reach your Saferpay account" warning kept showing after payment methods had loaded successfully
 - Fixed issue when files removed in this version stayed on disk after an upgrade, leaving obsolete iframe checkout controllers reachable and re-creating obsolete menu tabs on module reset
-- FO : Fixed issue when the Saferpay Fields CVC field looked editable while the card number was incomplete, showing no cursor and accepting no input
-- FO : Fixed issue when the Saferpay Fields card form accepted clicks and keystrokes while it was still loading, so the first characters typed were invisible and appeared to be lost
+- BO : Fixed issue when a saved API password offered no visible way to enter a new one, and browser password manager icons covered the show/hide password control

src/Service/SettingsTranslationService.php

@@ -118,6 +118,8 @@ private function getApiCredentialsTranslations()
             'enterApiPassword' => $this->module->l('Enter %s API password', self::FILE_NAME),
             'hidePassword' => $this->module->l('Hide password', self::FILE_NAME),
             'showPassword' => $this->module->l('Show password', self::FILE_NAME),
+            'changePassword' => $this->module->l('Change password', self::FILE_NAME),
+            'passwordSavedHint' => $this->module->l('Password saved. Click the pencil icon to enter a new one.', self::FILE_NAME),
             'terminalId' => $this->module->l('Terminal ID', self::FILE_NAME),
             'selectTerminal' => $this->module->l('Select a terminal', self::FILE_NAME),
             'refreshTerminals' => $this->module->l('Refresh terminals', self::FILE_NAME),

views/js/admin/settings-app/src/components/settings/api-credentials.tsx

@@ -4,7 +4,7 @@ import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { AlertCircle, Eye, EyeOff, Key, Shield, Loader2, Info, CheckCircle2, Wand2, XCircle } from 'lucide-react'
+import { AlertCircle, Eye, EyeOff, Key, Shield, Loader2, Info, CheckCircle2, Wand2, XCircle, Pencil } from 'lucide-react'
 import { useSettings } from '@/context/settings-context'
 import { toast } from '@/hooks/use-toast'
 import { t } from '@/utils/translations'
@@ -68,7 +68,6 @@ export function ApiCredentials() {
     if (!hasCredentials) {
       setCredentialStatus('idle')
       setCredentialError('')
-      setTerminals([])
       return
     }
 
@@ -195,6 +194,10 @@ export function ApiCredentials() {
                   placeholder={t('enterApiUsername', envLabel.toLowerCase())}
                   value={username}
                   onChange={(e) => setField('username', e.target.value)}
+                  data-lpignore="true"
+                  data-1p-ignore=""
+                  data-bwignore="true"
+                  data-form-type="other"
                   required
                   aria-required="true"
                 />
@@ -210,10 +213,26 @@ export function ApiCredentials() {
                     placeholder={t('enterApiPassword', envLabel.toLowerCase())}
                     value={password}
                     onChange={(e) => setField('password', e.target.value)}
-                    className={isStoredPasswordMasked ? undefined : 'sp-pr-10'}
+                    readOnly={isStoredPasswordMasked}
+                    className="!sp-pr-10"
+                    data-lpignore="true"
+                    data-1p-ignore=""
+                    data-bwignore="true"
+                    data-form-type="other"
                     required
                     aria-required="true"
                   />
+                  {isStoredPasswordMasked && (
+                    <button
+                      type="button"
+                      onClick={() => setField('password', '')}
+                      className="sp-absolute sp-right-3 sp-top-1/2 sp--translate-y-1/2 sp-text-muted-foreground hover:sp-text-foreground sp-transition-colors sp-p-1 sp-min-w-[24px] sp-min-h-[24px] sp-flex sp-items-center sp-justify-center"
+                      aria-label={t('changePassword')}
+                      title={t('changePassword')}
+                    >
+                      <Pencil className="sp-h-4 sp-w-4" />
+                    </button>
+                  )}
                   {showPasswordToggle && (
                     <button
                       type="button"
@@ -225,6 +244,9 @@ export function ApiCredentials() {
                     </button>
                   )}
                 </div>
+                {isStoredPasswordMasked && (
+                  <p className="sp-text-xs sp-text-muted-foreground">{t('passwordSavedHint')}</p>
+                )}
               </div>
             </div>