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