External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-14 21:07:39 -02:30
Code Issues Packages Projects Releases Wiki Activity

Add revert/replace and prompt/not-prompt logic (wip)

Browse Source
This commit is contained in:
gconsidine
2017-06-09 21:01:26 -04:00
parent 2bd11f948a
commit 6e181e81ea
7 changed files with 89 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
awx/ui/client/lib/components/input/base.controller.js
View File

@@ -1,6 +1,7 @@
const REQUIRED_INPUT_MISSING_MESSAGE = 'Please enter a value.'; const REQUIRED_INPUT_MISSING_MESSAGE = 'Please enter a value.';
const DEFAULT_INVALID_INPUT_MESSAGE = 'Invalid input for this type.'; 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 () { function BaseInputController () {
return function extend (type, scope, element, form) { return function extend (type, scope, element, form) {
@@ -14,12 +15,24 @@ function BaseInputController () {
if (scope.state.ask_at_runtime) { if (scope.state.ask_at_runtime) {
scope.state._displayPromptOnLaunch = true; 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._promptOnLaunch = true;
scope.state._disabled = true; scope.state._disabled = true;
} else { scope.state._displayValue = '';
scope.state._promptOnLaunch = false; }
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(); 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 = () => { vm.togglePromptOnLaunch = () => {
if (scope.state._promptOnLaunch) { if (scope.state._promptOnLaunch) {
scope.state._priorValue = scope.state._value; scope.state._value = PROMPT_ON_LAUNCH_VALUE;
scope.state._value = PROMPT_ON_LAUNCH;
scope.state._displayValue = ''; scope.state._displayValue = '';
scope.state._disabled = true; scope.state._disabled = true;
scope.state._enableToggle = false;
} else { } else {
scope.state._value = scope.state._priorValue; scope.state._value = scope.state._preEditValue;
scope.state._displayValue = scope.state._value; scope.state._displayValue = '';
scope.state._disabled = false;
if (!scope.state._isBeingReplaced) {
scope.state._disabled = true;
scope.state._enableToggle = true;
} else {
scope.state._disabled = false;
}
} }
vm.check(); vm.check();

2
awx/ui/client/lib/components/input/label.partial.html
View File

@@ -2,7 +2,7 @@
<span ng-if="state.required" class="at-InputLabel-required">*</span> <span ng-if="state.required" class="at-InputLabel-required">*</span>
<span class="at-InputLabel-name">{{::state.label}}</span> <span class="at-InputLabel-name">{{::state.label}}</span>
<at-popover state="state"></at-popover> <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"> <div ng-if="state._displayPromptOnLaunch" class="at-InputLabel-checkbox pull-right">
<label class="at-InputLabel-checkboxLabel"> <label class="at-InputLabel-checkboxLabel">
<input type="checkbox" <input type="checkbox"

38
awx/ui/client/lib/components/input/secret.directive.js
View File

@@ -20,51 +20,33 @@ function AtInputSecretController (baseInputController) {
scope = _scope_; scope = _scope_;
if (!scope.state._value || scope.state._promptOnLaunch) { if (!scope.state._value || scope.state._promptOnLaunch) {
scope.state._buttonText = 'SHOW';
scope.type = 'password'; scope.type = 'password';
scope.buttonText = 'SHOW';
vm.toggle = vm.toggleAddState; vm.toggle = vm.toggleShowHide;
} else { } else {
scope.type = 'password'; scope.state._buttonText = 'REPLACE';
scope.edit = true; vm.toggle = vm.toggleRevertReplace;
scope.replace = false;
scope.buttonText = 'REPLACE';
vm.toggle = vm.toggleEditState;
} }
vm.check(); vm.updateValue();
}; };
vm.updateValue = value => { vm.updateValue = () => {
if (!scope.edit || scope.replace) { if (!scope.state._promptOnLaunch && (!scope.state._displayRevertReplace || !scope.state._isBeingReplaced)) {
scope.state._value = scope.state._displayValue; scope.state._value = scope.state._displayValue;
} }
vm.check(); vm.check();
}; };
vm.toggleEditState = () => { vm.toggleShowHide = () => {
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 = () => {
if (scope.type === 'password') { if (scope.type === 'password') {
scope.type = 'text'; scope.type = 'text';
scope.buttonText = 'HIDE'; scope.state._buttonText = 'HIDE';
} else { } else {
scope.type = 'password'; scope.type = 'password';
scope.buttonText = 'SHOW'; scope.state._buttonText = 'SHOW';
} }
}; };
} }

4
awx/ui/client/lib/components/input/secret.partial.html
View File

@@ -5,9 +5,9 @@
<div class="input-group"> <div class="input-group">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn at-ButtonHollow--white at-Input-button" <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()"> ng-click="vm.toggle()">
{{ buttonText }} {{ state._buttonText }}
</button> </button>
</span> </span>
<input type="{{ type }}" <input type="{{ type }}"

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

@@ -28,29 +28,37 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
if (scope.state.format === 'ssh_private_key') { if (scope.state.format === 'ssh_private_key') {
scope.ssh = true; scope.ssh = true;
scope.state._hint = scope.state._hint || DEFAULT_HINT;
input = element.find('input')[0]; input = element.find('input')[0];
} }
if (scope.state._value) { if (scope.state._value) {
scope.edit = true; scope.state._buttonText = 'REPLACE';
scope.replace = false;
scope.buttonText = 'REPLACE';
} else { } else {
scope.state._hint = scope.state._hint || DEFAULT_HINT;
if (scope.state.format === 'ssh_private_key') { if (scope.state.format === 'ssh_private_key') {
vm.listeners = vm.setFileListeners(textarea, input); vm.listeners = vm.setFileListeners(textarea, input);
scope.state._displayHint = true;
} }
} }
vm.updateModel(); vm.updateValue();
}; };
vm.updateModel = (value) => { vm.toggle = () => {
if (!scope.edit || scope.replace) { if (scope.state._revert) {
scope.state._value = scope.displayModel; 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.check();
}; };
@@ -79,28 +87,12 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
vm.readFile = (reader, event) => { vm.readFile = (reader, event) => {
scope.$apply(() => { scope.$apply(() => {
scope.displayModel = reader.result; scope.state._displayValue = reader.result;
vm.updateModel(); vm.updateValue();
scope.drag = false scope.drag = false
input.value = ''; 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']; AtInputTextareaSecretController.$inject = ['BaseInputController', 'EventService'];

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

@@ -2,13 +2,12 @@
<div class="form-group at-u-flat"> <div class="form-group at-u-flat">
<at-input-label></at-input-label> <at-input-label></at-input-label>
<div ng-class="{ 'input-group': edit }"> <div ng-class="{ 'input-group': state._edit }">
<span ng-if="edit" class="input-group-btn at-InputGroup-button"> <span ng-if="state._edit" class="input-group-btn at-InputGroup-button">
<button ng-if="edit" <button class="btn at-ButtonHollow--white at-Input-button"
class="btn at-ButtonHollow--white at-Input-button" ng-disabled="!state._enableToggle && (state._disabled || form.disabled)"
ng-disabled="state._disabled || form.disabled"
ng-click="vm.toggle()"> ng-click="vm.toggle()">
{{ buttonText }} {{ state._buttonText }}
</button> </button>
</span> </span>
<input ng-show="ssh" <input ng-show="ssh"
@@ -17,13 +16,13 @@
type="file" type="file"
name="files" /> name="files" />
<textarea class="form-control at-Input at-Textarea" <textarea class="form-control at-Input at-Textarea"
ng-model="displayModel" ng-model="state._displayValue"
ng-class="{ 'at-Input--rejected': state._rejected }" ng-class="{ 'at-Input--rejected': state._rejected }"
ng-attr-maxlength="{{ state.max_length || undefined }}" ng-attr-maxlength="{{ state.max_length || undefined }}"
ng-attr-tabindex="{{ tab || undefined }}" ng-attr-tabindex="{{ tab || undefined }}"
ng-attr-placeholder="{{::state._placeholder || 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" />
</textarea> </textarea>
</div> </div>

1
awx/ui/client/lib/models/Base.js
View File

@@ -44,6 +44,7 @@ function httpPost (data) {
} }
function httpPut (changes) { function httpPut (changes) {
console.log(this.get(), changes);
let model = Object.assign(this.get(), changes); let model = Object.assign(this.get(), changes);
let req = { let req = {