Proyectos de Subversion Moodle

// 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/>.

/**
 * Password Unmask functionality.
 *
 * @module     core_form/passwordunmask
 * @copyright  2016 Andrew Nicols <andrew@nicols.co.uk>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 * @since      3.2
 */
define(['jquery', 'core/templates'], function($, Template) {

    /**
     * Constructor for PasswordUnmask.
     *
     * @class core_form/passwordunmask
     * @param   {String}    elementid   The element to apply the PasswordUnmask to
     */
    var PasswordUnmask = function(elementid) {
        // Setup variables.
        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));
        // Hide the field.
        this.inputField.addClass('d-none');
        this.inputField.removeClass('hiddenifjs');

        if (!this.editInstructions.attr('id')) {
            this.editInstructions.attr('id', elementid + '_instructions');
        }
        this.editInstructions.hide();

        this.setDisplayValue();

        // Add the listeners.
        this.addListeners();
    };

    /**
     * Add the event listeners required for PasswordUnmask.
     *
     * @method  addListeners
     * @return  {PasswordUnmask}
     * @chainable
     */
    PasswordUnmask.prototype.addListeners = function() {
        this.wrapper.on('click keypress', '[data-passwordunmask="edit"]', $.proxy(function(e) {
            if (e.type === 'keypress' && e.keyCode !== 13) {
                return;
            }
            e.stopImmediatePropagation();
            e.preventDefault();

            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);
                } else {
                    this.turnEditingOff(false);
                }
            } else {
                this.turnEditingOn();
            }
        }, this));

        this.wrapper.on('click keypress', '[data-passwordunmask="unmask"]', $.proxy(function(e) {
            if (e.type === 'keypress' && e.keyCode !== 13) {
                return;
            }
            e.stopImmediatePropagation();
            e.preventDefault();

            // Toggle the data attribute.
            this.wrapper.data('unmasked', !this.wrapper.data('unmasked'));

            this.setDisplayValue();
        }, this));

        this.wrapper.on('keydown', 'input', $.proxy(function(e) {
            if (e.type === 'keydown' && e.keyCode !== 13) {
                return;
            }

            e.stopImmediatePropagation();
            e.preventDefault();

            this.turnEditingOff(true);
        }, this));

        this.inputFieldLabel.on('click', $.proxy(function(e) {
            e.preventDefault();

            this.turnEditingOn();
        }, this));

        return this;
    };

    /**
     * Check whether focus was lost from the PasswordUnmask and turn editing off if required.
     *
     * @method  checkFocusOut
     * @param   {EventFacade}   e       The EventFacade generating the suspsected Focus Out
     */
    PasswordUnmask.prototype.checkFocusOut = function(e) {
        if (!this.isEditing()) {
            // Ignore - not editing.
            return;
        }

        window.setTimeout($.proxy(function() {
            // Firefox does not have the focusout event. Instead jQuery falls back to the 'blur' event.
            // The blur event does not have a relatedTarget, so instead we use a timeout and the new activeElement.
            var relatedTarget = e.relatedTarget || document.activeElement;
            if (this.wrapper.has($(relatedTarget)).length) {
                // Ignore, some part of the element is still active.
                return;
            }

            // Only focus on the edit link if the new related target is not an input field or anchor.
            this.turnEditingOff(!$(relatedTarget).is(':input,a'));
        }, this), 100);
    };

    /**
     * Whether the password is currently visible (unmasked).
     *
     * @method  passwordVisible
     * @return  {Boolean}            True if the password is unmasked
     */
    PasswordUnmask.prototype.passwordVisible = function() {
        return !!this.wrapper.data('unmasked');
    };

    /**
     * Whether the user is currently editing the field.
     *
     * @method  isEditing
     * @return  {Boolean}            True if edit mode is enabled
     */
    PasswordUnmask.prototype.isEditing = function() {
        return this.inputField.hasClass('d-inline-block');
    };

    /**
     * Enable the editing functionality.
     *
     * @method  turnEditingOn
     * @return  {PasswordUnmask}
     * @chainable
     */
    PasswordUnmask.prototype.turnEditingOn = function() {
        var value = this.getDisplayValue();
        if (this.passwordVisible()) {
            this.inputField.attr('type', 'text');
        } else {
            this.inputField.attr('type', 'password');
        }
        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'));
            this.editInstructions.show();
        }

        this.wrapper.attr('data-passwordunmask-visible', 1);

        this.editLink.hide();
        this.inputField
            .focus()
            .select();

        // Note, this cannot be added as a delegated listener on init because Firefox does not support the FocusOut
        // event (https://bugzilla.mozilla.org/show_bug.cgi?id=687787) and the blur event does not identify the
        // relatedTarget.
        // The act of focusing the this.inputField means that in Firefox the focusout will be triggered on blur of the edit
        // link anchor.
        $('body').on('focusout', this.wrapperSelector, $.proxy(this.checkFocusOut, this));

        return this;
    };

    /**
     * Disable the editing functionality, optionally focusing on the edit link.
     *
     * @method  turnEditingOff
     * @param   {Boolean}       focusOnEditLink     Whether to focus on the edit link after disabling the editor
     * @return  {PasswordUnmask}
     * @chainable
     */
    PasswordUnmask.prototype.turnEditingOff = function(focusOnEditLink) {
        $('body').off('focusout', this.wrapperSelector, this.checkFocusOut);
        var value = this.getDisplayValue();
        this.inputField
            // 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();

        // Remove the visible attr.
        this.wrapper.removeAttr('data-passwordunmask-visible');

        // Remove the size attr.
        this.inputField.removeAttr('size');

        this.editLink.show();
        this.setDisplayValue();

        if (focusOnEditLink) {
            this.editLink.focus();
        }

        return this;
    };

    /**
     * Get the currently value.
     *
     * @method  getDisplayValue
     * @return  {String}
     */
    PasswordUnmask.prototype.getDisplayValue = function() {
        return this.inputField.val();
    };

    /**
     * Set the currently value in the display, taking into account the current settings.
     *
     * @method  setDisplayValue
     * @return  {PasswordUnmask}
     * @chainable
     */
    PasswordUnmask.prototype.setDisplayValue = function() {
        var value = this.getDisplayValue();
        if (this.isEditing()) {
            if (this.wrapper.data('unmasked')) {
                this.inputField.attr('type', 'text');
            } else {
                this.inputField.attr('type', 'password');
            }
            this.inputField.val(value);
        }

        // Update the display value.
        // Note: This must always be updated.
        // The unmask value can be changed whilst editing and the editing can then be disabled.
        if (value && this.wrapper.data('unmasked')) {
            // There is a value, and we will show it.
            this.displayValue.text(value);
        } else {
            if (!value) {
                value = "";
            }
            // There is a value, but it will be disguised.
            // We use the passwordunmask-fill to allow modification of the fill and to ensure that the display does not
            // change as the page loads the JS.
            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));
        }

        return this;
    };

    return PasswordUnmask;
});