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