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