function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Amit Singh 2236Amit Singh 2236 

Lightning input password component eye icon to show or hide password logic with caps Lock functionality

Lightning input password component eye icon to show or hide password logic with caps Lock functionality
Best Answer chosen by Amit Singh 2236
Ajay K DubediAjay K Dubedi
Hi Amit,

I have understood your requirement and got a solution, please find it below-
 
<aura:component >
    <aura:attribute name="password" type="String"/>
    <aura:attribute name="showpassword" type="Boolean" default="false"/>
    <div class="slds-form-element slds-p-around_large">
        <label class="slds-form-element__label" for="password_field">Password</label>
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
            <lightning:input variant = "label-hidden" type="{!v.showpassword ? 'text':'password'}" 
                             aura:id="password_field" value="{!v.password}"/>                                    
            <lightning:buttonIcon class="slds-button slds-input__icon slds-text-color--default" 
                                  iconName="{!v.showpassword ? 'utility:hide':'utility:preview'}" 
                                  alternativeText="{!v.coborrowerSSNCB ? 'Hide':'Show'}" 
                                  onclick="{!c.togglePassword}"/>
        </div>
    </div>
</aura:component>




JS Controller----


({
    togglePassword : function(component, event, helper) {
        if(component.get("v.showpassword",true)){
            component.set("v.showpassword",false);
        }else{
            component.set("v.showpassword",true);
        }
    }
})

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com

All Answers

Ajay K DubediAjay K Dubedi
Hi Amit,

I have understood your requirement and got a solution, please find it below-
 
<aura:component >
    <aura:attribute name="password" type="String"/>
    <aura:attribute name="showpassword" type="Boolean" default="false"/>
    <div class="slds-form-element slds-p-around_large">
        <label class="slds-form-element__label" for="password_field">Password</label>
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
            <lightning:input variant = "label-hidden" type="{!v.showpassword ? 'text':'password'}" 
                             aura:id="password_field" value="{!v.password}"/>                                    
            <lightning:buttonIcon class="slds-button slds-input__icon slds-text-color--default" 
                                  iconName="{!v.showpassword ? 'utility:hide':'utility:preview'}" 
                                  alternativeText="{!v.coborrowerSSNCB ? 'Hide':'Show'}" 
                                  onclick="{!c.togglePassword}"/>
        </div>
    </div>
</aura:component>




JS Controller----


({
    togglePassword : function(component, event, helper) {
        if(component.get("v.showpassword",true)){
            component.set("v.showpassword",false);
        }else{
            component.set("v.showpassword",true);
        }
    }
})

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com
This was selected as the best answer
Amit Singh 2236Amit Singh 2236
@ajay Dubedi Could u please help me using ui:inputSecret instead of lightning :input 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Amit,

Greetings to you!

According to the Salesforce doc: https://developer.salesforce.com/docs/component-library/bundle/ui:inputSecret/example

ui:inputSecret has been deprecated. Use lightning:input with password type instead.

In instances where there are matching ui and lightning namespace components, Salesforce recommends that you use the lightning namespace component. The lightning namespace components are optimized for common use cases. Beyond being equipped with the Lightning Design System styling, they handle accessibility, real-time interaction, and enhanced error messages.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/lightning_overview.htm

Please use lightning:input as suggested by Ajay.

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Ajay K DubediAjay K Dubedi
Hi Amit,

If you want to use UI:inputSecret instead of UI: input you will not be able to show the password text because UI:inputSecret does not allow to show the input text.
If you want to eye view to show or hide the password field you should use UI: input and then use a JS to show or hide the password filed.

"A UI:inputSecret component represents a password field, which is rendered as an HTML input tag of type password. To apply Lightning Design System styling, we recommend that you use lightning: input with type="password" instead of ui:inputSecret."

Refer this think-

https://developer.salesforce.com/docs/component-library/bundle/ui:inputSecret/documentation

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com
Amit Singh 2236Amit Singh 2236
@Khan Anas @Ajay K Dubedi When user will click on Enter button he will be able to login for that what attribute we need to use in lightning :input component or we need to add something in div or span