[TogglePasswordComponent] Add documentation for usage without Symfony Forms

[MirakuSan]

Q	A
Bug fix?	no
New feature?	no
Tickets	n/a
License	MIT

I would like to propose this improvement for the Toggle Password documentation.
I wanted to add this component to a login form and the documentation did not have example with native HTML forms.

So the example is the following :

    <div class="toggle-password-container"> // Add "toggle-password-container" or a class that applies position: relative to this container.
        <label for="password">Password</label>
        <input
            id="password"
            name="password"
            type="password"
            {{ stimulus_controller('symfony/ux-toggle-password/toggle-password', {
                    buttonClasses: ['toggle-password-button'], // Add as many classes as you wish. "toggle-password-button" is needed to activate the default CSS.
            }) }}
        >
    </div>

I really look forward for reviews to improve this example if needed.

Thanks a lot.

[weaverryan]

What about the toggle-password-container class that should wrap the input (or at least something that has position: relative)?

[weaverryan]

Suggested change

	visibleLabel: 'Show', // This field is optional
	visibleLabel: 'Show', // optional

[MirakuSan]

I'll move it to controller.ts too

[MirakuSan]

@weaverryan I would like to propose this :

            {{ stimulus_controller('symfony/ux-toggle-password/toggle-password', {
                    {# visibleLabel: 'Show password', // If you want to modify this label. #}
                    {# visibleIcon: 'Some svg icon', // If you want to modify this icon. #}
                    {# hiddenLabel: 'Hide password', // If you want to modify this label. #}
                    {# hiddenIcon: 'Some svg icon', // If you want to modify this icon. #}
                    buttonClasses: ['toggle-password-button'], // Add as many classes as you wish. "toggle-password-button" is needed to activate the default CSS.
            }) }}

WDYT ?

[weaverryan]

Yes, that's a good idea, as these are different than the form field options (which are camelcase), so mentioning these here is a good idea 👍

[MirakuSan]

I have fixed this here : #1125 🙏 😄

[MirakuSan]

I have added the div with toggle-password-container and a comment

[weaverryan]

Thank you Damien!