add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / field / Password.js

/**\r
 * The Password field creates a password input and is usually created inside a form. Because it creates a password\r
 * field, when the user enters text it will show up as stars. Aside from that, the password field is just a normal text\r
 * field. Here's an example of how to use it in a form:\r
 *\r
 *     @example\r
 *     Ext.create('Ext.form.Panel', {\r
 *         fullscreen: true,\r
 *         items: [\r
 *             {\r
 *                 xtype: 'fieldset',\r
 *                 title: 'Register',\r
 *                 items: [\r
 *                     {\r
 *                         xtype: 'emailfield',\r
 *                         label: 'Email',\r
 *                         name: 'email'\r
 *                     },\r
 *                     {\r
 *                         xtype: 'passwordfield',\r
 *                         label: 'Password',\r
 *                         name: 'password'\r
 *                     }\r
 *                 ]\r
 *             }\r
 *         ]\r
 *     });\r
 *\r
 * Or on its own, outside of a form:\r
 *\r
 *     Ext.create('Ext.field.Password', {\r
 *         label: 'Password',\r
 *         value: 'existingPassword'\r
 *     });\r
 *\r
 * Because the password field inherits from {@link Ext.field.Text textfield} it gains all of the functionality that text\r
 * fields provide, including getting and setting the value at runtime, validations and various events that are fired as\r
 * the user interacts with the component. Check out the {@link Ext.field.Text} docs to see the additional functionality\r
 * available.\r
 */\r
Ext.define('Ext.field.Password', {\r
    extend: 'Ext.field.Text',\r
    xtype: 'passwordfield',\r
    alternateClassName: 'Ext.form.Password',\r
\r
    config: {\r
        /**\r
         * @cfg autoCapitalize\r
         * @inheritdoc\r
         */\r
        autoCapitalize: false,\r
\r
        /**\r
         * @cfg revealable {Boolean}\r
         * Enables the reveal toggle button that will show the password in clear text. This is currently only implemented in the Blackberry theme\r
         */\r
        revealable: false,\r
\r
        /**\r
         * @cfg revealed {Boolean}\r
         * A value of 'true' for this config will show the password from clear text\r
         */\r
        revealed: false,\r
\r
        /**\r
         * @cfg component\r
         * @inheritdoc\r
         */\r
        component: {\r
	        type: 'password'\r
	    }\r
    },\r
\r
    isPassword: true,\r
\r
    initialize: function() {\r
        this.callParent(arguments);\r
        this.addCls(Ext.baseCSSPrefix + 'field-password');\r
    },\r
\r
    updateRevealable: function(newValue, oldValue) {\r
        if (this.$revealIcon) {\r
            this.getComponent().element.removeChild(this.$revealIcon);\r
            this.$revealIcon = null;\r
        }\r
\r
        if(newValue === true) {\r
            this.$revealIcon = new Ext.Element(Ext.Element.create({cls:'x-reveal-icon'}, true));\r
            this.$revealIcon.on({\r
                tap: 'onRevealIconTap',\r
                touchstart: 'onRevealIconPress',\r
                touchend: 'onRevealIconRelease',\r
                scope: this\r
            });\r
            this.getComponent().element.appendChild(this.$revealIcon);\r
        }\r
    },\r
\r
    updateRevealed: function(newValue, oldValue) {\r
        var component = this.getComponent();\r
\r
        if(newValue) {\r
            this.element.addCls(Ext.baseCSSPrefix + 'revealed');\r
            component.setType("text");\r
        } else {\r
            this.element.removeCls(Ext.baseCSSPrefix + 'revealed');\r
            component.setType("password");\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateValue: function(value, oldValue) {\r
        this.toggleRevealIcon(this.isValidTextValue(value));\r
        this.callParent([value, oldValue]);\r
    },\r
\r
    doKeyUp: function(me, e) {\r
        var value = me.getValue(),\r
            valid = me.isValidTextValue(me.getValue());\r
\r
        me.toggleClearIcon(valid);\r
\r
        if (e.browserEvent.keyCode === 13) {\r
            me.fireAction('action', [me, e], 'doAction');\r
        }\r
\r
        me.toggleRevealIcon(valid);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    showRevealIcon: function() {\r
        var me         = this,\r
            value      = me.getValue(),\r
        // allows value to be zero but not undefined or null (other falsey values)\r
            valueValid = value !== undefined && value !== null && value !== "";\r
\r
        if (me.getRevealable() && !me.getDisabled() && valueValid) {\r
            me.element.addCls(Ext.baseCSSPrefix + 'field-revealable');\r
        }\r
\r
        return me;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    hideRevealIcon: function() {\r
        if (this.getRevealable()) {\r
            this.element.removeCls(Ext.baseCSSPrefix + 'field-revealable');\r
        }\r
    },\r
\r
    onRevealIconTap: function(e) {\r
        this.fireAction('revealicontap', [this, e], 'doRevealIconTap');\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    doRevealIconTap: function(me, e) {\r
        me.setRevealed(!this.getRevealed());\r
    },\r
\r
    onRevealIconPress: function() {\r
        this.$revealIcon.addCls(Ext.baseCSSPrefix + 'pressing');\r
    },\r
\r
    onRevealIconRelease: function() {\r
        this.$revealIcon.removeCls(Ext.baseCSSPrefix + 'pressing');\r
    },\r
\r
    privates: {\r
        isValidTextValue: function(value) {\r
            // allows newValue to be zero but not undefined or null (other falsey values)\r
            return (value !== undefined && value !== null && value !== '');\r
        },\r
\r
        toggleRevealIcon: function(state) {\r
            if (state) {\r
                this.showRevealIcon();\r
            } else {\r
                this.hideRevealIcon();\r
            }\r
        }\r
    }\r
});\r