From 69292df170fc0482e2c86b8db9a88ad6c4344442 Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Thu, 15 Dec 2016 12:05:22 -0500
Subject: [PATCH] Moved toggle password logic to a directive that can be added
 as an attribute of the button.

---
 awx/ui/client/src/shared/directives.js     | 18 ++++++++++++++++++
 awx/ui/client/src/shared/form-generator.js | 15 +--------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/awx/ui/client/src/shared/directives.js b/awx/ui/client/src/shared/directives.js
index 16a0faea9a..3c938d343e 100644
--- a/awx/ui/client/src/shared/directives.js
+++ b/awx/ui/client/src/shared/directives.js
@@ -1133,4 +1133,22 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'JobsHelper'])
             });
         }
     };
+}])
+
+.directive('awPasswordToggle', [function() {
+    return {
+        restrict: 'A',
+        link: function(scope, element) {
+            $(element).click(function() {
+                var buttonInnerHTML = $(element).html();
+                if (buttonInnerHTML.indexOf("Show") > -1) {
+                    $(element).html("Hide");
+                    $(element).closest('.input-group').find('input').first().attr("type", "text");
+                } else {
+                    $(element).html("Show");
+                    $(element).closest('.input-group').find('input').first().attr("type", "password");
+                }
+            });
+        }
+    };
 }]);
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index aca1c2857c..d487efa925 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -846,28 +846,15 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += "\t" + label();
                         if (field.hasShowInputButton) {
                             var tooltip = i18n._("Toggle the display of plaintext.");
-                            field.toggleInput = function(id) {
-                                var buttonId = id + "_show_input_button",
-                                    inputId = id + "_input",
-                                    buttonInnerHTML = $(buttonId).html();
-                                if (buttonInnerHTML.indexOf("Show") > -1) {
-                                    $(buttonId).html("Hide");
-                                    $(inputId).attr("type", "text");
-                                } else {
-                                    $(buttonId).html("Show");
-                                    $(inputId).attr("type", "password");
-                                }
-                            };
                             html += "\<div class='input-group";
                             html += (horizontal) ? " " + getFieldWidth() : "";
                             html += "'>\n";
                             // TODO: make it so that the button won't show up if the mode is edit, hasShowInputButton !== true, and there are no contents in the field.
                             html += "<span class='input-group-btn'>\n";
-                            html += "<button type='button' class='btn btn-default show_input_button Form-passwordButton' ";
+                            html += "<button aw-password-toggle type='button' class='btn btn-default show_input_button Form-passwordButton' ";
                             html += buildId(field, fld + "_show_input_button", this.form);
                             html += `aw-tool-tip='${tooltip}'} aw-tip-placement='top'`;
                             html += "tabindex='-1' ";
-                            html += "ng-click='" + fld + "_field.toggleInput(\"#" + this.form.name + "_" + fld + "\")'";
                             html += (field.ngDisabled) ? "ng-disabled='" + field.ngDisabled + "'" : "";
                             html += ">\n" + field.showInputInnerHTML;
                             html += "\n</button>\n";