Toggle password

assets-public/controllers/toggle_password_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    visibleLabel: { type: String, default: 'Show password' },
+    hiddenLabel: { type: String, default: 'Hide password' },
+    buttonClasses: Array
+  }
+
+  isDisplayed = false
+  visibleIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="toggle-password-icon" viewBox="0 0 20 20" fill="currentColor">
+<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
+<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
+</svg>`
+  hiddenIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="toggle-password-icon" viewBox="0 0 20 20" fill="currentColor">
+<path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
+<path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
+</svg>`
+
+  connect () {
+    const button = this.createButton()
+
+    this.element.insertAdjacentElement('afterend', button)
+    this.dispatchEvent('connect', { element: this.element, button })
+  }
+
+  /**
+   * @returns {HTMLButtonElement}
+   */
+  createButton () {
+    const button = document.createElement('button')
+    button.type = 'button'
+    button.classList.add(...this.buttonClassesValue)
+    button.addEventListener('click', this.toggle.bind(this))
+    button.innerHTML = `${this.visibleIcon} ${this.visibleLabelValue}`
+    return button
+  }
+
+  /**
+   * Toggle input type between "text" or "password" and update label accordingly
+   */
+  toggle (event) {
+    this.isDisplayed = !this.isDisplayed
+    const toggleButtonElement = event.currentTarget
+    toggleButtonElement.innerHTML = this.isDisplayed
+      ? `${this.hiddenIcon} ${this.hiddenLabelValue}`
+      : `${this.visibleIcon} ${this.visibleLabelValue}`
+    this.element.setAttribute('type', this.isDisplayed ? 'text' : 'password')
+    this.dispatchEvent(this.isDisplayed ? 'show' : 'hide', { element: this.element, button: toggleButtonElement })
+  }
+
+  dispatchEvent (name, payload) {
+    this.dispatch(name, { detail: payload, prefix: 'toggle-password' })
+  }
+}

assets/scss/_imports.scss

@@ -27,6 +27,7 @@
 @import 'components/toasts';
 @import 'components/no-results';
 @import 'components/password-strength-meter';
+@import 'components/toggle-password';
 
 // Layouts
 @import 'layouts/framework';

assets/scss/components/_toggle-password.scss

@@ -0,0 +1,30 @@
+.toggle-password-container {
+  position: relative;
+}
+
+.toggle-password-icon {
+  height: 1rem;
+  width: 1rem;
+}
+
+.toggle-password-button {
+  place-items: center center;
+  background-color: transparent;
+  border: none;
+  column-gap: 0.25rem;
+  display: flex;
+  flex-direction: row;
+  font-size: 0.875rem;
+  height: 1rem;
+  line-height: 1.25rem;
+  position: absolute;
+  right: 0.5rem;
+  top: -1.25rem;
+}
+
+.user {
+  .toggle-password-button {
+    top: unset;
+    bottom: -1.25rem;
+  }
+}

composer.json

@@ -38,7 +38,6 @@
     "doctrine/orm": "^3.3",
     "symfony/doctrine-messenger": "^7.3",
     "symfony/intl": "^7.3",
-    "symfony/ux-toggle-password": "^2.22",
     "nelmio/security-bundle": "^3.5"
   },
   "require-dev": {

config/services.php

@@ -8,6 +8,7 @@
 use SumoCoders\FrameworkCoreBundle\EventListener\BreadcrumbListener;
 use SumoCoders\FrameworkCoreBundle\EventListener\ResponseSecurer;
 use SumoCoders\FrameworkCoreBundle\EventListener\TitleListener;
+use SumoCoders\FrameworkCoreBundle\Form\Extension\TogglePasswordTypeExtension;
 use SumoCoders\FrameworkCoreBundle\Form\Type\BelgiumPostCodeType;
 use SumoCoders\FrameworkCoreBundle\Form\Type\ImageType;
 use SumoCoders\FrameworkCoreBundle\Form\Type\FileType;
@@ -30,6 +31,7 @@
 use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
 use Symfony\Component\Form\Extension\Core\Type\CollectionType;
 use Symfony\Component\Form\Extension\Core\Type\BirthdayType;
+use Symfony\Component\Form\Extension\Core\Type\PasswordType;
 use Symfony\Component\Form\Extension\Core\Type\TimeType;
 use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
 
@@ -81,6 +83,12 @@
         ->set('framework.collection_type_extension', CollectionTypeExtension::class)
         ->tag('form.type_extension', ['extended_type' => CollectionType::class])
 
+        ->set('framework.toggle_password_type_extension', TogglePasswordTypeExtension::class)
+        ->args([
+            service('translator')
+        ])
+        ->tag('form.type_extension', ['extended_type' => PasswordType::class])
+
         ->set('framework.image_type', ImageType::class)
         ->tag('form.type', ['alias' => 'image'])
 

docs/frontend/stimulus.md

@@ -129,6 +129,28 @@ This works automatically when you use the `RepeatedPasswordStrengthType` in your
         );
 ```
 
+## Password Visibility Toggle
+
+This works automatically when you use the `PasswordType` or `RepeatedPasswordStrengthType` in your form type.
+
+It allows visitors to switch the type of password field to text and vice versa.
+
+Options for customizing:
+
+```php
+    $builder->add('password', PasswordType::class, [
+        // Turn off the visibility toggle
+        'toggle' => false,
+
+        // Disable custom form theme
+        'use_toggle_form_theme' => false,
+
+        // Customizing labels
+        'hidden_label' => 'Masquer',
+        'visible_label' => 'Afficher',
+    ]);
+```
+
 ## DateTime pickers
 
 This works automatically when you use the `DateType`, `DateTimeType` or `TimeType` in your form type.

src/Form/Extension/TogglePasswordTypeExtension.php

@@ -0,0 +1,82 @@
+<?php
+
+namespace SumoCoders\FrameworkCoreBundle\Form\Extension;
+
+use Symfony\Component\Form\AbstractTypeExtension;
+use Symfony\Component\Form\Extension\Core\Type\PasswordType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Translation\TranslatableMessage;
+use Symfony\Contracts\Translation\TranslatorInterface;
+
+final class TogglePasswordTypeExtension extends AbstractTypeExtension
+{
+    public function __construct(private readonly TranslatorInterface $translator)
+    {
+    }
+
+    public static function getExtendedTypes(): iterable
+    {
+        return [PasswordType::class];
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'toggle' => true,
+            'hidden_label' => 'Hide password',
+            'visible_label' => 'Show password',
+            'button_classes' => ['toggle-password-button'],
+            'toggle_container_classes' => ['toggle-password-container'],
+            'use_toggle_form_theme' => true,
+        ]);
+
+        $resolver->setAllowedTypes('toggle', ['bool']);
+        $resolver->setAllowedTypes('hidden_label', ['string', TranslatableMessage::class, 'null']);
+        $resolver->setAllowedTypes('visible_label', ['string', TranslatableMessage::class, 'null']);
+        $resolver->setAllowedTypes('button_classes', ['string[]']);
+        $resolver->setAllowedTypes('toggle_container_classes', ['string[]']);
+        $resolver->setAllowedTypes('use_toggle_form_theme', ['bool']);
+    }
+
+    public function buildView(FormView $view, FormInterface $form, array $options): void
+    {
+        $view->vars['toggle'] = $options['toggle'];
+
+        if (!$options['toggle']) {
+            return;
+        }
+
+        if ($options['use_toggle_form_theme']) {
+            array_splice($view->vars['block_prefixes'], -1, 0, 'toggle_password');
+        }
+
+        $controllerName = 'toggle-password';
+        $view->vars['attr']['data-controller'] = trim(\sprintf('%s %s', $view->vars['attr']['data-controller'] ?? '', $controllerName));
+
+        $controllerValues['hidden-label'] = $this->translateLabel($options['hidden_label'], $options['translation_domain']);
+        $controllerValues['visible-label'] = $this->translateLabel($options['visible_label'], $options['translation_domain']);
+
+        $controllerValues['button-classes'] = json_encode($options['button_classes'], \JSON_THROW_ON_ERROR);
+
+        foreach ($controllerValues as $name => $value) {
+            $view->vars['attr'][\sprintf('data-%s-%s-value', $controllerName, $name)] = $value;
+        }
+
+        $view->vars['toggle_container_classes'] = $options['toggle_container_classes'];
+    }
+
+    private function translateLabel(string|TranslatableMessage|null $label, ?string $translationDomain): ?string
+    {
+        if (null === $label) {
+            return $label;
+        }
+
+        if ($label instanceof TranslatableMessage) {
+            return $label->trans($this->translator);
+        }
+
+        return $this->translator->trans($label, domain: $translationDomain);
+    }
+}

templates/Form/fields.html.twig

@@ -452,3 +452,7 @@
   </div>
   {{ form_row(form.second) }}
 {% endblock %}
+
+{%- block toggle_password_widget -%}
+  <div class="{{ toggle_container_classes|join(' ') }}">{{ block('password_widget') }}</div>
+{%- endblock toggle_password_widget -%}

translations/messages.en.yml

@@ -153,3 +153,5 @@ user:
 
 'Text copied!': 'Test copied!'
 'Postcode and municipality': Postcode and municipality
+Show password: Show password
+Hide password: Hide password

translations/messages.nl.yml

@@ -153,3 +153,5 @@ user:
 
 'Text copied!': 'Tekst gekopieerd!'
 'Postcode and municipality': Postcode en woonplaats
+Show password: Toon wachtwoord
+Hide password: Verberg wachtwoord