diff --git a/app/scripts/views/open-view.js b/app/scripts/views/open-view.js index 11aef649..3be3707e 100644 --- a/app/scripts/views/open-view.js +++ b/app/scripts/views/open-view.js @@ -145,7 +145,8 @@ class OpenView extends View { keyFilePath: null, fileData: null, rev: null, - opts: null + opts: null, + chalResp: null }; } @@ -1045,9 +1046,20 @@ class OpenView extends View { return; } + if (this.params.chalResp) { + this.params.chalResp = null; + this.el + .querySelector('.open__settings-yubikey') + .classList.remove('open__settings-yubikey--active'); + return; + } + const chalRespView = new OpenChalRespView(); chalRespView.on('select', e => { - // console.log('e', e.serial, e.slot); + this.params.chalResp = { serial: e.serial, slot: e.slot }; + this.el + .querySelector('.open__settings-yubikey') + .classList.add('open__settings-yubikey--active'); }); Alerts.alert({ diff --git a/app/styles/areas/_open.scss b/app/styles/areas/_open.scss index b30f79f3..1c8620d1 100644 --- a/app/styles/areas/_open.scss +++ b/app/styles/areas/_open.scss @@ -253,18 +253,28 @@ &-yubikey { display: none; &--present { - display: block; + display: flex; + } + &__text { + margin-right: 0.4em; + display: none; + .open__settings-yubikey--active & { + display: block; + } } &-img { fill: var(--muted-color); width: 2em; position: relative; - top: -0.4em; + top: -0.25em; margin-right: $base-padding-h; cursor: pointer; &:hover { fill: var(--text-color); } + .open__settings-yubikey--active & { + fill: var(--text-color); + } } } } diff --git a/app/templates/open.hbs b/app/templates/open.hbs index 13b5462c..698c8061 100644 --- a/app/templates/open.hbs +++ b/app/templates/open.hbs @@ -92,7 +92,7 @@
- {{{svg 'usb-token' 'open__settings-yubikey-img'}}} +
YK
{{{svg 'usb-token' 'open__settings-yubikey-img'}}}