diff --git a/ui/app/components/i-con.js b/ui/app/components/i-con.js index aedcb1895e..ff6a10f9db 100644 --- a/ui/app/components/i-con.js +++ b/ui/app/components/i-con.js @@ -5,8 +5,10 @@ const { computed } = Ember; const GLYPHS_WITH_SVG_TAG = [ 'folder', 'file', + 'hidden', 'perf-replication', 'role', + 'visible', 'information-reversed', 'true', 'false', diff --git a/ui/app/components/masked-input.js b/ui/app/components/masked-input.js new file mode 100644 index 0000000000..66e38e9168 --- /dev/null +++ b/ui/app/components/masked-input.js @@ -0,0 +1,51 @@ +import Ember from 'ember'; +const { computed } = Ember; +import autosize from 'autosize'; + + +export default Ember.Component.extend({ + value: null, + 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){ + this.set('value', e.target.value); + this.onChange(); + }, + } +}); diff --git a/ui/app/components/secret-edit.js b/ui/app/components/secret-edit.js index 99aeba38c2..45372cca49 100644 --- a/ui/app/components/secret-edit.js +++ b/ui/app/components/secret-edit.js @@ -1,7 +1,6 @@ import Ember from 'ember'; import FocusOnInsertMixin from 'vault/mixins/focus-on-insert'; import keys from 'vault/lib/keycodes'; -import autosize from 'autosize'; import KVObject from 'vault/lib/kv-object'; const LIST_ROUTE = 'vault.cluster.secrets.backend.list'; @@ -51,13 +50,6 @@ export default Ember.Component.extend(FocusOnInsertMixin, { } }, - didRender() { - const textareas = this.$('textarea'); - if (textareas.length) { - autosize(textareas); - } - }, - willDestroyElement() { const key = this.get('key'); if (get(key, 'isError') && !key.isDestroyed) { @@ -164,7 +156,7 @@ export default Ember.Component.extend(FocusOnInsertMixin, { }, actions: { - handleKeyDown(_, e) { + handleKeyDown(e) { e.stopPropagation(); if (!(e.keyCode === keys.ENTER && e.metaKey)) { return; diff --git a/ui/app/styles/components/console-ui-panel.scss b/ui/app/styles/components/console-ui-panel.scss index e7157fe0c2..7507762e84 100644 --- a/ui/app/styles/components/console-ui-panel.scss +++ b/ui/app/styles/components/console-ui-panel.scss @@ -1,5 +1,5 @@ .console-ui-panel-scroller { - background: linear-gradient(to right, #191A1C, #1B212D); + background: linear-gradient(to right, #191a1c, #1b212d); height: 0; left: 0; overflow: auto; @@ -24,8 +24,8 @@ font-weight: $font-weight-semibold; transition: justify-content $speed ease-in; - - pre, p { + pre, + p { background: none; color: inherit; font-size: $body-size; @@ -42,8 +42,7 @@ padding: $size-8 $size-4; } - .button, - { + .button { background: transparent; border: none; color: $grey-dark; @@ -116,13 +115,13 @@ } } -.panel-open .console-ui-panel-scroller { +.panel-open .console-ui-panel-scroller { box-shadow: $box-shadow-highest; transform: translate3d(0, 0, 0); min-height: 400px; } -.panel-open .console-ui-panel-scroller.fullscreen { +.panel-open .console-ui-panel-scroller.fullscreen { bottom: 0; top: 0; position: fixed; @@ -130,19 +129,21 @@ } .panel-open { - .navbar, .navbar-sections{ + .navbar, + .navbar-sections { transition: transform $speed ease-in; } } .panel-open.panel-fullscreen { - .navbar, .navbar-sections{ + .navbar, + .navbar-sections { transform: translate3d(0, -100px, 0); } } .page-container > header { - background: linear-gradient(to right, #191A1C, #1B212D); + background: linear-gradient(to right, #191a1c, #1b212d); } header .navbar, diff --git a/ui/app/styles/components/global-flash.scss b/ui/app/styles/components/global-flash.scss index c4d2fd29bb..3c4b5e044b 100644 --- a/ui/app/styles/components/global-flash.scss +++ b/ui/app/styles/components/global-flash.scss @@ -5,7 +5,7 @@ bottom: 0; left: 0; margin: 10px; - z-index: 1; + z-index: 300; .notification { box-shadow: $box-shadow-high; diff --git a/ui/app/styles/components/login-form.scss b/ui/app/styles/components/login-form.scss index d458abd8f8..897e73ded5 100644 --- a/ui/app/styles/components/login-form.scss +++ b/ui/app/styles/components/login-form.scss @@ -1,3 +1,3 @@ .login-form { box-shadow: $box-shadow, $box-shadow-high; -} \ No newline at end of file +} diff --git a/ui/app/styles/components/masked-input.scss b/ui/app/styles/components/masked-input.scss new file mode 100644 index 0000000000..2c5533b5b0 --- /dev/null +++ b/ui/app/styles/components/masked-input.scss @@ -0,0 +1,72 @@ +.masked-input { + position: relative; +} + +.masked-input .masked-value { + padding-left: 2.50rem; +} + +// we want to style the boxes the same everywhere so they +// need to be the same font and small +.masked-input.masked .masked-value { + font-size: 9px; + font-family: $family-primary; +} + +.masked-input.masked .masked-value { + line-height: 2.5; +} +// aligns the boxes on the input page +.masked-input.masked:not(.display-only) .masked-value { + line-height: 3; +} + +//override bulma's pre styling +.masked-input .display-only { + line-height: 1.5; + font-size: 1rem; +} + +.masked-input-toggle { + background: transparent; + position: absolute; + height: auto; + top: $size-6/4; + bottom: $size-6/4; + left: 1px; + line-height: 1rem; + min-width: 0; + max-height: 2rem; + padding: 0 $size-8; + z-index: 100; + border: 0; + box-shadow: none; + color: $blue; + + &:active, + &.is-active, + &:focus, + &.is-focused, + &:hover, + &:focus:not(:active) { + color: $blue; + border: 0; + box-shadow: none; + } +} + +.masked-input.display-only .masked-input-toggle { + top: 0; + font-size: 0.5rem; + height: 1rem; + padding-left: 0; +} + +.masked-input .input:focus + .masked-input-toggle { + background: rgba($white, 0.95); +} + +.masked-input.masked .masked-value, +.masked-input.masked .masked-input-toggle { + color: $grey-light; +} diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index 5ca4454928..dabbb65257 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -57,6 +57,7 @@ @import "./components/list-pagination"; @import "./components/loader"; @import "./components/login-form"; +@import "./components/masked-input"; @import "./components/message-in-page"; @import "./components/page-header"; @import "./components/popup-menu"; diff --git a/ui/app/styles/core/generic.scss b/ui/app/styles/core/generic.scss index 664c2a56b9..1325a1fc82 100644 --- a/ui/app/styles/core/generic.scss +++ b/ui/app/styles/core/generic.scss @@ -41,8 +41,8 @@ input::-webkit-inner-spin-button { margin: 0; padding: 0; text-decoration: underline; - -webkit-user-select: text; /* Chrome all / Safari all */ - -moz-user-select: text; /* Firefox all */ - -ms-user-select: text; /* IE 10+ */ - user-select: text; + -webkit-user-select: text; /* Chrome all / Safari all */ + -moz-user-select: text; /* Firefox all */ + -ms-user-select: text; /* IE 10+ */ + user-select: text; } diff --git a/ui/app/styles/core/tabs.scss b/ui/app/styles/core/tabs.scss index 23c8b45407..6e7e8c2bdd 100644 --- a/ui/app/styles/core/tabs.scss +++ b/ui/app/styles/core/tabs.scss @@ -5,7 +5,7 @@ padding: $size-10 $size-10; @include until($tablet) { - position:relative; + position: relative; background-color: $grey; flex: 0 0 100%; height: 3rem; diff --git a/ui/app/styles/utils/_bulma_variables.scss b/ui/app/styles/utils/_bulma_variables.scss index 33f9e5b3ff..7e35f5daec 100644 --- a/ui/app/styles/utils/_bulma_variables.scss +++ b/ui/app/styles/utils/_bulma_variables.scss @@ -64,10 +64,14 @@ $radius: 2px; //box $box-radius: 0; $box-shadow: 0 0 0 1px rgba($black, 0.1); -$box-shadow-low: 0 5px 1px -2px rgba($black, 0.12), 0 3px 2px -1px rgba($black, 0); -$box-shadow-middle: 0 8px 4px -4px rgba($black, 0.10), 0 6px 8px -2px rgba($black, 0.05); -$box-shadow-high: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.10); -$box-shadow-highest: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.20); +$box-shadow-low: 0 5px 1px -2px rgba($black, 0.12), + 0 3px 2px -1px rgba($black, 0); +$box-shadow-middle: 0 8px 4px -4px rgba($black, 0.10), + 0 6px 8px -2px rgba($black, 0.05); +$box-shadow-high: 0 12px 5px -7px rgba($black, 0.08), + 0 11px 10px -3px rgba($black, 0.10); +$box-shadow-highest: 0 16px 6px -10px rgba($black, 0.06), + 0 16px 16px -4px rgba($black, 0.20); $link: $blue; $text: $black; diff --git a/ui/app/templates/components/masked-input.hbs b/ui/app/templates/components/masked-input.hbs new file mode 100644 index 0000000000..adfa394df8 --- /dev/null +++ b/ui/app/templates/components/masked-input.hbs @@ -0,0 +1,21 @@ +
+ {{#if displayOnly}} + 
{{displayValue}}
+ {{else}} +