From 1be9c3ba9405c674e69cc1ecef31fce1ecb5c6c5 Mon Sep 17 00:00:00 2001
From: gconsidine <greg@greg-considine.com>
Date: Fri, 9 Jun 2017 22:07:34 -0400
Subject: [PATCH] Add sensible revert logic to prompt and secret inputs

---
 .../lib/components/input/base.controller.js   | 27 +++++++++----------
 .../lib/components/input/secret.directive.js  |  8 ------
 .../lib/components/input/secret.partial.html  |  4 +--
 .../input/textarea-secret.directive.js        | 18 +++++--------
 .../input/textarea-secret.partial.html        |  4 +--
 5 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/awx/ui/client/lib/components/input/base.controller.js b/awx/ui/client/lib/components/input/base.controller.js
index 97f0338e4d..729dd6cb11 100644
--- a/awx/ui/client/lib/components/input/base.controller.js
+++ b/awx/ui/client/lib/components/input/base.controller.js
@@ -12,6 +12,7 @@ function BaseInputController () {
         scope.state._required = scope.state.required || false;
         scope.state._isValid = scope.state.isValid || false;
         scope.state._disabled = scope.state.disabled || false;
+        scope.state._activeModel = '_value';
 
         if (scope.state.ask_at_runtime) {
             scope.state._displayPromptOnLaunch = true;
@@ -24,7 +25,7 @@ function BaseInputController () {
             if (scope.state._value === PROMPT_ON_LAUNCH_VALUE) {
                 scope.state._promptOnLaunch = true;
                 scope.state._disabled = true;
-                scope.state._displayValue = '';
+                scope.state._activeModel = '_displayValue';
             }
 
             if (scope.state._value === ENCRYPTED_VALUE) {
@@ -32,7 +33,7 @@ function BaseInputController () {
                 scope.state._enableToggle = true;
                 scope.state._disabled = true;
                 scope.state._isBeingReplaced = false;
-                scope.state._displayValue = '';
+                scope.state._activeModel = '_displayValue';
             }
         }
 
@@ -72,43 +73,41 @@ function BaseInputController () {
 
                 form.check();
             }
-
-            console.log('check', scope.state);
         };
 
         vm.toggleRevertReplace = () => {
-            if (scope.state._isBeingReplaced) {
+            scope.state._isBeingReplaced = !scope.state._isBeingReplaced;
+
+            if (!scope.state._isBeingReplaced) {
                 scope.state._buttonText = 'REPLACE';
                 scope.state._disabled = true;
                 scope.state._enableToggle = true;
                 scope.state._value = scope.state._preEditValue;
-                scope.state._displayValue = '';
+                scope.state._activeModel = '_displayValue';
             } else {
                 scope.state._buttonText = 'REVERT';
                 scope.state._disabled = false;
                 scope.state._enableToggle = false;
-                scope.state._displayValue = '';
+                scope.state._activeModel = '_value';
                 scope.state._value = '';
             }
-
-            scope.state._isBeingReplaced = !scope.state._isBeingReplaced;
         };
 
         vm.togglePromptOnLaunch = () => {
             if (scope.state._promptOnLaunch) {
                 scope.state._value = PROMPT_ON_LAUNCH_VALUE;
-                scope.state._displayValue = '';
+                scope.state._activeModel = '_displayValue';
                 scope.state._disabled = true;
                 scope.state._enableToggle = false;
             } else {
-                scope.state._value = scope.state._preEditValue;
-                scope.state._displayValue = '';
-
-                if (!scope.state._isBeingReplaced) {
+                if (scope.state._isBeingReplaced === false) {
                     scope.state._disabled = true;
                     scope.state._enableToggle = true;
+                    scope.state._value = scope.state._preEditValue;
                 } else {
+                    scope.state._activeModel = '_value';
                     scope.state._disabled = false;
+                    scope.state._value = ''; 
                 }
             }
             
diff --git a/awx/ui/client/lib/components/input/secret.directive.js b/awx/ui/client/lib/components/input/secret.directive.js
index 2f5e0337c3..c17933868d 100644
--- a/awx/ui/client/lib/components/input/secret.directive.js
+++ b/awx/ui/client/lib/components/input/secret.directive.js
@@ -29,14 +29,6 @@ function AtInputSecretController (baseInputController) {
             vm.toggle = vm.toggleRevertReplace;
         }
 
-        vm.updateValue();
-    };
-
-    vm.updateValue = () => {
-        if (!scope.state._promptOnLaunch && (!scope.state._displayRevertReplace || !scope.state._isBeingReplaced)) {
-            scope.state._value = scope.state._displayValue;
-        }
-
         vm.check();
     };
 
diff --git a/awx/ui/client/lib/components/input/secret.partial.html b/awx/ui/client/lib/components/input/secret.partial.html
index fe5eb00242..2445338d88 100644
--- a/awx/ui/client/lib/components/input/secret.partial.html
+++ b/awx/ui/client/lib/components/input/secret.partial.html
@@ -12,12 +12,12 @@
             </span>
             <input type="{{ type }}"
                    class="form-control at-Input"
-                   ng-model="state._displayValue"
+                   ng-model="state[state._activeModel]"
                    ng-class="{ 'at-Input--rejected': state._rejected }"
                    ng-attr-maxlength="{{ state.max_length || undefined }}"
                    ng-attr-tabindex="{{ tab || undefined }}"
                    ng-attr-placeholder="{{::state._placeholder || undefined }}"
-                   ng-change="vm.updateValue()"
+                   ng-change="vm.check()"
                    ng-disabled="state._disabled || form.disabled" />
         </div>
 
diff --git a/awx/ui/client/lib/components/input/textarea-secret.directive.js b/awx/ui/client/lib/components/input/textarea-secret.directive.js
index f6d512ca05..3ad318b63a 100644
--- a/awx/ui/client/lib/components/input/textarea-secret.directive.js
+++ b/awx/ui/client/lib/components/input/textarea-secret.directive.js
@@ -41,25 +41,19 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
             }
         }
 
-        vm.updateValue();
+        vm.check();
     };
 
     vm.toggle = () => {
-        if (scope.state._revert) {
+        vm.toggleRevertReplace();
+
+        if (scope.state._isBeingReplaced) {
             scope.state._displayHint = true;
             vm.listeners = vm.setFileListeners(textarea, input);
         } else {
             scope.state._displayHint = false;
             eventService.remove(vm.listeners);
         }
-
-        vm.toggleRevertReplace();
-    };
-
-    vm.updateValue = () => {
-        scope.state._value = scope.state._displayValue;
-
-        vm.check();
     };
 
     vm.setFileListeners = (textarea, input) => { 
@@ -87,8 +81,8 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
 
     vm.readFile = (reader, event) => {
         scope.$apply(() => {
-            scope.state._displayValue = reader.result;
-            vm.updateValue();
+            scope.state._value = reader.result;
+            vm.check();
             scope.drag = false
             input.value = '';
         });
diff --git a/awx/ui/client/lib/components/input/textarea-secret.partial.html b/awx/ui/client/lib/components/input/textarea-secret.partial.html
index 2fce6836fb..14c97eaf37 100644
--- a/awx/ui/client/lib/components/input/textarea-secret.partial.html
+++ b/awx/ui/client/lib/components/input/textarea-secret.partial.html
@@ -16,12 +16,12 @@
                    type="file"
                    name="files" />
             <textarea class="form-control at-Input at-Textarea"
-                      ng-model="state._displayValue"
+                      ng-model="state[state._activeModel]"
                       ng-class="{ 'at-Input--rejected': state._rejected }"
                       ng-attr-maxlength="{{ state.max_length || undefined }}"
                       ng-attr-tabindex="{{ tab || undefined }}"
                       ng-attr-placeholder="{{::state._placeholder || undefined }}"
-                      ng-change="vm.updateValue()"
+                      ng-change="vm.check()"
                       ng-disabled="state._disabled || form.disabled" />
             </textarea>
         </div>