mirror of
https://github.com/ansible/awx.git
synced 2026-01-22 06:58:06 -03:30
Add revert/replace and prompt/not-prompt logic (wip)
This commit is contained in:
gconsidine
parent
2bd11f948a
commit
6e181e81ea
@ -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();
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -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 }}"
|
||||
|
||||
@ -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'];
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -44,6 +44,7 @@ function httpPost (data) {
|
||||
}
|
||||
|
||||
function httpPut (changes) {
|
||||
console.log(this.get(), changes);
|
||||
let model = Object.assign(this.get(), changes);
|
||||
|
||||
let req = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user