\ Symfonyアドベントカレンダー2023 22日目です /

気になってたSymfony UXを初めて使ってみたので、そのメモです。

今回はパスワード入力画面でよくみる、パスワードの表示・非表示を切り替える機能を実装します。 SymfonyUXでは簡単にできるようにパッケージが用意されているので、すぐに実装できます。

概要

symfony/skeletonで新しいプロジェクトの作成

$ composer create-project symfony/skeleton:"6.4.*" form_exam

必要なバンドルのインストール

$ composer require form validator orm twig

$ composer require --dev symfony/maker-bundle

symfony/webpack-encore-bundleのインストール

$ composer update symfony/flex
$ composer require symfony/webpack-encore-bundle

$ npm install
$ npm run dev

symfony/stimulus-bundleのインストール

$ composer require symfony/stimulus-bundle

symfony/ux-toggle-passwordのインストール

$ composer require symfony/ux-toggle-password

$ npm install --force
$ npm run watch

パスワード入力フォームの作成

$ symfony console make:controller CredentialFormController

// CredentialFormTypeを作成し、CredentialFormControllerとテンプレートの微調整

src/Form/CredentialFormType.php

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType;
use Symfony\Component\Form\FormBuilderInterface;

class CredentialFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('password', PasswordType::class)
        ;
    }
}

src/Controller/CredentialFormController.php

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class CredentialFormController extends AbstractController
{
    #[Route('/credential/form', name: 'app_credential_form')]
    public function index(Request $request): Response
    {
        $form = $this->createForm(CredentialFormType::class);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            //todo
        }

        return $this->render('credential_form/index.html.twig', [
            'form' => $form->createView(),
        ]);
    }
}

templates/credential_form/index.html.twig

...
{% block body %}
    {{ form_start(form) }}
    {{ form_row(form.password) }}
    <button type="submit">Login</button>
    {{ form_end(form) }}
{% endblock %}

こんな感じで普通のパスワード入力フォームができました。 常にパスワードは非表示です。

PasswordTypeを使ったフォーム画面

パスワードを表示/非表示に切り替えれるようにする

  • CredentialFormTypeにtoggle=trueをつける
  • base.html.twigにcssとjsのエントリーポイントを追加する 👈忘れないように！

src/Form/CredentialFormType.php

     public function buildForm(FormBuilderInterface $builder, array $options)
     {
         $builder
-            ->add('password', PasswordType::class)
+            ->add('password', PasswordType::class, ['toggle' => true])
         ;
     }
 }

templates/base.html.twig

        {% block stylesheets %}
+            {{ encore_entry_link_tags('app') }}
        {% endblock %}
 
         {% block javascripts %}
+            {{ encore_entry_script_tags('app') }}
         {% endblock %}
     </head>

右上のShow/Hideボタンで、パスワードの表示/非表示を切り替えれるようになりました :tada:

PasswordTypeを使ったフォーム画面(表示) PasswordTypeを使ったフォーム画面(非表示)

さいごに

とっても簡単にできました！ webpack encoreのインストールで少しハマりました :sweat_smile: