Merge branch 'MDL-74814-master-1' of https://github.com/HuongNV13/moodle

lib/form/amd/build/passwordunmask.min.js

@@ -6,6 +6,6 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  * @since      3.2
  */
-define("core_form/passwordunmask",["jquery","core/templates"],(function($,Template){var PasswordUnmask=function(elementid){this.wrapperSelector='[data-passwordunmask="wrapper"][data-passwordunmaskid="'+elementid+'"]',this.wrapper=$(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.inputFieldLabel=$('label[for="'+elementid+'"]'),this.inputField=this.editorSpace.find(document.getElementById(elementid)),this.inputField.attr("type","hidden"),this.inputField.removeClass("hiddenifjs"),this.editInstructions.attr("id")||this.editInstructions.attr("id",elementid+"_instructions"),this.editInstructions.hide(),this.setDisplayValue(),this.addListeners()};return PasswordUnmask.prototype.addListeners=function(){return this.wrapper.on("click keypress",'[data-passwordunmask="edit"]',$.proxy((function(e){"keypress"===e.type&&13!==e.keyCode||(e.stopImmediatePropagation(),e.preventDefault(),"hidden"!==this.inputField.attr("type")?"click"===e.type||$(e.relatedTarget).is(":input")?this.turnEditingOff(!1):this.turnEditingOff(!0):this.turnEditingOn())}),this)),this.wrapper.on("click keypress",'[data-passwordunmask="unmask"]',$.proxy((function(e){"keypress"===e.type&&13!==e.keyCode||(e.stopImmediatePropagation(),e.preventDefault(),this.wrapper.data("unmasked",!this.wrapper.data("unmasked")),this.setDisplayValue())}),this)),this.wrapper.on("keydown","input",$.proxy((function(e){"keydown"===e.type&&13!==e.keyCode||(e.stopImmediatePropagation(),e.preventDefault(),this.turnEditingOff(!0))}),this)),this.inputFieldLabel.on("click",$.proxy((function(e){e.preventDefault(),this.turnEditingOn()}),this)),this},PasswordUnmask.prototype.checkFocusOut=function(e){this.isEditing()&&window.setTimeout($.proxy((function(){var relatedTarget=e.relatedTarget||document.activeElement;this.wrapper.has($(relatedTarget)).length||this.turnEditingOff(!$(relatedTarget).is(":input,a"))}),this),100)},PasswordUnmask.prototype.passwordVisible=function(){return!!this.wrapper.data("unmasked")},PasswordUnmask.prototype.isEditing=function(){return"hidden"!==this.inputField.attr("type")},PasswordUnmask.prototype.turnEditingOn=function(){var value=this.getDisplayValue();return this.passwordVisible()?this.inputField.attr("type","text"):this.inputField.attr("type","password"),this.inputField.val(value),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(),$("body").on("focusout",this.wrapperSelector,$.proxy(this.checkFocusOut,this)),this},PasswordUnmask.prototype.turnEditingOff=function(focusOnEditLink){$("body").off("focusout",this.wrapperSelector,this.checkFocusOut);var value=this.getDisplayValue();return this.inputField.attr("type","hidden").attr("aria-describedby",null),this.inputField.val(value),this.editInstructions.hide(),this.wrapper.removeAttr("data-passwordunmask-visible"),this.inputField.removeAttr("size"),this.editLink.show(),this.setDisplayValue(),focusOnEditLink&&this.editLink.focus(),this},PasswordUnmask.prototype.getDisplayValue=function(){return this.inputField.val()},PasswordUnmask.prototype.setDisplayValue=function(){var value=this.getDisplayValue();return this.isEditing()&&(this.wrapper.data("unmasked")?this.inputField.attr("type","text"):this.inputField.attr("type","password"),this.inputField.val(value)),value&&this.wrapper.data("unmasked")?this.displayValue.text(value):(value||(value=""),Template.render("core_form/element-passwordunmask-fill",{element:{frozen:this.inputField.is("[readonly]"),value:value,valuechars:value.split("")}}).done($.proxy((function(html,js){this.displayValue.html(html),Template.runTemplateJS(js)}),this))),this},PasswordUnmask}));
+define("core_form/passwordunmask",["jquery","core/templates"],(function($,Template){var PasswordUnmask=function(elementid){this.wrapperSelector='[data-passwordunmask="wrapper"][data-passwordunmaskid="'+elementid+'"]',this.wrapper=$(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.inputFieldLabel=$('label[for="'+elementid+'"]'),this.inputField=this.editorSpace.find(document.getElementById(elementid)),this.inputField.addClass("d-none"),this.inputField.removeClass("hiddenifjs"),this.editInstructions.attr("id")||this.editInstructions.attr("id",elementid+"_instructions"),this.editInstructions.hide(),this.setDisplayValue(),this.addListeners()};return PasswordUnmask.prototype.addListeners=function(){return this.wrapper.on("click keypress",'[data-passwordunmask="edit"]',$.proxy((function(e){"keypress"===e.type&&13!==e.keyCode||(e.stopImmediatePropagation(),e.preventDefault(),this.isEditing()?"click"===e.type||$(e.relatedTarget).is(":input")?this.turnEditingOff(!1):this.turnEditingOff(!0):this.turnEditingOn())}),this)),this.wrapper.on("click keypress",'[data-passwordunmask="unmask"]',$.proxy((function(e){"keypress"===e.type&&13!==e.keyCode||(e.stopImmediatePropagation(),e.preventDefault(),this.wrapper.data("unmasked",!this.wrapper.data("unmasked")),this.setDisplayValue())}),this)),this.wrapper.on("keydown","input",$.proxy((function(e){"keydown"===e.type&&13!==e.keyCode||(e.stopImmediatePropagation(),e.preventDefault(),this.turnEditingOff(!0))}),this)),this.inputFieldLabel.on("click",$.proxy((function(e){e.preventDefault(),this.turnEditingOn()}),this)),this},PasswordUnmask.prototype.checkFocusOut=function(e){this.isEditing()&&window.setTimeout($.proxy((function(){var relatedTarget=e.relatedTarget||document.activeElement;this.wrapper.has($(relatedTarget)).length||this.turnEditingOff(!$(relatedTarget).is(":input,a"))}),this),100)},PasswordUnmask.prototype.passwordVisible=function(){return!!this.wrapper.data("unmasked")},PasswordUnmask.prototype.isEditing=function(){return this.inputField.hasClass("d-inline-block")},PasswordUnmask.prototype.turnEditingOn=function(){var value=this.getDisplayValue();return this.passwordVisible()?this.inputField.attr("type","text"):this.inputField.attr("type","password"),this.inputField.val(value),this.inputField.attr("size",this.inputField.attr("data-size")),this.inputField.addClass("d-inline-block"),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(),$("body").on("focusout",this.wrapperSelector,$.proxy(this.checkFocusOut,this)),this},PasswordUnmask.prototype.turnEditingOff=function(focusOnEditLink){$("body").off("focusout",this.wrapperSelector,this.checkFocusOut);var value=this.getDisplayValue();return this.inputField.attr("aria-describedby",null),this.inputField.val(value),this.inputField.removeClass("d-inline-block"),this.editInstructions.hide(),this.wrapper.removeAttr("data-passwordunmask-visible"),this.inputField.removeAttr("size"),this.editLink.show(),this.setDisplayValue(),focusOnEditLink&&this.editLink.focus(),this},PasswordUnmask.prototype.getDisplayValue=function(){return this.inputField.val()},PasswordUnmask.prototype.setDisplayValue=function(){var value=this.getDisplayValue();return this.isEditing()&&(this.wrapper.data("unmasked")?this.inputField.attr("type","text"):this.inputField.attr("type","password"),this.inputField.val(value)),value&&this.wrapper.data("unmasked")?this.displayValue.text(value):(value||(value=""),Template.render("core_form/element-passwordunmask-fill",{element:{frozen:this.inputField.is("[readonly]"),value:value,valuechars:value.split("")}}).done($.proxy((function(html,js){this.displayValue.html(html),Template.runTemplateJS(js)}),this))),this},PasswordUnmask}));
 
 //# sourceMappingURL=passwordunmask.min.js.map

lib/form/amd/src/passwordunmask.js

@@ -40,7 +40,8 @@ define(['jquery', 'core/templates'], function($, Template) {
         this.inputFieldLabel = $('label[for="' + elementid + '"]');
 
         this.inputField = this.editorSpace.find(document.getElementById(elementid));
-        this.inputField.attr('type', 'hidden');
+        // Hide the field.
+        this.inputField.addClass('d-none');
         this.inputField.removeClass('hiddenifjs');
 
         if (!this.editInstructions.attr('id')) {
@@ -69,7 +70,7 @@ define(['jquery', 'core/templates'], function($, Template) {
             e.stopImmediatePropagation();
             e.preventDefault();
 
-            if (this.inputField.attr('type') !== 'hidden') {
+            if (this.isEditing()) {
                 // Only focus on the edit link if the event was not a click, and the new target is not an input field.
                 if (e.type !== 'click' && !$(e.relatedTarget).is(':input')) {
                     this.turnEditingOff(true);
@@ -157,7 +158,7 @@ define(['jquery', 'core/templates'], function($, Template) {
      * @return  {Boolean}            True if edit mode is enabled
      */
     PasswordUnmask.prototype.isEditing = function() {
-        return this.inputField.attr('type') !== 'hidden';
+        return this.inputField.hasClass('d-inline-block');
     };
 
     /**
@@ -176,6 +177,8 @@ define(['jquery', 'core/templates'], function($, Template) {
         }
         this.inputField.val(value);
         this.inputField.attr('size', this.inputField.attr('data-size'));
+        // Show the field.
+        this.inputField.addClass('d-inline-block');
 
         if (this.editInstructions.length) {
             this.inputField.attr('aria-describedby', this.editInstructions.attr('id'));
@@ -211,12 +214,11 @@ define(['jquery', 'core/templates'], function($, Template) {
         $('body').off('focusout', this.wrapperSelector, this.checkFocusOut);
         var value = this.getDisplayValue();
         this.inputField
-            // Hide the field again.
-            .attr('type', 'hidden')
-
             // Ensure that the aria-describedby is removed.
             .attr('aria-describedby', null);
         this.inputField.val(value);
+        // Hide the field again.
+        this.inputField.removeClass('d-inline-block');
 
         this.editInstructions.hide();
 

lib/form/selectgroups.php

@@ -561,6 +561,9 @@ class MoodleQuickForm_selectgroups extends HTML_QuickForm_element implements tem
             $optiongroups[] = $og;
         }
         $context['optiongroups'] = $optiongroups;
+        // If the select is a static element and does not allow the user to change the value (Ex: Auth method),
+        // we need to change the label to static.
+        $context['staticlabel'] = $this->_flagFrozen;
 
         return $context;
     }

lib/form/templates/element-header.mustache

@@ -28,7 +28,8 @@
         "helpbutton": "Help"
     }
 }}
-<legend class="d-flex align-items-center">
+<legend class="sr-only">{{{header}}}</legend>
+<div class="d-flex align-items-center mb-2">
     <div class="position-relative d-flex ftoggler align-items-center position-relative mr-1">
         {{#collapseable}}
             <a data-toggle="collapse"
@@ -53,5 +54,5 @@
         </h3>
     </div>
     {{{helpbutton}}}
-</legend>
+</div>
 <div id="{{id}}container" class="fcontainer {{#collapseable}}collapseable collapse {{/collapseable}} {{^collapsed}}show{{/collapsed}}">

lib/form/templates/element-passwordunmask.mustache

@@ -49,12 +49,12 @@
     {{$ element }}
         <span data-passwordunmask="wrapper" data-passwordunmaskid="{{ element.id }}">
             <span data-passwordunmask="editor">
-                <input  type="hidden"
+                <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-inline-block {{# error }}is-invalid{{/ error }}"
+                        class="form-control d-none {{# error }}is-invalid{{/ error }}"
                         data-size="{{ element.size }}"
                         {{# error }}
                             autofocus aria-describedby="{{ element.iderror }}"

lib/form/templates/element-template.mustache

@@ -46,7 +46,7 @@
     <div class="col-md-3 col-form-label d-flex pb-0 pr-md-0">
         {{# label}}{{$ label }}
             {{^element.staticlabel}}
-                <label class="d-inline word-break {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
+                <label id="{{element.id}}_label" class="d-inline word-break {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
                     {{{label}}}
                 </label>
             {{/element.staticlabel}}