mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-17 13:38:32 +01:00
Code Issues Projects Releases Wiki Activity

MDL-81188 form: Fix password element layout

Browse Source 
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.
This commit is contained in:
Mikel Martín 2024-03-13 08:01:57 +01:00
parent 757be30c39
commit 9733ccc381
2 changed files with 33 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/behat/form_field/behat_form_passwordunmask.php
View File

@ -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();

62
lib/form/templates/element-passwordunmask.mustache
View File

@ -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}}