open-vault/ui/lib/core/addon/components/masked-input.js
Matthew Irish f0d7dc9a6d
UI - add kmip engine (#6936)
* add kmip engine

* adjust where kmip engine is mounted and sketch out routes

* add secret mount path service to share params to engines

* move list-controller and list-route mixins to core addon and adjust imports

* properly link kmip secrets from the secrets list page

* tweak routes and add list controllers

* stub out some models and adapters

* fix mixin exports

* move a bunch of components into the core addon

* use new empty yield in list-view in the namespace template

* scopes list using list-view and list-item components

* simplify and flatten routes, templates for all of the list pages

* role show route and template and scope create template

* add ember-router-helpers

* add more packages to the dependencies of the core addon

* add field-group-show component for listing fields from a model

* move more components to the shared addon

* make configure and configuration routes work and save a generated model

* save and list scopes

* role create, list, read

* list credentials properly

* move allowed attributes to field group

* show allowed operations on role details page

* add kmip logo to mount secrets engine list page

* add role edit page

* show all model attributes on role show page

* enable role edit

* fix newFields error by creating open api role model on the role list route

* only show selected fields on role edit page

* do not send scope and backend attrs to api

* move path-or-array to core addon

* move string-list component to core addon

* remove extra top border when there is only one field group

* add icons for all of the list pages

* update kmip config model so defaultValue doesn't error

* generate credentials

* credential create and show

* only show kmip when feature is enabled

* fix saving of TTL fields generated from Open API

* move masked-input and list-pagination components to core addon

* add param on edit form to allow for calling onSave after render happens

* polish credential show page and redirect there after generating credentials

* add externalLink for kmip engine

* add kmip-breadcrumb component

* use kmip-breadcrumb component

* add linkPrefix param to linked-block component to allow for routing programmatically inside an engine

* redirect to the right place when enabling kmip

* fix linting

* review feedback

* update signature for path-help usage

* fix ttl field expansion test

* remove role filed from role form, fix generate redirect

* remove field-group-show because it's in the core addon

* remove bottom rule from show pages

* fix Max TTL displayAttrs for ssh role

* update edit-form to take fields or attrs

* fix linting

* remove listenAddrs and set default val on ttl if a val is passed in
2019-06-21 16:05:45 -05:00

75 lines
2.2 KiB
JavaScript

import Component from '@ember/component';
import { computed } from '@ember/object';
import autosize from 'autosize';
import layout from '../templates/components/masked-input';
/**
* @module MaskedInput
* `MaskedInput` components are textarea inputs where the input is hidden. They are used to enter sensitive information like passwords.
*
* @example
* <MaskedInput
* @value={{attr.options.defaultValue}}
* @placeholder="secret"
* @allowCopy={{true}}
* @onChange={{action "someAction"}}
* />
*
* @param [value] {String} - The value to display in the input.
* @param [placeholder=value] {String} - The placeholder to display before the user has entered any input.
* @param [allowCopy=null] {bool} - Whether or not the input should render with a copy button.
* @param [displayOnly=false] {bool} - Whether or not to display the value as a display only `pre` element or as an input.
* @param [onChange=Function.prototype] {Function|action} - A function to call when the value of the input changes.
*
*
*/
export default Component.extend({
layout,
value: null,
placeholder: 'value',
didInsertElement() {
this._super(...arguments);
autosize(this.element.querySelector('textarea'));
},
didUpdate() {
this._super(...arguments);
autosize.update(this.element.querySelector('textarea'));
},
willDestroyElement() {
this._super(...arguments);
autosize.destroy(this.element.querySelector('textarea'));
},
shouldObscure: computed('isMasked', 'isFocused', 'value', function() {
if (this.get('value') === '') {
return false;
}
if (this.get('isFocused') === true) {
return false;
}
return this.get('isMasked');
}),
displayValue: computed('shouldObscure', function() {
if (this.get('shouldObscure')) {
return '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
} else {
return this.get('value');
}
}),
isMasked: true,
isFocused: false,
displayOnly: false,
onKeyDown() {},
onChange() {},
actions: {
toggleMask() {
this.toggleProperty('isMasked');
},
updateValue(e) {
let value = e.target.value;
this.set('value', value);
this.onChange(value);
},
},
});