Use a special form type for api key settings, that hide the api key by default as dots

Author: jbtronics

assets/controllers.json

@@ -1,5 +1,14 @@
 {
     "controllers": {
+        "@symfony/ux-toggle-password": {
+            "toggle-password": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-toggle-password/dist/style.min.css": true
+                }
+            }
+        },
         "@symfony/ux-turbo": {
             "turbo-core": {
                 "enabled": true,

assets/css/app/bs-overrides.css

@@ -120,4 +120,11 @@ ins {
 del {
     background-color: #f09595;
     font-weight: bold;
-}
+}
+
+/****************************************
+ * Password toggle
+ ****************************************/
+.toggle-password-button {
+    top: 0.7rem !important;
+}

composer.json

@@ -80,6 +80,7 @@
         "symfony/string": "7.3.*",
         "symfony/translation": "7.3.*",
         "symfony/twig-bundle": "7.3.*",
+        "symfony/ux-toggle-password": "^2.29",
         "symfony/ux-translator": "^2.10",
         "symfony/ux-turbo": "^2.0",
         "symfony/validator": "7.3.*",

composer.lock

@@ -33,4 +33,5 @@
     Jbtronics\SettingsBundle\JbtronicsSettingsBundle::class => ['all' => true],
     Jbtronics\TranslationEditorBundle\JbtronicsTranslationEditorBundle::class => ['dev' => true],
     ApiPlatform\Symfony\Bundle\ApiPlatformBundle::class => ['all' => true],
+    Symfony\UX\TogglePassword\TogglePasswordBundle::class => ['all' => true],
 ];

config/bundles.php

@@ -7,6 +7,7 @@
         "@hotwired/turbo": "^8.0.1",
         "@popperjs/core": "^2.10.2",
         "@symfony/stimulus-bridge": "^4.0.0",
+        "@symfony/ux-toggle-password": "file:vendor/symfony/ux-toggle-password/assets",
         "@symfony/ux-translator": "file:vendor/symfony/ux-translator/assets",
         "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
         "@symfony/webpack-encore": "^5.0.0",

package.json

@@ -0,0 +1,53 @@
+<?php
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2025 Jan Böhmer (https://github.com/jbtronics)
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published
+ *  by the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+declare(strict_types=1);
+
+
+namespace App\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\PasswordType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class APIKeyType extends AbstractType
+{
+    public function getParent(): string
+    {
+        return PasswordType::class;
+    }
+
+    public function buildView(FormView $view, FormInterface $form, array $options): void
+    {
+        //Ensure that the field is never empty
+        $view->vars['value'] = $form->getViewData();
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'always_empty' => false,
+            'toggle' => true,
+            'attr' => ['autocomplete' => 'off'],
+        ]);
+    }
+}

src/Form/Type/APIKeyType.php

@@ -23,6 +23,7 @@
 
 namespace App\Settings\InfoProviderSystem;
 
+use App\Form\Type\APIKeyType;
 use App\Settings\SettingsIcon;
 use Jbtronics\SettingsBundle\Metadata\EnvVarMode;
 use Jbtronics\SettingsBundle\Settings\Settings;
@@ -42,12 +43,14 @@ class DigikeySettings
 
     #[SettingsParameter(
         label: new TM("settings.ips.digikey.client_id"),
+        formType: APIKeyType::class,
         envVar: "PROVIDER_DIGIKEY_CLIENT_ID", envVarMode: EnvVarMode::OVERWRITE
     )]
     public ?string $clientId = null;
 
     #[SettingsParameter(
         label: new TM("settings.ips.digikey.secret"),
+        formType: APIKeyType::class,
         envVar: "PROVIDER_DIGIKEY_SECRET", envVarMode: EnvVarMode::OVERWRITE
     )]
     public ?string $secret = null;
@@ -67,4 +70,4 @@ class DigikeySettings
         envVar: "PROVIDER_DIGIKEY_LANGUAGE", envVarMode: EnvVarMode::OVERWRITE)]
     #[Assert\Language]
     public string $language = "en";
-}
+}

src/Settings/InfoProviderSystem/DigikeySettings.php

@@ -23,6 +23,7 @@
 
 namespace App\Settings\InfoProviderSystem;
 
+use App\Form\Type\APIKeyType;
 use App\Settings\SettingsIcon;
 use Jbtronics\SettingsBundle\Metadata\EnvVarMode;
 use Jbtronics\SettingsBundle\Settings\Settings;
@@ -36,11 +37,12 @@ class Element14Settings
 {
     use SettingsTrait;
 
-    #[SettingsParameter(label: new TM("settings.ips.element14.apiKey"), description: new TM("settings.ips.element14.apiKey.help"),
+    #[SettingsParameter(label: new TM("settings.ips.element14.apiKey"), description: new TM("settings.ips.element14.apiKey.help"),#
+        formType: APIKeyType::class,
         formOptions: ["help_html" => true], envVar: "PROVIDER_ELEMENT14_KEY", envVarMode: EnvVarMode::OVERWRITE)]
     public ?string $apiKey = null;
 
     #[SettingsParameter(label: new TM("settings.ips.element14.storeId"), description: new TM("settings.ips.element14.storeId.help"),
         formOptions: ["help_html" => true], envVar: "PROVIDER_ELEMENT14_STORE_ID", envVarMode: EnvVarMode::OVERWRITE)]
     public string $storeId = "de.farnell.com";
-}
+}

src/Settings/InfoProviderSystem/Element14Settings.php

@@ -23,6 +23,7 @@
 
 namespace App\Settings\InfoProviderSystem;
 
+use App\Form\Type\APIKeyType;
 use App\Settings\SettingsIcon;
 use Jbtronics\SettingsBundle\Metadata\EnvVarMode;
 use Jbtronics\SettingsBundle\Settings\Settings;
@@ -35,6 +36,7 @@
 class MouserSettings
 {
     #[SettingsParameter(label: new TM("settings.ips.mouser.apiKey"), description: new TM("settings.ips.mouser.apiKey.help"),
+        formType: APIKeyType::class,
         formOptions: ["help_html" => true], envVar: "PROVIDER_MOUSER_KEY", envVarMode: EnvVarMode::OVERWRITE)]
     public ?string $apiKey = null;
 
@@ -64,4 +66,4 @@ public static function mapSearchOptionEnvVar(?string $value): MouserSearchOption
         return MouserSearchOptions::tryFrom($value) ?? MouserSearchOptions::NONE;
     }
 
-}
+}