[Login] toggle password visibility in login/sign up form (#210)

Co-authored-by: Kevin Papst <kpapst@gmx.net>
kevinpapst · Feb 13, 2025 · c35f75b · c35f75b
1 parent d6e4ce7
commit c35f75b
Show file tree

Hide file tree

Showing 5 changed files with 427 additions and 336 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -6,6 +6,9 @@ end_of_line = lf
 indent_size = 4
 indent_style = space
 
+[*.xlf]
+indent_size = 2
+
 [*.php]
 insert_final_newline = true
 trim_trailing_whitespace = true
diff --git a/templates/security.html.twig b/templates/security.html.twig
@@ -52,6 +52,70 @@
                             </label>
                             <div class="input-group input-group-flat">
                                 <input autocomplete="new-password" id="password" name="_password" type="password" tabindex="20" class="form-control" placeholder="{{ 'Password'|trans({}, 'TablerBundle') }}" required="required">
+                                {% block password_show %}
+                                <span class="input-group-text">
+                                    <a
+                                            href="#" class="link-secondary"
+                                            data-show-title="{{ 'Show password'|trans({}, 'TablerBundle') }}"
+                                            data-hide-title="{{ 'Hide password'|trans({}, 'TablerBundle') }}"
+                                            data-bs-toggle="tooltip" title="{{ 'Show password'|trans({}, 'TablerBundle') }}"
+                                            onclick="toggleShowPasswordInput()"
+                                    >
+                                        <span>
+                                            {# Download SVG icon from http://tabler.io/icons/icon/eye #}
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
+                                               <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
+                                               <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"></path>
+                                            </svg>
+                                        </span>
+
+                                        <span hidden>
+                                            {# Download SVG icon from http://tabler.io/icons/icon/eye-off #}
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-eye-off">
+                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                                <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+                                                <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
+                                                <path d="M3 3l18 18" />
+                                            </svg>
+                                        </span>
+                                    </a>
+                                </span>
+                                <script>
+                                    function toggleShowPasswordInput() {
+                                        const input = document.querySelector('input[name="_password"]');
+                                        if (!input) {
+                                            return;
+                                        }
+
+                                        const a = input.parentElement.querySelector('.input-group-text a');
+                                        let tooltipEl = null;
+                                        if (a.hasAttribute('aria-describedBy')) {
+                                            tooltipEl = document.getElementById(a.getAttribute('aria-describedBy'));
+                                        }
+                                        const svgs = input.parentElement.querySelectorAll('.input-group-text svg');
+
+                                        let title = '';
+                                        if (input.type === 'password') {
+                                            title = a.getAttribute('data-hide-title');
+                                            input.type = 'text';
+                                            svgs[0].parentElement.hidden = true;
+                                            svgs[1].parentElement.hidden = false;
+                                        } else {
+                                            title = a.getAttribute('data-show-title');
+                                            input.type = 'password';
+                                            svgs[0].parentElement.hidden = false;
+                                            svgs[1].parentElement.hidden = true;
+                                        }
+
+                                        a.ariaLabel = title;
+                                        a.title = title;
+                                        a.setAttribute('data-bs-original-title', title);
+                                        if (tooltipEl !== null) {
+                                            tooltipEl.querySelector('.tooltip-inner').innerText = title;
+                                        }
+                                    }
+                                </script>
+                                {% endblock %}
                             </div>
                         </div>
                         {% block remember_me %}