From 1c6faacaa19821809fbfa0cf4994f37ca57a0c1d Mon Sep 17 00:00:00 2001 From: Tadas Labutis Date: Thu, 30 Jul 2026 14:57:52 +0300 Subject: [PATCH] SL-377 Fix API password field having no editable state or visible control A saved password renders as a masked placeholder. The show/hide toggle is gated on the field holding a real value, so in that state the field showed no control at all: it looked like an ordinary editable password input while typing into it did nothing useful, and with a password manager paused there was not even a manager icon to explain the gap. - A masked stored password is now readOnly and carries a pencil button that clears the field so a new password can be entered, plus a hint line. The eye toggle still appears once a real value is being typed, and the two are mutually exclusive so they cannot overlap. - Right padding is now unconditional, so text can never run under whichever control is showing. - Both credential inputs opt out of password managers (data-lpignore, data-1p-ignore, data-bwignore, data-form-type). Their injected icons sat on top of our control, and per SL-377 an autofill into these fields can be persisted on save and break the stored password. Clearing the password no longer wipes the loaded terminal list: the pencil empties the field on purpose, and dropping the terminals there would blank the Terminal ID dropdown while the merchant retypes. Switching environment and a failed credential check still clear it. --- changelog.md | 1 + src/Service/SettingsTranslationService.php | 2 ++ .../components/settings/api-credentials.tsx | 28 +++++++++++++++++-- 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/changelog.md b/changelog.md index 3d6bf121..ce9f6b82 100644 --- a/changelog.md +++ b/changelog.md @@ -217,3 +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 +- 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 diff --git a/src/Service/SettingsTranslationService.php b/src/Service/SettingsTranslationService.php index dd7f1958..3a68bbf1 100644 --- a/src/Service/SettingsTranslationService.php +++ b/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), diff --git a/views/js/admin/settings-app/src/components/settings/api-credentials.tsx b/views/js/admin/settings-app/src/components/settings/api-credentials.tsx index 5c4cbe81..af037bc1 100644 --- a/views/js/admin/settings-app/src/components/settings/api-credentials.tsx +++ b/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 && ( + + )} {showPasswordToggle && (