パスワードのマスクつけたりはずしたり、"TxTogglePassword"

Symfony Component Advent Calendar 2023の18日目の記事です。

パスワードのマスクつけたりはずしたり、"TxTogglePassword"

TxTogglePasswordは、フォームのパスワード欄のマスクをつけたりはずしたりできるSymfony UXコンポーネントです。
フォームに関連するので、Twig、Formが必要になります。

インストール

composer require symfony/ux-toggle-password

使い方

見た目きれいな方がよいので、フォームのレイアウトにBootstrapを使います。

config/packages/twig.yaml

twig:
    default_path: '%kernel.project_dir%/templates'
+     form_themes: ['bootstrap_5_layout.html.twig']
when@test:
    twig:
        strict_variables: true

続いて、フォームのパスワード欄にトグルを有効にするためのオプションを追加します。

SampleForm.php

<?php

class SampleFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            // ↓ ここで['toggle' => true]を追加
            ->add('password', PasswordType::class, ['toggle' => true])
        ;
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            // Configure your form options here
        ]);
    }
}

あとは、普通にフォームを表示するようにテンプレートを用意します。

form.html.twig

<div class="container">
    <div class="row">
        <div class="col-6 bg-light">
            {{ form_start(form) }}
            {{ form_row(form) }}
            {{ form_end(form) }}
        </div>
</div>

おしまいです。

マスクしたり、

はずしたりできます。

まとめ

今回は"TxTogglePassword"でした。Symfony UXはこんな感じの『ちょっと作るの面倒だけどあるといいよな』ってコンポーネントを用意してくるので好きです。