1*fb79e54cSYoshie Muranakawindow.angular && (function(angular) { 2*fb79e54cSYoshie Muranaka 'use strict'; 3*fb79e54cSYoshie Muranaka 4*fb79e54cSYoshie Muranaka /** 5*fb79e54cSYoshie Muranaka * Password visibility toggle 6*fb79e54cSYoshie Muranaka * 7*fb79e54cSYoshie Muranaka * This attribute directive will toggle an input type 8*fb79e54cSYoshie Muranaka * from password/text to show/hide the value of a password 9*fb79e54cSYoshie Muranaka * input field. 10*fb79e54cSYoshie Muranaka * 11*fb79e54cSYoshie Muranaka * To use: 12*fb79e54cSYoshie Muranaka * <input type="password" password-visibility-toggle /> 13*fb79e54cSYoshie Muranaka */ 14*fb79e54cSYoshie Muranaka angular.module('app.common.directives') 15*fb79e54cSYoshie Muranaka .directive('passwordVisibilityToggle', [ 16*fb79e54cSYoshie Muranaka '$compile', 17*fb79e54cSYoshie Muranaka function($compile) { 18*fb79e54cSYoshie Muranaka return { 19*fb79e54cSYoshie Muranaka restrict: 'A', 20*fb79e54cSYoshie Muranaka link: function(scope, element) { 21*fb79e54cSYoshie Muranaka const instanceScope = scope.$new(); 22*fb79e54cSYoshie Muranaka const buttonTemplate = ` 23*fb79e54cSYoshie Muranaka <button type="button" 24*fb79e54cSYoshie Muranaka aria-hidden="true" 25*fb79e54cSYoshie Muranaka class="btn btn-tertiary btn-password-toggle" 26*fb79e54cSYoshie Muranaka ng-class="{ 27*fb79e54cSYoshie Muranaka 'password-visible': visible, 28*fb79e54cSYoshie Muranaka 'password-hidden': !visible 29*fb79e54cSYoshie Muranaka }" 30*fb79e54cSYoshie Muranaka ng-click="toggleField()"> 31*fb79e54cSYoshie Muranaka <icon ng-if="!visible" file="icon-visibility-on.svg"></icon> 32*fb79e54cSYoshie Muranaka <icon ng-if="visible" file="icon-visibility-off.svg"></icon> 33*fb79e54cSYoshie Muranaka </button>`; 34*fb79e54cSYoshie Muranaka 35*fb79e54cSYoshie Muranaka instanceScope.visible = false; 36*fb79e54cSYoshie Muranaka instanceScope.toggleField = () => { 37*fb79e54cSYoshie Muranaka instanceScope.visible = !instanceScope.visible; 38*fb79e54cSYoshie Muranaka const type = instanceScope.visible ? 'text' : 'password'; 39*fb79e54cSYoshie Muranaka element.attr('type', type); 40*fb79e54cSYoshie Muranaka }; 41*fb79e54cSYoshie Muranaka element.after($compile(buttonTemplate)(instanceScope)); 42*fb79e54cSYoshie Muranaka } 43*fb79e54cSYoshie Muranaka }; 44*fb79e54cSYoshie Muranaka } 45*fb79e54cSYoshie Muranaka ]); 46*fb79e54cSYoshie Muranaka})(window.angular); 47