LoginSignup
0
0

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

Last updated at Posted at 2023-12-17

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

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

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

インストール

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>

おしまいです。

マスクしたり、
スクリーンショット 2023-12-15 8.52.56.png

はずしたりできます。
スクリーンショット 2023-12-15 8.53.01.png

まとめ

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0