From 6e181e81eafce5216e49a0cec3b202c183e3c316 Mon Sep 17 00:00:00 2001
From: gconsidine <greg@greg-considine.com>
Date: Fri, 9 Jun 2017 21:01:26 -0400
Subject: [PATCH] Add revert/replace and prompt/not-prompt logic (wip)

---
 .../lib/components/input/base.controller.js   | 57 ++++++++++++++++---
 .../lib/components/input/label.partial.html   |  2 +-
 .../lib/components/input/secret.directive.js  | 38 ++++---------
 .../lib/components/input/secret.partial.html  |  4 +-
 .../input/textarea-secret.directive.js        | 46 +++++++--------
 .../input/textarea-secret.partial.html        | 17 +++---
 awx/ui/client/lib/models/Base.js              |  1 +
 7 files changed, 89 insertions(+), 76 deletions(-)

diff --git a/awx/ui/client/lib/components/input/base.controller.js b/awx/ui/client/lib/components/input/base.controller.js
index 626fe552a8..97f0338e4d 100644
--- a/awx/ui/client/lib/components/input/base.controller.js
+++ b/awx/ui/client/lib/components/input/base.controller.js
@@ -1,6 +1,7 @@
 const REQUIRED_INPUT_MISSING_MESSAGE = 'Please enter a value.';
 const DEFAULT_INVALID_INPUT_MESSAGE = 'Invalid input for this type.';
-const PROMPT_ON_LAUNCH = 'ASK';
+const PROMPT_ON_LAUNCH_VALUE = 'ASK';
+const ENCRYPTED_VALUE = '$encrypted$';
 
 function BaseInputController () {
     return function extend (type, scope, element, form) {
@@ -14,12 +15,24 @@ function BaseInputController () {
 
         if (scope.state.ask_at_runtime) {
             scope.state._displayPromptOnLaunch = true;
+        }
 
-            if (scope.state._value === 'ASK') {
+        if (scope.state._value) {
+            scope.state._edit = true;
+            scope.state._preEditValue = scope.state._value;
+
+            if (scope.state._value === PROMPT_ON_LAUNCH_VALUE) {
                 scope.state._promptOnLaunch = true;
                 scope.state._disabled = true;
-            } else {
-                scope.state._promptOnLaunch = false;
+                scope.state._displayValue = '';
+            }
+
+            if (scope.state._value === ENCRYPTED_VALUE) {
+                scope.state._displayRevertReplace = true;
+                scope.state._enableToggle = true;
+                scope.state._disabled = true;
+                scope.state._isBeingReplaced = false;
+                scope.state._displayValue = '';
             }
         }
 
@@ -59,18 +72,44 @@ function BaseInputController () {
 
                 form.check();
             }
+
+            console.log('check', scope.state);
+        };
+
+        vm.toggleRevertReplace = () => {
+            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 = '';
+            } else {
+                scope.state._buttonText = 'REVERT';
+                scope.state._disabled = false;
+                scope.state._enableToggle = false;
+                scope.state._displayValue = '';
+                scope.state._value = '';
+            }
+
+            scope.state._isBeingReplaced = !scope.state._isBeingReplaced;
         };
 
         vm.togglePromptOnLaunch = () => {
             if (scope.state._promptOnLaunch) {
-                scope.state._priorValue = scope.state._value;
-                scope.state._value = PROMPT_ON_LAUNCH;
+                scope.state._value = PROMPT_ON_LAUNCH_VALUE;
                 scope.state._displayValue = '';
                 scope.state._disabled = true;
+                scope.state._enableToggle = false;
             } else {
-                scope.state._value = scope.state._priorValue;
-                scope.state._displayValue = scope.state._value;
-                scope.state._disabled = false;
+                scope.state._value = scope.state._preEditValue;
+                scope.state._displayValue = '';
+
+                if (!scope.state._isBeingReplaced) {
+                    scope.state._disabled = true;
+                    scope.state._enableToggle = true;
+                } else {
+                    scope.state._disabled = false;
+                }
             }
             
             vm.check();
diff --git a/awx/ui/client/lib/components/input/label.partial.html b/awx/ui/client/lib/components/input/label.partial.html
index d3c86174c4..b771232e8f 100644
--- a/awx/ui/client/lib/components/input/label.partial.html
+++ b/awx/ui/client/lib/components/input/label.partial.html
@@ -2,7 +2,7 @@
     <span ng-if="state.required" class="at-InputLabel-required">*</span>
     <span class="at-InputLabel-name">{{::state.label}}</span>
     <at-popover state="state"></at-popover>
-    <span ng-if="state._hint" class="at-InputLabel-hint">{{::state._hint}}</span>
+    <span ng-if="state._displayHint" class="at-InputLabel-hint">{{::state._hint}}</span>
     <div ng-if="state._displayPromptOnLaunch" class="at-InputLabel-checkbox pull-right">
         <label class="at-InputLabel-checkboxLabel">
             <input type="checkbox" 
diff --git a/awx/ui/client/lib/components/input/secret.directive.js b/awx/ui/client/lib/components/input/secret.directive.js
index c94a26676d..2f5e0337c3 100644
--- a/awx/ui/client/lib/components/input/secret.directive.js
+++ b/awx/ui/client/lib/components/input/secret.directive.js
@@ -20,51 +20,33 @@ function AtInputSecretController (baseInputController) {
         scope = _scope_;
 
         if (!scope.state._value || scope.state._promptOnLaunch) {
+            scope.state._buttonText = 'SHOW';
             scope.type = 'password';
-            scope.buttonText = 'SHOW';
 
-            vm.toggle = vm.toggleAddState;
+            vm.toggle = vm.toggleShowHide;
         } else {
-            scope.type = 'password';
-            scope.edit = true;
-            scope.replace = false;
-            scope.buttonText = 'REPLACE';
-
-            vm.toggle = vm.toggleEditState;
+            scope.state._buttonText = 'REPLACE';
+            vm.toggle = vm.toggleRevertReplace;
         }
 
-        vm.check();
+        vm.updateValue();
     };
 
-    vm.updateValue = value => {
-        if (!scope.edit || scope.replace) {
+    vm.updateValue = () => {
+        if (!scope.state._promptOnLaunch && (!scope.state._displayRevertReplace || !scope.state._isBeingReplaced)) {
             scope.state._value = scope.state._displayValue;
         }
 
         vm.check();
     };
 
-    vm.toggleEditState = () => {
-        scope.state._dislpayValue = '';
-
-        if (scope.replace) {
-            scope.buttonText = 'REPLACE';
-            scope.state._disabled = true;
-        } else {
-            scope.buttonText = 'REVERT';
-            scope.state._disabled = false
-        }
-
-        scope.replace = !scope.replace;
-    };
-
-    vm.toggleAddState = () => {
+    vm.toggleShowHide = () => {
         if (scope.type === 'password') {
             scope.type = 'text';
-            scope.buttonText = 'HIDE';
+            scope.state._buttonText = 'HIDE';
         } else {
             scope.type = 'password';
-            scope.buttonText = 'SHOW';
+            scope.state._buttonText = 'SHOW';
         }
     };
 }
diff --git a/awx/ui/client/lib/components/input/secret.partial.html b/awx/ui/client/lib/components/input/secret.partial.html
index 06eba86e7f..fe5eb00242 100644
--- a/awx/ui/client/lib/components/input/secret.partial.html
+++ b/awx/ui/client/lib/components/input/secret.partial.html
@@ -5,9 +5,9 @@
         <div class="input-group">
             <span class="input-group-btn">
                 <button class="btn at-ButtonHollow--white at-Input-button"
-                        ng-disabled="state._disabled || form.disabled"
+                        ng-disabled="!state._enableToggle && (state._disabled || form.disabled)"
                         ng-click="vm.toggle()">
-                    {{ buttonText }}
+                    {{ state._buttonText }}
                 </button>
             </span>
             <input type="{{ type }}"
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 4ac462fbd0..f6d512ca05 100644
--- a/awx/ui/client/lib/components/input/textarea-secret.directive.js
+++ b/awx/ui/client/lib/components/input/textarea-secret.directive.js
@@ -28,29 +28,37 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
 
         if (scope.state.format === 'ssh_private_key') {
             scope.ssh = true;
+            scope.state._hint = scope.state._hint || DEFAULT_HINT;
             input = element.find('input')[0];
         }
 
         if (scope.state._value) {
-            scope.edit = true;
-            scope.replace = false;
-            scope.buttonText = 'REPLACE';
+            scope.state._buttonText = 'REPLACE';
         } else {
-            scope.state._hint = scope.state._hint || DEFAULT_HINT;
-
             if (scope.state.format === 'ssh_private_key') {
                 vm.listeners = vm.setFileListeners(textarea, input);
+                scope.state._displayHint = true;
             }
         }
 
-        vm.updateModel();
+        vm.updateValue();
     };
 
-    vm.updateModel = (value) => {
-        if (!scope.edit || scope.replace) {
-            scope.state._value = scope.displayModel;
+    vm.toggle = () => {
+        if (scope.state._revert) {
+            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();
     };
 
@@ -79,28 +87,12 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
 
     vm.readFile = (reader, event) => {
         scope.$apply(() => {
-            scope.displayModel = reader.result;
-            vm.updateModel();
+            scope.state._displayValue = reader.result;
+            vm.updateValue();
             scope.drag = false
             input.value = '';
         });
     };
-
-    vm.toggle = () => {
-        scope.displayModel = undefined;
-
-        if (scope.replace) {
-            scope.buttonText = 'REPLACE';
-            scope.state._hint = '';
-            eventService.remove(vm.listeners);
-        } else {
-            scope.buttonText = 'REVERT';
-            scope.state._hint = scope.state._hint || DEFAULT_HINT;
-            vm.listeners = vm.setFileListeners(textarea, input);
-        }
-
-        scope.replace = !scope.replace;
-    };
 }
 
 AtInputTextareaSecretController.$inject = ['BaseInputController', 'EventService'];
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 0b01e29323..2fce6836fb 100644
--- a/awx/ui/client/lib/components/input/textarea-secret.partial.html
+++ b/awx/ui/client/lib/components/input/textarea-secret.partial.html
@@ -2,13 +2,12 @@
     <div class="form-group at-u-flat">
         <at-input-label></at-input-label>
 
-        <div ng-class="{ 'input-group': edit }">
-            <span ng-if="edit" class="input-group-btn at-InputGroup-button">
-                <button ng-if="edit"
-                        class="btn at-ButtonHollow--white at-Input-button"
-                        ng-disabled="state._disabled || form.disabled"
+        <div ng-class="{ 'input-group': state._edit }">
+            <span ng-if="state._edit" class="input-group-btn at-InputGroup-button">
+                <button class="btn at-ButtonHollow--white at-Input-button"
+                        ng-disabled="!state._enableToggle && (state._disabled || form.disabled)"
                         ng-click="vm.toggle()">
-                    {{ buttonText }}
+                    {{ state._buttonText }}
                 </button>
             </span>
             <input ng-show="ssh"
@@ -17,13 +16,13 @@
                    type="file"
                    name="files" />
             <textarea class="form-control at-Input at-Textarea"
-                      ng-model="displayModel"
+                      ng-model="state._displayValue"
                       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.updateModel()"
-                      ng-disabled="(state._disabled || form.disabled) || (state._encrypted && !replace)" />
+                      ng-change="vm.updateValue()"
+                      ng-disabled="state._disabled || form.disabled" />
             </textarea>
         </div>
 
diff --git a/awx/ui/client/lib/models/Base.js b/awx/ui/client/lib/models/Base.js
index 973561d7a9..ae3843f036 100644
--- a/awx/ui/client/lib/models/Base.js
+++ b/awx/ui/client/lib/models/Base.js
@@ -44,6 +44,7 @@ function httpPost (data) {
 }
 
 function httpPut (changes) {
+    console.log(this.get(), changes);
     let model = Object.assign(this.get(), changes);
 
     let req = {