enable input source linking for password fields

awx/ui/client/features/credentials/add-edit-credentials.controller.js

@@ -221,6 +221,7 @@ function AddEditCredentialsController (
         vm.form[field].tagMode = true;
         vm.form[field].asTag = false;
         vm.form[field]._value = '';
+        vm.form[field]._tagValue = '';
         vm.inputSources.items = vm.inputSources.items
             .filter(({ input_field_name }) => input_field_name !== field);
     };
@@ -239,7 +240,13 @@ function AddEditCredentialsController (
             vm.inputSources.credentialName = name;
             vm.inputSources.credentialTypeId = credential_type_id;
             vm.inputSources._value = credential_type_id;
+        } else {
+            vm.inputSources.credentialId = null;
+            vm.inputSources.credentialName = null;
+            vm.inputSources.credentialTypeId = null;
+            vm.inputSources._value = null;
         }
+
         setInputSourceTab('credential');
         vm.inputSources.field = field;
     };
@@ -324,7 +331,8 @@ function AddEditCredentialsController (
         vm.inputSources.metadataInputs = null;
         unsetInputSourceTabs();
         // We've linked this field to a credential, so display value as a credential tag
-        vm.form[field]._value = credentialName;
+        vm.form[field]._value = '';
+        vm.form[field]._tagValue = credentialName;
         vm.form[field].asTag = true;
     };
 

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

@@ -21,17 +21,13 @@ function AtInputSecretController (baseInputController) {
 
         scope = _scope_;
         scope.type = 'password';
+        scope.state._show = false;
 
         if (!scope.state._value || scope.state._promptOnLaunch) {
             scope.mode = 'input';
-            scope.state._buttonText = vm.strings.get('SHOW');
-
-            vm.toggle = vm.toggleShowHide;
         } else {
             scope.mode = 'encrypted';
-            scope.state._buttonText = vm.strings.get('REPLACE');
             scope.state._placeholder = vm.strings.get('ENCRYPTED');
-            vm.toggle = vm.toggleRevertReplace;
         }
 
         vm.check();
@@ -41,15 +37,28 @@ function AtInputSecretController (baseInputController) {
         scope.state._isBeingReplaced = !scope.state._isBeingReplaced;
 
         vm.onRevertReplaceToggle();
+
+        if (scope.state._isBeingReplaced) {
+            if (scope.type !== 'password') {
+                vm.toggleShowHide();
+            }
+        }
     };
 
     vm.toggleShowHide = () => {
         if (scope.type === 'password') {
             scope.type = 'text';
-            scope.state._buttonText = vm.strings.get('HIDE');
+            scope.state._show = true;
         } else {
             scope.type = 'password';
-            scope.state._buttonText = vm.strings.get('SHOW');
+            scope.state._show = false;
+        }
+    };
+
+    vm.onLookupClick = () => {
+        if (scope.state._onInputLookup) {
+            const { id, label, required, type } = scope.state;
+            scope.state._onInputLookup({ id, label, required, type });
         }
     };
 }

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

@@ -3,18 +3,25 @@
         <at-input-label></at-input-label>
 
         <div class="input-group">
-            <span class="input-group-btn at-InputGroup-button input-group-prepend">
+            <span ng-if="state.tagMode" class="input-group-btn input-group-prepend">
-                <button class="btn at-ButtonHollow--white"
+                <button
-                        ng-class="{
+                  class="btn at-ButtonHollow--default at-Input-button"
-                            'at-Input-button--fixed-xs': mode === 'input',
+                  ng-disabled="state._disabled || form.disabled"
-                            'at-Input-button--fixed-sm': mode === 'encrypted'
+                  ng-click="vm.onLookupClick()">
-                        }"
+                    <i class="fa fa-search"></i>
-                        ng-disabled="!state._enableToggle && (state._disabled || form.disabled)"
-                        ng-click="vm.toggle()">
-                    {{ state._buttonText }}
                 </button>
             </span>
-            <input type="{{ type }}"
+            <span ng-if="state.tagMode && state.asTag" class="form-control at-Input">
+              <div class="at-InputTagContainer">
+                <at-tag
+                  ng-show="state._tagValue"
+                  icon="external"
+                  tag="state._tagValue"
+                  remove-tag="state._onRemoveTag(state)"
+                />
+              </div>
+            </span>
+            <input ng-if="!state.asTag" type="{{ type }}"
                    class="form-control at-Input"
                    ng-model="state[state._activeModel]"
                    ng-class="{ 'at-Input--rejected': state._rejected }"
@@ -22,7 +29,26 @@
                    ng-attr-tabindex="{{ tab || undefined }}"
                    ng-attr-placeholder="{{state._placeholder || undefined }}"
                    ng-change="vm.check()"
-                   ng-disabled="state._disabled || form.disabled" />
+                   ng-disabled="state._disabled || form.disabled"
+            />
+            <span ng-show="mode == 'encrypted'" class="input-group-btn input-group-append">
+                <button
+                  class="btn at-ButtonHollow--default at-Input-button"
+                  ng-disabled="state.asTag || (!state._enableToggle && (state._disabled || form.disabled))"
+                  ng-click="vm.toggleRevertReplace()">
+                    <i ng-show="!state._isBeingReplaced" class="fa fa-undo"></i>
+                    <i ng-show="state._isBeingReplaced" class="fa fa-undo fa-flip-horizontal"></i>
+                </button>
+            </span>
+            <span class="input-group-btn input-group-append">
+                <button
+                  class="btn at-ButtonHollow--default at-Input-button"
+                  ng-disabled="state.asTag || state._disabled || form.disabled"
+                  ng-click="vm.toggleShowHide()">
+                    <i ng-show="!state._show" class="fa fa-eye"></i>
+                    <i ng-show="state._show" class="fa fa-eye-slash"></i>
+                </button>
+            </span>
         </div>
 
         <at-input-message></at-input-message>

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

@@ -13,9 +13,9 @@
           <span ng-if="state.asTag" class="form-control at-Input">
             <div class="at-InputTagContainer">
               <at-tag
-                ng-show="state._value"
+                ng-show="state._tagValue"
                 icon="external"
-                tag="state._value"
+                tag="state._tagValue"
                 remove-tag="state._onRemoveTag(state)"
               />
             </div>

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

@@ -45,6 +45,7 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
     };
 
     vm.onIsBeingReplacedChanged = () => {
+        if (!scope.state) return;
         if (!scope.state._touched) return;
 
         vm.onRevertReplaceToggle();

awx/ui/client/lib/models/Credential.js

@@ -78,7 +78,7 @@ function assignInputGroupValues (apiConfig, credentialType) {
             field.asTag = true;
             const { summary_fields } = this.get('related.input_sources.results')
                 .find(({ input_field_name }) => input_field_name === field.id);
-            field._value = summary_fields.source_credential.name;
+            field._tagValue = summary_fields.source_credential.name;
         }
         return field;
     });