/** * 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: * * ```javascript * @example({ framework: 'extjs' }) * 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' * } * ] * } * ] * }); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtContainer, ExtFormPanel, PasswordField } from '@sencha/ext-react'; * * export default class MyExample extends Component { * render() { * return ( * <ExtContainer layout="center"> * <ExtFormPanel shadow> * <ExtPasswordField * width={200} * label="Password" * required * revealable * /> * </ExtFormPanel> * </ExtContainer> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root-1', * styles: [``], * template: ` * <ExtContainer layout="center"> * <ExtFormPanel shadow="true"> * <ExtPasswordField * width="200" * label="Password" * required="true" * revealable="true" * > * </ExtPasswordField> * </ExtFormPanel> * </ExtContainer> * ` * }) * export class AppComponent {} * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-container layout="center"> * <ext-formpanel shadow="true"> * <ext-passwordfield * width="200" * label="Password" * required="true" * revealable="true" * > * </ext-passwordfield> * </ext-formpanel> * </ext-container> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-container.component'; * import '@sencha/ext-web-components/dist/ext-formpanel.component'; * import '@sencha/ext-web-components/dist/ext-passwordfield.component'; * * export default class PasswordFieldComponent {} * ``` * * 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', requires: [ 'Ext.field.trigger.Reveal' ], config: { /** * @cfg autoCapitalize * @inheritdoc */ autoCapitalize: false, /** * @cfg {Boolean} revealable * Enables the reveal toggle button that will show the password in clear text. */ revealable: false, /** * @cfg {Boolean} revealed * A value of 'true' for this config will show the password from clear text */ revealed: { $value: false, lazy: true } }, /** * @cfg inputType * @inheritdoc */ inputType: 'password', /** * @property classCls * @inheritdoc */ classCls: Ext.baseCSSPrefix + 'passwordfield', revealedCls: Ext.baseCSSPrefix + 'revealed', isPassword: true, applyTriggers: function(triggers, oldTriggers) { if (triggers && this.getRevealable() && !triggers.reveal) { triggers = Ext.apply({ reveal: { type: 'reveal' } }, triggers); } return this.callParent([triggers, oldTriggers]); }, updateRevealed: function(newValue, oldValue) { var me = this; if (newValue) { me.element.addCls(me.revealedCls); me.setInputType("text"); } else { me.element.removeCls(me.revealedCls); me.setInputType("password"); } }, updateValue: function(value, oldValue) { this.syncRevealTrigger(); this.callParent([value, oldValue]); }, doKeyUp: function(me, e) { this.callParent([me, e]); this.syncRevealTrigger(); }, onRevealTap: function(e) { this.fireAction('revealicontap', [this, e], 'doRevealTap'); }, /** * @private */ doRevealTap: function(me, e) { this.setRevealed(!this.getRevealed()); }, privates: { isValidTextValue: function(value) { // allows newValue to be zero but not undefined or null (other falsey values) return (value !== undefined && value !== null && value !== ''); }, syncRevealTrigger: function() { var me = this, triggers = me.getTriggers(), revealTrigger = triggers && triggers.reveal, visible, value; if (revealTrigger) { if (me.getRevealable()) { value = me.getValue(); if (value != null && value !== '' && !me.getDisabled() && !me.getReadOnly()) { visible = true; } } if (visible) { revealTrigger.show(); } else { revealTrigger.hide(); } } } }});