allow for programmatic input to text and textarea-secret fields

awx/ui/client/lib/components/form/form.directive.js

@@ -38,6 +38,10 @@ function AtFormController (eventService, strings) {
         component.category = category;
         component.form = vm.state;
 
+        if (category === 'input') {
+            scope.state[component.state.id] = component.state;
+        }
+
         vm.components.push(component);
     };
 
@@ -189,6 +193,7 @@ function AtFormController (eventService, strings) {
             for (let j = 0; j < vm.components.length; j++) {
                 if (components[i] === vm.components[j].state) {
                     vm.components.splice(j, 1);
+                    delete scope.state[components[i].id];
                     break;
                 }
             }

awx/ui/client/lib/components/input/base.controller.js

@@ -85,9 +85,7 @@ function BaseInputController (strings) {
             vm.updateValidationState(result);
         };
 
-        vm.toggleRevertReplace = () => {
+        vm.onRevertReplaceToggle = () => {
-            scope.state._isBeingReplaced = !scope.state._isBeingReplaced;
-
             if (!scope.state._isBeingReplaced) {
                 scope.state._buttonText = vm.strings.get('REPLACE');
                 scope.state._disabled = true;

awx/ui/client/lib/components/input/text.directive.js

@@ -14,10 +14,14 @@ function atInputTextLink (scope, element, attrs, controllers) {
 function AtInputTextController (baseInputController) {
     const vm = this || {};
 
-    vm.init = (scope, element, form) => {
+    let scope;
-        baseInputController.call(vm, 'input', scope, element, form);
+
+    vm.init = (_scope_, element, form) => {
+        baseInputController.call(vm, 'input', _scope_, element, form);
+        scope = _scope_;
 
         vm.check();
+        scope.$watch('state._value', () => vm.check());
     };
 }
 

awx/ui/client/lib/components/input/text.partial.html

@@ -8,7 +8,6 @@
                ng-attr-maxlength="{{ state.max_length || undefined }}"
                ng-attr-tabindex="{{ tab || undefined }}"
                ng-attr-placeholder="{{::state._placeholder || undefined }}"
-               ng-change="vm.check()"
                ng-disabled="state._disabled || form.disabled" />
 
         <at-input-message></at-input-message>

awx/ui/client/lib/components/input/textarea-secret.directive.js

@@ -21,6 +21,7 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
         baseInputController.call(vm, 'input', _scope_, element, form);
 
         scope = _scope_;
+
         [textarea] = element.find('textarea');
 
         if (scope.state.format === 'ssh_private_key') {
@@ -38,10 +39,15 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
         }
 
         vm.check();
+
+        scope.$watch('state[state._activeModel]', () => vm.check());
+        scope.$watch('state._isBeingReplaced', () => vm.onIsBeingReplacedChanged());
     };
 
-    vm.toggle = () => {
+    vm.onIsBeingReplacedChanged = () => {
-        vm.toggleRevertReplace();
+        if (!scope.state._touched) return;
+
+        vm.onRevertReplaceToggle();
 
         if (scope.state._isBeingReplaced) {
             scope.state._placeholder = '';
@@ -50,7 +56,10 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
         } else {
             scope.state._displayHint = false;
             scope.state._placeholder = vm.strings.get('ENCRYPTED');
-            eventService.remove(vm.listeners);
+
+            if (vm.listeners) {
+                eventService.remove(vm.listeners);
+            }
         }
     };
 

awx/ui/client/lib/components/input/textarea-secret.partial.html

@@ -6,7 +6,7 @@
             <div ng-if="state._edit" class="input-group-btn at-InputGroup-button">
                 <button class="btn at-ButtonHollow--white at-Input-button--fixed-md"
                         ng-disabled="!state._enableToggle && (state._disabled || form.disabled)"
-                        ng-click="vm.toggle()">
+                        ng-click="state._isBeingReplaced = !state._isBeingReplaced">
                     {{ state._buttonText }}
                 </button>
             </div>
@@ -22,7 +22,6 @@
                       ng-attr-maxlength="{{ state.max_length || undefined }}"
                       ng-attr-tabindex="{{ tab || undefined }}"
                       ng-attr-placeholder="{{state._placeholder || undefined }}"
-                      ng-change="vm.check()"
                       ng-disabled="state._disabled || form.disabled" />
             </textarea>
         </div>