From 9733ccc381e8b2ee4852f1aaba119c8d384ec8f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Wed, 13 Mar 2024 08:01:57 +0100
Subject: [PATCH] MDL-81188 form: Fix password element layout

MDL-75670 generated a regression in forms password element layout that was not
being displayed in a single line as before.

- Modify the password element template to display the input and the password
unmask icon in a single line.
- Change the password unmask button styles to be consistent with other
focus states.
- Modify passwordunmask behat form field to work with the new password element
layout changes.
---
 .../form_field/behat_form_passwordunmask.php  |  2 +-
 .../templates/element-passwordunmask.mustache | 62 ++++++++++---------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/lib/behat/form_field/behat_form_passwordunmask.php b/lib/behat/form_field/behat_form_passwordunmask.php
index 91840fdfdce..26b7643ed87 100644
--- a/lib/behat/form_field/behat_form_passwordunmask.php
+++ b/lib/behat/form_field/behat_form_passwordunmask.php
@@ -55,7 +55,7 @@ class behat_form_passwordunmask extends behat_form_text {
         }
 
         $id = $this->field->getAttribute('id');
-        $wrapper = $this->field->getParent()->getParent()->find('css', '[data-passwordunmask="wrapper"]');
+        $wrapper = $this->field->getParent()->getParent()->getParent()->find('css', '[data-passwordunmask="wrapper"]');
         $wrapper->click();
         $this->wait_for_pending_js();
 
diff --git a/lib/form/templates/element-passwordunmask.mustache b/lib/form/templates/element-passwordunmask.mustache
index 1491fbd07cc..40666ba55a3 100644
--- a/lib/form/templates/element-passwordunmask.mustache
+++ b/lib/form/templates/element-passwordunmask.mustache
@@ -47,41 +47,43 @@
 }}
 {{< core_form/element-template }}
     {{$ element }}
-        <span data-passwordunmask="wrapper" data-passwordunmaskid="{{ element.id }}">
-            <span data-passwordunmask="editor">
-                <input  type="password"
-                        {{# element.frozen }}readonly{{/ element.frozen }}
-                        {{^ element.hardfrozen}} name="{{ element.name }}"{{/ element.hardfrozen }}
-                        id="{{ element.id }}"
-                        value="{{ element.value }}"
-                        class="form-control d-none {{# error }}is-invalid{{/ error }}"
-                        data-size="{{ element.size }}"
-                        {{# error }}
-                            autofocus aria-describedby="{{ element.iderror }}"
-                        {{/ error }}
-                        {{#required}}
-                            aria-required="true"
-                        {{/required}}
-                        {{{ element.attributes }}}
-                        >
-            </span>
-            {{^ element.frozen }}
-            <a href="#" class="form-control" data-passwordunmask="edit" title="{{ edithint }}">
-            {{/ element.frozen }}
-                <span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
-            {{^ element.frozen }}
-                {{# pix }} t/passwordunmask-edit, core, {{# str }} passwordunmaskedithint, form {{/ str }}{{/ pix }}
-            </a>
-            {{/ element.frozen }}
-            <a href="#" data-passwordunmask="unmask" title="{{ unmaskhint }}">
-                {{# pix }} t/passwordunmask-reveal, core, {{# str }} passwordunmaskrevealhint, form {{/ str }}{{/ pix }}
-            </a>
+        <div data-passwordunmask="wrapper" data-passwordunmaskid="{{ element.id }}">
+            <div class="d-flex align-items-center">
+                <span data-passwordunmask="editor">
+                    <input  type="password"
+                            {{# element.frozen }}readonly{{/ element.frozen }}
+                            {{^ element.hardfrozen}} name="{{ element.name }}"{{/ element.hardfrozen }}
+                            id="{{ element.id }}"
+                            value="{{ element.value }}"
+                            class="form-control d-none {{# error }}is-invalid{{/ error }}"
+                            data-size="{{ element.size }}"
+                            {{# error }}
+                                autofocus aria-describedby="{{ element.iderror }}"
+                            {{/ error }}
+                            {{#required}}
+                                aria-required="true"
+                            {{/required}}
+                            {{{ element.attributes }}}
+                            >
+                </span>
+                {{^ element.frozen }}
+                <a href="#" class="form-control" data-passwordunmask="edit" title="{{ edithint }}">
+                {{/ element.frozen }}
+                    <span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
+                {{^ element.frozen }}
+                    {{# pix }} t/passwordunmask-edit, core, {{# str }} passwordunmaskedithint, form {{/ str }}{{/ pix }}
+                </a>
+                {{/ element.frozen }}
+                <a href="#" class="btn btn-link icon-no-margin p-1 ml-1" data-passwordunmask="unmask" title="{{ unmaskhint }}">
+                    {{# pix }} t/passwordunmask-reveal, core, {{# str }} passwordunmaskrevealhint, form {{/ str }}{{/ pix }}
+                </a>
+            </div>
             <span data-passwordunmask="instructions" class="form-text text-muted" style="display: none;">
                 {{^ element.frozen }}
                 {{# str }} passwordunmaskinstructions, form {{/ str }}
                 {{/ element.frozen }}
             </span>
-        </span>
+        </div>
     {{/ element }}
 {{/ core_form/element-template }}
 {{#js}}