[TogglePassword] Add example page for ux.symfony.com

ux.symfony.com/assets/controllers.json

@@ -74,6 +74,15 @@
                 "fetch": "lazy"
             }
         },
+        "@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,

ux.symfony.com/composer.json

@@ -41,6 +41,7 @@
         "symfony/ux-react": "2.x-dev",
         "symfony/ux-svelte": "2.x-dev",
         "symfony/ux-swup": "2.x-dev",
+        "symfony/ux-toggle-password": "@dev",
         "symfony/ux-translator": "2.x-dev",
         "symfony/ux-turbo": "2.x-dev",
         "symfony/ux-twig-component": "2.x-dev",

ux.symfony.com/config/bundles.php

@@ -29,4 +29,5 @@
     Symfony\UX\Typed\TypedBundle::class => ['all' => true],
     Symfony\UX\Swup\SwupBundle::class => ['all' => true],
     Zenstruck\Foundry\ZenstruckFoundryBundle::class => ['dev' => true, 'test' => true],
+    Symfony\UX\TogglePassword\TogglePasswordBundle::class => ['all' => true],
 ];

ux.symfony.com/src/Controller/UxPackagesController.php

@@ -5,6 +5,7 @@
 use App\Entity\Food;
 use App\Form\DropzoneForm;
 use App\Form\TimeForAMealForm;
+use App\Form\TogglePasswordForm;
 use App\Service\PackageRepository;
 use Doctrine\Common\Collections\Collection;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
@@ -122,6 +123,14 @@ public function translator(): Response
         return $this->render('ux_packages/translator.html.twig');
     }
 
+    #[Route('/toggle-password', name: 'app_toggle_password')]
+    public function togglePassword(): Response
+    {
+        return $this->render('ux_packages/toggle_password.html.twig', [
+            'form' => $this->createForm(TogglePasswordForm::class),
+        ]);
+    }
+
     private function getDeliciousWord(): string
     {
         $words = ['delicious', 'scrumptious', 'mouth-watering', 'life-changing', 'world-beating', 'freshly-squeezed'];

ux.symfony.com/src/Form/TogglePasswordForm.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\EmailType;
+use Symfony\Component\Form\Extension\Core\Type\PasswordType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+class TogglePasswordForm extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('email', EmailType::class)
+            ->add('password', PasswordType::class, [
+                'toggle' => true,
+            ])
+        ;
+    }
+}

ux.symfony.com/src/Service/PackageRepository.php

@@ -134,6 +134,14 @@ public function findAll(string $query = null): array
                 'Trigger native browser notifications from inside PHP',
                 'I need to send browser notifications',
             ),
+            new Package(
+                'toggle-password',
+                'Toggle Password',
+                'app_toggle_password',
+                'linear-gradient(142.8deg, #FD963C -14.8%, #BE0404 95.43%)',
+                'Switch the visibility of a password field',
+                'I need to toggle the visibility of a password field',
+            ),
             (new Package(
                 'typed',
                 'Typed',

ux.symfony.com/symfony.lock

@@ -589,6 +589,9 @@
     "symfony/ux-swup": {
         "version": "v2.1.1"
     },
+    "symfony/ux-toggle-password": {
+        "version": "2.x-dev"
+    },
     "symfony/ux-translator": {
         "version": "2.9999999",
         "recipe": {

ux.symfony.com/templates/ux_packages/toggle_password.html.twig

@@ -0,0 +1,38 @@
+{% extends 'packageBase.html.twig' %}
+
+{% block component_header %}
+    {% component PackageHeader with {
+        package: 'toggle-password',
+        eyebrowText: 'Switch between password & text'
+    } %}
+        {% block title_header %}
+            From password to text
+            <span class="playfair ps-2">&amp; vice versa</span>
+        {% endblock %}
+
+        {% block sub_content %}
+            Upgrade your password field to toggle between text and password.
+        {% endblock %}
+    {% endcomponent %}
+{% endblock %}
+
+{% block code_block_left %}
+    <twig:CodeBlock filename="src/Form/TogglePasswordForm.php" />
+{% endblock %}
+
+{% block code_block_right %}
+    <twig:CodeBlock
+            filename="templates/ux_packages/toggle_password.html.twig"
+            targetTwigBlock="demo_content"
+    />
+{% endblock %}
+
+{% block demo_title %}UX Toggle Password{% endblock %}
+
+{% block demo_content %}
+    {{ form_start(form) }}
+    {{ form_row(form.email) }}
+    {{ form_row(form.password) }}
+    <button type="submit" class="btn btn-primary">Login</button>
+    {{ form_end(form) }}
+{% endblock %}