Add prompt on launch and checkbox

awx/ui/client/lib/components/index.js

@@ -1,6 +1,7 @@
 import actionGroup from './action/action-group.directive';
 import form from './form/form.directive';
 import formAction from './form/action.directive';
+import inputCheckbox from './input/checkbox.directive';
 import inputGroup from './input/group.directive';
 import inputLabel from './input/label.directive';
 import inputMessage from './input/message.directive';
@@ -25,6 +26,7 @@ angular
     .directive('atActionGroup', actionGroup)
     .directive('atForm', form)
     .directive('atFormAction', formAction)
+    .directive('atInputCheckbox', inputCheckbox)
     .directive('atInputGroup', inputGroup)
     .directive('atInputLabel', inputLabel)
     .directive('atInputMessage', inputMessage)

awx/ui/client/lib/components/input/_index.less

@@ -15,6 +15,17 @@
     }
 }
 
+.at-Checkbox {
+    margin: 0;
+    padding: 0;
+
+    & > input[type=checkbox] {
+        height: @at-input-height;
+        margin: 0;
+        padding: 0;
+    }
+}
+
 .at-InputGroup-button {
     height: 100%;
 }
@@ -86,6 +97,7 @@
 
 .at-InputLabel {
     display: inline-block;
+    width: 100%;
 }
 
 .at-InputLabel-name {
@@ -103,6 +115,30 @@
     line-height: @at-line-height-short;
 }
 
+.at-InputLabel-checkbox {
+    margin: 0;
+    padding: 0;
+}
+
+.at-InputLabel-checkboxLabel {
+    margin-bottom: 0;
+
+    & > input[type=checkbox] {
+        margin: 0 @at-space 0 0;
+        position: relative;
+        top: @at-space;
+    }
+
+    & > p {
+        font-size: @at-font-size;
+        color: @at-gray-dark-4x;
+        font-weight: @at-font-weight;
+        display: inline;
+        margin: 0;
+        padding: 0;
+    }
+}
+
 .at-InputMessage--rejected {
     font-size: @at-font-size; 
     color: @at-red;

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

@@ -1,5 +1,6 @@
 const REQUIRED_INPUT_MISSING_MESSAGE = 'Please enter a value.';
 const DEFAULT_INVALID_INPUT_MESSAGE = 'Invalid input for this type.';
+const PROMPT_ON_LAUNCH = 'ASK';
 
 function BaseInputController () {
     return function extend (type, scope, element, form) {
@@ -11,6 +12,17 @@ function BaseInputController () {
         scope.state._isValid = scope.state.isValid || false;
         scope.state._disabled = scope.state.disabled || false;
 
+        if (scope.state.ask_at_runtime) {
+            scope.state._displayPromptOnLaunch = true;
+
+            if (scope.state._value === 'ASK') {
+                scope.state._promptOnLaunch = true;
+                scope.state._disabled = true;
+            } else {
+                scope.state._promptOnLaunch = false;
+            }
+        }
+
         form.register(type, scope);
 
         vm.validate = () => {
@@ -48,6 +60,21 @@ function BaseInputController () {
                 form.check();
             }
         };
+
+        vm.togglePromptOnLaunch = () => {
+            if (scope.state._promptOnLaunch) {
+                scope.state._priorValue = scope.state._value;
+                scope.state._value = PROMPT_ON_LAUNCH;
+                scope.state._displayValue = '';
+                scope.state._disabled = true;
+            } else {
+                scope.state._value = scope.state._priorValue;
+                scope.state._displayValue = scope.state._value;
+                scope.state._disabled = false;
+            }
+            
+            vm.check();
+        };
     };
 }
 

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

@@ -0,0 +1,14 @@
+<div class="col-sm-{{::col}}">
+    <div class="form-group at-u-flat">
+        <at-input-label></at-input-label>
+            <div class="checkbox at-Checkbox">
+                <input type="checkbox"
+                       ng-class="{ 'at-Input--rejected': state.rejected }"
+                       ng-model="state._value"
+                       ng-attr-tabindex="{{ tab || undefined }}"
+                       ng-change="vm.check()"
+                       ng-disabled="state._disabled || form.disabled" />
+            </div>
+        <at-input-message></at-input-message>
+    </div>
+</div>

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

@@ -94,6 +94,8 @@ function AtInputGroupController ($scope, $compile) {
             }
         } else if (input.type === 'number') {
             config._component = 'at-input-number';
+        } else if (input.type === 'boolean') {
+            config._component = 'at-input-checkbox';
         } else if (input.choices) {
             config._component = 'at-input-select';
             config._format = 'array';

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

@@ -3,4 +3,12 @@
     <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>
+    <div ng-if="state._displayPromptOnLaunch" class="at-InputLabel-checkbox pull-right">
+        <label class="at-InputLabel-checkboxLabel">
+            <input type="checkbox" 
+                   ng-model="state._promptOnLaunch"
+                   ng-change="vm.togglePromptOnLaunch()" />
+            <p>Prompt on launch?</p>
+        </label>
+    </div>
 </label>

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

@@ -19,7 +19,7 @@ function AtInputSecretController (baseInputController) {
 
         scope = _scope_;
 
-        if (!scope.state._value) {
+        if (!scope.state._value || scope.state._promptOnLaunch) {
             scope.type = 'password';
             scope.buttonText = 'SHOW';
 
@@ -36,21 +36,23 @@ function AtInputSecretController (baseInputController) {
         vm.check();
     };
 
-    vm.updateModel = value => {
+    vm.updateValue = value => {
         if (!scope.edit || scope.replace) {
-            scope.state._value = scope.displayModel;
+            scope.state._value = scope.state._displayValue;
         }
 
         vm.check();
     };
 
     vm.toggleEditState = () => {
-        scope.displayModel = '';
+        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;

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

@@ -12,13 +12,13 @@
             </span>
             <input type="{{ type }}"
                    class="form-control at-Input"
-                   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-change="vm.updateValue()"
-                   ng-disabled="(state._disabled || form.disabled) || (state._encrypted && !replace)" />
+                   ng-disabled="state._disabled || form.disabled" />
         </div>
 
         <at-input-message></at-input-message>

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

@@ -2,8 +2,7 @@
     <div class="form-group at-u-flat">
         <at-input-label></at-input-label>
 
-        <input type="text"
+        <input type="text" class="form-control at-Input" 
-               class="form-control at-Input" 
                ng-class="{ 'at-Input--rejected': state._rejected }"
                ng-model="state._value"
                ng-attr-maxlength="{{ state.max_length || undefined }}"

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

@@ -22,7 +22,7 @@ function httpGet (resource) {
 
         return $q.resolve();
     } else if (resource) {
-        req.url = `${this.path}/${resource}`;
+        req.url = `${this.path}${resource}/`;
     }
 
     return $http(req)
@@ -62,7 +62,7 @@ function httpOptions (resource) {
     };
 
     if (resource) {
-        req.url = `${this.path}/${resource}`;
+        req.url = `${this.path}${resource}/`;
     }
 
     return $http(req)

awx/ui/client/lib/theme/_variables.less

@@ -62,9 +62,9 @@
 
 // 4. Input ---------------------------------------------------------------------------------------
 @at-input-button-width: 72px;
+@at-input-height: 30px;
 
 // 5. Misc ----------------------------------------------------------------------------------------
 @at-border-radius: 5px;
-@at-input-height: 30px;
 @at-popover-width: 320px;
 @at-inset-width: 5px;