Add reveal eye to password form control (#2219)

Co-authored-by: Michael Voříšek <[email protected]>

demos/form-control/input2.php

@@ -26,6 +26,11 @@
 $group->addControl('line_read', ['readOnly' => true])->set('read only');
 $group->addControl('line_disb', ['disabled' => true])->set('disabled');
 
+$group = $form->addGroup('Password');
+$group->addControl('password_norm', [Form\Control\Password::class], ['type' => 'text'])->set('editable');
+$group->addControl('password_read', [Form\Control\Password::class, 'readOnly' => true])->set('read only');
+$group->addControl('password_disb', [Form\Control\Password::class, 'disabled' => true])->set('disabled');
+
 $group = $form->addGroup('Textarea');
 $group->addControl('text_norm', [Form\Control\Textarea::class], ['type' => 'text'])->set("editable\nline2");
 $group->addControl('text_read', [Form\Control\Textarea::class, 'readOnly' => true], ['type' => 'text'])->set("read only\nline2");

src/Behat/Context.php

@@ -247,7 +247,7 @@ static function ($matches) {
     }
 
     /**
-     * @return array<NodeElement>
+     * @return list<NodeElement>
      */
     protected function findElements(?NodeElement $context, string $selector): array
     {

src/Form/Control/Input.php

@@ -163,7 +163,7 @@ protected function prepareRenderButton($button, $spot)
                 $button->on('click', $executor);
             }
         }
-        if (!$button->isInitialized()) {
+        if (!$button->isInitialized()) { // TODO if should be replaced with new method like View::addOrAssertRegion() which will add the element and otherwise assert the owner and region
             $this->add($button, $spot);
         }
 

src/Form/Control/Password.php

@@ -4,7 +4,57 @@
 
 namespace Atk4\Ui\Form\Control;
 
+use Atk4\Ui\Js\JsExpression;
+
 class Password extends Line
 {
     public string $inputType = 'password';
+
+    /** Enable reveal button */
+    public bool $revealEye = true;
+
+    #[\Override]
+    protected function init(): void
+    {
+        parent::init();
+
+        if ($this->revealEye) {
+            $this->icon = 'eye link slash';
+            if ($this->disabled) {
+                $this->icon .= ' grey disabled';
+            }
+        }
+    }
+
+    #[\Override]
+    protected function recursiveRender(): void
+    {
+        if ($this->revealEye && !$this->disabled) {
+            $this->icon->on(
+                'mousedown', // do not use 'click' to keep focus/selection
+                new JsExpression(
+                    <<<'EOF'
+                        let inputElem = document.getElementById([]);
+                        let iconElem = document.getElementById([]);
+
+                        if (inputElem.getAttribute('type') === 'password') {
+                            inputElem.setAttribute('type', 'text');
+                            iconElem.classList.remove('slash');
+                        } else {
+                            inputElem.setAttribute('type', 'password');
+                            iconElem.classList.add('slash');
+                        }
+
+                        if (document.activeElement !== inputElem) {
+                            inputElem.setSelectionRange(-1, -1);
+                            inputElem.focus();
+                        }
+                        EOF,
+                    [$this->name . '_input', $this->icon->name]
+                )
+            );
+        }
+
+        parent::recursiveRender();
+    }
 }

tests-behat/input.feature

@@ -0,0 +1,13 @@
+Feature: Input control
+
+  Scenario: Password reveal
+    Given I am on "form-control/input2.php"
+    When I fill in "password_norm" with "Foo secret"
+    Then Element "//input[@name='password_norm']" attribute "type" should contain text "password"
+    Then Element "//input[@name='password_norm']/../i[contains(@class, 'eye')]" attribute "class" should contain text "eye link slash icon"
+    When I click using selector "//input[@name='password_norm']/../i[contains(@class, 'eye')]"
+    Then Element "//input[@name='password_norm']" attribute "type" should contain text "text"
+    Then Element "//input[@name='password_norm']/../i[contains(@class, 'eye')]" attribute "class" should contain text "eye link icon"
+    When I click using selector "//input[@name='password_norm']/../i[contains(@class, 'eye')]"
+    Then Element "//input[@name='password_norm']" attribute "type" should contain text "password"
+    Then Element "//input[@name='password_norm']/../i[contains(@class, 'eye')]" attribute "class" should contain text "eye link icon slash"