mirror of
https://github.com/moodle/moodle.git
synced 2025-04-24 18:04:43 +02:00
MDL-56659 core: No need for noscript tag and set size later
1. BrowserKitDriver::setValue only checks if the element is disabled. It still is able to set value on hidden elements So there is no need for noscript tag in password unmask 2. Set size on hidden field is not valid html, so set it later when text element is displayed
This commit is contained in:
Rajesh Taneja
parent
cd4a6b8b0b
commit
dfa707c994
admin/templates
lib/form
theme/boost/templates
@ -35,35 +35,25 @@
|
||||
}}
|
||||
<div class="form-password">
|
||||
<span data-passwordunmask="wrapper" data-passwordunmaskid="{{ id }}">
|
||||
<span class="visibleifjs">
|
||||
<span data-passwordunmask="editor">
|
||||
<input type="hidden"
|
||||
name="{{ name }}"
|
||||
id="{{ id }}"
|
||||
value="{{ value }}"
|
||||
size="{{ size }}"
|
||||
>
|
||||
</span>
|
||||
<a href="#" data-passwordunmask="edit" title="{{ edithint }}">
|
||||
<span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
|
||||
{{# pix }} t/passwordunmask-edit, core, {{# str }} passwordunmaskedithint, form {{/ str }}{{/ pix }}
|
||||
</a>
|
||||
<a href="#" data-passwordunmask="unmask" title="{{ unmaskhint }}">
|
||||
{{# pix }} t/passwordunmask-reveal, core, {{# str }} passwordunmaskrevealhint, form {{/ str }}{{/ pix }}
|
||||
</a>
|
||||
<span data-passwordunmask="instructions" class="form-text text-muted" style="display: none;">
|
||||
{{# str }} passwordunmaskinstructions, form {{/ str }}
|
||||
</span>
|
||||
</span>
|
||||
<noscript>
|
||||
<!-- Backwards compatability for Behat -->
|
||||
<input type="password"
|
||||
<span data-passwordunmask="editor">
|
||||
<input type="hidden"
|
||||
name="{{ name }}"
|
||||
id="{{ id }}"
|
||||
value="{{ value }}"
|
||||
size="{{ size }}"
|
||||
data-size="{{ size }}"
|
||||
class="form-control d-inline-block"
|
||||
>
|
||||
</noscript>
|
||||
</span>
|
||||
<a href="#" data-passwordunmask="edit" title="{{ edithint }}">
|
||||
<span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
|
||||
{{# pix }} t/passwordunmask-edit, core, {{# str }} passwordunmaskedithint, form {{/ str }}{{/ pix }}
|
||||
</a>
|
||||
<a href="#" data-passwordunmask="unmask" title="{{ unmaskhint }}">
|
||||
{{# pix }} t/passwordunmask-reveal, core, {{# str }} passwordunmaskrevealhint, form {{/ str }}{{/ pix }}
|
||||
</a>
|
||||
<span data-passwordunmask="instructions" class="form-text text-muted" style="display: none;">
|
||||
{{# str }} passwordunmaskinstructions, form {{/ str }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
{{#js}}
|
||||
|
||||
2
lib/form/amd/build/passwordunmask.min.js
vendored
2
lib/form/amd/build/passwordunmask.min.js
vendored
@ -1 +1 @@
|
||||
define(["jquery","core/templates"],function(a,b){var c=function(b){this.wrapperSelector='[data-passwordunmask="wrapper"][data-passwordunmaskid="'+b+'"]',this.wrapper=a(this.wrapperSelector),this.editorSpace=this.wrapper.find('[data-passwordunmask="editor"]'),this.editLink=this.wrapper.find('a[data-passwordunmask="edit"]'),this.editInstructions=this.wrapper.find('[data-passwordunmask="instructions"]'),this.displayValue=this.wrapper.find('[data-passwordunmask="displayvalue"]'),this.inputField=this.editorSpace.find(document.getElementById(b)),this.inputField.attr("type","hidden"),this.inputField.removeClass("hiddenifjs"),this.editInstructions.attr("id")||this.editInstructions.attr("id",b+"_instructions"),this.editInstructions.hide(),this.setDisplayValue(),this.addListeners()};return c.prototype.addListeners=function(){return this.wrapper.on("click keypress",'[data-passwordunmask="edit"]',a.proxy(function(b){"keypress"===b.type&&13!==b.keyCode||(b.stopImmediatePropagation(),b.preventDefault(),"hidden"!==this.inputField.attr("type")?"click"===b.type||a(b.relatedTarget).is(":input")?this.turnEditingOff(!1):this.turnEditingOff(!0):this.turnEditingOn())},this)),this.wrapper.on("click keypress",'[data-passwordunmask="unmask"]',a.proxy(function(a){"keypress"===a.type&&13!==a.keyCode||(a.stopImmediatePropagation(),a.preventDefault(),this.wrapper.data("unmasked",!this.wrapper.data("unmasked")),this.setDisplayValue())},this)),this.wrapper.on("keydown","input",a.proxy(function(a){"keydown"===a.type&&13!==a.keyCode||(a.stopImmediatePropagation(),a.preventDefault(),this.turnEditingOff(!0))},this)),this},c.prototype.checkFocusOut=function(b){this.isEditing()&&window.setTimeout(a.proxy(function(){var c=b.relatedTarget||document.activeElement;this.wrapper.has(a(c)).length||this.turnEditingOff(!a(c).is(":input,a"))},this),100)},c.prototype.passwordVisible=function(){return!!this.wrapper.data("unmasked")},c.prototype.isEditing=function(){return"hidden"!==this.inputField.attr("type")},c.prototype.turnEditingOn=function(){var b=this.getDisplayValue();return this.passwordVisible()?this.inputField.attr("type","text"):this.inputField.attr("type","password"),this.inputField.val(b),this.editInstructions.length&&(this.inputField.attr("aria-describedby",this.editInstructions.attr("id")),this.editInstructions.show()),this.wrapper.attr("data-passwordunmask-visible",1),this.editLink.hide(),this.inputField.focus().select(),a("body").on("focusout",this.wrapperSelector,a.proxy(this.checkFocusOut,this)),this},c.prototype.turnEditingOff=function(b){a("body").off("focusout",this.wrapperSelector,this.checkFocusOut);var c=this.getDisplayValue();return this.inputField.attr("type","hidden").attr("aria-describedby",null),this.inputField.val(c),this.editInstructions.hide(),this.wrapper.removeAttr("data-passwordunmask-visible"),this.editLink.show(),this.setDisplayValue(),b&&this.editLink.focus(),this},c.prototype.getDisplayValue=function(){return this.inputField.val()},c.prototype.setDisplayValue=function(){var c=this.getDisplayValue();return this.isEditing()&&(this.wrapper.data("unmasked")?this.inputField.attr("type","text"):this.inputField.attr("type","password"),this.inputField.val(c)),c&&this.wrapper.data("unmasked")?this.displayValue.text(c):(c||(c=""),b.render("core_form/element-passwordunmask-fill",{element:{frozen:this.inputField.is("[readonly]"),value:c,valuechars:c.split("")}}).done(a.proxy(function(a,c){this.displayValue.html(a),b.runTemplateJS(c)},this))),this},c});
|
||||
define(["jquery","core/templates"],function(a,b){var c=function(b){this.wrapperSelector='[data-passwordunmask="wrapper"][data-passwordunmaskid="'+b+'"]',this.wrapper=a(this.wrapperSelector),this.editorSpace=this.wrapper.find('[data-passwordunmask="editor"]'),this.editLink=this.wrapper.find('a[data-passwordunmask="edit"]'),this.editInstructions=this.wrapper.find('[data-passwordunmask="instructions"]'),this.displayValue=this.wrapper.find('[data-passwordunmask="displayvalue"]'),this.inputField=this.editorSpace.find(document.getElementById(b)),this.inputField.attr("type","hidden"),this.inputField.removeClass("hiddenifjs"),this.editInstructions.attr("id")||this.editInstructions.attr("id",b+"_instructions"),this.editInstructions.hide(),this.setDisplayValue(),this.addListeners()};return c.prototype.addListeners=function(){return this.wrapper.on("click keypress",'[data-passwordunmask="edit"]',a.proxy(function(b){"keypress"===b.type&&13!==b.keyCode||(b.stopImmediatePropagation(),b.preventDefault(),"hidden"!==this.inputField.attr("type")?"click"===b.type||a(b.relatedTarget).is(":input")?this.turnEditingOff(!1):this.turnEditingOff(!0):this.turnEditingOn())},this)),this.wrapper.on("click keypress",'[data-passwordunmask="unmask"]',a.proxy(function(a){"keypress"===a.type&&13!==a.keyCode||(a.stopImmediatePropagation(),a.preventDefault(),this.wrapper.data("unmasked",!this.wrapper.data("unmasked")),this.setDisplayValue())},this)),this.wrapper.on("keydown","input",a.proxy(function(a){"keydown"===a.type&&13!==a.keyCode||(a.stopImmediatePropagation(),a.preventDefault(),this.turnEditingOff(!0))},this)),this},c.prototype.checkFocusOut=function(b){this.isEditing()&&window.setTimeout(a.proxy(function(){var c=b.relatedTarget||document.activeElement;this.wrapper.has(a(c)).length||this.turnEditingOff(!a(c).is(":input,a"))},this),100)},c.prototype.passwordVisible=function(){return!!this.wrapper.data("unmasked")},c.prototype.isEditing=function(){return"hidden"!==this.inputField.attr("type")},c.prototype.turnEditingOn=function(){var b=this.getDisplayValue();return this.passwordVisible()?this.inputField.attr("type","text"):this.inputField.attr("type","password"),this.inputField.val(b),this.inputField.attr("size",this.inputField.attr("data-size")),this.editInstructions.length&&(this.inputField.attr("aria-describedby",this.editInstructions.attr("id")),this.editInstructions.show()),this.wrapper.attr("data-passwordunmask-visible",1),this.editLink.hide(),this.inputField.focus().select(),a("body").on("focusout",this.wrapperSelector,a.proxy(this.checkFocusOut,this)),this},c.prototype.turnEditingOff=function(b){a("body").off("focusout",this.wrapperSelector,this.checkFocusOut);var c=this.getDisplayValue();return this.inputField.attr("type","hidden").attr("aria-describedby",null),this.inputField.val(c),this.editInstructions.hide(),this.wrapper.removeAttr("data-passwordunmask-visible"),this.inputField.removeAttr("size"),this.editLink.show(),this.setDisplayValue(),b&&this.editLink.focus(),this},c.prototype.getDisplayValue=function(){return this.inputField.val()},c.prototype.setDisplayValue=function(){var c=this.getDisplayValue();return this.isEditing()&&(this.wrapper.data("unmasked")?this.inputField.attr("type","text"):this.inputField.attr("type","password"),this.inputField.val(c)),c&&this.wrapper.data("unmasked")?this.displayValue.text(c):(c||(c=""),b.render("core_form/element-passwordunmask-fill",{element:{frozen:this.inputField.is("[readonly]"),value:c,valuechars:c.split("")}}).done(a.proxy(function(a,c){this.displayValue.html(a),b.runTemplateJS(c)},this))),this},c});
|
||||
@ -169,6 +169,7 @@ define(['jquery', 'core/templates'], function($, Template) {
|
||||
this.inputField.attr('type', 'password');
|
||||
}
|
||||
this.inputField.val(value);
|
||||
this.inputField.attr('size', this.inputField.attr('data-size'));
|
||||
|
||||
if (this.editInstructions.length) {
|
||||
this.inputField.attr('aria-describedby', this.editInstructions.attr('id'));
|
||||
@ -216,6 +217,9 @@ define(['jquery', 'core/templates'], function($, Template) {
|
||||
// Remove the visible attr.
|
||||
this.wrapper.removeAttr('data-passwordunmask-visible');
|
||||
|
||||
// Remove the size attr.
|
||||
this.inputField.removeAttr('size');
|
||||
|
||||
this.editLink.show();
|
||||
this.setDisplayValue();
|
||||
|
||||
|
||||
@ -48,53 +48,36 @@
|
||||
{{< core_form/element-template }}
|
||||
{{$ element }}
|
||||
<div data-passwordunmask="wrapper" data-passwordunmaskid="{{ element.id }}">
|
||||
<span class="visibleifjs">
|
||||
<span data-passwordunmask="editor">
|
||||
<!-- The input in the noscript will be moved here as part of the page load -->
|
||||
<span data-passwordunmask="instructions" class="editinstructions">
|
||||
{{^ element.frozen }}
|
||||
{{# str }} passwordunmaskinstructions, form {{/ str }}
|
||||
{{/ element.frozen }}
|
||||
</span>
|
||||
<input type="hidden"
|
||||
{{# element.frozen }}readonly{{/ element.frozen }}
|
||||
{{^ element.hardfrozen}} name="{{ element.name }}"{{/ element.hardfrozen }}
|
||||
id="{{ element.id }}"
|
||||
value="{{element.value }}"
|
||||
size="{{ element.size }}"
|
||||
{{# error }}
|
||||
autofocus aria-describedby="id_error_{{ element.name }}"
|
||||
{{/ error }}
|
||||
{{{ attributes }}}
|
||||
>
|
||||
</span>
|
||||
<span data-passwordunmask="editor">
|
||||
<!-- The input in the noscript will be moved here as part of the page load -->
|
||||
<span data-passwordunmask="instructions" class="editinstructions">
|
||||
{{^ element.frozen }}
|
||||
{{# str }} passwordunmaskinstructions, form {{/ str }}
|
||||
{{/ element.frozen }}
|
||||
</span>
|
||||
{{^ element.frozen }}
|
||||
<a href="#" data-passwordunmask="edit" title="{{ edithint }}">
|
||||
{{/ element.frozen }}
|
||||
<span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
|
||||
{{^ element.frozen }}
|
||||
{{# pix }} t/passwordunmask-edit, core, {{ edithint }}{{/ pix }}
|
||||
</a>
|
||||
{{/ element.frozen }}
|
||||
<a href="#" data-passwordunmask="unmask" title="{{ unmaskhint }}">
|
||||
{{# pix }} t/passwordunmask-reveal, core, {{ edithint }}{{/ pix }}
|
||||
</a>
|
||||
</span>
|
||||
<noscript>
|
||||
<!-- Backwards compatability for Behat -->
|
||||
<input type="password"
|
||||
<input type="hidden"
|
||||
{{# element.frozen }}readonly{{/ element.frozen }}
|
||||
{{^ element.hardfrozen}} name="{{ element.name }}"{{/ element.hardfrozen }}
|
||||
id="{{ element.id }}"
|
||||
value="{{element.value }}"
|
||||
size="{{ element.size }}"
|
||||
data-size="{{ element.size }}"
|
||||
{{# error }}
|
||||
autofocus aria-describedby="id_error_{{ element.name }}"
|
||||
{{/ error }}
|
||||
{{{ attributes }}}
|
||||
>
|
||||
</noscript>
|
||||
</span>
|
||||
{{^ element.frozen }}
|
||||
<a href="#" data-passwordunmask="edit" title="{{ edithint }}">
|
||||
{{/ element.frozen }}
|
||||
<span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
|
||||
{{^ element.frozen }}
|
||||
{{# pix }} t/passwordunmask-edit, core, {{ edithint }}{{/ pix }}
|
||||
</a>
|
||||
{{/ element.frozen }}
|
||||
<a href="#" data-passwordunmask="unmask" title="{{ unmaskhint }}">
|
||||
{{# pix }} t/passwordunmask-reveal, core, {{ edithint }}{{/ pix }}
|
||||
</a>
|
||||
</div>
|
||||
{{/ element }}
|
||||
{{/ core_form/element-template }}
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
{{!
|
||||
This file is part of Moodle - http://moodle.org/
|
||||
|
||||
Moodle is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Moodle is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
||||
}}
|
||||
{{!
|
||||
@template core_admin/setting_configpasswordunmask
|
||||
|
||||
Admin password unmask setting template.
|
||||
|
||||
Context variables required for this template:
|
||||
* name - form element name
|
||||
* size - form element size
|
||||
* value - form element value
|
||||
* id - element id
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
"name": "test",
|
||||
"id": "test0",
|
||||
"size": "8",
|
||||
"value": "secret"
|
||||
}
|
||||
}}
|
||||
<div class="form-password">
|
||||
<span data-passwordunmask="wrapper" data-passwordunmaskid="{{ id }}">
|
||||
<span class="visibleifjs">
|
||||
<span data-passwordunmask="editor">
|
||||
<input type="hidden"
|
||||
name="{{ name }}"
|
||||
id="{{ id }}"
|
||||
value="{{ value }}"
|
||||
size="{{ size }}"
|
||||
class="form-control d-inline-block"
|
||||
>
|
||||
</span>
|
||||
<a href="#" data-passwordunmask="edit" title="{{ edithint }}">
|
||||
<span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
|
||||
{{# pix }} t/passwordunmask-edit, core, {{# str }} passwordunmaskedithint, form {{/ str }}{{/ pix }}
|
||||
</a>
|
||||
<a href="#" data-passwordunmask="unmask" title="{{ unmaskhint }}">
|
||||
{{# pix }} t/passwordunmask-reveal, core, {{# str }} passwordunmaskrevealhint, form {{/ str }}{{/ pix }}
|
||||
</a>
|
||||
<span data-passwordunmask="instructions" class="form-text text-muted" style="display: none;">
|
||||
{{# str }} passwordunmaskinstructions, form {{/ str }}
|
||||
</span>
|
||||
</span>
|
||||
<noscript>
|
||||
<!-- Backwards compatability for Behat -->
|
||||
<input type="password"
|
||||
name="{{ name }}"
|
||||
id="{{ id }}"
|
||||
value="{{ value }}"
|
||||
size="{{ size }}"
|
||||
class="form-control d-inline-block"
|
||||
>
|
||||
</noscript>
|
||||
</span>
|
||||
</div>
|
||||
{{#js}}
|
||||
require(['core_form/passwordunmask'], function(PasswordUnmask) {
|
||||
new PasswordUnmask("{{ id }}");
|
||||
});
|
||||
{{/js}}
|
||||
@ -48,53 +48,36 @@
|
||||
{{< core_form/element-template }}
|
||||
{{$ element }}
|
||||
<span data-passwordunmask="wrapper" data-passwordunmaskid="{{ element.id }}">
|
||||
<span class="visibleifjs">
|
||||
<span data-passwordunmask="editor">
|
||||
<input type="hidden"
|
||||
{{# element.frozen }}readonly{{/ element.frozen }}
|
||||
{{^ element.hardfrozen}} name="{{ element.name }}"{{/ element.hardfrozen }}
|
||||
id="{{ element.id }}"
|
||||
value="{{ element.value }}"
|
||||
class="form-control d-inline-block {{# error }}form-control-danger{{/ error }}"
|
||||
size="{{ element.size }}"
|
||||
{{# error }}
|
||||
autofocus aria-describedby="id_error_{{ element.name }}"
|
||||
{{/ error }}
|
||||
{{{ attributes }}}
|
||||
>
|
||||
</span>
|
||||
{{^ element.frozen }}
|
||||
<a href="#" 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>
|
||||
<span data-passwordunmask="instructions" class="form-text text-muted" style="display: none;">
|
||||
{{^ element.frozen }}
|
||||
{{# str }} passwordunmaskinstructions, form {{/ str }}
|
||||
{{/ element.frozen }}
|
||||
</span>
|
||||
</span>
|
||||
<noscript>
|
||||
<!-- Backwards compatability for Behat -->
|
||||
<input type="password"
|
||||
<span data-passwordunmask="editor">
|
||||
<input type="hidden"
|
||||
{{# element.frozen }}readonly{{/ element.frozen }}
|
||||
{{^ element.hardfrozen}} name="{{ element.name }}"{{/ element.hardfrozen }}
|
||||
id="{{ element.id }}"
|
||||
value="{{ element.value }}"
|
||||
class="form-control d-inline-block {{# error }}form-control-danger{{/ error }}"
|
||||
size="{{ element.size }}"
|
||||
data-size="{{ element.size }}"
|
||||
{{# error }}
|
||||
autofocus aria-describedby="id_error_{{ element.name }}"
|
||||
{{/ error }}
|
||||
{{{ attributes }}}
|
||||
>
|
||||
</noscript>
|
||||
</span>
|
||||
{{^ element.frozen }}
|
||||
<a href="#" 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>
|
||||
<span data-passwordunmask="instructions" class="form-text text-muted" style="display: none;">
|
||||
{{^ element.frozen }}
|
||||
{{# str }} passwordunmaskinstructions, form {{/ str }}
|
||||
{{/ element.frozen }}
|
||||
</span>
|
||||
</span>
|
||||
{{/ element }}
|
||||
{{/ core_form/element-template }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user