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

<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);
        }
    }
})